Rep Stack

A caps word scrolls past a gate as a reel of outlined copies, then locks as a cutout.

Installation

$ pnpm dlx shadcn@latest add @remocn/rep-stack

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { RepStack } from "@/components/remocn/rep-stack";
 
const RepStackScene = () => <RepStack word="AGAIN." reps={6} accent="#3B5BFD" />;
 
export const RemotionRoot = () => (
  <Composition
    id="RepStack"
    component={RepStackScene}
    durationInFrames={96}
    fps={30}
    width={1280}
    height={720}
  />
);

A reel of outlined copies of the word runs upward through a cap-height gate, braking, and the last copy settles into it as a cutout of the dusk band. The echoes above and below dim back. Pass word (one short word, trailing punctuation takes the accent) and reps for the number of copies; it ships light and dark through theme.

Props5

Prop	Type	Default
word	string"AGAIN." One short word, set in caps. Trailing punctuation takes the accent.
reps	number6 How many rows run through the gate before the last one locks.
accent	string"#3B5BFD" Color of the trailing punctuation.
theme	"dark" \| "light""dark" Light or dark ground; ships both.
speed	number1 Playback speed multiplier.

wordstring
One short word, set in caps. Trailing punctuation takes the accent.
Default"AGAIN."
repsnumber
How many rows run through the gate before the last one locks.
Default6
accentstring
Color of the trailing punctuation.
Default"#3B5BFD"
theme"dark" | "light"
Light or dark ground; ships both.
Default"dark"
speednumber
Playback speed multiplier.
Default1