remocnChromatic Aberration Wipe
An ultra-fast slide transition with an RGB glitch on the peak frames
Installation
$ pnpm dlx shadcn@latest add @remocn/chromatic-aberration-wipeUsage
// 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.