Somewhere Between: a sculpture of beads that is always becoming something else
The story behind Somewhere Between
Premise What walking through the space between things might look like if you could hold it: a physical sculpture of beads that is always on its way from one object to another. Audience: web-literate visitors arriving from X or the archive. Perf target: a few milliseconds a frame on an M4, with the machine staying quiet
Reference Lusion’s bead and particle pieces; Studio Drift; product photography on a seamless sweep
Built with Three.js 0.186 WebGPURenderer with TSL node materials and compute (WebGL2 fallback)
Techniques Six objects generated as images, turned into 3D models and surface-sampled offline; an approximate optimal-transport ordering so every bead knows where it goes next; a seam-split blend with a designed axis per pair; GPU compute springs with lift and swirl at the seam; per-bead occlusion and contact shading; a pixel budget, an idle throttle and a pause when hidden
Direction A pale warm-grey sweep, warm near-black graphite beads, a soft key with a cool fill and rim, deep contact shadow. Newsreader and IBM Plex Sans
The Story
Most morphing on screen is a crossfade: one thing gets fainter while another gets clearer. This piece wanted the in-between to be a thing in its own right, something you could stop and look at. So the objects are made of beads, sixty-five thousand of them, and the beads have to physically travel from one object to the next.
It rains in first. Beads fall onto a pale studio sweep and gather into an open hand. Then the hand starts to change from the bottom up: the hare’s haunches and feet form while the fingers are still fingers, and for a moment there’s a hand sitting on a hare. Then a hare. Then the hare’s ears on a teapot.
The Take
- Watch it. It tours itself: hand, hare, teapot, whale, armchair, bust, and round again, turning slowly on the sweep.
- Drag sideways to take over and scrub through the change yourself, forwards or back.
- Hold still partway, or press and hold anywhere, and it stops halfway. The beads shimmer the moment you hold, and the label names what you’ve made: “half hare, half teapot”.
- Drag up or down to look around it. Flick and the beads scatter in a breath and come back.
The Tech
Objects from nowhere. Each object started as a generated product photo, was turned into a 3D model, and was then sampled into 120,000 surface points with normals, offline, into one compact binary.
Every bead knows where it’s going. The hard part of a good morph is deciding which bead goes where. Each object’s beads are reordered to match the previous object’s with an approximate optimal-transport pass, so beads travel short distances and neighbours stay neighbours. The order of the six was chosen by rendering every possible pair halfway and keeping the ones that make good chimeras.
The seam is the show. Instead of averaging two shapes, each pair blends across a seam: below it the beads have already arrived, above it they haven’t left yet. The seam runs up the form for most pairs and sideways for the ones that read better that way, and the beads in it lift, swirl and catch a little more light. A GPU compute pass moves every bead each frame on a spring toward its target.
Lit like a product shot. A soft key from the front left, a cool fill and a rim, a deep contact shadow and a wider darkening on the sweep. Each bead gets occlusion from how crowded it is and a darker side where it sits on the beads below.
Quiet by default. The canvas has a pixel budget, the frame drops to 30 when nothing changes, and it stops when the tab is hidden.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.