Drop Timer

A countdown to a drop ends in a huge gradient 'LIVE NOW' with a URL and logo

Installation

$ pnpm dlx shadcn@latest add @remocn/drop-timer

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { DropTimer } from "@/components/remocn/drop-timer";
 
const DropTimerScene = () => (
  <DropTimer label="DROPS IN" from={5} live="LIVE NOW" url="acme.dev" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="DropTimer"
    component={DropTimerScene}
    durationInFrames={140}
    fps={30}
    width={1280}
    height={720}
  />
);

A clock counts down from from seconds, one film second per tick frames, and at zero it smashes into a full-bleed gradient payoff with your name, URL and a live dot. Pass label, from, live, name and url; it ships light and dark.

Props11

Prop	Type	Default
label	string"DROPS IN" Small line over the countdown.
from	number5 Seconds on the clock when the shot opens; it counts down to zero.
tick	number14 Frames per counted second (a film second, not a real one).
units	[string, string, string]["HRS", "MIN", "SEC"] Unit captions under the three digit pairs.
live	string"LIVE NOW" What the clock smashes into at zero, set full-bleed.
name	string"remocn" Brand over the payoff; "remocn" renders the real logo.
logo	React.ReactNode— Replaces the logo / name over the payoff.
url	string"remocn.dev" Line under the payoff.
accent	string"#3B5BFD" The small "live" dot beside the url.
theme	"dark" \| "light""dark" Colour scheme; ships light and dark.
speed	number1 Playback multiplier; above 1 plays faster.

labelstring
Small line over the countdown.
Default"DROPS IN"
fromnumber
Seconds on the clock when the shot opens; it counts down to zero.
Default5
ticknumber
Frames per counted second (a film second, not a real one).
Default14
units[string, string, string]
Unit captions under the three digit pairs.
Default["HRS", "MIN", "SEC"]
livestring
What the clock smashes into at zero, set full-bleed.
Default"LIVE NOW"
namestring
Brand over the payoff; "remocn" renders the real logo.
Default"remocn"
logoReact.ReactNode
Replaces the logo / name over the payoff.
urlstring
Line under the payoff.
Default"remocn.dev"
accentstring
The small "live" dot beside the url.
Default"#3B5BFD"
theme"dark" | "light"
Colour scheme; ships light and dark.
Default"dark"
speednumber
Playback multiplier; above 1 plays faster.
Default1