Shader Image Reveal

The ShaderImage component replaces standard <img /> tags with an interactive 3D WebGL Canvas powered by React Three Fiber. It allows you to seamlessly transition between two images on hover using custom GLSL fragment shaders like Liquid Ripple or Digital Noise Dissolve.

Live Preview

Installation

[!WARNING] This component relies on @react-three/fiber and three. Because the images are painted onto a WebGL Canvas via WebGL textures, any external image URLs MUST be served with proper CORS (Cross-Origin Resource Sharing) headers, otherwise the canvas will throw a security exception.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { ShaderImage } from "@/components/creative/shader-image";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { ShaderImage } from "@/components/creative/shader-image";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <ShaderImage
        image1="example"
        image2="example"
        effect{/* value */}
      />
    </div>
  );
}