Pro Liquid Shader

✨ About this Component Pro Liquid Shader transforms any static image into a living, interactive surface that reacts to cursor movement, touch, and clicks.

✨ About this 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. 💎 Key Features 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 🎛️ Component Settings ✔️ Perfect For 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 After purchase, you’ll receive a Component link. Copy the link and paste it into your Framer project to instantly add the component.

Fluid cursor-driven image distortion