Block Swap
A solid block wipes over each line and the next line replaces it, ending with a highlighted word on a pill.
$ pnpm dlx shadcn@latest add @remocn/block-swapUsage
// 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
| Prop | Type | Default |
|---|---|---|
| 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
Default
DEFAULT_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
Default
1 - theme"dark" | "light"
Ships light and dark palettes
Default
"dark"