KQ-366 · ICE/PANE

Ice Pane

Frost across the interface that melts where the cursor rests and creeps back when it leaves. The frost is a crystalline field that blurs and refracts the view with a cold tint and a few glints; the melt is a persistent map that the pointer warms and time refreezes, with a wet rim at the boundary. The DOM stays live under the ice.

KQ-366 · ICE/PANE

Coldbrook · locker ledger

Four wards, one frosted glass.

Every locker reads through the ice above its own set point. Hold the cursor still and the frost gives way to a clear circle; step back and the glass grows shut again.

LockerWardTempState
C-04Serum bank-4.2°holding
C-11Plasma reserve-18.6°cleared
C-19Vaccine lot 88-22.1°watch
C-27Culture stock-6.8°cleared
04:52 · round 3

rest to melt

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/ice-pane

Props

PropTypeDefaultDescription
frost / refraction / blurnumberHow much of the pane starts frozen, how far the crystals bend the view, and how soft it is.
melt / meltSpeed / refreezenumberThe warm radius around the pointer, how fast it clears, and how fast the frost returns per second.
color / tint / sparklestring · number · numberThe cold cast and how strong it is, and the glints in the crystals.