KQ-1432 · DUNE/GRADIENT

Dune Gradient

A background of colour laid in drifting dunes: soft-edged bands stacked from the horizon down, each a leaning ridge with a steep lee face and a long windward slope, lit from a low sun with a fine highlight on every crest and a little sand grain over everything; far bands dissolve into the page colour and each travels at its own pace while its shape slowly changes. The hand leans the landscape by depth on springs.drift, a press sends a gust whose front brightens the crests as it runs outward and lifts wisps of sand off the lee faces, and the first time it is seen the dunes are laid back to front on springs.glide in a cascade. Keyboard focus on content inside it leans the dunes toward the focused element.

KQ-1432 · DUNE/GRADIENT

Waylight Crossings

Twelve nights across the erg

Departs every new moon

dunes laid · move to lean, press for a gust

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/dune-gradient

Props

children: React.ReactNode; default —; The content above the dunes: a hero, a heading, a call to action.
layers: number; default 5; How many bands of dunes are stacked from the horizon down, 2 to 8.
palette: "amber" | "rose" | "sage" | "cobalt" | readonly string[]; default "amber"; The colours, far to near: a preset, or your own list of 2 to 5 CSS colours.
drift: number; default 1; How fast the dunes travel and reshape, 0 to 2; 0 holds them still.
haze: string; default "var(--background)"; The air the far dunes and the sky fade into, as a CSS colour.
relief: number; default 0.5; How tall the dunes stand, 0 to 1.
crest: number; default 0.6; How brightly the light catches each crest, 0 to 1.
grain: number; default 0.35; How much sand grain sits over the colour, 0 to 1.
softness: number; default 0.35; How soft the edges between bands are, 0 (cut) to 1 (airbrushed).
gust: boolean; default true; A press sends a gust that lifts sand off the crests.
interactive: boolean; default true; The landscape leans with the hand and with keyboard focus inside it.
pointerStrength: number; default 0.6; How far the layers lean with the hand, 0 to 1.
seed: number; default 1; Picks the landscape: the same seed lays the same dunes.
paused: boolean; default false; Holds the dunes still; the hand still leans them.
intro: boolean; default true; Lay the dunes back to front the first time the background is seen.
dpr: number; default 2; The highest device pixel ratio the dunes render at, never above 2.
onGust: () => void; default —; Fires when a press sends a gust across the crests.
className: string; default "h-full w-full"; Sizes the box.
contentClassName: string; default —; Classes for the content layer above the dunes.

Prop	Type	Default	Description
children	React.ReactNode	—	The content above the dunes: a hero, a heading, a call to action.
layers	number	5	How many bands of dunes are stacked from the horizon down, 2 to 8.
palette	"amber" \| "rose" \| "sage" \| "cobalt" \| readonly string[]	"amber"	The colours, far to near: a preset, or your own list of 2 to 5 CSS colours.
drift	number	1	How fast the dunes travel and reshape, 0 to 2; 0 holds them still.
haze	string	"var(--background)"	The air the far dunes and the sky fade into, as a CSS colour.
relief	number	0.5	How tall the dunes stand, 0 to 1.
crest	number	0.6	How brightly the light catches each crest, 0 to 1.
grain	number	0.35	How much sand grain sits over the colour, 0 to 1.
softness	number	0.35	How soft the edges between bands are, 0 (cut) to 1 (airbrushed).
gust	boolean	true	A press sends a gust that lifts sand off the crests.
interactive	boolean	true	The landscape leans with the hand and with keyboard focus inside it.
pointerStrength	number	0.6	How far the layers lean with the hand, 0 to 1.
seed	number	1	Picks the landscape: the same seed lays the same dunes.
paused	boolean	false	Holds the dunes still; the hand still leans them.
intro	boolean	true	Lay the dunes back to front the first time the background is seen.
dpr	number	2	The highest device pixel ratio the dunes render at, never above 2.
onGust	() => void	—	Fires when a press sends a gust across the crests.
className	string	"h-full w-full"	Sizes the box.
contentClassName	string	—	Classes for the content layer above the dunes.