Anagram Shuffle

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

Installation
$ pnpm dlx 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.

Props5

PropTypeDefault
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
number1

Playback speed multiplier for the whole timeline.

  • fromstring

    Starting word.

    Default"listen"

  • tostring

    Anagram of `from` that letters move into.

    Default"silent"

  • accentstring

    Accent color override; falls back to the theme accent.

    Default"#3B5BFD"

  • theme"dark" | "light"

    Ships light and dark; picks the palette.

    Default"dark"

  • speednumber

    Playback speed multiplier for the whole timeline.

    Default1