KQ-1829 · STREAK/PAGER

Streak Pager

A slide pager over a quiet starfield: drag, swipe or press the arrows and the stars are thrown into sideways streaks that sweep into a warp point on the edge the slides travel toward, then shrink back to points as the new slide lands on springs.glide with the throw's velocity. A fast flick stretches the streaks further and tints them, a long jump warps hardest, and a landed slide's kicker rule draws in on springs.flick while the dots stretch on springs.snap. It is a carousel with one tab stop on the slides (arrow keys, Home and End), a dot tablist with roving focus and previous and next buttons.

KQ-1829 · STREAK/PAGER

Waylight Survey

Four places worth the long way

Survey 01The Lantern Cluster

slide 1 of 4 · The Lantern Cluster

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/streak-pager

Props

items: StreakPagerItem[]; default four Waylight survey slides; The slides: title, alt, and optional kicker, body, caption and image src; pictures are drawn in code when src is absent.
value / defaultValue: number; default 0; The slide on screen, by index (controlled / initial).
onValueChange: (index: number) => void; default —; Fires from the drag, key, button or dot that chose a new slide.
streak: number; default 0.6; How far the stars stretch into streaks at full speed, 0 to 1.
density: number; default 0.5; How many stars fill the sky, 0 to 1.
tint: string; default "var(--accent-bright)"; The colour a fast swipe tints the streaks, any CSS colour.
parallax: number; default 0.5; How far the stars drift with the slides, 0 (fixed sky) to 1.
horizon: number; default 0.5; Height of the warp point on the edge, 0 (top) to 1 (bottom).
loop: boolean; default false; Carry on from the last slide to the first.
interval: number; default 0; Autoplay every this many ms while nobody is using the pager; 0 never.
controls: boolean; default true; Show the dots and the previous and next buttons.
seed: number; default 7; Seeds the starfield.
onLand: (index: number) => void; default —; Fires when a new slide has come to rest.
label: string; default "Slides"; The carousel's accessible name.
disabled: boolean; default false; No dragging, keys or buttons.
dpr: number; default 2; Cap on the starfield's device pixel ratio, at most 2.
className: string; default —; Sizes the pager; give it a height. Defaults to h-56 w-full.

Prop	Type	Default	Description
items	StreakPagerItem[]	four Waylight survey slides	The slides: title, alt, and optional kicker, body, caption and image src; pictures are drawn in code when src is absent.
value / defaultValue	number	0	The slide on screen, by index (controlled / initial).
onValueChange	(index: number) => void	—	Fires from the drag, key, button or dot that chose a new slide.
streak	number	0.6	How far the stars stretch into streaks at full speed, 0 to 1.
density	number	0.5	How many stars fill the sky, 0 to 1.
tint	string	"var(--accent-bright)"	The colour a fast swipe tints the streaks, any CSS colour.
parallax	number	0.5	How far the stars drift with the slides, 0 (fixed sky) to 1.
horizon	number	0.5	Height of the warp point on the edge, 0 (top) to 1 (bottom).
loop	boolean	false	Carry on from the last slide to the first.
interval	number	0	Autoplay every this many ms while nobody is using the pager; 0 never.
controls	boolean	true	Show the dots and the previous and next buttons.
seed	number	7	Seeds the starfield.
onLand	(index: number) => void	—	Fires when a new slide has come to rest.
label	string	"Slides"	The carousel's accessible name.
disabled	boolean	false	No dragging, keys or buttons.
dpr	number	2	Cap on the starfield's device pixel ratio, at most 2.
className	string	—	Sizes the pager; give it a height. Defaults to h-56 w-full.