Skip to content

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

ProLiquid Chromeglassplayful
Preview

Props

6
55
Pointer magnet
Mirror floor

The source is part of Pro

$27/month or $179 once. See Pro

No runtime dependencies
"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.

Pairs well with

Featured
Pro
Pro
Pro