Magnet Letters

A magnet pulls a wrong word into line, then repels it, and the right word drops in.

Installation

$ pnpm dlx shadcn@latest add @remocn/magnet-letters

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { MagnetLetters } from "@/components/remocn/magnet-letters";
 
const MagnetLettersScene = () => (
  <MagnetLetters before="Ship " wrongWord="someday" word="today" after="." />
);
 
export const RemotionRoot = () => (
  <Composition
    id="MagnetLetters"
    component={MagnetLettersScene}
    durationInFrames={255}
    fps={30}
    width={1280}
    height={720}
  />
);

A sentence settles in, a horseshoe magnet sweeps across the wrong word and lines its scattered letters up, then repels it off the line. The sentence reflows and the right word drops in letter by letter before the magnet leaves. Pass before, word, after and wrongWord. It takes a theme prop and ships light and dark.

Props7

Prop	Type	Default
before	string"Launch " Text before the word that gets swapped. Keep the trailing space.
word	string"videos" The right word. It drops in once the wrong one is repelled.
after	string", in code." Text after the swapped word.
wrongWord	string"slides" The wrong word the magnet pulls into line first, then repels.
accent	string"#3B5BFD" Magnet body, landing ticks and the right word.
theme	"dark" \| "light""dark" Light or dark ground; the component ships both.
speed	number1 Playback speed multiplier for the whole timeline.

beforestring
Text before the word that gets swapped. Keep the trailing space.
Default"Launch "
wordstring
The right word. It drops in once the wrong one is repelled.
Default"videos"
afterstring
Text after the swapped word.
Default", in code."
wrongWordstring
The wrong word the magnet pulls into line first, then repels.
Default"slides"
accentstring
Magnet body, landing ticks and the right word.
Default"#3B5BFD"
theme"dark" | "light"
Light or dark ground; the component ships both.
Default"dark"
speednumber
Playback speed multiplier for the whole timeline.
Default1