---
title: "Dynamic Liquid BG — Free Framer component · Best of Framer"
description: "Free Framer component · by Saadat Ali · Interactive. Interactive fluid hover effect"
canonical: "https://framer.elliotli.dev/component/dynamic-liquid-bg"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Dynamic Liquid BG

# Dynamic Liquid BG

Interactive fluid hover effect

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

![Dynamic Liquid BG preview image 1](https://framer.elliotli.dev/og/component/dynamic-liquid-bg/ac1d34c0810073cd/1600x1200.jpg)

## Summary

Interactive fluid hover effect

## Description

Add a premium interactive fluid simulation across cards, hero sections, and backgrounds with responsive cursor tracking, dynamic ripple physics, and custom shape masks.

## Features

-   Real-time edge-following cursor fluid effect
    
-   High-performance WebGL and GLSL rendering
    
-   11 built-in shape masks including retro grid, dots, and hexagons
    
-   Custom SVG and PNG mask upload support
    
-   Smooth damped fluid velocity and dissipation physics
    
-   Dynamic rainbow cycling and custom brand color palettes
    
-   Smart off-screen viewport auto-pausing for top performance
    
-   Clean layered visual architecture
    
-   Works seamlessly as full-screen backgrounds or section overlays
    
-   Fully customizable grid resolution, curl, and splash radii
    

## Customization Options

-   Shape type
    
-   Custom mask upload
    
-   Color mode
    
-   Custom color palette
    
-   Grid cell size
    
-   Liquid fade speed
    
-   Motion dissipation
    
-   Swirl curl intensity
    
-   Splash touch radius
    
-   Hover activation toggle
    

## How to Use

-   Drop the component onto your Framer canvas
    
-   Set width and height to fill your section or canvas
    
-   Choose your shape mask and color palette to match your brand
    
-   Tune grid resolution, fade speed, and swirl intensity
    
-   Switch between hover tracking or click-and-drag interaction
    
-   Publish for an instant high-converting visual upgrade
    

## Use Cases

-   Interactive SaaS hero backgrounds
    
-   Creative agency portfolio showcases
    
-   Web3 and crypto landing pages
    
-   Interactive dark-mode sections
    
-   High-engagement product feature blocks
    
-   Modern AI startup headers
    
-   Experimental creative portfolios
    
-   Interactive 404 error screens
    
-   Digital event landing pages
    
-   Visual media feature backdrops
    

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

-   All · #5261

## Details

- **Author**: Saadat Ali
- **Published**: 2026-09-15
- **Updated**: 2026-09-15
- **Added**: 2026-09-15
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase