# Long Vowel
URL: https://remocn.dev/docs/typography/long-vowel

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

- Install: `npx shadcn@latest add @remocn/long-vowel`
- Vibe: playful
- Natural length: 81f @ 30fps

## Installation

```bash
npx 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.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `word` | `string` | `"Way"` | The word whose vowel gets stretched. |
| `letter` | `string` | — | Which letter to stretch; defaults to the first vowel. |
| `repeat` | `number` | `5` | 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` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark ground; the component ships both. |

## Use when
- A tagline that plays on emphasis, like a word drawn out for comic effect, followed by a short punchline.
- A casual, human beat that breaks up a run of tight product shots with a single stretched word.
- A hero line where a short word plus a caption is the whole scene.

## Don't use when
- You want letters to fly in and smear sideways - use `stretch-in`.
- The effect should be width and weight flexing on a whole word - use `axis-flex`.
- The line is serious or data-heavy and needs no comic stretch - use `tracking-in`.