Fireworks

Installation

import { Fireworks } from "@o/pipeline/components/fireworks";

Usage

Components

Global

By default, Fireworks is rendered on a global scope adjacent to the body — allowing it to overlay the entire page

Global fireworks can be triggered via the useFireworks hook.

Start sequence

Debug

Speed

0.1x0.25x0.5x1x

Rocket

Typeringstarpalm

Click anywhere to trigger fireworks

Scoped

For some cases, you may want to render fireworks within a specific element, such as a dialog. In which case, you can use the Fireworks.Provider to scope the fireworks.

Start sequence

Debug

Speed

0.1x0.25x0.5x1x

Rocket

Typeringstarpalm

Click anywhere to trigger fireworks

Hooks

• useFireworks - provides access to the fireworks context and offers the ability to trigger individual fireworks via triggerFirework()

  import { useFireworks } from "@o/pipeline/components/fireworks";
  
  function Example() {
    const { triggerFirework } = useFireworks();
  
    return (
      <Button
        onClick={() =>
          triggerFirework({ type: "star", position: { x: "50%", y: "50%" } })
        }
      >
        Trigger firework
      </Button>
    );
  }

• useFireworksSequence - enables orchestration of fireworks sequences, with an API that largely mimics sequence timelines in motion’s animate function

  import { useFireworksSequence } from "@o/pipeline/components/fireworks";
  
  function Example() {
    const sequence = useFireworksSequence(
      [
        { type: "star", position: { x: "50%", y: "50%" } },
        { at: "+0.5", type: "ring", position: { x: "50%", y: "50%" } },
      ],
      {
        repeat: Infinity,
        repeatDelay: 0,
      },
    );
  
    return (
      <Button onClick={() => sequence.play()}>Trigger firework sequence</Button>
    );
  }