Confetti

Confetti: a component and fireConfetti(). Pro · Effects › Cursor and press feedback

Confetti inside an area — a card, a dialog, a hero. Fire it with fireOnMount or through controlRef; for page-wide celebrations call fireConfetti() instead. Particles are drawn on a canvas at a capped pixel ratio, the loop runs only while particles are in the air, and nothing fires with reduced motion. The canvas is decorative and never takes pointer events.

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add confetti

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { Confetti } from 'valyro-ui-pro';

Props

Prop	Type	Default
`fireOnMount`	`boolean`	`false`	Fire once when the component mounts — a success screen, an unlocked achievement.
`controlRef`	`Ref<ConfettiHandle>`		Imperative handle: `controlRef.current.fire()` fires inside this area.
`preset`	`'burst' \| 'cannons' \| 'stars'`	`'burst'`	`burst` — a fountain from one point; `cannons` — two streams from the bottom corners; `stars` — a ring of stars.
`particleCount`	`number`		Particles per burst (per cannon).
`colors`	`string[]`		Colours. Default: the theme's `--ui-confetti-colors`.
`scalar`	`number`		Size multiplier.

Related components

Cursor Glow — Glow and tilt that follow the cursor
Magnetic — Magnetic pull toward the cursor
Tilt Card — 3D tilt with glare and parallax
Ripple — Material-style press ripple
Glass Lens — Glass lens with real refraction
Morphing Capsule — Capsule that flows between states
Floating Tab Bar — Floating glass tab bar
Aurora Background — Slow aurora behind your content
Gradient Background — Slowly shifting gradient
Bubble Background — Soft colored bubbles, one follows the cursor
Stars Background — Starry sky with cursor parallax
Hexagon Background — Hexagon grid with a glowing trail

Previous: Ripple · Next: Reveal · All Effects