Long Vowel

A serif word stretches one vowel into a long drawl, colored in a warm gradient, with an italic caption.

Installation

$ pnpm dlx shadcn@latest add @remocn/long-vowel

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { LongVowel } from "@/components/remocn/long-vowel";
 
const LongVowelScene = () => <LongVowel word="Wow" repeat={6} rest="that was fast." />;
 
export const RemotionRoot = () => (
  <Composition
    id="LongVowel"
    component={LongVowelScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

The word rises into place, then the chosen letter is drawn out with spring-driven copies that fan into a gradient trail; the caption words then slide up under it. Pass word, the letter to stretch (defaults to the first vowel), repeat for how many copies, and rest for the caption. It takes a theme prop and ships light and dark.

Props8

Prop	Type	Default
word	string"Way" The word whose vowel gets stretched.
letter	string— Which letter to stretch; defaults to the first vowel.
repeat	number5 How many extra copies of the letter are drawn out.
rest	string"less keyframing." Caption set in italic under the word; empty for none.
accent	string"#3B5BFD" Accent color that seeds the gradient across the stretched letters.
background	string— Override the background color; use "transparent" to composite over your own.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Light or dark ground; the component ships both.

wordstring
The word whose vowel gets stretched.
Default"Way"
letterstring
Which letter to stretch; defaults to the first vowel.
repeatnumber
How many extra copies of the letter are drawn out.
Default5
reststring
Caption set in italic under the word; empty for none.
Default"less keyframing."
accentstring
Accent color that seeds the gradient across the stretched letters.
Default"#3B5BFD"
backgroundstring
Override the background color; use "transparent" to composite over your own.
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Light or dark ground; the component ships both.
Default"dark"