Framer Launches Interactive Shaders with Cursor-Reactive Ripple Effect.

Framer announced on LinkedIn this week that it's adding interactive shaders to its platform, launching with a new Ripple shader. The feature distorts images with smooth, water-like ripples that follow the user's cursor in real time, blending spring-based motion tracking with WebGL rendering. Designers can now add responsive visual effects directly in Framer without writing custom shader code or relying on external libraries.

The update marks a technical shift for the website builder, which has been aggressively pushing AI-powered design features in recent months, including canvas-native AI agents and automatic responsive layouts. Interactive shaders give creators more control over micro-interactions and visual polish, areas where no-code tools have historically lagged behind custom-coded sites.

Ripple applies a distortion effect to images based on cursor position and movement. According to Framer's updates page, the shader supports spring-based cursor tracking, meaning the ripple effect doesn't just snap to the cursor but moves with physics-driven smoothness. Users can adjust ripple size, intensity, motion speed, and other parameters directly in the Framer interface.

What sets this apart from static image effects or simple CSS hover states is real-time interactivity. The shader recalculates distortion on every frame, creating a fluid, responsive experience that reacts to user input. This is particularly useful for portfolio sites, product showcases, or any design where subtle motion helps draw attention to key visuals.

Framer indicated in its announcement that Ripple is just the starting point. The company didn't specify which shaders are coming next, but the phrasing suggests a growing library of interactive effects, similar to how it rolled out Spectrum and Crystal logo shaders last month.

WebGL effects have been possible in Webflow and other advanced builders through custom code embeds or libraries like Three.js, but they require JavaScript expertise and manual integration. Framer is packaging interactive shaders as native, adjustable components, lowering the barrier for designers who want motion-rich sites without learning shader programming.

This also positions Framer more directly against design tools like Spline and Figma, which have been expanding into interactive 3D and advanced effects. Framer's approach keeps everything inside a single platform: design, interaction, and deployment.

The shader update is available now to all Framer users. The company published a walkthrough video demonstrating Ripple's customization options and integration with existing Framer projects.