Chunk Stack
"learn motion by making it" stacks one word per line with a yellow highlighter on "making"
Installation
$ pnpm dlx shadcn@latest add @remocn/chunk-stackUsage
tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ChunkStack } from "@/components/remocn/chunk-stack";
const ChunkStackScene = () => (
<ChunkStack text="learn motion by making it" highlight="making" />
);
export const RemotionRoot = () => (
<Composition
id="ChunkStack"
component={ChunkStackScene}
durationInFrames={130}
fps={30}
width={1280}
height={720}
/>
);The phrase rises into a stack, one word per line, then a highlighter bar opens behind the chosen word. Pass text and highlight; it ships light and dark.
Props6
| Prop | Type | Default |
|---|---|---|
| text | string"learn motion by making it" Phrase stacked one word per line. | |
| highlight | string"making" Word marked with the highlighter. | |
| accent | string— Accent colour (any CSS colour). | |
| background | string— Overrides the theme background colour. | |
| speed | number1 Playback multiplier; above 1 plays faster. | |
| theme | "dark" | "light""dark" Colour scheme; ships light and dark. | |
- textstring
Phrase stacked one word per line.
Default
"learn motion by making it" - highlightstring
Word marked with the highlighter.
Default
"making" - accentstring
Accent colour (any CSS colour).
- backgroundstring
Overrides the theme background colour.
- speednumber
Playback multiplier; above 1 plays faster.
Default
1 - theme"dark" | "light"
Colour scheme; ships light and dark.
Default
"dark"