BubbleField

Soft bubbles rising and drifting, seeded so server and client match.

Fizz

Installation

bash
npx shadcn@latest add https://www.rad-ui.com/r/bubble-field.json

React
import BubbleField from "@/components/fx/bubble-field"

<BubbleField className="px-8 py-24"><h2>Fizz</h2></BubbleField>

The effect layer is aria-hidden and ignores pointer events; only children are exposed.
Pauses offscreen; `paused` stops it on demand.
prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) scatters the bubbles at rest.

Prop	Type	Default	Description
count	number	22	Number of bubbles.
colors	string[]	sky, violet, pink	Bubble colours.
seed	number	11	Change for a different, stable layout.
paused	boolean	false	Stop the animation. It also pauses itself offscreen.
...props	ComponentProps<'div'>	—	Passed to the root div; children render above the effect.