A to Z

An alphabet gag where a big letter column rolls from A to Z and lands on a final entry

Installation

$ pnpm dlx shadcn@latest add @remocn/a-to-z

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { AToZ } from "@/components/remocn/a-to-z";
 
const AToZScene = () => (
  <AToZ
    entries={["animations.", "brand fonts.", "captions."]}
    finale="zero lock-in."
    connector="is for"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="AToZ"
    component={AToZScene}
    durationInFrames={165}
    fps={30}
    width={1280}
    height={720}
  />
);

A huge letter column and a text column roll together: each entry shows its first letter with the connector, for example "A is for any aspect ratio.", ticking through the list. After the last entry the letters flick through the gap to the finale, and a slower roll lands on it. Pass entries in alphabetical order, plus finale and connector; it ships light and dark through theme, and the pacing stretches to fit the composition's duration (128 frames at the default 165).

Props7

Prop	Type	Default
entries	string[]DEFAULT_ENTRIES Items in alphabetical order; each one's first letter drives the big column.
finale	string"zero lock-in." Last entry, rolled in after the letters flick through to its letter.
connector	string"is for" Short phrase between the letter and each entry.
accent	string— Field color in dark, letter color in light; defaults to orange.
background	string— Stage color, or `"transparent"` to composite over other layers.
speed	number1 Playback speed multiplier.
theme	"dark" \| "light""dark" Ships light and dark.

entriesstring[]
Items in alphabetical order; each one's first letter drives the big column.
DefaultDEFAULT_ENTRIES
finalestring
Last entry, rolled in after the letters flick through to its letter.
Default"zero lock-in."
connectorstring
Short phrase between the letter and each entry.
Default"is for"
accentstring
Field color in dark, letter color in light; defaults to orange.
backgroundstring
Stage color, or `"transparent"` to composite over other layers.
speednumber
Playback speed multiplier.
Default1
theme"dark" | "light"
Ships light and dark.
Default"dark"