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.1.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.1 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.1.0 (source) — Glass box, cove backdrop and backlight.
  • 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-03 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.
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.1.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.1.0 · sha256:2795f54cc2445bbf… · other versions: 1.0.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. Demo scene rebuilt in October 2026 to the catalog quality bar (docs/QUALITY.md).
BinMore like this

More like this

Play these full screen

Ferrofluid

3D object3DSeamless loop16 seconds

Piano Keys

3D object3DSeamless loop16 seconds