Bearing Flow Field
An ordered crystal of polished steel balls that pours and pools like water across a concrete floor, lit by one low raking lamp. The terraces and ragged edges of the pile are kept on purpose. Drag the pointer through it and it digs a trench that slumps back in; click and a handful of sixty drops.
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Lot 04 / four tonnes
State: liquid
A floor that pours.
Rooms where exactly one thing is wrong. Four tonnes of bearing steel behave like water, and close behind whatever moves through them.
Props
"use client";
import { useEffect, useRef, useState } from "react";
import type { CSSProperties, ReactNode } from "react";
/**
* BearingFlowField: an ordered crystal of polished steel spheres that pours and
* pools like water. Balls fall from above the frame in a rope, land on a pile,
* roll down it in layers and spread across a concrete floor as a thin hexagonal
* sheet whose ragged edge is a staircase of terraces. Nothing is simulated as a
* fluid; every ball sits on one exact hexagonal lattice, and the liquid
* behaviour is what a crystal does when it is poured.
*
* HOW IT IS MADE. Hand-written WebGL2, no dependencies.
* - THE LATTICE. A hex-lattice height field on the CPU: one integer (a stack
* of balls) per cell, ~9k cells by default. Layers alternate between the
* lattice and its hollows (ABAB), so every ball touches its neighbours
* exactly: spacing 1, layer rise 0.8165.
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this background
Poured ball bearings look like a liquid that forgot to stop being a crystal. This background keeps that on purpose. A rope of steel balls falls from above the frame, lands on a heap and rolls down it in layers, spreading across a concrete floor as a thin hexagonal sheet whose ragged edge is a staircase of terraces. Every ball sits on one exact lattice, touching its neighbours, so the pour reads as liquid and the structure never lets go of being a crystal. One low lamp rakes across the pile so every terrace edge throws a long shadow and the concrete shows its grain, and a tilt-shift blur keeps one band sharp. Each ball reflects a procedural studio and goes dark where its neighbours crowd it. Move the pointer through the pile and a plough digs a trench, throwing berms to either side before the walls slump back. Click or tap and a handful of sixty balls drops. Scrolling tilts the table a few degrees, and a Pause control stops the loop.
Curator’s note
Nothing here is a fluid. Every ball sits on one exact hexagonal lattice, so the liquid behaviour is what a crystal does when it is poured: balls roll to the lowest hollow, hollows fill first, and the pile advances one terrace at a time. The look is the point of the piece: a real studio, one low lamp, reflections occluded by the neighbouring balls. Change the metal or the fluidity and the pile behaves differently with no code changes.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Dry Caustic Room
backgroundsA high-key white gallery room, seen into one corner. Rippling water light plays down both walls and across the glossy floor, with soft prismatic fringes, and there is no water anywhere. Touch the pointer to the unseen surface and slow rings spread; the caustics bend around them.
LED Room Chrome Field
backgroundsA dozen drops of liquid metal hang in front of the page, and the page is a window. In the LED room, a white box lit by one strip of coloured light, moving the pointer shifts the walls like a real recess and two drops neck, fuse and part. Switch the material between pale iridescent chrome and dark mercury, and the backdrop between the room, a smooth colour gradient and a seamless dusk horizon. One hue control tints the strip, the room and the horizon.
Levitating School Hero
heroesA school of butterfly koi hangs in the dry air of a concrete room, inside one shaft of light. The water they belong to is held in the ceiling. The light draws caustics on the floor, and every fish casts its shadow through the beam. Rest the pointer and they come to look; click and they scatter.