Caret Letter

A blinking caret types a word, then slides in and morphs into the missing letter

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { CaretLetter } from "@/components/remocn/caret-letter";
 
const CaretLetterScene = () => (
  <CaretLetter
    word="launch"
    stemIndex={0}
    subline="Ship the demo video in an afternoon."
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="CaretLetter"
    component={CaretLetterScene}
    durationInFrames={225}
    fps={30}
    width={1280}
    height={720}
  />
);

A caret blinks in and types the word except for one letter, slides over to that spot, the word opens to make room, and the caret morphs into the letter, then a grey subline fades in. Pass word and stemIndex (the letter the caret turns into; pick a plain stem such as l, I or 1), plus subline and accent. It ships light and dark through theme, defaulting to light.

Props6

Prop	Type	Default
word	string"launch" The word; the caret types every letter except the stem.
stemIndex	number0 Index of the letter the caret becomes; pick a plain stem such as l or I.
subline	string"Animated components for your next release." Small grey line under the word.
accent	string"#3B5BFD" Color of the caret and of the letter it becomes.
theme	"dark" \| "light""light" Ships light and dark.
speed	number1 Playback speed multiplier.

wordstring
The word; the caret types every letter except the stem.
Default"launch"
stemIndexnumber
Index of the letter the caret becomes; pick a plain stem such as l or I.
Default0
sublinestring
Small grey line under the word.
Default"Animated components for your next release."
accentstring
Color of the caret and of the letter it becomes.
Default"#3B5BFD"
theme"dark" | "light"
Ships light and dark.
Default"light"
speednumber
Playback speed multiplier.
Default1