A swell of font weight rolls through the letters on a loop, tinting each one as the crest passes. Every letter reserves its boldest width, so the line keeps still while the weight moves.
One file, every weight in between.
npx shadcn@latest add https://hyperblur.dev/r/text-weight-wave.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/text-weight-wave.tsx.
import { TextWeightWave } from "@/components/hyperblur/text-weight-wave"
<TextWeightWave text="Variable by nature" className="text-5xl" />| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | required | Text to render. Needs a variable font to animate smoothly. |
| minWeight | number | 200 | Weight at the trough of the wave. |
| maxWeight | number | 900 | Weight at the crest of the wave. |
| duration | number | 2.4 | Seconds for one full swell on a letter. |
| spread | number | 0.09 | Delay between neighbouring letters in seconds. Larger values give a longer wave. |
| direction | "forward" | "backward" | "mirror" | "forward" | Wave travels left to right, right to left, or outward from the center. |
| accent | string | "#7fb3ff" | Color letters take at the crest. |
| tint | boolean | true | Tint letters with the accent at the crest. Off keeps the text color. |
| bars | boolean | false | Draw a small level bar under each letter that rises with its weight. |
| paused | boolean | false | Freeze the wave where it is. |