Dynamic Letter

One letter of the wordmark cuts through shape treatments on the beat, then lands on a final style.

Installation

$ pnpm dlx shadcn@latest add @remocn/dynamic-letter

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { DynamicLetter } from "@/components/remocn/dynamic-letter";
 
const DynamicLetterScene = () => (
  <DynamicLetter
    text="emocn"
    variants={["solid", "outline", "stripes", "dots"]}
    final="overflow"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="DynamicLetter"
    component={DynamicLetterScene}
    durationInFrames={110}
    fps={30}
    width={1280}
    height={720}
  />
);

The R mark and wordmark hold still while one letter (the first o by default) cuts through treatments such as outline, stripes and dots, tightening on the beat, then lands on the final treatment as the poster. Pass text, letterIndex, variants and final. Ships light and dark.

Props8

Prop	Type	Default
text	string"emocn" Lowercase letters set after the R mark.
letterIndex	number— Index in text of the letter that changes.
variants	DynamicLetterVariant[]DEFAULT_VARIANTS Treatments the letter cuts through, in order.
final	DynamicLetterVariant"overflow" Treatment the letter lands on and holds.
beat	number8 Frames per treatment at the start; cuts tighten from there.
accent	string"#3B5BFD" Accent colour for the mark and highlights; any CSS colour.
theme	"dark" \| "light""dark" Dark or light palette and ground.
speed	number1 Playback multiplier for the whole timeline; 1 is normal speed.

textstring
Lowercase letters set after the R mark.
Default"emocn"
letterIndexnumber
Index in text of the letter that changes.
variantsDynamicLetterVariant[]
Treatments the letter cuts through, in order.
DefaultDEFAULT_VARIANTS
finalDynamicLetterVariant
Treatment the letter lands on and holds.
Default"overflow"
beatnumber
Frames per treatment at the start; cuts tighten from there.
Default8
accentstring
Accent colour for the mark and highlights; any CSS colour.
Default"#3B5BFD"
theme"dark" | "light"
Dark or light palette and ground.
Default"dark"
speednumber
Playback multiplier for the whole timeline; 1 is normal speed.
Default1