CelebrationFx: React effect component

The CelebrationFx component creates animated celebration effects using the native Canvas 2D API. Choose between confetti or fireworks animations with multiple trigger modes, customizable colors, and intensity controls. Perfect for success states, achievements, milestones, or interactive celebrations.

Usage

<CelebrationFx
height={20}
type="confetti"
duration={4}
/>

Types

Choose between confetti (falling particles) or fireworks (explosive bursts).

Types

<CelebrationFx
  type="confetti"
  duration={5}
/>
<CelebrationFx
  type="fireworks"
  duration={5}
/>

Trigger

Control when the celebration starts with mount (automatic), hover (on mouse enter), click (fires from click position), or manual (controlled via active prop).

Hover

Hover me!

<CelebrationFx
  height={16}
  type="confetti"
  trigger="hover"
  center
>
  <Text variant="heading-strong-l">
    Hover me!
  </Text>
</CelebrationFx>

Use trigger="click" to fire celebrations from exactly where users click. Perfect for interactive celebrations!

Click

Click for fireworks!

Click for confetti!

<CelebrationFx
  type="fireworks"
  trigger="click"
  center
>
  <Text variant="heading-strong-l">
    Click for fireworks!
  </Text>
</CelebrationFx>
<CelebrationFx
  type="confetti"
  trigger="click"
  center
>
  <Text variant="heading-strong-l">
    Click for confetti!
  </Text>
</CelebrationFx>

Color

Customize celebration colors using design tokens or any valid CSS color.

Colors

<CelebrationFx
height={16}
type="fireworks"
duration={5}
colors={["accent-background-strong", "danger-background-strong", "warning-background-strong"]}
/>

Intensity & speed

Control particle density with intensity and animation speed with speed.

Intensity

<CelebrationFx
  height={16}
  type="confetti"
  duration={5}
  intensity={100}
  speed={2}
/>
<CelebrationFx
  height={16}
  type="confetti"
  duration={5}
  intensity={20}
  speed={0.5}
/>

Control the celebration programmatically using trigger="manual" and the active prop.

Manual

"use client";

import React, { useState } from "react";
import { CelebrationFx, Button, Column } from "@once-ui-system/core";

export function demo() {
  const [active, setActive] = useState(false);

  return (
    <Column gap="16" fillWidth>
      <CelebrationFx
        height={16}
        type="fireworks"
        trigger="manual"
        active={active}
      />
      <Button
        onClick={() => {
          setActive(true);
          setTimeout(() => setActive(false), 3000);
        }}
      >
        Launch Fireworks
      </Button>
    </Column>
  );
}

Custom content

Use CelebrationFx as a wrapper to overlay celebrations behind any content.

Overlay

Achievement Unlocked!You've completed all challenges

<CelebrationFx
  height={20}
  type="confetti"
  duration={6}
  center
>
  <Column
    gap="16"
    padding="48"
    center
    background="neutral-weak"
    radius="l"
  >
    <Icon name="trophy" size="xl" onBackground="accent-strong" />
    <Text variant="heading-strong-xl">Achievement Unlocked!</Text>
    <Text variant="body-default-s" onBackground="neutral-weak">
      You've completed all challenges
    </Text>
  </Column>
</CelebrationFx>

Performance

CelebrationFx automatically detects low-end devices and the prefers-reduced-motion system setting. When either is detected, the animation is completely disabled. You can override this with the reducedMotion prop.

See useReducedMotion for details.

Props

The CelebrationFx component extends all layout props from Flex plus the following celebration-specific props:

	Type	Default
type Which celebration to render.	confettifireworks	confetti
speed Motion multiplier. Not a duration.	number	1
colors Palette for the pieces.	string[]	["brand-solid-medium", "accent-solid-medium"]
intensity How much of it there is.	number	50
duration Stop after this long, in milliseconds. Runs indefinitely if unset.	number	—
trigger What starts it. "manual" hands control to active.	mounthovermanualclick	mount
active Run it, when trigger is "manual".	boolean	true
reducedMotion "auto" follows the reader's system setting, which is the right default for anything ambient.	booleanauto	auto
children	React.ReactNode	—
…and every FlexProps prop	inherited	—

Use CelebrationFx to add delightful, performant celebration animations to success states, milestones, achievements, or any moment worth celebrating in your application.