Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

Bouncing Marbles in a Box

Shiny chrome balls pour into a glass box, bounce, roll and settle while the camera glides around.

Finished scene, V3 Scenes3DReal physics0 lines of codev1.0.0

In Science & maths, Light, glass & shine, Toys, games & parties

Next: Newton's CradleSurprise me

Bouncing Marbles in a Box 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

18
0.68
4
0.35

0 keeps the camera still; 1 is a full circle with an eased start and stop.

11.5
5.2
0.1

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

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

What it is

A complete scene built from four ingredients: real bouncing-ball physics, chrome material with studio lighting, a correctly set-up glass box and a smooth orbit camera. Balls drop in from above, collide, spin and come to rest. Switch to candy-coloured balls or a mix, change the number of balls, the bounciness and how far the camera travels. Use it as-is, or take just the parts you need.

Built from these ingredients

Make it your own

  • Swap the balls for other shapes (keep the physics positions) — dice, candies or logos.
  • Keep the glass box and physics, drop the orbit and use a fixed hero camera.
  • Recolour with ballStyle candy for a playful version.

Good to know

  • Balls do not reflect each other (environment-map reflections only).
  • No caustics through the glass.

Technical details

Technical details
Implementation
Three.js 0.185.1 (WebGL) · ES module demo.js
Exports
  • createDemo({ canvas, width, height, params, fps, duration }) => { renderFrame(info), dispose() }
Dependencies (exact)
  • three@0.185.1 (source) — WebGL rendering.
  • bouncing-balls@1.0.0 (source) — Physics.
  • chrome-material@1.0.0 (source) — Material and environment.
  • glass-container@1.0.0 (source) — Glass box.
  • orbit-camera@1.0.0 (source) — Camera motion.
  • apw-runtime@1.0.0 (source) — Harness and export tools.
How it fits a scene

Coordinates: Y-up. Glass box inner volume 4 × 3 × 4 with floor at y = 0 — identical to the physics box.

Lighting: Studio environment from chrome-material; tone mapped.

Timing: Physics baked for the clip's fps/duration; camera driven by progress.

Output
1080×1080, 30 fps, 8 s · physics simulation, baked at a fixed step (deterministic) · not a loop — Balls fall and settle once.
Tested
Rendered 240 frames on 2026-10-02 in Chrome 151.0.7922.137 headless on Linux 7.0.0-31-generic (x64), Node 22.14.0 (WebGL 2 via SwiftShader (software)). Same frame twice from fresh pages: identical.
Performance
Glass transmission adds one render pass. Physics bake ~50 ms at load. 40 balls max in this example.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- bouncing-marbles-box/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:39d897b5acb0267a… · other versions: 1.1.0
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License (see LICENSE in this folder). Third-party: three.js 0.185.1 (MIT). License details
Provenance
Original code written for AI Pixel Wizard in October 2026.
BinMore like this

More like this

Play these full screen

Ferrofluid

3D object3DSeamless loop16 seconds

Piano Keys

3D object3DSeamless loop16 seconds