Morphing Blobs

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.

Why it works: 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. Under the hood: - 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. Best for: - 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 Controls: - 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) Built for production: WebGL2, ~99% browser coverage. Auto-pauses offscreen and in Framer's canvas. Respects `prefers-reduced-motion`. Resizes any aspect ratio. DPR according to device.

WebGL viscous glass blobs.