Liquid Metal Field 2.0
Raymarched liquid metal: drops that neck, fuse and tear apart, reflect a lit studio and each other, and stand on a black mirror floor. Drag a drop out of the pool, press to gather it, let go to splash.
WebGL20 deps1 file · 35 KB TSXreduced-motion aware
Props
"use client"; /* * LiquidMetalField2: a full-bleed field of liquid metal, raymarched per pixel. * * The drops are signed-distance spheres joined with a smooth minimum, so two * that drift close pull a neck between them and fuse, then tear apart again. * Each drop stretches along its own velocity, so a flung one trails into a * teardrop. The metal reflects a lit studio (an overhead softbox, two strip * lights, a coloured rim behind, a bright horizon) that turns toward the * pointer, reflects the other drops in itself, and stands on a black mirror * floor that reflects the drops back with soft contact shadows. * * Hands on: hover pulls the drops toward the pointer; press on a drop to pick * it up and drag it out of the pool (let go to throw it); press on empty space * to gather every drop under your hand, and let go to splash them apart. * * Runtime: WebGL2, compiled with KHR_parallel_shader_compile before anything // --------------------------------------------------------------- // Full source available with a viberdy Pro subscription. // https://viberdy.dev/pricing // --------------------------------------------------------------- }
Details
About this background
A pool of liquid metal for the back of a hero. Each drop is a signed-distance sphere joined to the others with a smooth minimum, so two that drift close pull a neck between them, fuse, and tear apart again as they part; each one stretches along its own velocity, so a thrown drop trails into a teardrop. The metal reflects a lit studio (an overhead softbox, a key strip, a cool fill, a coloured rim behind and the bright horizon chrome is known for), reflects the other drops in itself, and stands on a black lacquer floor that mirrors the drops back with soft contact shadows. The studio turns a little toward the pointer, so highlights slide as you move. Hover and the drops lean toward you; press on a drop to pick it up and drag it out of the pool, and let go to throw it; press on empty space to gather every drop under your hand, and let go to splash them apart. Five finishes: mercury, gold, anodised cobalt, an oil-slick thin film and black chrome, each with its own rim colour (or set your own). Lay any content over it as children: its links and buttons work as usual, and pressing anywhere else handles the metal.
Curator’s note
Liquid Metal Field, rebuilt as a premium 2.0 beside the original. The first one is an SVG goo filter over flat circles; this one is real metal: a WebGL2 raymarcher with smooth-minimum drops, studio reflections, inter-reflections and a mirror floor, plus drop physics you can handle. One file, no dependencies.


