Countdown

A monumental countdown numeral inside a ring resolves into a Live lockup

Installation

$ pnpm dlx shadcn@latest add @remocn/countdown

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { Countdown } from "@/components/remocn/countdown";
 
const CountdownScene = () => (
  <Countdown
    from={3}
    finalLabel="Live"
    caption="remocn 2.0"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="Countdown"
    component={CountdownScene}
    durationInFrames={130}
    fps={30}
    width={1280}
    height={720}
  />
);

Giant numerals count down from from, each held for beat frames and leaving by a ring wipe, a horizontal slice or a rush past the camera. The final label then hits with a spring over a glowing halo, with an accent dot and a small caption lockup underneath. Pass from, finalLabel and caption. It ships light and dark through the theme prop. The length shown is for the defaults of 3 numerals at 20 frames; it is from * beat + 32 in general.

Props9

Prop	Type	Default
from	number3 First number of the countdown.
finalLabel	string"Live" What the countdown lands on: "Live", a product name, a date.
indicator	booleantrue Show the small accent dot before the final label.
caption	string"remocn 2.0" Small lockup under the final label. Pass "" to hide it.
logo	React.ReactNode— Replaces the default Remocn mark in the lockup.
beat	number20 Frames per number.
accent	string"#3B5BFD" Colour of the ring sweep, cut line and final dot.
speed	number1 Playback speed multiplier; 1 is the designed pace.
theme	"dark" \| "light""dark" Ships light and dark.

fromnumber
First number of the countdown.
Default3
finalLabelstring
What the countdown lands on: "Live", a product name, a date.
Default"Live"
indicatorboolean
Show the small accent dot before the final label.
Defaulttrue
captionstring
Small lockup under the final label. Pass "" to hide it.
Default"remocn 2.0"
logoReact.ReactNode
Replaces the default Remocn mark in the lockup.
beatnumber
Frames per number.
Default20
accentstring
Colour of the ring sweep, cut line and final dot.
Default"#3B5BFD"
speednumber
Playback speed multiplier; 1 is the designed pace.
Default1
theme"dark" | "light"
Ships light and dark.
Default"dark"