Components•Weight wave
Components•Weight wave
Weight wave
A line of Geist whose weight axis swells under the cursor with a gaussian falloff. When the pointer is away, a crest of weight travels the line on its own. Each glyph runs on its own spring, written straight to the style in one animation frame loop.
Dependencies
Copy below cli
npx shadcn add @bjork-ui/weight-waveHow to use
import { WeightWave } from "@/components/bjork-ui/text/weight-wave";<WeightWave text="Feel the weight" minWeight={140} maxWeight={900} radius={0.95} // gaussian sigma, in em idle // travelling crest while the pointer is away waveDuration={3.2} slant={0} // faux slant in degrees fontSize={132} // upper bound; fits the container/>
Feel the weight
Feel the weight
Feel the weight
Feel the weight