Nonstop

A labeled counter rolls down from a number to zero and resolves into a big no-stops phrase.

Installation

$ pnpm dlx shadcn@latest add @remocn/nonstop

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { Nonstop } from "@/components/remocn/nonstop";
 
const NonstopScene = () => (
  <Nonstop label="From idea to export" from={3} unit="stops" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="Nonstop"
    component={NonstopScene}
    durationInFrames={185}
    fps={30}
    width={1280}
    height={720}
  />
);

A label sits above a counter that rolls down from from to zero beside unit, then the line resolves into the large phrase. Pass label, from and unit to count your own steps. It ships in light and dark through the theme prop.

Props7

Prop	Type	Default
label	string"From idea to export" Small line above the counter.
from	number3 Number the counter starts from.
unit	string"stops" Unit label next to the counter.
accent	string— Accent color override; falls back to the theme accent.
background	string— Background color override; falls back to the theme background.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Ships light and dark; picks the palette.

labelstring
Small line above the counter.
Default"From idea to export"
fromnumber
Number the counter starts from.
Default3
unitstring
Unit label next to the counter.
Default"stops"
accentstring
Accent color override; falls back to the theme accent.
backgroundstring
Background color override; falls back to the theme background.
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Ships light and dark; picks the palette.
Default"dark"