Liquid Distortion Image Hero

What this builds

A full-viewport hero section where a photographic or editorial image is rendered onto a WebGL plane and displaced in real time by pointer movement and velocity. The displacement map warps pixels outward from the cursor, RGB channels separate based on movement speed, and the effect settles back to a clean image at rest. A scroll-driven intensity fade transitions the hero into the next section.

• Full-viewport image rendered as a WebGL quad covering the hero container.
• Displacement map-driven per-pixel warp that follows the pointer with damped lerp.
• RGB channel splitting (chromatic aberration) whose magnitude scales with pointer velocity.
• Scroll-linked intensity decay so the effect fades as the user scrolls past the hero.
• Idle ripple pulse that keeps the image subtly alive when the pointer is not moving.
• Graceful fallback to a static <img> when WebGL is unavailable or prefers-reduced-motion is active.