KQ-1425 · CHEVRON/TIDE

Chevron Tide

A herringbone cloth as a background, drawn crisply in one WebGL2 pass with the content on top: two long swells of different length and heading pass through the weave, every row of chevrons rises and falls with them, and each stripe is a rounded rib that runs light to shade across its width, more so at the crest, where a soft sheen rolls with the swell while the troughs settle into shade. The pointer lifts a mound of cloth that trails it on springs.glide and rises on springs.drift, and a press on the cloth sends a ring swell out across the weave. It is decoration and never takes focus; keyboard focus landing on a control inside moves the mound there and sends a softer ring.

KQ-1425 · CHEVRON/TIDE

Basinworks Marina

Moorings open for spring

Forty berths, sheltered from the swell

at rest · 28 px weave, swell 0.60

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/chevron-tide

Props

children: React.ReactNode; default —; The content on top of the cloth: a hero line, a heading, a call to action.
scale: number; default 28; Width of one chevron column in px; the whole weave grows or tightens with it.
swell: number; default 0.6; Height of the swell, 0 (a flat, still cloth) to 1 (a heavy sea).
colors: "harbour" | "sand" | "slate" | readonly string[]; default "harbour"; A named palette, or your own CSS colours in order: stripe, alternate stripe, light, shade.
pattern: "herringbone" | "chevron"; default "herringbone"; Herringbone breaks the twill at every column; chevron runs one unbroken zigzag.
stripes: number; default 4; Stripes across each column, 2 to 8.
speed: number; default 1; How fast the sea moves, 0 (held) to 3.
wavelength: number; default 300; Distance between crests of the main swell, in px.
angle: number; default 40; Heading of the main swell in degrees: 0 rolls left to right, 90 rolls down toward you.
sheen: number; default 0.6; How brightly the crests catch the light, 0 to 1.
interactive: boolean; default true; The pointer and keyboard focus nudge the swell.
pointerStrength: number; default 0.6; How high the pointer lifts the cloth, 0 to 1.
pulse: boolean; default true; A press on the cloth (not on a control) sends a ring swell out from it.
intro: boolean; default true; The swell rises out of a flat cloth the first time it comes into view.
paused: boolean; default false; Hold the sea still; the pointer can still nudge it.
seed: number; default 1; Seeds the swells' phases and headings, so two cloths never roll in step.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
onActiveChange: (active: boolean) => void; default —; Fires when the pointer or keyboard focus starts (true) or stops (false) nudging the swell.
className: string; default —; Sizes and shapes the box; it fills its parent by default (h-full w-full).

Prop	Type	Default	Description
children	React.ReactNode	—	The content on top of the cloth: a hero line, a heading, a call to action.
scale	number	28	Width of one chevron column in px; the whole weave grows or tightens with it.
swell	number	0.6	Height of the swell, 0 (a flat, still cloth) to 1 (a heavy sea).
colors	"harbour" \| "sand" \| "slate" \| readonly string[]	"harbour"	A named palette, or your own CSS colours in order: stripe, alternate stripe, light, shade.
pattern	"herringbone" \| "chevron"	"herringbone"	Herringbone breaks the twill at every column; chevron runs one unbroken zigzag.
stripes	number	4	Stripes across each column, 2 to 8.
speed	number	1	How fast the sea moves, 0 (held) to 3.
wavelength	number	300	Distance between crests of the main swell, in px.
angle	number	40	Heading of the main swell in degrees: 0 rolls left to right, 90 rolls down toward you.
sheen	number	0.6	How brightly the crests catch the light, 0 to 1.
interactive	boolean	true	The pointer and keyboard focus nudge the swell.
pointerStrength	number	0.6	How high the pointer lifts the cloth, 0 to 1.
pulse	boolean	true	A press on the cloth (not on a control) sends a ring swell out from it.
intro	boolean	true	The swell rises out of a flat cloth the first time it comes into view.
paused	boolean	false	Hold the sea still; the pointer can still nudge it.
seed	number	1	Seeds the swells' phases and headings, so two cloths never roll in step.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
onActiveChange	(active: boolean) => void	—	Fires when the pointer or keyboard focus starts (true) or stops (false) nudging the swell.
className	string	—	Sizes and shapes the box; it fills its parent by default (h-full w-full).