Line Cascade

A large figure is drawn from cascading gradient lines that pile up and snap into place, with a caption.

Installation

$ pnpm dlx shadcn@latest add @remocn/line-cascade

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { LineCascade } from "@/components/remocn/line-cascade";
 
const LineCascadeScene = () => (
  <LineCascade value="240" caption="launch films rendered with remocn today" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="LineCascade"
    component={LineCascadeScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

Gradient lines rain down and land as flutes on a floor, drawing the figure's strokes until they snap into the solid numeral and a caption rises beneath. Pass value (digits plus a few symbols such as ., +, % and k) and caption; it ships light and dark through theme.

Props5

Prop	Type	Default
value	string"240" Figure to draw, digits plus a few symbols such as dot, plus and percent.
caption	string"launch films rendered with remocn today" Small line of text that rises 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 to draw, digits plus a few symbols such as dot, plus and percent.
Default"240"
captionstring
Small line of text that rises under the figure.
Default"launch films rendered with remocn today"
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"