---
title: "Liquid Card Shader — Framer component · Best of Framer"
description: "$6.00 · Framer component · by Creative Apes · Effects. Interactive WebGL Liquid Card Pro"
canonical: "https://framer.elliotli.dev/component/liquid-card-shader"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Liquid Card Shader

# Liquid Card Shader

Interactive WebGL Liquid Card Pro

[View on Framer](https://framer.com/marketplace/components/liquid-card-shader/?via=elliot-li)

![Liquid Card Shader preview image 1](https://framer.elliotli.dev/og/component/liquid-card-shader/14f146628db41b65/1600x1200.jpg)

## Summary

Interactive WebGL Liquid Card Pro

## Description

## 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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #9502

## Details

- **Author**: Creative Apes
- **Price**: $6.00
- **Published**: 2026-05-31
- **Updated**: 2026-04-16
- **Added**: 2026-03-31
- **Categories**: Effects

## More like this

-   [Particle Image](/component/particle-image) — Jamik · $12 — Logos and photos as 3D points
-   [Ascii Portrait](/component/ascii-portrait) — The Black Sheep · Free — Photos that dissolve into ASCII
-   [Sandfall](/component/sandfall) — Cyedi Creative Studio · $5 — Your headline, buried in coloured
-   [Still Water](/component/still-water) — DariStudio · $9 — Water ripples over any photo