Stem Stretch

The stems of a figure stretch into tall gradient stripes, then a caption rises beneath.

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { StemStretch } from "@/components/remocn/stem-stretch";
 
const StemStretchScene = () => (
  <StemStretch value="4 hours" label="back, every week" steps={4} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="StemStretch"
    component={StemStretchScene}
    durationInFrames={135}
    fps={30}
    width={1280}
    height={720}
  />
);

The figure rises in, then in steps springy snaps its vertical stems stretch apart into long stripes with a gradient glow. The caption rises in word by word below. Pass value, label and steps; it ships light and dark through theme.

Props6

Prop	Type	Default
value	string"4 hours" Heading text whose stems stretch, such as a number and a unit.
label	string"back, every week" Caption that rises in word by word under the figure.
steps	number4 Number of snaps the stretch is split into.
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
Heading text whose stems stretch, such as a number and a unit.
Default"4 hours"
labelstring
Caption that rises in word by word under the figure.
Default"back, every week"
stepsnumber
Number of snaps the stretch is split into.
Default4
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"