KeyStone Template — Residence page hero with WebGL image distortion

Hero section for the Residence page in KeyStone, my real-estate template.

The images run through a WebGL warping shader — as you move, the texture bends and tears for a split second before snapping back into place. It reads like a glitch, but it's fully controlled: displacement mapping driven by pointer velocity, so the distortion feels physical rather than random.

A few notes from building it:

- The effect lives in a code component layered behind native frames, so the layout stays fully editable on the canvas

- Distortion intensity is exposed as a property control — dial it from "subtle ripple" to "full glitch"

- Falls back to static images when WebGL isn't available, so nothing breaks

KeyStone Template — Residence page hero with WebGL image distortion

Hero section for the Residence page in KeyStone, my real-estate template.

The images run through a WebGL warping shader — as you move, the texture bends and tears for a split second before snapping back into place. It reads like a glitch, but it's fully controlled: displacement mapping driven by pointer velocity, so the distortion feels physical rather than random.

A few notes from building it:

- The effect lives in a code component layered behind native frames, so the layout stays fully editable on the canvas

- Distortion intensity is exposed as a property control — dial it from "subtle ripple" to "full glitch"

- Falls back to static images when WebGL isn't available, so nothing breaks