Dynamic Liquid BG

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