KQ-1871 · FLUTE/BUBBLES

Flute Bubbles

A tall flute of sparkling wine seen side-on: fine bubbles rise in steady strings from nucleation points on the walls and the point of the bowl, each born tiny, growing as it climbs and quickening with its size, catching the light on the way up and popping at the surface in a small ring that now and then flicks a droplet above the wine. Tapping the glass shivers its surface on springs.recoil and releases a burst of fresh streams from the wall nearest the press; left alone the wine slowly goes flat until Top up pours a thin stream in and a mousse swells on springs.glide and settles. The glass and Top up are real buttons, so Space and Enter tap the walls in turn and top it up.

KQ-1871 · FLUTE/BUBBLES

Coldbrook Cellars · Cuvée 19

Brut nature, nine years on the lees. A fine, persistent bead.

fizz lively · 7 streams · tapped 0 · topped up 0

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/flute-bubbles

Props

streams: number; default 7; How many points on the glass give off a stream of bubbles, 2 to 16.
fizz: number; default 0.6; How lively the wine is, 0 (slow, sparse strings) to 1 (tight, quick ones).
tint: "straw" | "rose" | "amber" | "water"; default "straw"; The wine's colour, a pigment that looks the same in both themes.
liquidColor: string; default —; Any CSS colour for the wine; it deepens toward the point of the bowl. Overrides tint.
fill: number; default 0.8; How full the bowl is, 0.5 to 0.92.
bubbleSize: number; default 0.5; Bubble size, 0 (the finest bead) to 1 (coarser).
glint: number; default 0.7; How brightly bubbles catch the light, 0 to 1.
burst: number; default 0.6; How many fresh streams a tap on the glass releases, 0 to 1.
flatAfter: number; default 45000; ms for the glass to go flat after a top-up; 0 keeps it lively for ever.
mousse: boolean; default true; A foam head swells on a top-up and settles.
onTap: (side: "left" | "right" | "point") => void; default —; Fires when the glass is tapped, with the wall the fresh streams rise from.
onTopUp: () => void; default —; Fires when the glass is topped up.
onFizzChange: (state: "lively" | "settling" | "flat") => void; default —; Fires when the wine turns lively, starts settling or goes flat.
sound: boolean; default false; A sizzle after each tap and top-up — only for the visitor's own press.
paused: boolean; default false; Hold every bubble where it is.
seed: number; default 1; Seeds where the streams start and how every bubble is born.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
label: string; default "Glass of sparkling wine"; The glass's accessible name.
disabled: boolean; default false; The glass takes no taps and cannot be topped up.
className: string; default "h-[30rem] w-full"; Sizes the piece; the flute keeps its shape and centres in it.

Prop	Type	Default	Description
streams	number	7	How many points on the glass give off a stream of bubbles, 2 to 16.
fizz	number	0.6	How lively the wine is, 0 (slow, sparse strings) to 1 (tight, quick ones).
tint	"straw" \| "rose" \| "amber" \| "water"	"straw"	The wine's colour, a pigment that looks the same in both themes.
liquidColor	string	—	Any CSS colour for the wine; it deepens toward the point of the bowl. Overrides tint.
fill	number	0.8	How full the bowl is, 0.5 to 0.92.
bubbleSize	number	0.5	Bubble size, 0 (the finest bead) to 1 (coarser).
glint	number	0.7	How brightly bubbles catch the light, 0 to 1.
burst	number	0.6	How many fresh streams a tap on the glass releases, 0 to 1.
flatAfter	number	45000	ms for the glass to go flat after a top-up; 0 keeps it lively for ever.
mousse	boolean	true	A foam head swells on a top-up and settles.
onTap	(side: "left" \| "right" \| "point") => void	—	Fires when the glass is tapped, with the wall the fresh streams rise from.
onTopUp	() => void	—	Fires when the glass is topped up.
onFizzChange	(state: "lively" \| "settling" \| "flat") => void	—	Fires when the wine turns lively, starts settling or goes flat.
sound	boolean	false	A sizzle after each tap and top-up — only for the visitor's own press.
paused	boolean	false	Hold every bubble where it is.
seed	number	1	Seeds where the streams start and how every bubble is born.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
label	string	"Glass of sparkling wine"	The glass's accessible name.
disabled	boolean	false	The glass takes no taps and cannot be topped up.
className	string	"h-[30rem] w-full"	Sizes the piece; the flute keeps its shape and centres in it.