Absorb Stack

A centred stack of small lines, ending in a red "on top.", on a dark brown ground

Installation
$ pnpm dlx shadcn@latest add @remocn/absorb-stack

Usage

tsx
// src/Root.tsx
import { Composition } from "remotion";
import { AbsorbStack } from "@/components/remocn/absorb-stack";
 
const AbsorbStackScene = () => <AbsorbStack lines={["made to", "sink into", "your cut,", "not sit", "on top."]} accentLine={4} />;
 
export const RemotionRoot = () => (
  <Composition
    id="AbsorbStack"
    component={AbsorbStackScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

A stack of small lowercase lines fades in from the center outward, spread wide, then eases together into a tight block, with the last line in the accent color. Pass lines (one string per line) and optionally accentLine for which line gets the accent.

Props6

PropTypeDefault
lines
string[]—

Lines of text, centered and set in lowercase.

accentLine
number—

Index of the line set in the accent color; defaults to the last.

accent
string—

Color of the accented line; defaults to the theme accent.

background
string—

Stage fill color; pass "transparent" to overlay your own footage.

speed
number1

Playback multiplier for the whole timeline.

theme
"dark" | "light""dark"

Color scheme; ships dark and light.

  • linesstring[]

    Lines of text, centered and set in lowercase.

  • accentLinenumber

    Index of the line set in the accent color; defaults to the last.

  • accentstring

    Color of the accented line; defaults to the theme accent.

  • backgroundstring

    Stage fill color; pass "transparent" to overlay your own footage.

  • speednumber

    Playback multiplier for the whole timeline.

    Default1

  • theme"dark" | "light"

    Color scheme; ships dark and light.

    Default"dark"