# Anagram Shuffle
URL: https://remocn.dev/docs/typography/anagram-shuffle

The letters of one word slide into new positions to spell its anagram.

- Install: `npx shadcn@latest add @remocn/anagram-shuffle`
- Vibe: playful
- Natural length: 116f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/anagram-shuffle
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { AnagramShuffle } from "@/components/remocn/anagram-shuffle";

const AnagramShuffleScene = () => (
  <AnagramShuffle from="listen" to="silent" accent="#3B5BFD" />
);

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

The `from` word shows, then each letter glides to its place in the `to` word. Both words must use the same letters, so pass a matching `from` and `to` pair. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `from` | `string` | `"listen"` | Starting word. |
| `to` | `string` | `"silent"` | Anagram of `from` that letters move into. |
| `accent` | `string` | `"#3B5BFD"` | Accent color override; falls back to the theme accent. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark; picks the palette. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- A clever hook where two related words share the same letters, such as a product's before and after.
- A playful word-play beat in a brand or naming reveal.
- A short one-word transformation used as a section opener.

## Don't use when
- The words differ by a letter or two per step — use `word-ladder`.
- The new word is unrelated and should just replace the old one — use `ruby-press`.
- You want a typo corrected in place — use `typo-fix`.