Text Variable Weight Wave

ProNew

Font weight and width swept along a word by a travelling wave.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/text-variable-weight-wave

Prop	Type	Default	Description
`children`	`string`	-	The text.
`weight`	`[number, number]`	`[200, 900]`	Lightest and heaviest weight.
`width`	`[number, number]`	`[75, 125]`	Narrowest and widest width in percent.
`duration`	`number`	`2.4`	Seconds per cycle.
`wavelength`	`number`	`8`	Letters per wavelength.
`className`	`string`	-	Classes for the root element.

The phrase is the aria-label of a role="img" element.
Needs a font with a weight axis for smooth steps; static fonts jump between cuts.
Under prefers-reduced-motion the letters keep one weight. The wave pauses off screen.