Anagram Shuffle
The letters of one word slide into new positions to spell its anagram.
Installation
$ pnpm dlx shadcn@latest add @remocn/anagram-shuffleUsage
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
| Prop | Type | Default |
|---|---|---|
| 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.
Default
1