Chromatic Image

Source: Aceternity UI ↗
Author: Aceternity UI
Licence: Aceternity UI licence (free component)

Loading…

A WebGL image splits its colour channels and warps toward the pointer.

Code

"use client";

import { ChromaticImage } from "@/lab/aceternity/ui/chromatic-image";

export default function ChromaticImageDemo() {
  return (
    <div className="flex h-full w-full items-center justify-center p-[4%]">
      <ChromaticImage
        src="/evidence/aeroo-space-ai/02-medal-diploma-badge.jpg"
        alt="A person standing beneath a red light"
        className="aspect-[4/5] h-full max-w-full rounded-[18px] outline-1 -outline-offset-1 outline-black/10 dark:outline-white/10"
      />
    </div>
  );
}

Prompt

Build "Chromatic Image", a canvas animation. What it does: A WebGL image splits its colour channels and warps toward the pointer. Write it as a single self-contained React component in TypeScript that fills its parent (w-full h-full), styled with Tailwind CSS. Technique: an HTML canvas, WebGL, a requestAnimationFrame loop, pointer tracking. It sits on a light background, in a square frame. Respect prefers-reduced-motion with a still state, pause work when the element is off screen, and keep it accessible. Original: https://ui.aceternity.com/components/chromatic-image (Aceternity UI, Aceternity UI licence (free component)).