Confetti

<ConfettiPiece />

Renders and plays one confetti particle: an absolutely-positioned mark whose width/height/border-radius derive from the piece's shape, animated through its pre-computed keyframe track by a single Motion animate() call (which auto-promotes the node to its own layer for the lifetime of the burst and releases it after - no standing will-change). Decorative.

<Confetti />

A pointer-events-none layer that fills its nearest positioned ancestor and fires celebration bursts from its centre on demand. Owns the burst lifecycle - id tracking, mounting each burst's particles, and tearing a burst down after it settles - and cleans every pending teardown on unmount. Fire a burst by calling burst() on its ref.

buildConfettiParticles

Builds particleCount confetti particles, each with a randomised launch angle (within spread degrees of straight up), initial startVelocity, shape, size and live-var() colour, and its fully pre-computed keyframe track. Pure - safe to call at the moment of celebration.

buildConfettiParticles(particleCount: number, spread: number, startVelocity: number): ConfettiParticleData[]

computeConfettiKeyframes

Simulates one particle's flight tick-by-tick and samples it down to CONFETTI_KEYFRAME_STEPS keyframes, returning the { transform, opacity } arrays Motion plays at a linear rate. All motion is a single translate() + scale() + rotateY() + rotate() transform per frame, so the whole burst stays compositor-only. Pure.

computeConfettiKeyframes(params: {
  angle: number
  startVelocity: number
  decay: number
  gravity: number
  drift: number
  wobbleSpeed: number
  wobbleOffset: number
  size: number
  ticks: number
  tiltRotations: number
  rotation: number
}): DOMKeyframesDefinition