Framer is shipping interactive WebGL shaders natively inside its design tool, starting with the Ripple Shader, a cursor-following image distortion effect that produces water-like ripple animations in real time.
The technical differentiator is spring-based cursor tracking layered on top of WebGL rendering. Most shader implementations treat cursor position as a raw input. Framer's approach blends motion physics with the shader response, meaning the ripple follows the cursor with easing, not just coordinates. Size, intensity, and motion are all exposed as configurable parameters.
The full update page at framer.com/updates/interactive-shaders is worth reading for the implementation details, specifically how spring physics and WebGL are reconciled inside a component model. This is the first shader in a stated series, so the architecture decisions made here will define how all future effects behave.
[WATCH ON YOUTUBE →]