Sold Out

A stock counter races to zero, then a tilted chrome 'SOLD OUT' band slams across.

Installation

$ pnpm dlx shadcn@latest add @remocn/sold-out

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { SoldOut } from "@/components/remocn/sold-out";
 
const SoldOutScene = () => <SoldOut stock={64} unit="LEFT" stamp="SOLD OUT" tail="every launch." />;
 
export const RemotionRoot = () => (
  <Composition
    id="SoldOut"
    component={SoldOutScene}
    durationInFrames={155}
    fps={30}
    width={1280}
    height={720}
  />
);

'128 LEFT' punches in, the reels race down to ten, then tick down hard with a LOW STOCK flash and red figures. At zero the diagonal band slams across with the stamp, and a subline rises. Pass stock, unit, stamp, lead and tail; it ships light and dark through theme.

Props9

Prop	Type	Default
stock	number128 Stock when the shot opens; it races down to zero.
unit	string"LEFT" Word after the counter.
warning	string"LOW STOCK" Tag that flashes once the stock hits ten.
stamp	string"SOLD OUT" Set huge on the diagonal band at zero.
lead	string"Restocking:" Subline lead, in the grotesk.
tail	string"every launch." Subline accent, in the serif italic.
theme	"dark" \| "light""dark" Light or dark ground; ships both.
speed	number1 Playback speed multiplier.
accent	string— Unused; kept for API parity, the band uses a fixed chrome gradient.

stocknumber
Stock when the shot opens; it races down to zero.
Default128
unitstring
Word after the counter.
Default"LEFT"
warningstring
Tag that flashes once the stock hits ten.
Default"LOW STOCK"
stampstring
Set huge on the diagonal band at zero.
Default"SOLD OUT"
leadstring
Subline lead, in the grotesk.
Default"Restocking:"
tailstring
Subline accent, in the serif italic.
Default"every launch."
theme"dark" | "light"
Light or dark ground; ships both.
Default"dark"
speednumber
Playback speed multiplier.
Default1
accentstring
Unused; kept for API parity, the band uses a fixed chrome gradient.