Color Bars

Slanted fluted color bars whip across the frame and swap the outgoing shot for the incoming one

Installation

$ pnpm dlx shadcn@latest add @remocn/color-bars

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { ColorBars } from "@/components/remocn/color-bars";
 
const ColorBarsScene = () => (
  <ColorBars
    images={["/shots/before.png", "/shots/after.png"]}
    direction="right"
    bars={5}
    accent="#3B5BFD"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="ColorBars"
    component={ColorBarsScene}
    durationInFrames={86}
    fps={30}
    width={1280}
    height={720}
  />
);

Two to six slanted bars, tinted from accent, whip across the frame in a stagger. The outgoing shot is shoved along while the incoming shot arrives late and settles. Pass the two shots as scenes (React nodes) or images, set the travel with direction and angle, and without either it plays a built-in pair of scenes. It ships light and dark; the bars finish and the scene settles by frame 69 with 5 bars.

Props9

Prop	Type	Default
scenes	React.ReactNode[]— Outgoing and incoming shots as React nodes
images	string[]— Outgoing and incoming screenshots, used when scenes is not passed
direction	"right" \| "left" \| "up" \| "down""right" Which way the bars travel
angle	number16 Slant of the bar edges in degrees; 0 is a straight wipe
bars	number5 Number of bars, clamped between 4 and 6
colors	string[]— Override the derived bar colors, leading bar first
accent	string"#3B5BFD" Base color the bar colors are derived from
speed	number1 Playback multiplier for the whole timeline
theme	"dark" \| "light""dark" Light or dark built-in scenes and bar colors

scenesReact.ReactNode[]
Outgoing and incoming shots as React nodes
imagesstring[]
Outgoing and incoming screenshots, used when scenes is not passed
direction"right" | "left" | "up" | "down"
Which way the bars travel
Default"right"
anglenumber
Slant of the bar edges in degrees; 0 is a straight wipe
Default16
barsnumber
Number of bars, clamped between 4 and 6
Default5
colorsstring[]
Override the derived bar colors, leading bar first
accentstring
Base color the bar colors are derived from
Default"#3B5BFD"
speednumber
Playback multiplier for the whole timeline
Default1
theme"dark" | "light"
Light or dark built-in scenes and bar colors
Default"dark"