Spell Out

Letters drop in one at a time with hyphens between them, then close into the word with a line beneath.

Installation

$ pnpm dlx shadcn@latest add @remocn/spell-out

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { SpellOut } from "@/components/remocn/spell-out";
 
const SpellOutScene = () => (
  <SpellOut
    name="remocn"
    line="Say it once. Remember it."
    speed={1}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="SpellOut"
    component={SpellOutScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

Each letter of name drops in with a small impact and a hyphen between, holds spelled out, then closes up into the finished word while line rises beneath. Pass name and line; speed retimes it. Ships light and dark.

Props6

Prop	Type	Default
name	string"remocn" Word spelled out letter by letter.
line	string"Say it once. Remember it." Slogan that rises under the finished word.
accent	string— Colour of the hyphens between letters.
background	string— Stage fill colour; overrides the theme background.
speed	number1 Playback multiplier for the whole timeline; 1 is normal speed.
theme	"dark" \| "light""dark" Dark or light palette and ground.

namestring
Word spelled out letter by letter.
Default"remocn"
linestring
Slogan that rises under the finished word.
Default"Say it once. Remember it."
accentstring
Colour of the hyphens between letters.
backgroundstring
Stage fill colour; overrides the theme background.
speednumber
Playback multiplier for the whole timeline; 1 is normal speed.
Default1
theme"dark" | "light"
Dark or light palette and ground.
Default"dark"