Skip to documentation content
|

Chromatic Image

Warp an image toward the pointer with chromatic RGB separation.

chromatic-image-demo

Overview

Chromatic Image adds pointer-driven displacement, RGB separation, zoom, and perspective tilt to an image. The original image remains available as a fallback while WebGL loads or when WebGL is unavailable.

The playground uses free Unsplash photographs by Marc Wieland and Martin Péchy.

Installation
npm install honestui

Usage

 
import { ChromaticImage } from "honestui/shaders"

<ChromaticImage
  alt="An alpine lake reflecting an orange sunset between dark mountain ridges."
  className="h-80 rounded-xl"
  src="https://images.unsplash.com/photo-1776348568867-24146d18b736?auto=format&fit=crop&w=1600&q=85"
/>

Remote image hosts must allow cross-origin image use so WebGL can upload the texture. Use a same-origin image when you control the asset pipeline.

Accessibility

Write alt text for the image's purpose and context; use an empty string when the image is decorative. The effect does not hide the source image from assistive technology, and pointer movement is not required to access its content. When reduced motion is enabled, Chromatic Image renders the image without displacement or tilt.

API Reference
PropTypeDefaultDescription
srcstring–Image URL used by the WebGL texture and fallback image.
altstring–Alternative text for the image. Use an empty string for decorative images.
childrenReact.ReactNode–Optional foreground content rendered over the image.
backgroundColorstring"#111111"Hex color shown behind the WebGL canvas.
zoomnumber0.2Pointer-driven zoom amount.
displacementnumber0.05Strength of the horizontal bands and pointer displacement.
chromaticShiftnumber0.01Distance between the red, green, and blue samples.
tiltnumber0.3Strength of the pointer-driven perspective tilt.
classNamestring–Class for sizing and styling the container.