KQ-1527 · BLOCK/HORIZON

Block Horizon

A horizon of square columns curving away over the rim of a small world, drawn with WebGL2 as instanced boxes: two long swells and a light chop heave the rows, the tops catch a low sun with a path of glints toward it, the troughs sit in shade and distance fades into haze. Pass a series and the nearest rows calm into a bar chart that still breathes while the far sea rolls on; on first sight each bar rises out of the swell on springs.drift, staggered by the house cascade, and a new series glides each bar on springs.glide. Drag sideways to turn the swell's heading 1:1 — a throw is projected and the heading glides there with the release velocity — or use the slider's keys: Left and Right 15°, Page Up and Down 45°, Home to 0°.

KQ-1527 · BLOCK/HORIZON

Fieldline · sessions

31.4k+7.5%

heading 35° · swell from the north-east · 14 weeks

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/block-horizon

Props

children: React.ReactNode; default —; The content above the sea: a kicker, a figure, a call to action.
series: readonly number[]; default 14 weeks of sessions; Values the near rows stand up as a chart, oldest first; up to 64.
seriesLabel: string; default "Weekly sessions"; What the series is, for assistive technology.
blockSize: number; default 18; A block's width in the nearest row, in px, 12 to 40; the whole sea scales with it.
swell: number; default 0.55; Height of the swell, 0 (a flat calm) to 1 (a heavy sea).
sunAngle: number; default 12; The sun's height above the horizon, in degrees: low means long glints and deep shade.
sunAzimuth: number; default -18; Where the sun stands across the sky, in degrees from straight ahead (negative is left).
colors: "dusk" | "slate" | "sand" | readonly string[]; default "dusk"; A named palette, or CSS colours in order: block, sunlit top, sky, horizon haze, chart, sun.
speed: number; default 1; How fast the sea moves, 0 (held) to 2.
curvature: number; default 0.5; How small the world is, 0 (nearly flat) to 1 (a tight curve at the rim).
chartRows: number; default 2; How many of the nearest rows stand up as the chart, 0 to 4.
chartHeight: number; default 4.5; The tallest value's height, in blocks.
value / defaultValue: number; default — / 35; The swell's heading in degrees, controlled or to start from: 0 rolls toward you from the horizon.
onValueChange: (degrees: number) => void; default —; Fires from the drag or the key that turned the swell, with the new heading in whole degrees, 0 to 359.
interactive: boolean; default true; Dragging and keys turn the swell.
paused: boolean; default false; Hold the sea still; the swell can still be turned.
label: string; default "Swell heading"; Names the heading control for assistive technology.
seed: number; default 4; Seeds the swells' phases and the second swell's crossing angle.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
disabled: boolean; default false; Shows the sea but takes no input.
className: string; default "h-full w-full"; Sizes and shapes the box.

Prop	Type	Default	Description
children	React.ReactNode	—	The content above the sea: a kicker, a figure, a call to action.
series	readonly number[]	14 weeks of sessions	Values the near rows stand up as a chart, oldest first; up to 64.
seriesLabel	string	"Weekly sessions"	What the series is, for assistive technology.
blockSize	number	18	A block's width in the nearest row, in px, 12 to 40; the whole sea scales with it.
swell	number	0.55	Height of the swell, 0 (a flat calm) to 1 (a heavy sea).
sunAngle	number	12	The sun's height above the horizon, in degrees: low means long glints and deep shade.
sunAzimuth	number	-18	Where the sun stands across the sky, in degrees from straight ahead (negative is left).
colors	"dusk" \| "slate" \| "sand" \| readonly string[]	"dusk"	A named palette, or CSS colours in order: block, sunlit top, sky, horizon haze, chart, sun.
speed	number	1	How fast the sea moves, 0 (held) to 2.
curvature	number	0.5	How small the world is, 0 (nearly flat) to 1 (a tight curve at the rim).
chartRows	number	2	How many of the nearest rows stand up as the chart, 0 to 4.
chartHeight	number	4.5	The tallest value's height, in blocks.
value / defaultValue	number	— / 35	The swell's heading in degrees, controlled or to start from: 0 rolls toward you from the horizon.
onValueChange	(degrees: number) => void	—	Fires from the drag or the key that turned the swell, with the new heading in whole degrees, 0 to 359.
interactive	boolean	true	Dragging and keys turn the swell.
paused	boolean	false	Hold the sea still; the swell can still be turned.
label	string	"Swell heading"	Names the heading control for assistive technology.
seed	number	4	Seeds the swells' phases and the second swell's crossing angle.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
disabled	boolean	false	Shows the sea but takes no input.
className	string	"h-full w-full"	Sizes and shapes the box.