Framer | Interactive Shaders Add Mouse-Responsive Gradients
Framer introduced mouse interaction for its Liquid Gradient and Logo Gradient shaders on July 16, 2026. Both WebGL effects can now follow cursor movement with smooth, spring-based motion, giving designers a more direct way to create responsive backgrounds and animated brand graphics for websites.
Framer makes shader motion respond directly to website visitors
Shader effects can add depth and movement to a page, but a continuous animation may still feel separate from the visitor's actions. Framer's new mouse interaction connects the visual response to cursor position, allowing the gradient to move as someone explores a section instead of following only a predetermined animation.
The tracking uses spring-based motion, which can create a softer transition between cursor positions. Designers can adjust colors, movement, intensity, and other shader properties to control whether the result feels subtle enough for a restrained landing page or expressive enough for a creative portfolio.
Liquid Gradient turns background color into an interactive layer
Liquid Gradient creates animated fields of color that travel across the shader area. Mouse tracking adds another level of control by letting the movement react to the visitor, making the effect suitable for hero backgrounds, campaign sections, portfolio introductions, and other areas where atmosphere is part of the page's identity.
This kind of interaction works best when it supports the layout instead of competing with it. Text, buttons, navigation, and calls to action still need sufficient contrast as the colors move, particularly when the shader occupies a large area behind important content.
Logo Gradient brings responsive color movement to brand assets
Logo Gradient applies shifting gradient effects to SVG and PNG graphics. With the new interaction enabled, a logo or visual mark can respond to the cursor while preserving the uploaded asset as the recognizable foundation of the effect.
The feature may be useful for portfolio identities, studio landing pages, product introductions, event sites, and other projects where the brand graphic acts as a central visual element. Designers can create variation through color and motion without rebuilding the logo as a separate interactive component.
The new Mouse property keeps setup inside the visual workflow
To enable the interaction, designers select a Liquid Gradient or Logo Gradient shader and click the + control on its new Mouse property. The effect can then be refined through the available shader settings rather than requiring a separate cursor-tracking animation.
Because the announcement specifically introduces mouse interaction, published projects should also be checked on touch devices and in situations where cursor input is unavailable. The page should remain visually coherent and fully usable even when the responsive movement is not the main form of interaction.
REMEMBER: Keep essential information, navigation, and visual contrast independent from the shader effect. Test the published page across desktop and touch devices before making the interaction part of a reusable template.{alertSuccess}
Daisuki's Take: What This Means for Web Designers
This update makes a technically complex visual style easier to treat as part of the normal design canvas. Cursor-responsive WebGL effects can now be explored alongside typography, layout, and branding instead of beginning as a separate custom development task.
We would use the interaction selectively. A liquid background or animated logo can create a memorable focal point, but repeating the effect across every section may weaken the visual hierarchy and make the page feel unnecessarily busy.
For template creators, the strongest approach is to make the shader configurable and optional. Thoughtful default colors, restrained intensity, readable content, and a reliable experience without mouse input can turn the effect into a useful design feature rather than decorative motion that controls the entire page.
Sources and Recommended Links
- Interactive Shaders: Liquid Gradient & Logo Gradient | Framer Official Updates
