Stripe Count

A figure counts up on a bold full-bleed color field as stripes fill its outline, under a caption band.

Installation

$ pnpm dlx shadcn@latest add @remocn/stripe-count

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { StripeCount } from "@/components/remocn/stripe-count";
 
const StripeCountScene = () => <StripeCount value={184} accent="#FF4F00" label="scenes that take your brand colour from one prop" />;
 
export const RemotionRoot = () => (
  <Composition
    id="StripeCount"
    component={StripeCountScene}
    durationInFrames={130}
    fps={30}
    width={1280}
    height={720}
  />
);

The frame floods with the accent color and a dark caption band sits at the top. The figure counts up as an outline while horizontal stripes sweep across and thicken until the digits are solid dark; the caption rises in word by word. Pass value, from and label; stripes sets the stripe count and accent the frame color. It ships light and dark through theme.

Props10

Prop	Type	Default
value	number184 The number the count lands on.
from	number0 Starting number of the count.
prefix	string"" Text before the number.
suffix	string"" Text after the number.
label	string"scenes that take your brand colour from one prop" Caption in the top band, rising word by word.
stripes	number12 How many horizontal stripes fill the figure.
accent	string— Full-bleed frame color; defaults to orange.
background	string— Fill of the caption band; defaults to the theme field.
speed	number1 Playback speed multiplier.
theme	"dark" \| "light""dark" Light or dark palette.

valuenumber
The number the count lands on.
Default184
fromnumber
Starting number of the count.
Default0
prefixstring
Text before the number.
Default""
suffixstring
Text after the number.
Default""
labelstring
Caption in the top band, rising word by word.
Default"scenes that take your brand colour from one prop"
stripesnumber
How many horizontal stripes fill the figure.
Default12
accentstring
Full-bleed frame color; defaults to orange.
backgroundstring
Fill of the caption band; defaults to the theme field.
speednumber
Playback speed multiplier.
Default1
theme"dark" | "light"
Light or dark palette.
Default"dark"