Fireworks

A celebratory particle burst, rendered either globally over the page or scoped to a container.

Installation

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

Usage

Components

Global

By default, Fireworks renders on a global scope adjacent to the body, allowing it to overlay the entire page.

Global fireworks can be triggered via the useFireworks hook.

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.

Hooks

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

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

• useFireworksSequence: orchestrates fireworks sequences, with an interface that mirrors sequence timelines in motion’s animate function

  import { useFireworksSequence } from "@o/pipeline/experimental/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>
    );
  }