Displaced Image

1/* Deepak Kumar E — https://craft.iam-deepak.space */2 3import { useEffect, useRef } from "react";4import { createPointerSource } from "../lib/pointerSource";5 6/**7 * An image that ripples and separates into its colour channels as the pointer8 * crosses it, settling back when the pointer leaves.9 *10 * Raw WebGL rather than three.js — this is one textured quad, and a scene11 * graph would be ~150KB to draw two triangles. That matters more here than12 * on a background: an image effect usually sits ON a content page, competing13 * with the content's own budget.14 *15 * Two effects, both driven from the same falloff so they read as one gesture:16 *17 * A ripple, displacing the texture lookup along a wave radiating from the18 * pointer. Sampling at a displaced coordinate rather than moving geometry19 * means the mesh stays a single quad — there is no subdivision to pay for and20 * the distortion is per-pixel smooth regardless of resolution.21 *22 * Chromatic aberration, sampling R, G and B at slightly different offsets.23 * This is what makes it read as glass rather than as a wobble; the eye reads24 * channel separation as a lens.25 *26 * The strength eases toward its target on the GPU side each frame, so the27 * effect has weight — snapping to full strength on pointerenter looks like a28 * bug rather than a material.29 */30 31const VERTEX = `32attribute vec2 position;33varying vec2 vUv;34void main() {35  vUv = position * 0.5 + 0.5;36  gl_Position = vec4(position, 0.0, 1.0);37}38`;39 40const FRAGMENT = `41precision mediump float;42 43uniform sampler2D uTexture;44uniform vec2  uPointer;      /* 0-1, in image space */45uniform float uStrength;     /* eased 0-1 */46uniform float uTime;47uniform float uRipple;48uniform float uAberration;49uniform vec2  uCover;        /* aspect-fit scale, so the image is not stretched */50 51varying vec2 vUv;52 53void main() {54  /* Cover-fit: scale around the centre so the texture fills the element at55     its own aspect ratio instead of being squashed to the box. */56  vec2 uv = (vUv - 0.5) * uCover + 0.5;57 58  vec2 toPointer = uv - uPointer;59  float distance = length(toPointer);60 61  /* Falloff is squared so the effect is tight around the cursor rather than62     smearing across the whole image. */63  float falloff = smoothstep(0.55, 0.0, distance);64  falloff *= falloff;65 66  float wave = sin(distance * 26.0 - uTime * 5.0) * 0.012 * uRipple;67  vec2 offset = normalize(toPointer + 1e-6) * wave * falloff * uStrength;68 69  /* Channel separation scales with the same falloff, so it is strongest where70     the ripple is and absent at the edges. */71  vec2 shift = normalize(toPointer + 1e-6) * 0.006 * uAberration * falloff * uStrength;72 73  vec2 uvR = uv + offset + shift;74  vec2 uvG = uv + offset;75  vec2 uvB = uv + offset - shift;76 77  /* Clamped rather than wrapped: a displaced lookup near the border would78     otherwise sample the opposite edge and produce a bright seam. */79  vec4 colour = vec4(80    texture2D(uTexture, clamp(uvR, 0.001, 0.999)).r,81    texture2D(uTexture, clamp(uvG, 0.001, 0.999)).g,82    texture2D(uTexture, clamp(uvB, 0.001, 0.999)).b,83    1.084  );85 86  gl_FragColor = colour;87}88`;89 90function compile(gl: WebGLRenderingContext, type: number, source: string) {91  const shader = gl.createShader(type);92  if (!shader) return null;93  gl.shaderSource(shader, source);94  gl.compileShader(shader);95  return gl.getShaderParameter(shader, gl.COMPILE_STATUS) ? shader : null;96}97 98export interface DisplacedImageProps {99  src: string;100  alt: string;101  /** Ripple amplitude. */102  ripple?: number;103  /** Colour-channel separation. 0 is a plain ripple. */104  aberration?: number;105  /** 0–1. Lower is heavier — the effect takes longer to reach full strength. */106  ease?: number;107  still?: boolean;108  className?: string;109}110 111export function DisplacedImage({112  src,113  alt,114  ripple = 1,115  aberration = 1,116  ease = 0.08,117  still = false,118  className = "",119}: DisplacedImageProps) {120  const canvasRef = useRef<HTMLCanvasElement>(null);121  const hostRef = useRef<HTMLDivElement>(null);122 123  useEffect(() => {124    const canvas = canvasRef.current;125    const host = hostRef.current;126    if (!canvas || !host) return;127 128    const gl = canvas.getContext("webgl", { alpha: false, antialias: false });129    if (!gl) return;130 131    const vertex = compile(gl, gl.VERTEX_SHADER, VERTEX);132    const fragment = compile(gl, gl.FRAGMENT_SHADER, FRAGMENT);133    if (!vertex || !fragment) return;134 135    const program = gl.createProgram();136    if (!program) return;137    gl.attachShader(program, vertex);138    gl.attachShader(program, fragment);139    gl.linkProgram(program);140    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) return;141    gl.useProgram(program);142 143    const buffer = gl.createBuffer();144    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);145    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);146    const position = gl.getAttribLocation(program, "position");147    gl.enableVertexAttribArray(position);148    gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);149 150    const uniform = (name: string) => gl.getUniformLocation(program, name);151    const uPointer = uniform("uPointer");152    const uStrength = uniform("uStrength");153    const uTime = uniform("uTime");154    const uCover = uniform("uCover");155    gl.uniform1f(uniform("uRipple"), ripple);156    gl.uniform1f(uniform("uAberration"), aberration);157    gl.uniform1i(uniform("uTexture"), 0);158 159    const texture = gl.createTexture();160    gl.bindTexture(gl.TEXTURE_2D, texture);161    // Clamped and linear: the image is not a repeating pattern, and NPOT162    // textures in WebGL1 cannot use mipmaps or REPEAT at all.163    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);164    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);165    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);166    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);167    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);168 169    const reduced =170      still ||171      (typeof matchMedia === "function" &&172        matchMedia("(prefers-reduced-motion: reduce)").matches);173 174    let imageWidth = 1;175    let imageHeight = 1;176    let loaded = false;177 178    // Sized per effect run, not read back off the canvas — the element keeps179    // its dimensions across re-runs, and a new program's uniforms start at180    // zero. Comparing against the DOM would skip the upload entirely.181    let uploadedWidth = 0;182    let uploadedHeight = 0;183 184    const resize = () => {185      const dpr = Math.min(devicePixelRatio || 1, 2);186      const width = Math.floor(canvas.clientWidth * dpr);187      const height = Math.floor(canvas.clientHeight * dpr);188      if (!width || !height) return;189      if (width === uploadedWidth && height === uploadedHeight) return;190 191      uploadedWidth = width;192      uploadedHeight = height;193      canvas.width = width;194      canvas.height = height;195      gl.viewport(0, 0, width, height);196 197      // Cover fit: whichever axis has the surplus gets scaled down in UV space.198      const boxAspect = width / height;199      const imageAspect = imageWidth / imageHeight;200      if (boxAspect > imageAspect) {201        gl.uniform2f(uCover, 1, imageAspect / boxAspect);202      } else {203        gl.uniform2f(uCover, boxAspect / imageAspect, 1);204      }205    };206 207    /* A hover effect has nothing to respond to on a phone, so the source208       sweeps the ripple across the image on its own and a tap redirects it. */209    const pointer = createPointerSource(host);210    let strength = pointer.automatic ? 1 : 0;211    let target = pointer.automatic ? 1 : 0;212    let frame = 0;213 214    const onEnter = () => {215      target = 1;216    };217    const onLeave = () => {218      if (!pointer.automatic) target = 0;219    };220 221    const start = performance.now();222 223    const draw = (now: number) => {224      resize();225      strength += (target - strength) * ease;226      const local = pointer.read((now - start) / 1000);227      gl.uniform2f(uPointer, local.x, local.y);228      gl.uniform1f(uStrength, strength);229      gl.uniform1f(uTime, (now - start) / 1000);230      gl.drawArrays(gl.TRIANGLES, 0, 3);231    };232 233    const loop = (now: number) => {234      draw(now);235      frame = requestAnimationFrame(loop);236    };237 238    const image = new Image();239    image.crossOrigin = "anonymous";240    image.onload = () => {241      imageWidth = image.naturalWidth;242      imageHeight = image.naturalHeight;243      gl.bindTexture(gl.TEXTURE_2D, texture);244      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);245      loaded = true;246      // Force the cover-fit recompute now that the real aspect is known.247      uploadedWidth = 0;248      resize();249 250      // One frame synchronously in both paths, so the image is on screen the251      // moment it decodes rather than waiting on the first rAF.252      draw(start);253      if (!reduced) {254        host.addEventListener("pointerenter", onEnter);255        host.addEventListener("pointerleave", onLeave);256        frame = requestAnimationFrame(loop);257      }258    };259    image.src = src;260 261    const observer = new ResizeObserver(() => {262      if (!loaded) return;263      resize();264      if (reduced) draw(start);265    });266    observer.observe(canvas);267 268    return () => {269      cancelAnimationFrame(frame);270      observer.disconnect();271      host.removeEventListener("pointerenter", onEnter);272      host.removeEventListener("pointerleave", onLeave);273      pointer.dispose();274      gl.deleteProgram(program);275      gl.deleteShader(vertex);276      gl.deleteShader(fragment);277      gl.deleteBuffer(buffer);278      gl.deleteTexture(texture);279      // Not calling WEBGL_lose_context: a context dropped that way cannot be280      // reacquired, so the component comes back blank on any remount.281    };282  }, [src, ripple, aberration, ease, still]);283 284  return (285    <div ref={hostRef} className={`relative ${className}`}>286      <canvas ref={canvasRef} aria-hidden className="block h-full w-full" />287      {/* The canvas cannot carry alt text, so the image's meaning lives in a288          visually-hidden element. A decorative treatment must not cost a289          screen-reader user the content. */}290      <span className="sr-only">{alt}</span>291    </div>292  );293}294