Live Ticker

A big comma-separated counter rolls its digits up like a live ticker with a feed above

Installation

$ pnpm dlx shadcn@latest add @remocn/live-ticker

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { LiveTicker } from "@/components/remocn/live-ticker";
 
const LiveTickerScene = () => (
  <LiveTicker
    value={12480312}
    unit="renders"
    kicker="Live"
    feed={["Lumen", "Kite", "Orbit"]}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="LiveTicker"
    component={LiveTickerScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

A large comma-separated counter rises into place with its columns already ticking, while dots and small pills slide in from both edges and get swallowed by the number, each giving it a bump. The streams then dry up, the columns brake and settle on value, and a label with a unit word and the product name rises beneath. Pass value, unit, name, kicker and feed. It ships light and dark through the theme prop.

Props9

Prop	Type	Default
value	number12480312 Where the counter lands and freezes.
unit	string"renders" Serif italic word under the frozen number.
name	string"remocn" Product after "on"; "remocn" renders the real logo.
logo	React.ReactNode— Replaces the logo / name in the label.
kicker	string"Live" Small caps tag above the number while it runs.
feed	string[]— Customer names riding the transaction pills.
accent	string"#3B5BFD" Colour of the highlighted figures and the small marker dots.
speed	number1 Playback speed multiplier; 1 is the designed pace.
theme	"dark" \| "light""dark" Ships light and dark.

valuenumber
Where the counter lands and freezes.
Default12480312
unitstring
Serif italic word under the frozen number.
Default"renders"
namestring
Product after "on"; "remocn" renders the real logo.
Default"remocn"
logoReact.ReactNode
Replaces the logo / name in the label.
kickerstring
Small caps tag above the number while it runs.
Default"Live"
feedstring[]
Customer names riding the transaction pills.
accentstring
Colour of the highlighted figures and the small marker dots.
Default"#3B5BFD"
speednumber
Playback speed multiplier; 1 is the designed pace.
Default1
theme"dark" | "light"
Ships light and dark.
Default"dark"