KQ-1433 · DEW/WEB

Dew Web

A background of an orb-weaver's web at first light: radials from a hub to a frame moored off the edges, a capture spiral drooping between them under its own weight, and dew beaded on the silk; a light travels slowly round, droplets whose facets face it flash into small stars and silk lying across it carries a sheen, so bright arcs sweep the web while the anchors sway. Every crossing is a mass on springs tied to its neighbours, so a moving hand brushes the silk into a travelling tremble and a press plucks the nearest thread, which rings through the web — under-damped like the recoil spring, as long as ring asks — and settles; the first time it is seen the capture spiral is spun onto the standing scaffold ring by ring and the dew beads in. Keyboard focus arriving on content inside it gives the web a gentle pluck beside the focused element.

KQ-1433 · DEW/WEB

Fernworks Garden

Open at first light

Dawn walks, Saturdays at six

web spun · brush the silk, press to pluck

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/dew-web

Props

children: React.ReactNode; default —; The content above the web: a hero, a heading, a call to action.
density: number; default 0.55; How finely the web is spun, 0 to 1: more radials and more turns of the spiral.
sag: number; default 0.4; How far the capture threads droop between radials under their own weight, 0 to 1.
glint: number; default 0.6; How brightly the dew and the silk catch the moving light, 0 to 1.
dew: number; default 0.55; How much dew has gathered on the silk, 0 to 1.
hub: readonly [number, number]; default [0.68, 0.42]; Where the web's centre sits, as fractions of the box's width and height.
silk: string; default "color-mix(in oklab, var(--foreground) 62%, var(--background))"; The silk's colour, as a CSS colour.
glintColor: string; default "color-mix(in oklab, white 92%, var(--accent-bright))"; The colour of the glints, as a CSS colour.
mist: string; default "color-mix(in oklab, var(--background) 74%, oklch(0.5 0.05 175))"; The morning air behind the web, as a CSS colour.
ring: number; default 0.5; How long the web keeps trembling once disturbed, 0 (it stills at once) to 1 (it rings for about a second).
speed: number; default 1; How fast the light travels round and the anchors sway, 0 to 2.
interactive: boolean; default true; The hand brushes the silk, a press plucks it, and keyboard focus inside plucks it gently.
pointerStrength: number; default 0.6; How hard the hand brushes and plucks, 0 to 1.
seed: number; default 1; Picks the web: the same seed spins the same web with the same dew.
paused: boolean; default false; Holds the sway and the light still; the hand still disturbs the silk.
intro: boolean; default true; Spin the capture spiral onto the web, then bead the dew, the first time it is seen.
dpr: number; default 2; The highest device pixel ratio the web is drawn at, never above 2.
onPluck: () => void; default —; Fires when the web is plucked: by a press, or by keyboard focus arriving inside it.
className: string; default "h-full w-full"; Sizes the box.
contentClassName: string; default —; Classes for the content layer above the web.

Prop	Type	Default	Description
children	React.ReactNode	—	The content above the web: a hero, a heading, a call to action.
density	number	0.55	How finely the web is spun, 0 to 1: more radials and more turns of the spiral.
sag	number	0.4	How far the capture threads droop between radials under their own weight, 0 to 1.
glint	number	0.6	How brightly the dew and the silk catch the moving light, 0 to 1.
dew	number	0.55	How much dew has gathered on the silk, 0 to 1.
hub	readonly [number, number]	[0.68, 0.42]	Where the web's centre sits, as fractions of the box's width and height.
silk	string	"color-mix(in oklab, var(--foreground) 62%, var(--background))"	The silk's colour, as a CSS colour.
glintColor	string	"color-mix(in oklab, white 92%, var(--accent-bright))"	The colour of the glints, as a CSS colour.
mist	string	"color-mix(in oklab, var(--background) 74%, oklch(0.5 0.05 175))"	The morning air behind the web, as a CSS colour.
ring	number	0.5	How long the web keeps trembling once disturbed, 0 (it stills at once) to 1 (it rings for about a second).
speed	number	1	How fast the light travels round and the anchors sway, 0 to 2.
interactive	boolean	true	The hand brushes the silk, a press plucks it, and keyboard focus inside plucks it gently.
pointerStrength	number	0.6	How hard the hand brushes and plucks, 0 to 1.
seed	number	1	Picks the web: the same seed spins the same web with the same dew.
paused	boolean	false	Holds the sway and the light still; the hand still disturbs the silk.
intro	boolean	true	Spin the capture spiral onto the web, then bead the dew, the first time it is seen.
dpr	number	2	The highest device pixel ratio the web is drawn at, never above 2.
onPluck	() => void	—	Fires when the web is plucked: by a press, or by keyboard focus arriving inside it.
className	string	"h-full w-full"	Sizes the box.
contentClassName	string	—	Classes for the content layer above the web.