KQ-1874 · NACREOUS/SKY

Nacreous Sky

A pale dusk sky crossed by thin, high clouds drifting in two veils, drawn per pixel in one WebGL2 pass with the sun hidden behind them: wherever a cloud thins near the sun its edge diffracts into soft iridescent bands of rose, green and blue, laid as contours of angular distance from the sun over a droplet size that wanders across the cloud, while denser cloud near the sun takes a silver lining. Moving the pointer moves the sun along its arc on the springs.glide constants, so the colour slides along every thinning edge, and when the pointer leaves the sun drifts home to its resting angle on springs.drift. The sun marker on the rail at the foot is a real slider: arrows move it 3°, Page keys 15°, Home and End to either end of the arc.

KQ-1874 · NACREOUS/SKY

Waylight Observatory · Evening log

Colour at the edge of the cloud.

sun centred · thin edges · soft pastel

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/nacreous-sky

Props

children: React.ReactNode; default —; Content over the sky: a hero line, a caption. It stays fully interactive.
sunAngle: number; default 0; Where the sun rests behind the clouds, in degrees from −60 (left) to 60 (right). The pointer moves it from here.
onSunAngleChange: (degrees: number) => void; default —; Fires from the hover, drag or key that moved the sun, with whole degrees.
thinness: number; default 0.55; How thin the clouds are, 0 (heavy veils) to 1 (gossamer, with more edge to colour).
saturation: number; default 0.55; How strong the iridescent colour is, 0 (pearl-white) to 1 (vivid pastel).
speed: number; default 0.3; How fast the clouds drift, 0 (still) to 1 (a brisk high wind).
coverage: number; default 0.55; How much of the sky the clouds cover, 0 to 1.
followPointer: boolean; default true; A hovering mouse or pen moves the sun; a finger drags along the rail or taps.
returnOnLeave: boolean; default true; When the pointer leaves, the sun drifts back to sunAngle.
skyColors: [string, string]; default pale dusk tints (light) or a deep twilight (dark) from the tokens; The sky's top and horizon, CSS colours.
sunColor: string; default a warm near-white from the warn hue; The sun's light, any CSS colour.
paused: boolean; default false; Hold the clouds where they are.
seed: number; default 1; Seeds the clouds' shapes.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
label: string; default "Sun position"; The sun control's accessible name.
disabled: boolean; default false; The sun does not move.
className: string; default —; Sizes the sky; it fills its parent by default.

Prop	Type	Default	Description
children	React.ReactNode	—	Content over the sky: a hero line, a caption. It stays fully interactive.
sunAngle	number	0	Where the sun rests behind the clouds, in degrees from −60 (left) to 60 (right). The pointer moves it from here.
onSunAngleChange	(degrees: number) => void	—	Fires from the hover, drag or key that moved the sun, with whole degrees.
thinness	number	0.55	How thin the clouds are, 0 (heavy veils) to 1 (gossamer, with more edge to colour).
saturation	number	0.55	How strong the iridescent colour is, 0 (pearl-white) to 1 (vivid pastel).
speed	number	0.3	How fast the clouds drift, 0 (still) to 1 (a brisk high wind).
coverage	number	0.55	How much of the sky the clouds cover, 0 to 1.
followPointer	boolean	true	A hovering mouse or pen moves the sun; a finger drags along the rail or taps.
returnOnLeave	boolean	true	When the pointer leaves, the sun drifts back to sunAngle.
skyColors	[string, string]	pale dusk tints (light) or a deep twilight (dark) from the tokens	The sky's top and horizon, CSS colours.
sunColor	string	a warm near-white from the warn hue	The sun's light, any CSS colour.
paused	boolean	false	Hold the clouds where they are.
seed	number	1	Seeds the clouds' shapes.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
label	string	"Sun position"	The sun control's accessible name.
disabled	boolean	false	The sun does not move.
className	string	—	Sizes the sky; it fills its parent by default.