Morphing Blobs: Premium Backgrounds Component by Abhrajit Ray

A metaball shader that fills your hero with slow-merging liquid shapes. Each blob has a hot inner color and a glossy edge, with caustic light moving through them as they pull together. Hover over the canvas and your cursor becomes a sixth blob.

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.