KQ-1822 · ICE/FLOES

Ice Floes

An endless field of ice floes drifting on dark water, seen in CSS 3D from above at an angle, each a seeded irregular slab with a cyan body under the water, a visible thickness and a picture laid on its snow. Dragging glides over the water with the point under the finger held 1:1 and a throw that glides out; the floes have inertia, so they lag, bump as circles and turn with the slip of each bump. The first time it is seen the floes surface, near ones first; a click or Enter lifts a floe out of the water on springs.glide, turning it to face you with its caption and leaving a ring on the water, and lowering lands it back on springs.recoil with two bobs. Arrow keys move between floes on screen, the field gliding on springs.drift to keep the focused one in view; Home and End go to the first and last pictures and Escape lowers.

KQ-1822 · ICE/FLOES

Postcards from the ice

Fieldline Archive · 1921–1934

drifting · drag to glide, click a floe to read it

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/ice-floes

Props

items: { src?, alt, caption?, note? }[]; default ten postcards drawn in code; The pictures, one per floe, repeating across the field.
value / defaultValue: number | null; default null; The item whose floe is lifted out of the water, controlled or initial.
onValueChange: (index: number | null) => void; default —; Fires from the click or key that lifted or lowered a floe.
density: number; default 0.6; How crowded the water is, 0.2 (scattered) to 1 (packed).
drift: number; default 0.35; How fast the current carries the field, 0 (still water) to 1.
tint: number; default 215; The water's hue in degrees, at a fixed dark lightness.
heading: number; default 200; The way the floes travel on screen, degrees clockwise from up (180 comes straight toward you).
tilt: number; default 50; How steeply you look down at the water, degrees from straight down, 35 to 62.
size: number; default 1; Floe size, 0.7 to 1.4.
jostle: number; default 0.5; How much the floes lag, bump and turn when the water is moved, 0 to 1.
friction: number; default 0.5; How quickly a fling glides to a stop: 0 glides long, 1 stops short.
label: string; default "Ice floes"; The field's accessible name.
paused: boolean; default false; Still water: no current and no bobbing; a drag still moves the field.
disabled: boolean; default false; No dragging, lifting or keys.
seed: number; default 7; Seeds the floes' shapes and places.
className: string; default —; Classes for the root; give it a height.

Prop	Type	Default	Description
items	{ src?, alt, caption?, note? }[]	ten postcards drawn in code	The pictures, one per floe, repeating across the field.
value / defaultValue	number \| null	null	The item whose floe is lifted out of the water, controlled or initial.
onValueChange	(index: number \| null) => void	—	Fires from the click or key that lifted or lowered a floe.
density	number	0.6	How crowded the water is, 0.2 (scattered) to 1 (packed).
drift	number	0.35	How fast the current carries the field, 0 (still water) to 1.
tint	number	215	The water's hue in degrees, at a fixed dark lightness.
heading	number	200	The way the floes travel on screen, degrees clockwise from up (180 comes straight toward you).
tilt	number	50	How steeply you look down at the water, degrees from straight down, 35 to 62.
size	number	1	Floe size, 0.7 to 1.4.
jostle	number	0.5	How much the floes lag, bump and turn when the water is moved, 0 to 1.
friction	number	0.5	How quickly a fling glides to a stop: 0 glides long, 1 stops short.
label	string	"Ice floes"	The field's accessible name.
paused	boolean	false	Still water: no current and no bobbing; a drag still moves the field.
disabled	boolean	false	No dragging, lifting or keys.
seed	number	7	Seeds the floes' shapes and places.
className	string	—	Classes for the root; give it a height.