Indent Steps

Up to five lines rise in, each tabbing one step further right like indented code, then one word lights up.

Installation

$ pnpm dlx shadcn@latest add @remocn/indent-steps

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { IndentSteps } from "@/components/remocn/indent-steps";
 
const IndentStepsScene = () => (
  <IndentSteps
    lines={["Fork the scene.", "Change the props.", "Render tonight."]}
    highlight="tonight"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="IndentSteps"
    component={IndentStepsScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

Each line rises from a mask and tabs one step further right with a small snap and a guide line, with optional line numbers in the gutter. Once the last line lands, the highlight word fills with a gradient. Pass up to five lines; set exit to outdent and slide them out over the last 18 frames. It ships light and dark.

Props8

Prop	Type	Default
lines	string[]— Up to five lines, each indented one step more than the last.
highlight	string"tonight" Word or phrase that turns to a gradient at the end; case-insensitive.
lineNumbers	booleantrue Show a mono line-number gutter beside the lines.
exit	booleanfalse Outdent and slide the lines out during the final 18 frames.
accent	string"#3B5BFD" Color of the guide line that flashes after each tab.
background	string— Background fill; pass "transparent" to drop it.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Light or dark palette.

linesstring[]
Up to five lines, each indented one step more than the last.
highlightstring
Word or phrase that turns to a gradient at the end; case-insensitive.
Default"tonight"
lineNumbersboolean
Show a mono line-number gutter beside the lines.
Defaulttrue
exitboolean
Outdent and slide the lines out during the final 18 frames.
Defaultfalse
accentstring
Color of the guide line that flashes after each tab.
Default"#3B5BFD"
backgroundstring
Background fill; pass "transparent" to drop it.
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Light or dark palette.
Default"dark"