Skip to content

Balanced Stones

A cairn of smooth river stones balanced one on another, rocking ever so gently in low light. Loops perfectly.

3D object, V2 Objects3DSeamless loop, verified302 lines of codev1.0.0

In Nature & weather

Next: Candle FlameSurprise me

Balanced Stones preview
Starting live preview…
00:00:00:00 / 00:00:00:01

Live, running the real source at reduced resolution.

Your current settings go with it. Combine several clips and hand them over together from your sequence.

Effect controls

Presets

7
1

How much each stone rocks on the one below.

1

How far each stone sits off the centre of the one below, and how tilted it is.

4

The preview runs the same code your AI receives. These settings travel with the hand-off.

Info

What it is

A stack of river stones, each a little smaller than the one below and each a different pebble: rounded and flattened, worn smooth, painted with the grain of its rock (speckled granite, banded slate, a dark pebble with its white quartz band, layered sandstone, terracotta, white marble with grey veins, green jade). The cairn never quite stops moving: every stone rocks on its contact point with the one beneath, and the rocking adds up, so the top stone sways the most, slowly, as if a breath might topple the lot. It stands on a pale beach in low morning light that throws a long soft shadow, while the camera drifts slowly round it. Choose the mix of rock, the number of stones, how much they rock and lean, the ground, the light, the backdrop and whether the camera drifts.

Reuse it in your own idea

  • Meditation or wellbeing backdrop: River stones, morning sun.
  • Calm product-style loop: Jade and marble, noon.
  • Travel or retreat opener: Sandstone at dusk.

Which part is reusable

src/balanced-stones.js is the ingredient your AI reuses. demo.js is only the example scene around it, and uses chrome-material only for the demo.

Good to know

  • The stones are not simulated: their balance is staged (the offsets are small), and a lean above about 1.5 can look physically impossible.
  • The stones' undersides are not flat, so they sink slightly into the stone below rather than touching at a point.
  • The ground is a flat textured disc, not a beach with ripples.

Technical details

Technical details
Implementation
Three.js 0.185.1 (WebGL) · ES module src/balanced-stones.js
Exports
  • createBalancedStones({ stones?, rock?, rocking?, lean?, seed?, anisotropy? }) => { group, stones, setProgress(progress), dispose() }
  • ROCKS: { river, mono, warm, jade }
Dependencies (exact)
  • three@0.185.1 (source) — Renderer, geometry and physical materials.
  • chrome-material@1.1.0 (demo) — Studio environment light, backdrop and contact shadow.
  • apw-runtime@1.0.0 (demo) — Demo harness.
How it fits a scene

Coordinates: The cairn stands on the plane y = 0 at the origin; the base stone has a radius of about 1 and the stack of seven reaches y ≈ 4; the camera orbits a point at y = 1.9 from a low angle.

Lighting: A warm directional light with a soft shadow map (morning, noon or dusk), a hemisphere fill, the studio environment for the sheen and a soft contact shadow under the base.

Timing: setProgress(progress) sets every rocking angle as a whole number of cycles of the loop; frames render in any order.

Output
1080×1080, 30 fps, 12 s · procedural (computed from the frame number) · seamless loop — Each stone rocks about two axes in sines of a whole number of cycles per loop (one to three), the rocking of every stone below adds to the stones above, and the camera drift is a sine of the loop, so the last frame meets the first.
Tested
Rendered 360 frames on 2026-10-06 in Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0 (WebGL 2 via SwiftShader (software)). Same frame twice from fresh pages: identical. Loop: Frame 0 vs end state (progress 1): mean |Δ| 0.0000, max |Δ| 0 of 255.
Performance
Seven stones of about 12 000 triangles each, one shadow map, anti-aliasing. About 19 ms a frame at 1080p on an integrated Intel GPU. Software WebGL (no GPU) renders in a second or two a frame.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- balanced-stones/1.0.0 --out my-video.mp4Needs Node 18+, ffmpeg and Chrome/Chromium. Add --params my-settings.json (from Copy settings) for your own settings.
Version
1.0.0 · sha256:e0d8ddbc87bb48e3…
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder. License details
Provenance
Adapted from the owner's threejs-sketches/objects-scenes/pebble-stack (MIT) and rebuilt for AI Pixel Wizard in October 2026 as an original object: bumped super-ellipsoid pebbles with seam-averaged normals, seeded procedural rock textures (granite, slate, quartz-banded basalt, sandstone, terracotta, marble, jade) and a nested chain of pivots so the rocking accumulates up an exact-loop stack.
BinMore like this

Zen Garden

Background3DSeamless loop20 seconds

Snowfall

Effect2DSeamless loop10 seconds