KQ-1219 · WIND/SOCK

Wind Sock

A wind widget: an airfield windsock on a mast in the middle of a compass rose painted on the grass, built from six hoops projected from 3D so it points the way the wind blows in depth as well as across, with its shadow falling downwind on the rose. It hangs at calm and fills toward level by fifteen knots on the glide spring, its five stripes light one by one with the Beaufort bands and turn red from a near gale, and while it is on screen it flaps with a ripple and a seeded wander that grow with gust. Dragging on the rose moves the wind marker 1:1 and the sock swings after it on a hunting vane spring; arrow keys turn the preview 5°, Page keys 45°, Home faces north, and Escape or Live returns to the real wind.

KQ-1219 · WIND/SOCK

14kt

Moderate breeze · gusty

live · 14 kt from wsw 250° · moderate breeze

Open it on the Atelier stage

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/wind-sock

Props

speed: number; default —; Wind speed in knots: how full the sock is, which stripes are lit, how fast it flaps and the reading.
direction: number; default —; The bearing the wind blows from, in degrees (270 is a westerly). The sock points the other way.
gust: number; default 0.35; How gusty it is, 0 to 1: how hard the sock wanders and swells, and the reading's steady, gusty or very gusty.
value / defaultValue: number | null; default null; The previewed bearing the sock is shown in, or null for the live wind.
onValueChange: (bearing: number | null) => void; default —; Fires from the drag, tap, key or Live press that changed the preview.
label: string; default "Wind"; The widget's name, used in the slider's name and the band announcements.
sound: boolean; default false; A whoosh as the visitor swings the sock (on a drag at most every 45° and 220 ms, a tap, a key, and the return to live), pitched up with the wind. The flapping itself is silent.
disabled: boolean; default false; Keeps showing the wind, but takes no drag, tap or keys.
className: string; default —; Classes for the tile.

Prop	Type	Default	Description
speed	number	—	Wind speed in knots: how full the sock is, which stripes are lit, how fast it flaps and the reading.
direction	number	—	The bearing the wind blows from, in degrees (270 is a westerly). The sock points the other way.
gust	number	0.35	How gusty it is, 0 to 1: how hard the sock wanders and swells, and the reading's steady, gusty or very gusty.
value / defaultValue	number \| null	null	The previewed bearing the sock is shown in, or null for the live wind.
onValueChange	(bearing: number \| null) => void	—	Fires from the drag, tap, key or Live press that changed the preview.
label	string	"Wind"	The widget's name, used in the slider's name and the band announcements.
sound	boolean	false	A whoosh as the visitor swings the sock (on a drag at most every 45° and 220 ms, a tap, a key, and the return to live), pitched up with the wind. The flapping itself is silent.
disabled	boolean	false	Keeps showing the wind, but takes no drag, tap or keys.
className	string	—	Classes for the tile.