Absorb Stack
A centred stack of small lines, ending in a red "on top.", on a dark brown ground
$ pnpm dlx shadcn@latest add @remocn/absorb-stackUsage
// 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
| Prop | Type | Default |
|---|---|---|
| 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.
Default
1 - theme"dark" | "light"
Color scheme; ships dark and light.
Default
"dark"