Shot Clock

A shot clock counts down to 0.0 in red, then 'SHIPPED' lands 'at the buzzer'

Installation

$ pnpm dlx shadcn@latest add @remocn/shot-clock

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { ShotClock } from "@/components/remocn/shot-clock";
 
const ShotClockScene = () => (
  <ShotClock
    from={24}
    title="Shipped"
    subtitle="at the buzzer"
    period="Q4 · 00:24"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="ShotClock"
    component={ShotClockScene}
    durationInFrames={165}
    fps={30}
    width={1280}
    height={720}
  />
);

A large shot clock drops in with a light bar above and a possession bar below. Whole seconds tick down, the clock turns red at the tenths threshold and counts tenths, and at 0.0 the frame flashes and the light stays lit. The clock then shrinks upward and the title and subtitle slam in. Pass from, title, subtitle, label and period. It ships light and dark through the theme prop.

Props10

Prop	Type	Default
from	number24 Seconds on the clock when it starts. Whole seconds, then tenths below `tenthsBelow`.
tenthsBelow	number5 Below this many seconds the clock shows tenths and turns red.
title	string"Shipped" The big word that slams in at the buzzer. Set in caps.
subtitle	string"at the buzzer" The line under it.
label	string"Shot clock" Small label over the clock, left.
period	string"Q4 · 00:24" Small label over the clock, right.
alarm	string"#FF4433" Colour of the last seconds and the buzzer light.
accent	string"#3B5BFD" The live marker next to the period label.
theme	"dark" \| "light""dark" Ships light and dark.
speed	number1 Playback speed multiplier; 1 is the designed pace.

fromnumber
Seconds on the clock when it starts. Whole seconds, then tenths below `tenthsBelow`.
Default24
tenthsBelownumber
Below this many seconds the clock shows tenths and turns red.
Default5
titlestring
The big word that slams in at the buzzer. Set in caps.
Default"Shipped"
subtitlestring
The line under it.
Default"at the buzzer"
labelstring
Small label over the clock, left.
Default"Shot clock"
periodstring
Small label over the clock, right.
Default"Q4 · 00:24"
alarmstring
Colour of the last seconds and the buzzer light.
Default"#FF4433"
accentstring
The live marker next to the period label.
Default"#3B5BFD"
theme"dark" | "light"
Ships light and dark.
Default"dark"
speednumber
Playback speed multiplier; 1 is the designed pace.
Default1