IPO Open

A huge ticker symbol opens on a bell as the first trade price races up with a percent-change chip.

Installation

$ pnpm dlx shadcn@latest add @remocn/ipo-open

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { IpoOpen } from "@/components/remocn/ipo-open";
 
const IpoOpenScene = () => <IpoOpen symbol="RMCN" ipoPrice={18} openPrice={42.6} label="Listed today" />;
 
export const RemotionRoot = () => (
  <Composition
    id="IpoOpen"
    component={IpoOpenScene}
    durationInFrames={140}
    fps={30}
    width={1280}
    height={720}
  />
);

A mono line and a huge ticker symbol rise in with the IPO price underneath; on the bell a two-frame flash cuts in, the corner clock flips to the open time and a shockwave line tears across. The opening price then races up on rolling digit reels, a percent-up chip counts with it, and a sunrise gradient climbs behind. Pass symbol, ipoPrice, openPrice and label; use name or logo for the corner bug. It ships light and dark through theme.

Props10

Prop	Type	Default
symbol	string"RMCN" Ticker symbol, set huge. Fictional, 1–5 capital letters reads best.
label	string"Listed today" Small mono line above the symbol.
ipoPrice	number18 The IPO price the opening print starts from.
openPrice	number42.6 The first trade the price races to.
openTime	string"09:30" Clock in the corner; ticks over to this on the bell.
name	string"remocn" Brand in the corner bug; "remocn" renders the real logo.
logo	React.ReactNode— Replaces the logo / name in the corner bug.
accent	string"#3B5BFD" Accent color for the gradient and chip.
speed	number1 Playback multiplier.
theme	"dark" \| "light""dark" Light or dark palette.

symbolstring
Ticker symbol, set huge. Fictional, 1–5 capital letters reads best.
Default"RMCN"
labelstring
Small mono line above the symbol.
Default"Listed today"
ipoPricenumber
The IPO price the opening print starts from.
Default18
openPricenumber
The first trade the price races to.
Default42.6
openTimestring
Clock in the corner; ticks over to this on the bell.
Default"09:30"
namestring
Brand in the corner bug; "remocn" renders the real logo.
Default"remocn"
logoReact.ReactNode
Replaces the logo / name in the corner bug.
accentstring
Accent color for the gradient and chip.
Default"#3B5BFD"
speednumber
Playback multiplier.
Default1
theme"dark" | "light"
Light or dark palette.
Default"dark"