Liquid Metaballs Pro is a masterpiece of computational fluid aesthetics. It transforms your background into a living, organic environment where digital "cells" merge and interact with tactile surface tension. Engineered with a custom GLSL Fragment Shader, the component calculates a scalar field for 9 independent bodies (8 autonomous and 1 mouse-tethered), creating a mesmerizing "lava lamp" effect that is fully interactive and performance-optimized.

Whether you are building a bio-tech landing page, a creative agency portfolio, or a high-end SaaS hero, Liquid Metaballs Pro delivers buttery-smooth motion, prismatic "Oil-Shift" coloring, and a professional glass finish right from the Framer sidebar.

✨ Key Highlights

• Surface Tension Physics: Control the "stickiness" of your fluids. Adjust the Tension and Threshold sliders to define how aggressively the metaballs merge or how cleanly they snap apart.

• Iridescent Oil-Shift: Integrated light-splitting logic creates a dynamic "Oil Slick" texture. As the balls move and merge, their colors shift prismatically based on the field density, adding a layer of high-end visual complexity.

• Linear-Space Color Correction: Unlike standard shaders that can look "muddy," this pro version converts all Framer colors from sRGB to Linear Space before rendering on the GPU. This ensures vibrant, accurate color blending even at high saturations.

• Built-in Glassmorphism Stack: No need for extra frames. The component includes a native Backdrop Blur and Tint layer with an optional Specular Edge shine, allowing you to frost your liquid background instantly.

• Intelligent Responsive Scaling: The engine features a custom scaling algorithm that calculates the optimal ball size relative to the container dimensions, ensuring the "Liquid" looks perfect on both mobile and 5K displays.

⚙️ Complete Design Control

• Fluid DNA: Define the "Liquid Primary" and "Accent" colors, plus a "Specular" highlight color. The engine handles the complex interpolation and iridescence shifts automatically.

• Motion Dynamics: Control the "Flow Speed" of the background balls and the "Friction" of the mouse-tethered ball. Create a high-energy chaotic environment or a slow, zen-like lava flow.

• Material Texture: Adjust the "Grain Level" and "Grain Density" to add a cinematic analog feel and prevent color banding on low-bitrate displays.

• Glass Optics: Dial in the "Glass Blur" intensity and "Glass Tint." Enable the "Glass Edge" to add a subtle 1px border that catches the light for an authentic glass pane aesthetic.