# Stock Scrub
URL: https://remocn.dev/docs/product-scenes/stock-scrub

A phone stock page scrubs its price chart then opens a buy sheet

- Install: `npx shadcn@latest add @remocn/stock-scrub`
- Vibe: data
- Natural length: 255f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/stock-scrub
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { StockScrub } from "@/components/remocn/stock-scrub";

const StockScrubScene = () => <StockScrub ticker="ORBT" name="Orbit Labs" theme="light" />;

export const RemotionRoot = () => (
  <Composition
    id="StockScrub"
    component={StockScrubScene}
    durationInFrames={270}
    fps={30}
    width={1280}
    height={720}
  />
);
```

A phone shows a stock page whose price line draws in, then a finger presses and scrubs the chart left and right while the price readout follows. It taps the 1Y tab to morph the chart, then taps Buy to raise a buy sheet. Pass `ticker`, `name`, `series` and `yearSeries`, and `lines` for the headline beside the phone. It has a `theme` prop and ships light and dark (dark by default).

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `ticker` | `string` | `"RMCN"` | Ticker symbol shown on the stock page. |
| `name` | `string` | `"remocn Inc."` | Company name shown under the ticker. |
| `series` | `number[]` | `DAY` | Intraday prices, open → now. The first value is the open (the dashed baseline). |
| `yearSeries` | `number[]` | `YEAR` | Prices for the 1Y range; rescaled so it ends on the same price as `series`. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for the buy button and highlights. |
| `speed` | `number` | `1` | Playback speed multiplier. |
| `theme` | `"light" \| "dark"` | `"dark"` | Light or dark palette. |
| `lines` | `[string, string, string, string]` | — | Four lines beside the phone: live, scrub, range, buy. |
| `ground` | `GshPresetId` | — | Gradients.sh preset id for the background shader. |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the background shader parameters. |

## Use when
- A trading or investing app launch beat showing live price data and a quick buy.
- A fintech demo that drags through an intraday chart, switches to the 1Y range and opens a buy sheet.
- A data-forward mobile video where the chart interaction is the hero.

## Don't use when
- The data lives in a desktop analytics chart with tooltips — use `analytics-funnel`.
- You want a payments dashboard with stats and a feed — use `live-dashboard`.
- The flow is sending money rather than buying an asset — use `money-send`.