Adventureland Registry
Motion / Effects

Chromatic Aberration

RGB-split fringing — a light drop-shadow variant and a heavy channel-split variant.

Two takes on RGB split. ChromaticAberrationLight is a cheap single-render fringe via offset red/cyan drop-shadows — readable on any content. ChromaticAberrationHeavy triple-renders the children with sepia + hue-rotate channels screen-blended for a stronger, radial aberration.

Installation

npx shadcn@latest add @adv/chromatic-aberration

Usage

import { ChromaticAberrationLight } from '@adv/motion';

<ChromaticAberrationLight strength={0.007}>
  <YourContent />
</ChromaticAberrationLight>

Example

Choker Reveal

Animated erode + roughened edges on a posterized cadence — a logo/shape reveal.

Kinetic Blur (whip-pan)

Velocity-driven directional motion blur that follows the underlying movement.

On this page

InstallationUsageExample