# Scrub Reveal
URL: https://remocn.dev/docs/typography/scrub-reveal

A dim paragraph climbs as a soft front brightens it word by word, with one phrase in gradient italic.

- Install: `npx shadcn@latest add @remocn/scrub-reveal`
- Vibe: premium
- Natural length: 142f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/scrub-reveal
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ScrubReveal } from "@/components/remocn/scrub-reveal";

const ScrubRevealScene = () => (
  <ScrubReveal
    text="Every frame is code. Every cut is yours. Ship the film your product deserves."
    highlight="Every cut is yours."
  />
);

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

A dim paragraph sits low in the frame and climbs while a soft front brightens it word by word, like a trackpad scroll. The `highlight` phrase inside `text` switches to a serif italic filled with a gradient, and at the end the plain words settle back a step. Pass your own `text` and a `highlight` that appears in it, or an empty string for none. It ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"Every frame is code. Every cut is yours. Ship the film your product deserves."` | The statement. Each word brightens as the reveal front passes it. |
| `highlight` | `string` | `"Every cut is yours."` | A phrase inside `text` that turns to an italic serif and lights up in a gradient. Pass "" for none. |
| `accent` | `string` | `"#3B5BFD"` | Final stop of the highlight gradient. |
| `speed` | `number` | `1` | Playback multiplier. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- A manifesto or value statement that should read like scrolling through a page and lighting up as you go.
- A short paragraph where one key phrase deserves an editorial italic gradient treatment.

## Don't use when
- You want a light sheen sweeping across muted text instead of a reading scrub — use `shimmer-sweep`.
- The key phrase should get a marker block behind it — use `marker-highlight`.
- You want a soft blurred fade-in of the whole line — use `soft-blur-in`.