Liquid Card Shader

Elevate Your Visual Storytelling

Liquid Card Pro is the definitive "Full Agency Edition" component designed to be the cornerstone of your interactive design system. More than just a simple distortion effect, it is a precisely engineered WebGL environment that brings cinematic elegance and physical depth to your static images and videos. Developed using a custom THREE.js engine, this component integrates liquid-water ripples with prismatic chromatic shifts, all while following your cursor with high-fidelity 3D spatial tilt.

✨ Key Highlights

- Water-Ripple Distortion: High-fidelity liquid physics that create organic waves emanating from your cursor's position, providing a tactile feel to digital media.

- Prismatic RGB Chromatic Shift: A subtle yet powerful color-splitting effect that adds a professional lens-flare aesthetic on hover, mimicking high-end cinematography.

- Pro-Grade 3D Spatial Tilt: The card rotates and follows your cursor in 3D space with adjustable damping for that "heavy," premium feel associated with award-winning agency sites.

- SDF-Driven Rounded Corners: Unlike standard CSS, our WebGL shader uses Signed Distance Fields (SDF) to ensure corners remain perfectly crisp even during extreme liquid distortion.

- Native Framer Integration: Fully supports Framer’s native Link Picker (Pages, Anchors, URLs) and Shadow controls for a seamless workflow.

- Smart Video Logic: Toggle between Autoplay or specialized "Play on Hover" modes with built-in thumbnail support to ensure zero-lag performance.

⚙️ Complete Design Control

- Distortion Strength: Fine-tune the intensity of the water-like ripple distortion to match your brand's energy.

- RGB Shift Intensity: Control the degree of prismatic color split to create either a subtle glow or a bold glitch effect.

- 3D Tilt Angle: Adjust the degree of rotation towards the cursor for a more immersive spatial experience.

- Damping & Smoothness: A dedicated damping slider allows you to define the weight of the animation—higher values result in silkier, more deliberate movements.

- Exposure & Brightness: Built-in brightness controls ensure your media pops against any background without needing external editing.

💡 Perfect For:

- Core Portfolio Grids: Use it as your primary card component to make every project showcase feel like a cinematic event.

- Interactive Hero Sections: Capture and hold user attention with a card that reacts to their presence with fluid grace.

- Agency Landing Pages: Demonstrate technical superiority and design craft with no-code WebGL physics.