AI CSS Animations

Marble Run

Four glass marbles, a cobalt cat's-eye, an amber swirl, an aqua and an opal, roll down a beechwood run of zig-zag rails, catcher cups and a spiral chute, each ringing a brass bell before coming to rest in the tray as a tally counts them home.

Written and rendered by AI CSS Animations Oct 18, 2026

Type
prompt
Made with
Claude Opus 5.5 in Claude Code
Built in
three.js
Topics
3D
What Claude made from the prompt below in Claude Code: one HTML file rendered frame by frame to video. Silent preview.

About this style

Marble runs are construction toys in which marbles roll along tracks, chutes and spirals under gravity alone. A ball rolling without slipping down a slope accelerates at five-sevenths the rate of a frictionless slide, because part of its energy goes into spin. Glass marbles come in familiar types, such as cat's-eyes with colored vanes inside clear glass and swirls with twisted ribbons of color. Toy makers, science channels and 3D artists film marble runs for satisfying loops that show cause and effect at a glance.

The prompt

Make a 10-second 3D film of a wooden marble run: four glass marbles roll down zig-zag rails and a spiral, and each rings a brass bell at the bottom.

<inputs>
If I don't give you something, use the default and don't ask.
- Maker: Tumblewick Toyworks (fictional).
- Title: "Down and around"
- Line: "Beechwood marble run No. 12"
- Marbles, in order: a cobalt cat's-eye, an amber swirl, a clear aqua with tiny bubbles, a milky opal with a red ribbon.
- Length: 10 seconds.
</inputs>

