Ticker Tape

Bands of stock quotes scroll, brake to a stop on a hero symbol, which scales into a price poster.

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { TickerTape } from "@/components/remocn/ticker-tape";
 
const TickerTapeScene = () => (
  <TickerTape symbol="RMCN" price="128.40" change={12.4} name="remocn" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="TickerTape"
    component={TickerTapeScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

Seven bands of quotes run at speed in alternating directions, then brake until the middle band stops on the hero symbol. The side bands clear away and the hero quote scales into a poster with price and move. Pass symbol, price, change, symbols and name; it ships light and dark through theme.

Props9

Prop	Type	Default
symbol	string"RMCN" Hero symbol the middle band stops on.
price	string"128.40" Hero price, shown as typed.
change	number12.4 Hero move in percent; negative reads as a down move.
symbols	string[]SYMBOLS Other fictional symbols that fill the bands.
name	string"remocn" Product name under the poster; Remocn renders the real logo.
logo	React.ReactNode— React node that replaces the logo or name under the poster.
accent	string"#3B5BFD" Accent color for highlights and small marks.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Color theme, "dark" or "light".

symbolstring
Hero symbol the middle band stops on.
Default"RMCN"
pricestring
Hero price, shown as typed.
Default"128.40"
changenumber
Hero move in percent; negative reads as a down move.
Default12.4
symbolsstring[]
Other fictional symbols that fill the bands.
DefaultSYMBOLS
namestring
Product name under the poster; Remocn renders the real logo.
Default"remocn"
logoReact.ReactNode
React node that replaces the logo or name under the poster.
accentstring
Accent color for highlights and small marks.
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Color theme, "dark" or "light".
Default"dark"