Halide, Chromatic Aberration Lens Archive

# Chromatic Aberration Lens Gallery
## Goal
Build a full-screen, edge-to-edge grid of editorial portraits that **pans slowly as the cursor moves**, overlaid by a circular **magnifying lens that follows the pointer**. Inside the lens the imagery is **zoomed in and its RGB channels are split apart into a chromatic-aberration fringe** — red pushes one way, blue the other — with the distortion ramping up toward the lens rim like real glass. Outside the lens you just see the flat grid. The whole thing is cursor-driven and runs forever: nothing scrolls, nothing clicks, it simply reacts to `mousemove`. The star effect is the **WebGL/GLSL lens distortion + chromatic aberration** sampled live from the grid every frame.
## Tech
Vanilla HTML/CSS/JS. **No GSAP, no libraries, no framework, no npm dependencies** — the entire effect is hand-rolled with the **raw WebGL API + a GLSL fragment shader**, plus two `requestAnimationFrame` lerp loops for easing. A single ES-module script (`<script type="module" src="./script.js">`) drives everything. Do **not** reach for Three.js, a shader helper, or a tween library; the original talks to `gl` directly with a hand-written vertex + fragment shader pair, and eases the pointer/pan with manual linear-interpolation loops. Must run in a fresh Vite + npm project (though no packages are actually imported).
## Layout / HTML
Almost nothing lives in the HTML — the grid is generated by JS and the lens is a full-screen `<canvas>` overlay.
```html
<body>
  <div class="viewport">
    <div class="container"></div>
  </div>
…