---
title: "Pro Liquid Shader — Framer component · Best of Framer"
description: "$9.00 · Framer component · by Syncrely Studio · Effects. ✨ About this Component Pro Liquid Shader transforms any static image into a living, interactive surface that reacts to cursor…"
canonical: "https://framer.elliotli.dev/component/pro-liquid-shader"
---

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

# Pro Liquid Shader

Fluid cursor-driven image distortion

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

![Pro Liquid Shader preview image 1](https://framer.elliotli.dev/og/component/pro-liquid-shader/d5433fc380ef3c20/1600x1200.jpg)

## Summary

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

## Description

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

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-uj2zqeta-U0IBYcqNlSZ6hoPqd4dDj4yIqueqo2)

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

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

-   All · #366

## Details

- **Author**: Syncrely Studio
- **Price**: $9.00
- **Published**: 2026-02-18
- **Updated**: 2026-04-09
- **Added**: 2026-02-12
- **Categories**: Effects

## More like this

-   [Liquid Glass Loupe](/component/liquid-glass-loupe) — Aisol Studio · $12 — Liquid glass lens over content
-   [Sticky Scenes](/component/sticky-scenes) — Sofía Martín · $5 — Scroll-driven stories with sticky
-   [Studio ASCII Reveal](/component/studio-ascii-reveal) — Tanmay Kaper · $12 — Your portrait, redrawn in ASCII
-   [Kinetic Sprout](/component/kinetic-sprout) — Buster Studios · $19 — A headline that grows