KQ-1384 · GLASS/ORB

Glass Orb

A glass sphere on a table that holds its own weather, drawn in one WebGL2 pass: each pixel follows the view ray in through the front of the ball and out of the back, so the room behind comes back inverted and magnified, tinted where the glass is thick, with a window highlight, a caustic rim and a focused caustic in its shadow. Dragged, the orb follows the hand 1:1 along the table and off it; released, it rolls home on a spring between springs.glide and springs.recoil that takes the throw's velocity, and a lifted orb falls under gravity and lands with a small bounce, while the mist or snow inside is dragged after the glass and thrown up by the landing. Left and Right roll it, Up lifts and drops it, and Enter or Space shakes it.

KQ-1384 · GLASS/ORB

light snow · drag, tap or press a key

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/glass-orb

Props

weather: "clear" | "cloud" | "snow" | "storm"; default "snow"; What is inside the glass: nothing, a drifting mist, snow, or a dark storm with rain.
refraction: number; default 0.6; How hard the glass bends light, 0 to 1: a clear bubble at 0, a solid crystal that shows the room upside down at 1.
tint: number; default 0.3; How deeply the glass is coloured by glassColor, 0 to 1; the thick middle colours more than the rim.
glassColor: string; default "var(--accent-bright)"; The colour of the glass, any CSS colour, resolved on the element so it follows the theme.
weatherColor: string; default "oklch(0.97 0.01 250)"; The colour of the snow and mist; a pigment, so it reads the same in both themes.
backdropText: string; default —; A word set large on the wall behind the orb; the glass shows it flipped and magnified.
size: number; default 0.66; The orb's diameter as a share of the box height, 0.4 to 0.9, never more than 72% of the width.
swirl: number; default 0.6; How strongly rolling, lifting and landing stir the weather, 0 to 1.
wobble: number; default 0.5; How much the orb rocks as it rolls home, from a glide at 0 to two visible rocks at 1.
drift: number; default 0.3; The slow circulation of the weather while nobody touches it, 0 to 1; 0 lets everything settle and the loop stop.
interactive: boolean; default true; Drag, tap and keys move the orb.
alt: string; default "A glass orb on a table"; Describes the scene for assistive technology.
seed: number; default 7; Seed for the weather's arrangement and the mist's grain.
dpr: number; default 2; The highest device pixel ratio the canvas draws at (never above 2).
paused: boolean; default false; Freeze the weather where it is.
sound: boolean; default false; Play a swish when the visitor rolls, lifts or shakes the orb.
onStir: () => void; default —; Fires when the visitor moves the orb: a drag, a tap or a key.
onSettle: () => void; default —; Fires when, after a stir, the orb is home and the weather has calmed.
className: string; default —; Classes for the scene box; set its height here (default h-56).

Prop	Type	Default	Description
weather	"clear" \| "cloud" \| "snow" \| "storm"	"snow"	What is inside the glass: nothing, a drifting mist, snow, or a dark storm with rain.
refraction	number	0.6	How hard the glass bends light, 0 to 1: a clear bubble at 0, a solid crystal that shows the room upside down at 1.
tint	number	0.3	How deeply the glass is coloured by glassColor, 0 to 1; the thick middle colours more than the rim.
glassColor	string	"var(--accent-bright)"	The colour of the glass, any CSS colour, resolved on the element so it follows the theme.
weatherColor	string	"oklch(0.97 0.01 250)"	The colour of the snow and mist; a pigment, so it reads the same in both themes.
backdropText	string	—	A word set large on the wall behind the orb; the glass shows it flipped and magnified.
size	number	0.66	The orb's diameter as a share of the box height, 0.4 to 0.9, never more than 72% of the width.
swirl	number	0.6	How strongly rolling, lifting and landing stir the weather, 0 to 1.
wobble	number	0.5	How much the orb rocks as it rolls home, from a glide at 0 to two visible rocks at 1.
drift	number	0.3	The slow circulation of the weather while nobody touches it, 0 to 1; 0 lets everything settle and the loop stop.
interactive	boolean	true	Drag, tap and keys move the orb.
alt	string	"A glass orb on a table"	Describes the scene for assistive technology.
seed	number	7	Seed for the weather's arrangement and the mist's grain.
dpr	number	2	The highest device pixel ratio the canvas draws at (never above 2).
paused	boolean	false	Freeze the weather where it is.
sound	boolean	false	Play a swish when the visitor rolls, lifts or shakes the orb.
onStir	() => void	—	Fires when the visitor moves the orb: a drag, a tap or a key.
onSettle	() => void	—	Fires when, after a stir, the orb is home and the weather has calmed.
className	string	—	Classes for the scene box; set its height here (default h-56).