Case Flip

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

Installation

$ pnpm dlx 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.

Props7

Prop	Type	Default
text	string"Launch it LOUD" The headline in its final casing.
accentWord	string"LOUD" Word from `text` that lands in the accent gradient.
stagger	number2 Frames between neighboring glyphs in each wave.
showGuides	booleantrue 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	number1 Playback speed multiplier.

textstring
The headline in its final casing.
Default"Launch it LOUD"
accentWordstring
Word from `text` that lands in the accent gradient.
Default"LOUD"
staggernumber
Frames between neighboring glyphs in each wave.
Default2
showGuidesboolean
Show the baseline and x-height guide lines.
Defaulttrue
accentstring
Accent color for the highlighted word.
Default"#3B5BFD"
theme"dark" | "light"
Ships light and dark.
Default"dark"
speednumber
Playback speed multiplier.
Default1