Zero Stretch

The zero in a number stretches into a glossy pill that holds a label word, then a caption lands.

Installation

$ pnpm dlx shadcn@latest add @remocn/zero-stretch

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { ZeroStretch } from "@/components/remocn/zero-stretch";
 
const ZeroStretchScene = () => (
  <ZeroStretch value="200" label="components" caption="Ready to ship. Copy one in, own every frame." />
);
 
export const RemotionRoot = () => (
  <Composition
    id="ZeroStretch"
    component={ZeroStretchScene}
    durationInFrames={135}
    fps={30}
    width={1280}
    height={720}
  />
);

The digits rise in, then the first zero springs open into a glossy pill that carries the label word. The caption rises in below. Pass value (a zero is added if it has none), label and caption; it ships light and dark through theme.

Props6

Prop	Type	Default
value	string"200" Figure whose zero stretches, as text. A zero is added if missing.
label	string"components" Word held inside the stretched pill.
caption	string"Ready to ship. Copy one in, own every frame." Line that rises in under the figure.
accent	string"#3B5BFD" Accent color for highlights and small marks.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Color theme, "dark" or "light".

valuestring
Figure whose zero stretches, as text. A zero is added if missing.
Default"200"
labelstring
Word held inside the stretched pill.
Default"components"
captionstring
Line that rises in under the figure.
Default"Ready to ship. Copy one in, own every frame."
accentstring
Accent color for highlights and small marks.
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Color theme, "dark" or "light".
Default"dark"