# Weight Wave
URL: https://remocn.dev/docs/typography/weight-wave

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

- Install: `npx shadcn@latest add @remocn/weight-wave`
- Vibe: clean
- Natural length: 132f @ 30fps

## Installation

```bash
npx 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.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `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` | `number` | `100` | Starting font weight, clamped to 100 to 500. |
| `peak` | `number` | `500` | Weight reached at the crest of each wave. |
| `settle` | `number` | `460` | Resting weight each letter ends on. |
| `waves` | `number` | `2` | 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` | `number` | `1` | Playback multiplier for the whole timeline. |

## Use when
- A tagline about motion or flexibility where the type itself should feel alive.
- A calm hero line that needs subtle movement without letters leaving their place.
- A closing line that should end on one emphasized word in the brand color.

## Don't use when
- You need the headline to enter from off-screen or by letter — use `per-character-rise`.
- The line is long and wraps to several lines — use `line-by-line-slide`.
- You want a width and weight flex on a single big word — use `axis-flex`.