KQ-1519 · LIMB/DAWN

Limb Dawn

A sunrise seen from orbit behind your headline: the curved edge of the night side fills the lower frame under a hairline of atmosphere, and one progress value — autoplayed on mount or in view, tied to the scroll container, or driven by a prop — walks the dawn through its beats. The airglow wakes into blue and thickens toward the sunrise point, a white pinpoint crests the limb and flares into a brief ring of light that expands on the house enter curve while a flash runs both ways along the limb and the headline catches its glow, then the air warms into a thin amber band. The pointer drifts the camera on springs.drift so stars, limb and sun part a few pixels; there are no keys to learn and no tab stop of its own.

KQ-1519 · LIMB/DAWN

Waylight · orbit two

Waylight

Maps of the night side, refreshed every pass.

night · the limb in shadow

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/limb-dawn

Props

headline: string; default "Waylight"; The line the dawn comes up behind.
eyebrow: string; default "First light over the north"; A short line above the headline; an empty string leaves it out.
as: "h1" | "h2" | "h3" | "p"; default "h2"; The headline's element.
children: React.ReactNode; default —; Content under the headline: a line of copy, a call to action.
curvature: number; default 0.5; How round the world is, 0 (an almost flat horizon) to 1 (a small world).
atmosphere: number; default 0.5; How thick and bright the air at the limb glows, 0 to 1.
flare: number; default 0.6; How bright the crest's ring of light and the sun's glare burn, 0 to 1.
progress: number; default —; The dawn's progress, 0 (night) to 1 (sunrise). Given, it drives the scene and the trigger is ignored.
trigger: "mount" | "inView" | "scroll" | "manual"; default "inView"; What walks the dawn: mounting, coming into view, scrolling it up its scroll container, or progress alone.
duration: number; default 4200; How long the autoplayed dawn takes, ms.
delay: number; default 200; A pause before it starts, ms.
once: boolean; default true; Play once (true) or each time it comes back into view (false).
sunAt: number; default 0.64; Where along the limb the sun comes up, 0 (left) to 1 (right).
stars: number; default 0.5; How many stars hang over the limb, 0 (none) to 1.
airColor: string; default "var(--accent-bright)"; The air's colour before sunrise; taken at a fixed lightness per theme.
dawnColor: string; default "var(--warn)"; The band's colour at sunrise; taken at a fixed lightness per theme.
interactive: boolean; default true; The pointer drifts the camera a few pixels, so the orbit has depth.
paused: boolean; default false; Hold the stars' twinkle; the dawn itself still plays.
seed: number; default 1; Seeds the star field.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
onPhaseChange: (phase: LimbDawnPhase) => void; default —; Fires as the dawn passes from one beat to the next: night, airglow, crest, ring, dawn.
onComplete: () => void; default —; Fires when the dawn has played through.
className: string; default "h-full w-full"; Sizes the box.

Prop	Type	Default	Description
headline	string	"Waylight"	The line the dawn comes up behind.
eyebrow	string	"First light over the north"	A short line above the headline; an empty string leaves it out.
as	"h1" \| "h2" \| "h3" \| "p"	"h2"	The headline's element.
children	React.ReactNode	—	Content under the headline: a line of copy, a call to action.
curvature	number	0.5	How round the world is, 0 (an almost flat horizon) to 1 (a small world).
atmosphere	number	0.5	How thick and bright the air at the limb glows, 0 to 1.
flare	number	0.6	How bright the crest's ring of light and the sun's glare burn, 0 to 1.
progress	number	—	The dawn's progress, 0 (night) to 1 (sunrise). Given, it drives the scene and the trigger is ignored.
trigger	"mount" \| "inView" \| "scroll" \| "manual"	"inView"	What walks the dawn: mounting, coming into view, scrolling it up its scroll container, or progress alone.
duration	number	4200	How long the autoplayed dawn takes, ms.
delay	number	200	A pause before it starts, ms.
once	boolean	true	Play once (true) or each time it comes back into view (false).
sunAt	number	0.64	Where along the limb the sun comes up, 0 (left) to 1 (right).
stars	number	0.5	How many stars hang over the limb, 0 (none) to 1.
airColor	string	"var(--accent-bright)"	The air's colour before sunrise; taken at a fixed lightness per theme.
dawnColor	string	"var(--warn)"	The band's colour at sunrise; taken at a fixed lightness per theme.
interactive	boolean	true	The pointer drifts the camera a few pixels, so the orbit has depth.
paused	boolean	false	Hold the stars' twinkle; the dawn itself still plays.
seed	number	1	Seeds the star field.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
onPhaseChange	(phase: LimbDawnPhase) => void	—	Fires as the dawn passes from one beat to the next: night, airglow, crest, ring, dawn.
onComplete	() => void	—	Fires when the dawn has played through.
className	string	"h-full w-full"	Sizes the box.