Liquid 3D normally means models, textures, and a Three.js pipeline. Morphing Blobs gets the same look from a single fragment shader, so it runs at 60fps on phones and ships as a few kilobytes of code.
- Five (or six, with hover) animated centers contribute to a scalar field; the surface is wherever that field crosses a threshold.
- Inside the surface, the color blends between accent and secondary based on field intensity.
- Caustic streaks are extra noise sampled near the surface, brightened with the Glow control.
- Beauty, skincare, and fragrance brands
- Premium consumer products and lifestyle goods
- Design tools, creative SaaS, and no-code platforms
- Studio and agency portfolios
- Food, beverage, and wellness brands
- Accent: primary blob color
- Secondary: secondary color for depth and core glow
- Speed: drift pace (0–2)
- Blob Size: metaball reach (0.01–0.1)
- Glow: caustics, edge rim, core brightness (0–2)
- Hover effect: cursor-tracked blob
- Quality: render DPR (0.5–2)
WebGL2, ~99% browser coverage. Auto-pauses offscreen and in Framer's canvas. Respects `prefers-reduced-motion`. Resizes any aspect ratio. DPR according to device.