Band Shift

Horizontal bands slide across in a stagger, carrying colored blocks that swap one scene for the next

Installation

$ pnpm dlx shadcn@latest add @remocn/band-shift

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { BandShift } from "@/components/remocn/band-shift";
 
const BandShiftScene = () => (
  <BandShift
    from="Before."
    to="Now live."
    bands={6}
    accent="#3B5BFD"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="BandShift"
    component={BandShiftScene}
    durationInFrames={90}
    fps={30}
    width={1280}
    height={720}
  />
);

The from headline holds for delay frames. Then 5 to 7 horizontal bands slide across in alternating directions, each carrying a colored block, and the to scene lands as they pass. Pass from and to as short text or any React node; to="remocn" sets the Remocn logo. With the defaults the shift ends at frame 55.

Props9

Prop	Type	Default
from	React.ReactNode"Before." Outgoing scene: a short headline or any React node
to	React.ReactNode"remocn" Incoming scene carried in by the bands
bands	number6 Number of horizontal bands, clamped between 5 and 7
colors	string[]— Colors of the blocks riding between scenes; defaults to a mesh
delay	number18 Frames the outgoing scene holds before the shift
stagger	number3 Frames between neighbouring bands starting
accent	string"#3B5BFD" Accent color used by the scenes
speed	number1 Playback multiplier for the whole timeline
theme	"dark" \| "light""dark" Tone the incoming scene lands on

fromReact.ReactNode
Outgoing scene: a short headline or any React node
Default"Before."
toReact.ReactNode
Incoming scene carried in by the bands
Default"remocn"
bandsnumber
Number of horizontal bands, clamped between 5 and 7
Default6
colorsstring[]
Colors of the blocks riding between scenes; defaults to a mesh
delaynumber
Frames the outgoing scene holds before the shift
Default18
staggernumber
Frames between neighbouring bands starting
Default3
accentstring
Accent color used by the scenes
Default"#3B5BFD"
speednumber
Playback multiplier for the whole timeline
Default1
theme"dark" | "light"
Tone the incoming scene lands on
Default"dark"