TITLE: Liquid Hover — A Gallery That Warps Under the Cursor

PROMPT: Build a single-file, dependency-free liquid-distortion hover gallery on a near-black base #0a0a0f with six gradient panels — #ff5c8a with #a78bfa, #38bdf8 with #34d399, #fde047 with #fb923c, #34d399 with #38bdf8, #a78bfa with #ff5c8a, #fb923c with #fde047 — arranged in a 3x2 CSS grid that reflows to 2 columns below 900px and 1 column below 560px, sized so the grid fills the viewport height between a header and a footer. Each panel is an article with tabindex and role=button containing four layers: a .fill carrying two offset radial gradients plus a linear gradient and an inner vignette, a small soft .blob highlight, a .shine sweep animated with a slow translate3d shimmer, an index number and a bottom label whose title is split into per-letter spans. A pointermove listener on the window feeds a smoothed pointer position (lerped at 26/s) and every panel runs a critically-tuned spring — stiffness 62, damping Math.pow(0.0016, dt) — toward a target computed from the distance between the pointer and the panel centre: translate up to 11% of the pointer offset, scale up to 1.075, rotate up to 0.07 rad, all weighted by the square of a linear falloff so only panels near the cursor move. The blob follows at half the offset with a small animated blur(0-14px) filter, kept to six small elements. Per-letter title jitter uses cached letter rects and a 300px falloff, lifting letters up to 11px with a slow sine phase. Clicking a panel clones it into a fixed full-viewport overlay, FLIP-animates from the measured grid rect with a 640ms cubic-bezier(.22,.8,.2,1) scale/translate, and hides the original with visibility (no reflow); Escape or a click reverses the FLIP and removes the clone. The render loop is dirty-gated: it stops once every spring is below 0.6 velocity and the pointer has been still for 900ms, and it never runs while a panel is open. Entrance state is composed so a frozen-clock render shows the fully warped grid: at boot the springs are seeded directly at their target values for a centred pointer. prefers-reduced-motion disables the shimmer sweep and the FLIP animations.

DESCRIPTION: A dark, hypnotic gallery where six saturated gradient panels behave like a liquid surface under the cursor. Move the pointer and the field bends toward it — panels lean, swell and rotate with springy lag, their titles rippling letter by letter, a soft highlight dragging behind each surface. Everything is one pointer, six gradients and a lot of restraint: a hairline grid of seams, a giant tight-tracked headline with an italic serif counterpoint, and monospace micro-labels that report the live pointer position. Clicking a panel throws it open full-bleed with a FLIP that feels like pulling a sheet of colour off the wall.

TECHNIQUES:
- Distance-based per-panel transform with a real spring integrator (stiffness 62, Math.pow damping) for lag and overshoot
- Smoothed pointer with lerp, plus a squared falloff so influence stays local to the cursor
- Layered radial + linear gradients per panel, with a slow translate3d shimmer sweep on a separate layer to avoid transform conflicts
- Small animated blur() kept to six small highlight blobs; panel warping is transform-only
- Per-letter title jitter using cached letter centre rects and a sine phase
- FLIP full-bleed open/close via a cloned overlay, Web Animations API, visibility-hidden original to prevent grid reflow
- Dirty-gated rAF loop that idles completely when nothing moves
- CSS custom properties for the panel palette, clamp() fluid type, media queries at 900px and 560px
- prefers-reduced-motion removes the shimmer and FLIP animation

INTERACTION:
- Move the pointer across the grid: panels warp toward it with spring lag, the nearest one swells and brightens, and its title letters lift in a ripple
- Hover a panel: its gradient brightens and saturates and its seam highlights
- Click or press Enter on a panel: it FLIPs open full-bleed with a large title and a close hint
- Click the overlay or press Escape: it FLIPs back into its grid cell
- The footer reads out the live pointer coordinates; the header reports panel count and mode