Stock Scrub

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

Installation

$ pnpm dlx 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.

Props10

Prop	Type	Default
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	number1 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.

tickerstring
Ticker symbol shown on the stock page.
Default"RMCN"
namestring
Company name shown under the ticker.
Default"remocn Inc."
seriesnumber[]
Intraday prices, open → now. The first value is the open (the dashed baseline).
DefaultDAY
yearSeriesnumber[]
Prices for the 1Y range; rescaled so it ends on the same price as `series`.
DefaultYEAR
accentstring
Accent color for the buy button and highlights.
Default"#3B5BFD"
speednumber
Playback speed multiplier.
Default1
theme"light" | "dark"
Light or dark palette.
Default"dark"
lines[string, string, string, string]
Four lines beside the phone: live, scrub, range, buy.
groundGshPresetId
Gradients.sh preset id for the background shader.
groundParamsPartial<GradientParams>
Overrides for the background shader parameters.