# Baseline Drop
URL: https://remocn.dev/docs/typography/baseline-drop

Words fall onto a shared baseline one after another while a gradient streak glows beneath them.

- Install: `npx shadcn@latest add @remocn/baseline-drop`
- Vibe: premium
- Natural length: 94f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/baseline-drop
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { BaselineDrop } from "@/components/remocn/baseline-drop";

const BaselineDropScene = () => (
  <BaselineDrop text="Ship the story." stagger={11} accent="#3B5BFD" />
);

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

Each word drops from above and lands on a single baseline with a small bounce while a gradient streak draws in and brightens under the line, then retracts. Pass `text` (or `words` for explicit splits) and `stagger` to set the rhythm; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"Ship the story."` | Headline; split on spaces into dropping words |
| `words` | `string[]` | — | Explicit word list; overrides text when given |
| `stagger` | `number` | `11` | Frames between consecutive word landings |
| `accent` | `string` | `"#3B5BFD"` | Accent color (any valid CSS color) |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |
| `speed` | `number` | `1` | Playback speed multiplier |

## Use when
- A closing tagline where each word should land with weight, one beat after another.
- A short three or four word slogan over a glowing ground at the end of a launch video.

## Don't use when
- The line is long enough to need several rows - use `line-by-line-slide`.
- You want soft letter-level motion instead of falling words - use `per-character-rise`.
- The text should arrive and leave with blur rather than drop - use `blur-out-up`.