Pass Swap

An object sweeps across the frame and each pass swaps the headline to the next line.

Installation

$ pnpm dlx shadcn@latest add @remocn/pass-swap

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { PassSwap } from "@/components/remocn/pass-swap";
 
const PassSwapScene = () => (
  <PassSwap lines={["Copy the code.", "Own every frame.", "Ship the film."]} shape="disc" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="PassSwap"
    component={PassSwapScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

A slab or disc crosses the frame, and every pass replaces the headline with the next entry in lines. Pass lines, and use src with a transparent PNG to sweep your own product cutout instead of the built-in shape. It ships in light and dark through the theme prop.

Props7

Prop	Type	Default
lines	string[]— Headlines in order; each pass of the object swaps to the next one.
shape	"slab" \| "disc" \| "mixed""mixed" Object when no `src` is given; "mixed" alternates slab and disc per pass.
src	string— A product cutout (transparent PNG) to sweep instead of the shape.
accentLastWord	booleantrue Fill the last word of the final line with the object gradient.
accent	string"#3B5BFD" Accent color override; falls back to the theme accent.
theme	"dark" \| "light""dark" Ships light and dark; picks the palette.
speed	number1 Playback speed multiplier for the whole timeline.

linesstring[]
Headlines in order; each pass of the object swaps to the next one.
shape"slab" | "disc" | "mixed"
Object when no `src` is given; "mixed" alternates slab and disc per pass.
Default"mixed"
srcstring
A product cutout (transparent PNG) to sweep instead of the shape.
accentLastWordboolean
Fill the last word of the final line with the object gradient.
Defaulttrue
accentstring
Accent color override; falls back to the theme accent.
Default"#3B5BFD"
theme"dark" | "light"
Ships light and dark; picks the palette.
Default"dark"
speednumber
Playback speed multiplier for the whole timeline.
Default1