Pro Liquid Shader transforms any static image into a living, interactive surface that reacts to cursor movement, touch, and clicks. Built with real-time distortion, refraction, and fluid-style physics, it creates a sense of depth, viscosity, and energy directly inside your layout, without requiring WebGL knowledge.
The effect can be subtle and elegant or bold and expressive, making it suitable for both minimal product design and experimental digital art direction.
Easy editing inside Framer
Fully controllable through Framer’s property panel. No code needed.
Cursor-driven fluid distortion
Movement generates natural ripples and displacement that follow the pointer with smooth physical falloff, creating an organic response instead of a mechanical hover effect.
Realistic refraction and light splitting
Simulated refraction shifts pixels like light passing through glass or liquid, adding chromatic separation and optical depth.
Click-based shockwaves
Clicks inject localized energy into the surface, producing impact waves that propagate outward like touching water.
Continuous ambient motion
Even without interaction, the surface gently flows to avoid feeling static, giving hero sections and showcases a premium, living quality.
Highly art-directable behavior
Every parameter can be tuned, from calm and viscous motion to sharp, elastic distortion, allowing the shader to match different brand personalities.
Touch-ready interaction
Designed to feel natural on both desktop and mobile environments, responding to drag and touch input.
Performance-conscious implementation
Runs efficiently with GPU-friendly calculations, optimized for real-world websites rather than experimental demos.
No external dependencies
Hero sections that need to feel premium and tactile
Landing pages, portfolios, and product showcases
Interactive storytelling layouts
Adding depth and motion without building heavy 3D scenes
Copy the link and paste it into your Framer project to instantly add the component.
Pro Liquid Shader transforms any static image into a living, interactive surface that reacts to cursor movement, touch, and clicks. Built with real-time distortion, refraction, and fluid-style physics, it creates a sense of depth, viscosity, and energy directly inside your layout, without requiring WebGL knowledge.
The effect can be subtle and elegant or bold and expressive, making it suitable for both minimal product design and experimental digital art direction.
Easy editing inside Framer
Fully controllable through Framer’s property panel. No code needed.
Cursor-driven fluid distortion
Movement generates natural ripples and displacement that follow the pointer with smooth physical falloff, creating an organic response instead of a mechanical hover effect.
Realistic refraction and light splitting
Simulated refraction shifts pixels like light passing through glass or liquid, adding chromatic separation and optical depth.
Click-based shockwaves
Clicks inject localized energy into the surface, producing impact waves that propagate outward like touching water.
Continuous ambient motion
Even without interaction, the surface gently flows to avoid feeling static, giving hero sections and showcases a premium, living quality.
Highly art-directable behavior
Every parameter can be tuned, from calm and viscous motion to sharp, elastic distortion, allowing the shader to match different brand personalities.
Touch-ready interaction
Designed to feel natural on both desktop and mobile environments, responding to drag and touch input.
Performance-conscious implementation
Runs efficiently with GPU-friendly calculations, optimized for real-world websites rather than experimental demos.
No external dependencies
Hero sections that need to feel premium and tactile
Landing pages, portfolios, and product showcases
Interactive storytelling layouts
Adding depth and motion without building heavy 3D scenes
Copy the link and paste it into your Framer project to instantly add the component.
