Domino Run

Dominoes tip over in a chain, each bigger than the last, until the largest sets off a big stat.

Installation

$ pnpm dlx shadcn@latest add @remocn/domino-run

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { DominoRun } from "@/components/remocn/domino-run";
 
const DominoRunScene = () => <DominoRun count={13} value="10x" caption="Every push tips a bigger one." />;
 
export const RemotionRoot = () => (
  <Composition
    id="DominoRun"
    component={DominoRunScene}
    durationInFrames={165}
    fps={30}
    width={1280}
    height={720}
  />
);

A row of dominoes, each taller than the one before, tips over one after another until the largest falls and the big value and caption fade in. Pass count (5 to 24) for the number of dominoes, plus value and caption. It ships light and dark through theme.

Props6

Prop	Type	Default
count	number13 Number of dominoes, from 5 to 24.
value	string"10×" The stat revealed when the last domino falls.
caption	string"Every push tips a bigger one." Caption under the stat.
accent	string"#3B5BFD" Accent color of the stat gradient.
theme	"dark" \| "light""dark" Light or dark palette.
speed	number1 Playback speed multiplier.

countnumber
Number of dominoes, from 5 to 24.
Default13
valuestring
The stat revealed when the last domino falls.
Default"10×"
captionstring
Caption under the stat.
Default"Every push tips a bigger one."
accentstring
Accent color of the stat gradient.
Default"#3B5BFD"
theme"dark" | "light"
Light or dark palette.
Default"dark"
speednumber
Playback speed multiplier.
Default1