KQ-1436 · SLICED/HORIZON

Sliced Horizon

A background that is a sunset poster cut into horizontal strips: a sky running into a warm glow, a sun standing on the horizon and cut by it, and a sea with a path of glitter, painted once and drawn strip by strip, each slid sideways by a wave running down the stack so the sun breaks into offset bars. Moving the hand riffles the strips near it on the springs.snap constants; when the hand rests the strips pull into register one after another, radiating from its strip in a cascade, each on springs.snap with one crisp overshoot through alignment, and moving again lets the wave back in on springs.drift. The poster first arrives in register, as the server drew it, and breaks loose from the top; keyboard focus on content inside it brings the strips into register.

KQ-1436 · SLICED/HORIZON

Coldbrook Records

Summer sessions, side A

Vinyl, out July

drifting · rest the pointer to align

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

Props

children: React.ReactNode; default —; The content above the poster: a hero, a heading, a call to action.
slices: number; default 14; How many horizontal strips the scene is cut into, 6 to 28.
offset: number; default 0.5; How far the strips slide sideways, 0 (in register) to 1.
palette: "dusk" | "lagoon" | "ember" | "cobalt" | readonly string[]; default "dusk"; The scene's colours: a preset, or six CSS colours — sky top, sky low, sun top, sun bottom, sea top, sea deep.
gap: number; default 2; The cut between strips, in CSS px.
horizon: number; default 0.62; Where the horizon lies, as a fraction of the height, 0.3 to 0.85.
sun: number; default 0.55; How large the sun is, 0 to 1.
sunX: number; default 0.5; Where the sun stands across the scene, as a fraction of the width.
speed: number; default 1; How fast the wave runs down the strips, 0 to 2; 0 holds them still.
waves: number; default 1.2; How many crests of the wave run through the stack at once, 0.5 to 3.
banded: boolean; default false; Print each strip's sky as one flat colour, like screen-printed bands.
restDelay: number; default 320; How long a resting pointer waits before the strips pull into register, in ms.
interactive: boolean; default true; The hand riffles the strips, resting (or keyboard focus inside) brings them into register.
pointerStrength: number; default 0.6; How hard a moving hand shoves the strips near it, 0 to 1.
seed: number; default 1; Picks the glitter on the sea: the same seed lays the same light.
paused: boolean; default false; Holds the wave still; the hand still riffles and aligns the strips.
intro: boolean; default true; Show the poster in register first, then let the strips break loose from the top, the first time it is seen.
dpr: number; default 2; The highest device pixel ratio the poster is drawn at, never above 2.
onAlignChange: (aligned: boolean) => void; default —; Fires when the strips come into register (true), from a resting hand or keyboard focus, and when they start to drift again (false).
className: string; default "h-full w-full"; Sizes the box.
contentClassName: string; default —; Classes for the content layer above the poster.

Prop	Type	Default	Description
children	React.ReactNode	—	The content above the poster: a hero, a heading, a call to action.
slices	number	14	How many horizontal strips the scene is cut into, 6 to 28.
offset	number	0.5	How far the strips slide sideways, 0 (in register) to 1.
palette	"dusk" \| "lagoon" \| "ember" \| "cobalt" \| readonly string[]	"dusk"	The scene's colours: a preset, or six CSS colours — sky top, sky low, sun top, sun bottom, sea top, sea deep.
gap	number	2	The cut between strips, in CSS px.
horizon	number	0.62	Where the horizon lies, as a fraction of the height, 0.3 to 0.85.
sun	number	0.55	How large the sun is, 0 to 1.
sunX	number	0.5	Where the sun stands across the scene, as a fraction of the width.
speed	number	1	How fast the wave runs down the strips, 0 to 2; 0 holds them still.
waves	number	1.2	How many crests of the wave run through the stack at once, 0.5 to 3.
banded	boolean	false	Print each strip's sky as one flat colour, like screen-printed bands.
restDelay	number	320	How long a resting pointer waits before the strips pull into register, in ms.
interactive	boolean	true	The hand riffles the strips, resting (or keyboard focus inside) brings them into register.
pointerStrength	number	0.6	How hard a moving hand shoves the strips near it, 0 to 1.
seed	number	1	Picks the glitter on the sea: the same seed lays the same light.
paused	boolean	false	Holds the wave still; the hand still riffles and aligns the strips.
intro	boolean	true	Show the poster in register first, then let the strips break loose from the top, the first time it is seen.
dpr	number	2	The highest device pixel ratio the poster is drawn at, never above 2.
onAlignChange	(aligned: boolean) => void	—	Fires when the strips come into register (true), from a resting hand or keyboard focus, and when they start to drift again (false).
className	string	"h-full w-full"	Sizes the box.
contentClassName	string	—	Classes for the content layer above the poster.