Balloon Burst

Visual Effects

A success-moment balloon release: call release() via useBalloons (or bump a controlled trigger prop) and a burst of brand-coloured balloons rises with sway, tilt, string tails, and a fade near the top from a deterministic seeded layout, then self-cleans. Decorative, non-blocking overlay; under prefers-reduced-motion it shows a single brief static cluster fade with no motion.

Inspired by balloons-js by Artur Bień (MIT) — independently built, not affiliated. Attribution policy

Deploy successful

useBalloons().release()

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/balloon-burst.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/balloon-burst.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<div style={{ position: "relative", width: "100%", minHeight: 340, overflow: "hidden", borderRadius: 16, background: "radial-gradient(120% 100% at 50% 0%, #1b1436 0%, #0f0f10 62%)", display: "flex", alignItems: "center", justifyContent: "center" }}>
    <BalloonBurst interval={2600} count={16} duration={3200} origin="bottom" position="absolute" />
    <div style={{ position: "relative", zIndex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 8, padding: "18px 24px", borderRadius: 16, border: "1px solid rgba(255,255,255,0.1)", background: "rgba(24,24,27,0.55)", backdropFilter: "blur(8px)", color: "white", textAlign: "center" }}>
      <PartyPopper size={30} color="#f5a623" strokeWidth={2} aria-hidden />
      <div style={{ fontSize: 18, fontWeight: 600, letterSpacing: "-0.01em" }}>Deploy successful</div>
      <div style={{ fontSize: 12.5, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", color: "rgba(255,255,255,0.5)" }}>useBalloons().release()</div>
    </div>
  </div>

Props

BalloonBurstProps extends React.HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
count	number	18	Balloons released per burst (clamped 1–80). Defaults to 18.
colors	string[]	DEFAULT_COLORS	Colours the balloons cycle through. Defaults to violet / fuchsia / ember / signal.
duration	number	3200	Base rise duration in milliseconds (per-balloon jitter is applied). Defaults to 3200.
origin	"bottom" \| "center"	"bottom"	Where balloons launch from. Defaults to `"bottom"`.
position	"fixed" \| "absolute"	"fixed"	Overlay positioning. `"fixed"` (default) floats over the whole viewport; `"absolute"` fills the nearest positioned ancestor (use inside a `relative` box, e.g. a card or a preview stage).
trigger	number	—	Controlled trigger: a burst fires whenever this number changes.
interval	number	—	Auto-fire a burst every `interval` ms (ambient / demo use). Under `prefers-reduced-motion` it fires exactly once and does not repeat.