Chromatic Aberration Wipe

A high-energy transition built for DevTools demos and product reels. Two scenes slide past each other in just 5–8 frames, and on the middle of that window the entire container gets a red+cyan drop-shadow filter to fake RGB channel separation. The glitch is intentionally short — restraint is the whole point. Three to five frames is enough for the viewer's eye to register speed without ever consciously parsing the colors.

Installation

$ pnpm dlx shadcn@latest add @remocn/chromatic-aberration-wipe

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { ChromaticAberrationWipe } from "@/components/remocn/chromatic-aberration-wipe";

const ChromaticAberrationWipeScene = () => (
  <ChromaticAberrationWipe
    from={<SceneC />
);

export const RemotionRoot = () => (
  <Composition
    id="ChromaticAberrationWipe"
    component={ChromaticAberrationWipeScene}
    durationInFrames={90}
    fps={30}
    width={1280}
    height={720}
  />
);

Props

Prop	Type	Default	Description
`from`	`ReactNode`	—	The outgoing scene. Falls back to a labeled colored panel.
`to`	`ReactNode`	—	The incoming scene. Falls back to a labeled colored panel.
`direction`	`"left" \| "right"`	`"left"`	Direction the outgoing scene slides toward.
`transitionStart`	`number`	`durationInFrames * 0.4`	Frame at which the wipe begins.
`transitionDuration`	`number`	`7`	Length of the wipe in frames. Keep it short (5–8) for the glitch to land.
`aberrationOffset`	`number`	`8`	Horizontal offset in pixels for the red and cyan drop shadows during the peak frames.
`className`	`string`	—	Optional className for the outer container.

Less is more

The chromatic aberration should only flash for 3–5 frames at peak speed. Any longer and the viewer starts consciously reading the red and cyan fringes — which kills the illusion of raw velocity. Trust the subconscious; pull the filter the moment the slide decelerates.