<direction>
- Look: an heirloom toy filmed like a product: honey beech, oiled walnut, polished brass and clear glass in warm light, against a cool slate backdrop.
- Palette: backdrop #2D3846 lifting to #4A5A6E in a soft radial behind the run; tabletop pale oak #CDB38E; beech #E3C38F with grain #C9A16C; walnut #5A3A28; brass #C99A4E with highlights #F5DDA0; marbles cobalt #2448C8, amber #E88A1E, aqua tint #8FE3E0, opal #EDE6DA with a #D2352B ribbon; type #F1E9DC, secondary #A9B4C2, accent beech.
- The run (1 unit = 5 cm, about 8.6 units tall), built with real joinery: a walnut base plank 10 × 3 × 0.6 with rounded edges; two chamfered beech posts (0.5 square, 8 tall) joined by a top rail; four sloped U-channel rails (0.8 wide outside, a 0.56 groove with a rounded floor, end grain at the cut ends) zig-zagging down between the posts, each ending in a curved catcher cup that drops the marble onto the rail below; small brass screw heads where rails meet posts; a loading funnel (a turned beech cup) at the top left; at the right end of the base, a spiral chute: a helical channel with a raised outer lip winding 2.5 turns (radius 1.2) around a turned maple column; a short run off the spiral to a curved lip that tips each marble against the bell; and a shallow collecting tray along the front of the base, where the marbles roll to rest touching. The bell: a brass hand-bell profile 1.2 tall (LatheGeometry with a flared lip and a domed crown) hanging on a pin from a small beech gallows, with a ball clapper on a rod.
- Wood: MeshStandardMaterial, roughness 0.55, with generated grain CanvasTextures (noise stretched along each part's length with a few darker growth lines; end grain shows rings) and matching roughness maps; walnut darker and oilier (roughness 0.4). Brass: MeshPhysicalMaterial, metalness 1, roughness 0.22, clearcoat 0.2.
- Glass, the hero: each marble is radius 0.25 (a 25 mm marble) in MeshPhysicalMaterial with transmission 1, ior 1.52, thickness 0.5, roughness 0.02 and envMapIntensity 1.2, with an inside you can see through the glass: the cat's-eye has three twisted cobalt vanes (thin curved planes through the center); the swirl a helical amber ribbon; the aqua takes its tint from attenuationColor #8FE3E0 (distance 0.8) and holds 10 tiny opaque white seed bubbles; the opal is a milky core sphere (radius 0.17, roughness 0.3) wrapped in a red ribbon under a clear shell. Each marble casts a soft shadow with a small bright caustic spot inside it (an additive decal offset away from the key light).
- Environment: build one once with PMREMGenerator.fromScene from a small room holding a large warm overhead softbox, a warm strip at left and a dim cool panel at right, so every marble shows a crisp window reflection and a bright rim, and the brass shows long highlights instead of flat yellow.
- Light: key DirectionalLight #FFE9CC at 2.6 from the upper left at 50° with soft shadows (PCFSoftShadowMap, 2048) of rails and posts on the table and of marbles in their grooves; a HemisphereLight #DDE6F2 / #6E5A46 at 0.7; a cool rim light #9FB8D8 from behind right so the run separates from the slate. ACESFilmic, exposure 1.05. The wood reads warm and fully lit from the first frame.
- Physics, precomputed once at load at a fixed 1/600 s step: each marble travels its track by arc length s, rolling without slipping, so its acceleration along the track is (5/7)·g·sinθ − c·v, with g = 196 units/s² and a light rolling drag c = 0.6; at each catcher it drops on a short parabola to the rail below and loses 30% of its speed; in the spiral it rides up the outer lip as it speeds up (bank from v²/r). Its spin angle is distance ÷ 0.25 about the axis perpendicular to its travel. Store s(t) per marble; seek(t) only reads and interpolates. Tune the slopes within 4–9° so the leader rings the bell at 5.0 s. Marbles leave the funnel 0.8 s apart and never touch until the tray, where each rolls until it stops against the one before it.
- Bell: each strike swings it as a damped pendulum (9°, period 0.7 s, decaying over 0.8 s) with the clapper swinging opposite, and a thin brass-colored ring (2px, 30%) expands 60px from the bell's lip and fades over 0.5 s; never more than two rings at once.
- Camera: fov 32, one continuous crane on easeInOutSine: close at the funnel with the first marble in the lower third; craning down alongside the zig-zag with the leader; settled by 5.2 s on a three-quarter view of the spiral and the bell; pulling back from 6.6 s to the whole run on its base by 8.0 s, the run centered at x 1200 and clear of the type.
- Type (HTML over the canvas): kicker "TUMBLEWICK TOYWORKS" in Sora 600, 20px, tracked 0.16em, accent; title Sora 600, 72px, #F1E9DC, top-left at (120, 110); line Sora 400, 26px, secondary, beneath. A tally at bottom-left from (120, 880): "Marbles home" and "Bell rings" in Sora 500, 22px, secondary, each with its count in Chivo Mono 500, 36px, tabular figures, going 0/4 → 4/4 and 0 → 4 as each event happens. Text rises 12px as it fades in over 0.5 s on cubic-bezier(0.22, 1, 0.36, 1).
- Premium: glass that reflects and refracts with its vanes inside, wood with grain and end grain, brass that holds a highlight, marbles that speed up and slow down as physics says. Cheap: shiny colored balls sliding at constant speed down orange tubes.
Banned: plastic tubes, neon, marbles sliding without rolling, constant-speed motion, marbles passing through rails or each other, bloom, motion blur, camera shake, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–1.0s: close on the funnel; the cobalt marble rolls out onto the top rail at 0.4 s; the kicker and title rise in.
- 1.0–3.6s: the marbles follow 0.8 s apart down the zig-zag, dropping from catcher to catcher; the camera cranes down with the leader.
- 3.6–5.2s: the leader enters the spiral and rides up its lip as it speeds; the camera settles on the spiral and the bell; at 5.0 s the leader rings the bell and rolls into the tray.
- 5.2–6.6s: the next marbles spiral down and ring at about 5.8 and 6.6 s; at 6.0 s one marble rolls in the tray, one has just left the bell and one is in the spiral.
- 6.6–8.0s: the camera pulls back to the whole run; the last marble rings at about 7.4 s; the line rises in at 7.6 s.
- 8.0–8.8s: the last marble rolls to rest against the others and the bell settles.
- 8.8–10.0s: hold.
For other lengths, add or remove marbles at the same 0.8 s spacing; keep the descent near 4.6 s and at least 1 s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: every shape and texture is generated in code.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative is solved analytically from t or precomputed once at load at a fixed step. Past the end, seek clamps to the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek.
- Engine: three.js as an ES module pinned to three@0.160.0 through an import map on jsDelivr (`three` and `three/addons/`). WebGLRenderer with antialias, preserveDrawingBuffer: true and setPixelRatio(window.devicePixelRatio); render once at the end of every seek. Text is HTML over the canvas.
- Marble arc-length tables are precomputed once at load at a fixed step; the bell and clapper are closed-form damped swings from each strike time; the camera is a closed-form point on its path.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check each marble shows a window reflection, a bright rim and its inside through clear glass, rolls (its vanes turn) rather than slides, speeds up on slopes and in the spiral, never intersects a rail or another marble, and rings the bell once, that the wood shows grain and the brass long highlights, and that the tally matches what happened. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

More like this on the motion design inspiration board: 3D motion design inspiration