Block Swap

A solid block wipes over each line and the next line replaces it, ending with a highlighted word on a pill.

Installation
$ pnpm dlx shadcn@latest add @remocn/block-swap

Usage

tsx
// src/Root.tsx
import { Composition } from "remotion";
import { BlockSwap } from "@/components/remocn/block-swap";
 
const BlockSwapScene = () => (
  <BlockSwap
    lines={["Pick the beats you need.", "Render the launch."]}
    highlight="launch"
    accent="#3B5BFD"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="BlockSwap"
    component={BlockSwapScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

Each word of the first line is covered by a block that morphs into the next line, then uncovers the new words. The last line keeps highlight on a gradient pill. Pass lines as an array of sentences and highlight as the word to call out; it ships light and dark through theme.

Props6

PropTypeDefault
lines
string[]DEFAULT_LINES

Sentences shown in order; each one overwrites the previous

highlight
string"launch"

Word in the last line that lands on the gradient pill

accent
string"#3B5BFD"

Accent color (any valid CSS color)

background
string—

Overrides the theme's stage color

speed
number1

Playback speed multiplier

theme
"dark" | "light""dark"

Ships light and dark palettes

  • linesstring[]

    Sentences shown in order; each one overwrites the previous

    DefaultDEFAULT_LINES

  • highlightstring

    Word in the last line that lands on the gradient pill

    Default"launch"

  • accentstring

    Accent color (any valid CSS color)

    Default"#3B5BFD"

  • backgroundstring

    Overrides the theme's stage color

  • speednumber

    Playback speed multiplier

    Default1

  • theme"dark" | "light"

    Ships light and dark palettes

    Default"dark"