# Ticker Tape
URL: https://remocn.dev/docs/numbers/ticker-tape

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

- Install: `npx shadcn@latest add @remocn/ticker-tape`
- Vibe: data
- Natural length: 130f @ 30fps

## Installation

```bash
npx 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`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `symbol` | `string` | `"RMCN"` | Hero symbol the middle band stops on. |
| `price` | `string` | `"128.40"` | Hero price, shown as typed. |
| `change` | `number` | `12.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` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color theme, "dark" or "light". |

## Use when
- A funding, valuation or growth moment told as a market quote.
- A fictional ticker as the hero of a product beat.
- A finance-styled intro that ends on one symbol, price and percent change.

## Don't use when
- The beat is an IPO price print — use `ipo-open`.
- You show a price rally on a chart — use `candle-rally`.
- You want a rolling live counter — use `live-ticker`.