Motion UIComponentsComponent

Confetti

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

npx shadcn@latest add @motion/confetti
Install guideMotionScore

API reference

Components

<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.

particleCount?

number = 30

How many pieces each burst spawns. Default 30.

spread?

number = 90

The launch cone width in degrees - how wide the pieces fan out from straight up. Default 90.

startVelocity?

number = 20

Initial particle speed - how far the burst throws before gravity and decay take over. Default 20.

colors?

readonly string[] = CONFETTI_COLORS

Live CSS colour values sampled across the burst. Defaults to the active theme's primary and foreground colours.

className?

string

Merged onto the burst layer (the absolute inset-0 container).

ref?

Ref<ConfettiHandle>

Imperative handle exposing burst().

Functions

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, colors: readonly string[] = CONFETTI_COLORS): 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

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.

Related examples