Motion UIComponentsComponent

Confetti

A brand-coloured celebration burst that fires on any success beat.

API reference

Components

`<ConfettiPiece />`

Renders and plays one confetti particle.

`<Confetti />`

Pointer-events-none layer that fires celebration bursts on demand.

`particleCount?`

number = 30

How many pieces each burst spawns. Default 30.

`spread?`

number = 90

Launch cone width in degrees. Default 90.

`startVelocity?`

number = 20

Initial particle speed. Default 20.

`colors?`

readonly string[] = CONFETTI_COLORS

Live CSS colour values for the burst.

`className?`

string

Merged onto the burst layer.

`ref?`

Ref<ConfettiHandle>

Imperative handle exposing burst().

Functions

`buildConfettiParticles`

Builds confetti particles with pre-computed keyframe tracks.

buildConfettiParticles(particleCount: number, spread: number, startVelocity: number, colors: readonly string[] = CONFETTI_COLORS): ConfettiParticleData[]

`computeConfettiKeyframes`

Simulates one particle's flight and samples keyframes.

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

Featured in

See the confetti composed into full sections.

CTA: Signup with celebrationAn example of an animated trial-signup call-to-action with idle, loading and success states and an accent-coloured confetti celebration, in Motion for React.