About LiquidFluid

Liquid Fluid is a high-performance WebGL fluid simulation component that reacts instantly to cursor movements. It generates smooth, glowing, colorful liquid trails that slowly dissipate for a stunning visual impact. Built for performance and fully customizable without touching a single line of code, you can adjust physics, colors, and effects directly inside the Framer property panel.

Explaining Liquid Fluid component

✦ Interactive Shortcuts (On Published Site) Give your visitors extra control with built-in keyboard triggers:

Spacebar — Manual burst of random fluid splats.
P Key — Toggle Pause/Play the simulation.
K Key — Toggle Autoplay mode on or off.
Left/Right Arrows — Cycle through your brand color palette.

Perfect for:

Immersive hero sections and full-screen backgrounds
"Dark Mode" SaaS, Tech, and AI landing pages
Creative portfolios, agency intros, and event sites
Interactive ambient backgrounds behind typography

Key Features:

Silky Smooth Performance: Lightweight WebGL rendering ensures 60fps interaction.
Brand Colors: Set up to 8 custom colors to cycle in order, ensuring the fluid always matches your brand identity.
Cinematic Post-Processing: Built-in Bloom, subtle 3D shading, and Volumetric Sunrays for a premium, realistic glow.
Auto-Play & Colorful Mode: Automatically generates ever-changing fluid splashes when the user is idle so the site looks alive immediately.
Transparent Background: Seamlessly layer the fluid over any existing page content or image.

Customization Properties:

Fluid Physics: Total control over Pressure, Swirl (Curl Strength), Splat Force, and Brush Size. Make it behave like thick ink or light smoke.
Visuals & Dissipation: Adjust how quickly the colors and velocity fade away, and set your ideal Color Cycle Speed.
Quality & Lighting: Toggle Bloom and Sunrays on or off, tweak light scattering weight, and control simulation resolution (Low to High) for ultimate performance.

Note: The simulation runs live on your published site. The Framer canvas shows a placeholder — this is expected behavior for high-performance WebGL components.

Questions & Support:

Reach out anytime at hello@sillyweb.in — I'm happy to help.