Chromatic Aberration Reveal

Reveal an image with an RGB split that converges into a clean final frame. Three channel-shifted layers spring to alignment with subtle staggering, plus a one-pass wave sweep during convergence. Supports in-view once, mount-triggered, and manual visibility control.

UniqueUI CLI

npx uniqueui add chromatic-aberration-reveal

shadcn CLI

npx shadcn@latest add https://uniqueui-platform.vercel.app/r/chromatic-aberration-reveal.json -y

shadcn path expects @/lib/utils (run shadcn init first). Same source file is installed to components/ui/.

Preview

Chromatic converge reveal

RGB split, then perfect convergence.

Usage

import { ChromaticAberrationReveal } from "@/components/ui/chromatic-aberration-reveal";

export default function Example() {
  return (
    <ChromaticAberrationReveal
      className="h-[420px] w-full rounded-2xl"
      src="https://images.unsplash.com/photo-1500964757637-c85e8a162699?auto=format&fit=crop&w=1600&q=80"
      alt="Mountain lake at dusk"
      splitDistance={16}
      staggerMs={80}
      trigger="in-view"
    />
  );
}

Props

Prop	Type	Description
`src`	`string`	Image URL rendered in the base and channel layers.
`alt`	`string`	Accessible alt text for the base image layer.
`splitDistance`	`number`	Initial horizontal channel offset in pixels (R = -distance, B = +distance).
`staggerMs`	`number`	Delay between each channel settling, in milliseconds.
`trigger`	`"in-view" \| "mount" \| "manual"`	Animation trigger mode. `in-view` runs once when entering viewport.
`isVisible`	`boolean`	Used with `trigger="manual"` to control reveal state externally.
`className`	`string`	Classes for the reveal wrapper.