Celebration burst

Free

One small burst of confetti when a real milestone completes: the first deploy, a finished setup, a paid invoice. Skipped under reduced motion; the words say what happened.

Installs components/ui/celebration-burst.tsxDepends on none beyond ReactMotion honours reduced motion

pnpm dlx shadcn@latest add https://caliperui.site/r/celebration-burst.json

Waiting for the first payment

Mark the invoice paid to finish setup.

When to use #

Use it for

The end of onboarding, a first success, a goal reached.
Moments people reach once or rarely.

Skip it when

Routine actions such as saving or sending.
Anything that might go wrong next; celebrate only a settled result.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/celebration-burst.json

Adds its 4 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { CelebrationBurst } from "@/components/ui/celebration-burst"
import { ResultIcon } from "@/components/ui/result-icon"

export function CelebrationBurstDemo() {
  const [fire, setFire] = useState(0);
  const [done, setDone] = useState(false);
  return (
    <div className="grid w-full max-w-sm gap-3 rounded-surface border border-border bg-surface p-5">
      <div className="flex items-center gap-2">
        <ResultIcon status={done ? "success" : "idle"} />
        <p className="text-sm font-medium">{done ? "Your first invoice is paid" : "Waiting for the first payment"}</p>
      </div>
      <p className="text-sm text-muted-foreground">{done ? "$1,240.00 from Halden Studio landed in your account." : "Mark the invoice paid to finish setup."}</p>
      <div className="relative justify-self-start">
        <Button onClick={() => { if (!done) setFire((f) => f + 1); setDone((d) => !d); }}>{done ? "Undo" : "Mark as paid"}</Button>
        <CelebrationBurst fire={fire} />
      </div>
    </div>
  );
}

API reference #