Framer added mouse interaction to two of its shaders, Liquid Gradient and Logo Gradient, so backgrounds and logos can now respond to a visitor's cursor. These are real WebGL effects rendered natively in Framer, which means you get motion that feels alive without exporting video or wiring up custom code.
What the interactive shaders do
Liquid Gradient creates animated color fields that drift across the canvas, ideal for hero backgrounds and section dividers. Logo Gradient adds shifting gradient effects to SVGs and PNGs, so a flat logo picks up depth and movement. Both now respond to the cursor with smooth, spring-based tracking, combining motion-style interaction with the look of a shader. Parameters are customizable, so you control color, intensity, and how strongly the effect follows the pointer.
Why it matters for real projects
Distinctive motion is one of the easiest ways to make a marketing site feel premium, but heavy video files and one off code often slow pages down and create maintenance headaches. Shaders render in the browser, so you keep the polish while avoiding large assets. Cursor tracking also adds a small moment of interactivity that invites people to linger, which is useful on a landing page hero or a product highlight.
Who should use them
If you want a hero that stands out, a logo lockup with a bit of life, or a section background that reacts to the visitor, these shaders are a fast win. They suit brand sites, product launches, and portfolios where first impression matters. Because everything stays editable in Framer, you can tune the effect to match your palette rather than settling for a preset.
A quick note on restraint
Motion works best in moderation. One interactive shader in a hero usually reads as considered, while the same effect on every section can feel busy. Pick the moment that deserves attention and let the rest of the page stay calm.
Our senior team designs and builds these details as part of a full Framer engagement, from layout and motion through to performance and growth. If you want a site that uses interactive shaders tastefully and still loads fast, Book a discovery call and we will show you what is possible for your brand.
Framer Workshop: Build Components by Describing Them
Framer Workshop turns a plain description into a working, publishable component with property controls. Here is what it does and who it helps.
Framer's Interactive Shaders, Explained
Framer's Liquid Gradient and Logo Gradient shaders now follow the cursor with spring-based motion. Here is how the interactive shaders work.