# Case Flip
URL: https://remocn.dev/docs/typography/case-flip

A headline flips glyph by glyph from lowercase to uppercase and back to its final casing

- Install: `npx shadcn@latest add @remocn/case-flip`
- Vibe: clean
- Natural length: 120f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/case-flip
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { CaseFlip } from "@/components/remocn/case-flip";

const CaseFlipScene = () => (
  <CaseFlip text="Make it LOUD" accentWord="LOUD" stagger={2} />
);

export const RemotionRoot = () => (
  <Composition
    id="CaseFlip"
    component={CaseFlipScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);
```

Every glyph starts lowercase, then a wave flips them to uppercase one by one with a squash-and-spring, and a second wave flips each to its final casing. The accent word then fills with a gradient while the baseline and x-height guides fade out. Pass `text` in its final casing and `accentWord`; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"Launch it LOUD"` | The headline in its final casing. |
| `accentWord` | `string` | `"LOUD"` | Word from `text` that lands in the accent gradient. |
| `stagger` | `number` | `2` | Frames between neighboring glyphs in each wave. |
| `showGuides` | `boolean` | `true` | Show the baseline and x-height guide lines. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for the highlighted word. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark. |
| `speed` | `number` | `1` | Playback speed multiplier. |

## Use when
- A headline beat where the casing itself is the joke, such as a quiet word turning LOUD.
- A title that should land with a word picked out in a gradient accent color.
- A typographic intro that benefits from baseline and x-height guides showing the glyph change.

## Don't use when
- You want letters decoding from random characters instead of flipping case — use `matrix-decode`.
- The text should simply fade up with no casing gag — use `staggered-fade-up`.
- You want one smooth morph between two phrases — use `kinetic-morph-text`.