Escalate Cards

Cards flash one word each, accelerating until the last word fills the frame over a date

Installation

$ pnpm dlx shadcn@latest add @remocn/escalate-cards

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { EscalateCards } from "@/components/remocn/escalate-cards";
 
const EscalateCardsScene = () => (
  <EscalateCards words={["ONE", "CODEBASE", "EVERY", "LAUNCH"]} date="OCTOBER 30" accel={0.6} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="EscalateCards"
    component={EscalateCardsScene}
    durationInFrames={130}
    fps={30}
    width={1280}
    height={720}
  />
);

One word per card flashes in, each card shorter than the last, until the final word fills the frame and a date cuts in under it. Pass words, date, firstBeat and accel; it ships light and dark.

Props7

Prop	Type	Default
words	string[]["ONE", "CODEBASE", "EVERY", "LAUNCH"] One word per card, smallest first. The last one fills the frame and holds.
date	string"OCTOBER 30" Small line that cuts in under the last card. Pass "" to hide.
firstBeat	number26 Length of the first card in frames. Every next card is shorter.
accel	number0.6 Each card lasts this share of the one before: below 1 the cuts accelerate.
accent	string"#3B5BFD" Accent colour (any CSS colour).
speed	number1 Playback multiplier.
theme	"dark" \| "light""dark" Colour scheme; ships light and dark.

wordsstring[]
One word per card, smallest first. The last one fills the frame and holds.
Default["ONE", "CODEBASE", "EVERY", "LAUNCH"]
datestring
Small line that cuts in under the last card. Pass "" to hide.
Default"OCTOBER 30"
firstBeatnumber
Length of the first card in frames. Every next card is shorter.
Default26
accelnumber
Each card lasts this share of the one before: below 1 the cuts accelerate.
Default0.6
accentstring
Accent colour (any CSS colour).
Default"#3B5BFD"
speednumber
Playback multiplier.
Default1
theme"dark" | "light"
Colour scheme; ships light and dark.
Default"dark"