Avala Design
← Components/domain/animations

Confetti

Whether confetti is active

domain/animationsstablea11y: untested2/3 coverageEdit on GitHub ↗

Live playground

Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.

LiveOpen all variants in Storybook ↗
Edit JSX — preview updates livereact-live
import { Confetti } from "@avala/design";

<Confetti>Confetti</Confetti>

All variants

The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.

domain-animations-confetti--defaultOpen in Storybook →

When to use

  • Celebrate a one-off success — onboarding completion, a hero CTA submit, a milestone reached.
  • Marketing surfaces and Arcade lesson completions.
  • As a children-wrapper that fires on a parent state change, not a constant background flourish.

When not to use

  • Persistent ambient motion — choose `Marquee` or a Rive/Lottie loop instead.
  • Status indication (success/error) — use `PulseDot` or BadgeIndicator.
  • A11y-sensitive surfaces where reduced-motion users still need feedback — pair with a textual confirm.