Acronym Expand

An acronym expands letter by letter into its full name, with an eyebrow above and a subhead below.

Installation

$ pnpm dlx shadcn@latest add @remocn/acronym-expand

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { AcronymExpand } from "@/components/remocn/acronym-expand";
 
const AcronymExpandScene = () => (
  <AcronymExpand
    short="SDK"
    full="Software Development Kit"
    eyebrow="Now available"
    accent="#3B5BFD"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="AcronymExpand"
    component={AcronymExpandScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

The short form appears first, its letters spread apart and unfold into the full words, then the eyebrow and subhead fade in. Pass short, full, eyebrow and subhead to make it yours; it ships light and dark through theme.

Props8

Prop	Type	Default
short	string"MCP" The acronym shown large before it expands
full	string"Model Context Protocol" The full phrase the acronym expands into
eyebrow	string"Now in remocn" Small label above the expanded phrase; empty to hide
subhead	string"Your agent browses, installs and edits every component." One-line explanation under the phrase; empty to hide
accent	string"#3B5BFD" Accent color (any valid CSS color)
background	string— Overrides the theme's stage color
speed	number1 Playback speed multiplier
theme	"dark" \| "light""dark" Ships light and dark palettes

shortstring
The acronym shown large before it expands
Default"MCP"
fullstring
The full phrase the acronym expands into
Default"Model Context Protocol"
eyebrowstring
Small label above the expanded phrase; empty to hide
Default"Now in remocn"
subheadstring
One-line explanation under the phrase; empty to hide
Default"Your agent browses, installs and edits every component."
accentstring
Accent color (any valid CSS color)
Default"#3B5BFD"
backgroundstring
Overrides the theme's stage color
speednumber
Playback speed multiplier
Default1
theme"dark" | "light"
Ships light and dark palettes
Default"dark"