# Edit Ripple
URL: https://remocn.dev/docs/typography/edit-ripple

"Change your mind, render it again." with the second line indented and ripple-coloured

- Install: `npx shadcn@latest add @remocn/edit-ripple`
- Vibe: clean
- Natural length: 196f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/edit-ripple
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { EditRipple } from "@/components/remocn/edit-ripple";

const EditRippleScene = () => <EditRipple pairs={[{ cause: "Change one word,", effect: "every scene follows." }, { cause: "Swap the color,", effect: "every shot repaints." }]} />;

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

Each pair appears as a cause line followed by an effect line, and the effect words recolor in a ripple from left to right; then the pair exits and the next pair follows. Pass `pairs` (cause and effect strings); it spaces the pairs to fit the composition length.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `pairs` | `EditRipplePair[]` | `DEFAULT_PAIRS` | Cause and effect lines, played one pair at a time. |
| `accent` | `string` | — | Color of the effect words as the ripple passes. |
| `background` | `string` | — | Stage fill color; pass "transparent" to overlay your own footage. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme; ships dark and light. |

## Use when
- A beat about cause and effect, such as one edit changing the whole video.
- Two or three short if-this-then-that statements in a row.
- A feature explanation where the second line is the payoff of the first.

## Don't use when
- You want objections each answered in turn — use `exactly`.
- You need one sentence to edit itself in place — use `changed-mind`.
- You want a word-by-word diff of before and after — use `diff-swap`.