Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

Kinetic Mobile

A Calder-style hanging mobile of brass arms and lacquered shapes, swaying and creeping round forever. Loops perfectly.

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

In Machines & clockwork, Craft & heritage

Next: HourglassSurprise me

Kinetic Mobile 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

3

Levels of arms: 2 gives 4 shapes, 3 gives 8, 4 gives 16.

1
1

Whole turns the arms creep round per loop.

11

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

View code Sample video (default settings, 1.6 MB)
Info

What it is

A hanging mobile in the manner of Alexander Calder: a tree of slender brass arms, each carrying two things on fine strings — a lacquered shape, or another arm that carries two more. Every arm turns about its own string at its own pace, swaying and creeping round, and every shape spins slowly, so the whole sculpture keeps finding new arrangements. Choose how many levels of arms (4, 8 or 16 shapes), the colours (primary, pastel, sunset or mono), how far the arms sway, how many whole turns they creep round per loop, the seed, the backdrop colour and whether the camera sways.

Reuse it in your own idea

  • Gallery: Primary, three levels.
  • Nursery: Pastel.
  • Evening: Sunset, dark.

Which part is reusable

src/kinetic-mobile.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

  • Arms do not physically balance: the motion is a formula, so heavy shapes do not tilt their arms.
  • Shapes hang at fixed heights below their arms.

Technical details

Technical details
Implementation
Three.js 0.185.1 (WebGL) · ES module src/kinetic-mobile.js
Exports
  • createMobile({ levels?, palette?, sway?, spin?, seed? }) => { group, setProgress(progress), dispose() }
  • PALETTES: { primary, pastel, sunset, mono }
Dependencies (exact)
  • three@0.185.1 (source) — Renderer, geometry and shader 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 mobile hangs from a hook at y ≈ 9.5 on a thread to the root arm at y ≈ 6.7; the root arm is 3.4 wide and each level is 0.58 times the one above; the camera looks at y = 4.8.

Lighting: A warm key light with a shadow map, a shadow-catching floor and the studio environment.

Timing: setProgress(progress) sets every arm's turn and every shape's spin; frames render in any order.

Output
1080×1080, 30 fps, 20 s · procedural (computed from the frame number) · seamless loop — Every arm creeps round a whole number of turns per loop and sways in a sine of whole cycles of the loop, every shape turns a whole number of times and the camera sway is a sine of the loop, so the last frame meets the first.
Tested
Rendered 600 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
Up to 16 shapes and 30 arms as separate meshes (a few hundred draw calls at most) with a shadow map: about a millisecond a frame on an integrated Intel GPU. Software WebGL renders in about a second a frame.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- kinetic-mobile/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:24ccb373de0646a7…
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/kinetic-mobile (MIT) and rebuilt for AI Pixel Wizard in October 2026 as an original studio object: a seeded recursive tree of brass arms and lacquered shapes with whole-turn creep, whole-cycle sway and spinning shapes on an exact loop.
BinMore like this

More like this

Play these full screen

Hourglass

3D object3DSeamless loop16 seconds

Music Box

3D object3DSeamless loop12 seconds

Astrolabe

3D object3DSeamless loop16 seconds

Gyroscope

3D object3DSeamless loop16 seconds