Weight Wave

A wave of font weight travels across a line of text and settles on a highlighted word

Installation

$ pnpm dlx shadcn@latest add @remocn/weight-wave

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { WeightWave } from "@/components/remocn/weight-wave";
 
const WeightWaveScene = () => <WeightWave text="Made to move." highlight="move." accent="#3B5BFD" />;
 
export const RemotionRoot = () => (
  <Composition
    id="WeightWave"
    component={WeightWaveScene}
    durationInFrames={165}
    fps={30}
    width={1280}
    height={720}
  />
);

A line of text swells in font weight as a wave sweeps across it twice, then each letter settles to a resting weight while the last word takes a gradient fill. Pass text, optionally highlight for the word to color, and from, peak, settle to tune the weight range.

Props9

Prop	Type	Default
text	string"Made to move." The line of text to animate.
highlight	string— Word to color with the gradient; defaults to the last word.
from	number100 Starting font weight, clamped to 100 to 500.
peak	number500 Weight reached at the crest of each wave.
settle	number460 Resting weight each letter ends on.
waves	number2 How many weight waves sweep across the line.
accent	string"#3B5BFD" Deep end color of the highlighted word gradient.
theme	"dark" \| "light""dark" Color scheme; ships dark and light.
speed	number1 Playback multiplier for the whole timeline.

textstring
The line of text to animate.
Default"Made to move."
highlightstring
Word to color with the gradient; defaults to the last word.
fromnumber
Starting font weight, clamped to 100 to 500.
Default100
peaknumber
Weight reached at the crest of each wave.
Default500
settlenumber
Resting weight each letter ends on.
Default460
wavesnumber
How many weight waves sweep across the line.
Default2
accentstring
Deep end color of the highlighted word gradient.
Default"#3B5BFD"
theme"dark" | "light"
Color scheme; ships dark and light.
Default"dark"
speednumber
Playback multiplier for the whole timeline.
Default1