Flash Sweep

A tilted band of light sweeps across the frame and swaps one shot for the next

Installation

$ pnpm dlx shadcn@latest add @remocn/flash-sweep

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { FlashSweep } from "@/components/remocn/flash-sweep";
 
const FlashSweepScene = () => (
  <FlashSweep
    images={["/shots/one.png", "/shots/two.png", "/shots/three.png"]}
    direction="right"
    hold={30}
    accent="#3B5BFD"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="FlashSweep"
    component={FlashSweepScene}
    durationInFrames={156}
    fps={30}
    width={1280}
    height={720}
  />
);

A tilted band of light, or a shadow in the dark variant, crosses the frame, blows out at the middle and swaps the shot, which then settles. Pass scenes for a chain where every neighboring pair gets one sweep, or from and to for a single swap, or images for screenshots. With the default four shots it ends at frame 140; each extra shot adds hold plus duration frames, and a single pair ends at frame 56.

Props13

Prop	Type	Default
from	React.ReactNode— Outgoing shot
to	React.ReactNode— Incoming shot
scenes	React.ReactNode[]— A chain of shots; each neighboring pair gets one sweep
images	string[]— Screenshots, used when no React shots are passed
variant	"light" \| "dark"— Light burns through to white; dark passes a shadow
angle	number22 Tilt of the band from vertical, in degrees
direction	"right" \| "left""right" Which way the band travels
duration	number12 Frames the band takes to cross the frame; 8 to 14 reads best
hold	number30 Frames each shot holds before the next sweep
tint	string— Color of the light; defaults to warm white
accent	string"#3B5BFD" Accent color used by the built-in shots
speed	number1 Playback multiplier for the whole timeline
theme	"dark" \| "light""dark" Light or dark built-in shots; sets the default variant

fromReact.ReactNode
Outgoing shot
toReact.ReactNode
Incoming shot
scenesReact.ReactNode[]
A chain of shots; each neighboring pair gets one sweep
imagesstring[]
Screenshots, used when no React shots are passed
variant"light" | "dark"
Light burns through to white; dark passes a shadow
anglenumber
Tilt of the band from vertical, in degrees
Default22
direction"right" | "left"
Which way the band travels
Default"right"
durationnumber
Frames the band takes to cross the frame; 8 to 14 reads best
Default12
holdnumber
Frames each shot holds before the next sweep
Default30
tintstring
Color of the light; defaults to warm white
accentstring
Accent color used by the built-in shots
Default"#3B5BFD"
speednumber
Playback multiplier for the whole timeline
Default1
theme"dark" | "light"
Light or dark built-in shots; sets the default variant
Default"dark"