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-stack

Usage

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

PropTypeDefault
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.

    Default1

  • theme"dark" | "light"

    Colour scheme; ships light and dark.

    Default"dark"