Single Stroke

A giant 27 drawn in single strokes sits beside a coral 'Mar' panel and a demo-day line

Installation

$ pnpm dlx shadcn@latest add @remocn/single-stroke

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { SingleStroke } from "@/components/remocn/single-stroke";
 
const SingleStrokeScene = () => (
  <SingleStroke
    value="27"
    unit="Mar"
    label="Demo day. Every team shows a film."
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="SingleStroke"
    component={SingleStrokeScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

A coloured panel slides in and the number is drawn as one continuous stroke with a bright pen tip. As the stroke finishes, the unit text appears on the panel and the label fades in word by word. Pass value as digits only, plus unit and label. It ships light and dark through the theme prop; accent recolours the panel in dark and the stroke in light.

Props7

Prop	Type	Default
value	string"27" The number to draw. Digits only; other characters are skipped.
unit	string"Mar" Short word on the panel, such as a month abbreviation.
label	string"Demo day. Every team shows a film." Caption under the unit; words fade in one by one.
accent	string— Overrides the panel colour in dark, or the stroke colour in light.
background	string— Overrides the background colour of the stage.
speed	number1 Playback speed multiplier; 1 is the designed pace.
theme	"dark" \| "light""dark" Ships light and dark.

valuestring
The number to draw. Digits only; other characters are skipped.
Default"27"
unitstring
Short word on the panel, such as a month abbreviation.
Default"Mar"
labelstring
Caption under the unit; words fade in one by one.
Default"Demo day. Every team shows a film."
accentstring
Overrides the panel colour in dark, or the stroke colour in light.
backgroundstring
Overrides the background colour of the stage.
speednumber
Playback speed multiplier; 1 is the designed pace.
Default1
theme"dark" | "light"
Ships light and dark.
Default"dark"