Candle Rally

Candlesticks rally past a prior high as 'ALL-TIME HIGH' lands beside a price tag

Installation

$ pnpm dlx shadcn@latest add @remocn/candle-rally

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { CandleRally } from "@/components/remocn/candle-rally";
 
const CandleRallyScene = () => (
  <CandleRally
    symbol="ACME"
    price={96.5}
    prevHigh={88}
    headline="Record"
    headline2="quarter"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="CandleRally"
    component={CandleRallyScene}
    durationInFrames={160}
    fps={30}
    width={1280}
    height={720}
  />
);

Candlesticks build left to right, the last one breaks through a dashed previous-high line, and a price tag rides its wick before a two-line headline slams in. Pass symbol, price, prevHigh, and the headline and headline2 words. Ships dark and light via theme.

Props8

Prop	Type	Default
symbol	string"RMCN" Ticker on the price tag riding the last wick. Fictional.
price	number128.4 Where the last candle closes; printed on the tag.
prevHigh	number112 The previous high the rally breaks through (dashed level).
headline	string"All-time" First line of the slam.
headline2	string"high" Second line of the slam.
accent	string"#3B5BFD" Accent color for the hero element.
speed	number1 Playback multiplier.
theme	"dark" \| "light""dark" Dark or light palette.

symbolstring
Ticker on the price tag riding the last wick. Fictional.
Default"RMCN"
pricenumber
Where the last candle closes; printed on the tag.
Default128.4
prevHighnumber
The previous high the rally breaks through (dashed level).
Default112
headlinestring
First line of the slam.
Default"All-time"
headline2string
Second line of the slam.
Default"high"
accentstring
Accent color for the hero element.
Default"#3B5BFD"
speednumber
Playback multiplier.
Default1
theme"dark" | "light"
Dark or light palette.
Default"dark"