KQ-1834 · FOG/CLOCHE

Fog Cloche

A glass cloche over a cushion of moss in a small vitrine lit from above, with fog slowly swirling under the glass: soft puffs circle the vertical axis, rising in the middle and sinking at the sides. A press lifts the glass on springs.snap and the fog rolls out from under the rim, lowest first, over the wooden base and across the floor to both sides, spreading and thinning away; pressing again brings the glass down on springs.glide, it settles with a small springs.recoil rock, and new fog breathes up out of the moss until the dome is full. The glass is a real toggle button with aria-pressed, so Space and Enter lift and lower it.

KQ-1834 · FOG/CLOCHE

Fernworks Terrarium

Moss no. 4, under glass

under glass · press to lift the glass

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/fog-cloche

Props

lifted / defaultLifted: boolean; default false; Whether the glass is lifted (controlled / initial).
onLiftedChange: (lifted: boolean) => void; default —; Fires from the press or key that lifted or lowered the glass.
density: number; default 0.6; How much fog the glass holds, 0 (a few wisps) to 1 (thick).
swirl: number; default 0.5; How fast the fog turns under the glass, 0 (still) to 1 (a slow whirl).
spill: number; default 0.6; How far the fog runs across the floor when it spills, 0 (pools at the base) to 1 (to the edges).
light: number; default 0.7; How strong the light from above is, 0 to 1.
fogColor: string; default a pale cool white; The fog's colour, any CSS colour.
gather: number; default 2600; How long the fog takes to gather again under the lowered glass, in ms.
autoLower: number; default 0; Lower the glass by itself this many ms after it is lifted; 0 never.
paused: boolean; default false; Freeze the fog.
seed: number; default 5; Seeds the fog and the moss.
label: string; default "Cloche"; The glass's accessible name, completed with lift or lower.
disabled: boolean; default false; No lifting or lowering.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
className: string; default —; Sizes the vitrine; give it a height. Defaults to h-52 w-full.

Prop	Type	Default	Description
lifted / defaultLifted	boolean	false	Whether the glass is lifted (controlled / initial).
onLiftedChange	(lifted: boolean) => void	—	Fires from the press or key that lifted or lowered the glass.
density	number	0.6	How much fog the glass holds, 0 (a few wisps) to 1 (thick).
swirl	number	0.5	How fast the fog turns under the glass, 0 (still) to 1 (a slow whirl).
spill	number	0.6	How far the fog runs across the floor when it spills, 0 (pools at the base) to 1 (to the edges).
light	number	0.7	How strong the light from above is, 0 to 1.
fogColor	string	a pale cool white	The fog's colour, any CSS colour.
gather	number	2600	How long the fog takes to gather again under the lowered glass, in ms.
autoLower	number	0	Lower the glass by itself this many ms after it is lifted; 0 never.
paused	boolean	false	Freeze the fog.
seed	number	5	Seeds the fog and the moss.
label	string	"Cloche"	The glass's accessible name, completed with lift or lower.
disabled	boolean	false	No lifting or lowering.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
className	string	—	Sizes the vitrine; give it a height. Defaults to h-52 w-full.