# Speed Ramp Word
URL: https://remocn.dev/docs/typography/speed-ramp-word

Time slows on the key word as it warms to a gradient, with a timecode HUD

- Install: `npx shadcn@latest add @remocn/speed-ramp-word`
- Vibe: premium
- Natural length: 119f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/speed-ramp-word
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { SpeedRampWord } from "@/components/remocn/speed-ramp-word";

const SpeedRampWordScene = () => (
  <SpeedRampWord text="Everything changes in an instant." keyWord="instant" hud />
);

export const RemotionRoot = () => (
  <Composition
    id="SpeedRampWord"
    component={SpeedRampWordScene}
    durationInFrames={121}
    fps={30}
    width={1280}
    height={720}
  />
);
```

The phrase rushes across the frame, then time slows on the key word as it warms to a gradient, with a small timecode and speed readout slowing alongside. Pass `text` and `keyWord`; set `hud` to false to hide the readout. It ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"Everything changes in an instant."` | The phrase that rushes across. |
| `keyWord` | `string` | `"instant"` | The word inside `text` that drops into slow motion. Defaults to the last word. |
| `hud` | `boolean` | `true` | Show the small timecode and speed readout that slow down with the shot. |
| `accent` | `string` | `"#3B5BFD"` | Accent colour (any CSS colour). |
| `theme` | `"dark" \| "light"` | `"dark"` | Colour scheme; ships light and dark. |
| `speed` | `number` | `1` | Playback multiplier; above 1 plays faster. |

## Use when
- A line that rushes by and drops into slow motion on one key word for emphasis.
- A performance or instant-feel beat where a timecode HUD sells the speed ramp.

## Don't use when
- You want a streaked blur resolving into a word — use `slit-scan`.
- The line should just be typed in — use `typewriter`.