Confetti Burst

Usage

import { Button, ConfettiBurst, useConfetti } from '@wdzyi/ui';

<ConfettiBurst done={published}>
  <Button variant='foil' onClick={publish}>Publish</Button>
</ConfettiBurst>

// Or throw it from anything yourself:
const burst = useConfetti();

<Button onClick={(event) => burst(event.currentTarget)}>Send</Button>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

doneboolean = false

Turning it on throws a burst from what’s inside. One that starts out done stays quiet.

childrenReactNode

What the confetti leaves, such as the button that finished the job.

countnumber = 56

How many pieces.

spreadnumber = 64

How wide the cone opens, in degrees, with straight up in the middle of it.

classNamestring

Added to the span around the children.

burst(from: Element | DOMRect, options?: ConfettiBurstOptions) => void

From useConfetti: throws a burst from an element, or from a box on the screen, with a count and a spread of its own.

Notes

• Each piece leaves at 700 to 1,150px a second, somewhere in the cone, and rises as much as 220px. Gravity pulls it back at 1,200px a second, every second, and the air slows it in proportion to its speed, so it falls at no more than 460px a second, drifting from side to side.
• Half the pieces are squares of 5 to 8px and half are thin strips, each turning on the screen and tumbling over as it goes. They come in the foil’s yellow, pink and blue, a shade deeper on a light page, and in ink. Each lasts 1.5 to 2.2 seconds and fades over its last half second.
• Every burst on the page shares one canvas, fixed over the window at up to twice its pixels. It’s added for the first and taken away once the last piece has gone, and it never takes the pointer.
• With reduced motion nothing is thrown, so show the done state as well, as the button here does: it’s the moment either way.