KQ-1575 · LEAF/DAPPLE

Leaf Dapple

A plaster wall in the afternoon, dappled with sunlight through a swaying canopy, as a background with your content above it: every dapple is a true pinhole image of the sun, round and soft-edged, sized by how high its gap is in the canopy and stretched as a high sun grazes the wall, so raising eclipse turns all of them into crescents at once — cut from the same side, as each is the same inverted sun — and at 1 into rings. Branches sway together and leaves flutter alone, closing their gaps for a moment, and the pointer is a gust that stirs the leaves along its path, easing out on the drift spring's time scale. One WebGL2 pass; reduced motion holds a still afternoon.

KQ-1575 · LEAF/DAPPLE

Waylight Inn · The garden room

Long afternoons, slow light.

breeze · move across the wall to stir the leaves

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/leaf-dapple

Props

children: React.ReactNode; default —; The content on the wall: a hero line, a heading, a call to action. It stays fully interactive.
wind: number; default 0.4; The breeze, 0 (a still afternoon) to 1 (a gusty one): how far and how fast the leaves sway.
leafDensity: number; default 0.55; How thick the canopy is, 0 (sparse, the wall mostly lit) to 1 (dense, a few bright coins in deep shade).
eclipse: number; default 0; How much of the sun the moon covers, 0 to 1; every dapple becomes a crescent, and at 1 a ring.
sunSize: number; default 26; A typical dapple's diameter, px (10 to 60): how high the canopy is.
elevation: number; default 45; The sun's height above the horizon, degrees (0 to 75); a high sun grazes the wall and stretches every dapple.
azimuth: number; default 25; Which way the stretched dapples lean, degrees from vertical.
warmth: number; default 0.5; How golden the light is, 0 (white noon) to 1 (late afternoon).
plaster: number; default 0.5; How much trowel texture and grain the plaster shows, 0 to 1.
wallColor: string; default "color-mix(in oklab, var(--background) 90%, var(--warn))"; The plaster, any CSS colour.
sunColor: string; default a warm white from the amber token (light-dark); The sunlight, any CSS colour.
shadeColor: string; default a muted olive grey on light, a cool near-black on dark (light-dark); The shade, any CSS colour: the wall under the canopy's skylight.
interactive: boolean; default true; The pointer is a gust that stirs the leaves near it.
pointerStrength: number; default 0.6; How strong a pointer gust is, 0 to 1.
paused: boolean; default false; Hold the leaves still.
seed: number; default 1; Seeds where the gaps in the canopy fall.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
className: string; default "h-full w-full"; Sizes the wall.

Prop	Type	Default	Description
children	React.ReactNode	—	The content on the wall: a hero line, a heading, a call to action. It stays fully interactive.
wind	number	0.4	The breeze, 0 (a still afternoon) to 1 (a gusty one): how far and how fast the leaves sway.
leafDensity	number	0.55	How thick the canopy is, 0 (sparse, the wall mostly lit) to 1 (dense, a few bright coins in deep shade).
eclipse	number	0	How much of the sun the moon covers, 0 to 1; every dapple becomes a crescent, and at 1 a ring.
sunSize	number	26	A typical dapple's diameter, px (10 to 60): how high the canopy is.
elevation	number	45	The sun's height above the horizon, degrees (0 to 75); a high sun grazes the wall and stretches every dapple.
azimuth	number	25	Which way the stretched dapples lean, degrees from vertical.
warmth	number	0.5	How golden the light is, 0 (white noon) to 1 (late afternoon).
plaster	number	0.5	How much trowel texture and grain the plaster shows, 0 to 1.
wallColor	string	"color-mix(in oklab, var(--background) 90%, var(--warn))"	The plaster, any CSS colour.
sunColor	string	a warm white from the amber token (light-dark)	The sunlight, any CSS colour.
shadeColor	string	a muted olive grey on light, a cool near-black on dark (light-dark)	The shade, any CSS colour: the wall under the canopy's skylight.
interactive	boolean	true	The pointer is a gust that stirs the leaves near it.
pointerStrength	number	0.6	How strong a pointer gust is, 0 to 1.
paused	boolean	false	Hold the leaves still.
seed	number	1	Seeds where the gaps in the canopy fall.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
className	string	"h-full w-full"	Sizes the wall.