Domino Chain Reaction

About this style

Domino toppling turns a row of standing tiles into a chain reaction: each falling piece strikes the next, and the wave settles to a steady speed set by the spacing and size of the dominoes. Physicists have shown that a domino can topple one roughly one and a half times its size, which lets a chain grow from tiny pieces to huge ones. Builders stage large toppling setups for live crowds and video, with spirals, branching lines and pictures revealed by colored faces. The format is a favorite for ads and explainers about cause and effect.

Make a 10-second domino chain reaction: a spiral of dominoes topples with true cascading timing, then grows into giant dominoes that fall flat to spell a word.

<inputs>
- Word: NUDGE (4–6 letters, one per giant domino).
- Line: "One small push starts everything."
- Brand: Kindling Studio.
- Length: 10 seconds.
If I don't give you something, use the default and don't ask.
</inputs>

<direction>
Set: a matte cobalt table #2B47B8, vignetted to #1C2F80. Dominoes are ivory #F3EEE2 with ink #1C1D24 pips on the forward face; the back face (facing back along the chain) is painted, so fallen ones show only paint from above, ramping coral #FF6A4D → marigold #FFB531 → pink #FF8DB8 along the spiral. The giants' painted faces each carry one Archivo Black letter, upright from the final camera.
Real scale: 48 × 24 × 7.5 mm dominoes, g = 9.81 m/s², 30 mm pivot to pivot, so the wave settles near 1 m/s. About 160 wind outward from the center on an Archimedean spiral 60 mm between turns, leave on a curve that straightens to run left to right, grow 1.4× per domino for five steps, then end in a row of giants spaced 0.85× their height, so each lands almost flat.
Physics, solved once at load at a fixed 1/2000 s step, no library: each domino tips about its front bottom edge, I·θ'' = m·g·r·sin(θ − θc), r = ½√(h² + t²), θc = atan(t/h), I = m(h² + t²)/3. When its top reaches the next, that one starts from a mostly inelastic impact and the striker rides on it, its lean solved from contact geometry, so the trail settles into an even shingle. Tune count and the ball's timing so the last giant lands by 8.4s.
A steel ball rolls in and taps domino 1. A warm upper-left key with soft shadows.
Camera: fov 32, starting low (20°) at the center, aimed at the wavefront averaged over the last 0.4s, climbing on easeInOutSine to 72° by 8.4s: the fallen spiral upper left, the word across the lower half at 55% of frame width.
Type (HTML): the line in Schibsted Grotesk 600, 38px, #F3EEE2, left-aligned with the word, 70px below it; the brand under it in Schibsted Grotesk 500, 22px, uppercase, tracking 0.18em; both rise 14px over 0.5s, easeOutCubic.
Premium is timing you can feel: a wave that gathers speed then holds it, big dominoes falling slower, every piece resting on the next. Cheap is dominoes rotating on a fixed timer like a stadium wave.
Banned: falls on a fixed interval, pieces passing through each other, floating or sliding dominoes, motion blur, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.8s: low over the table at the spiral's center; the ball rolls in and taps the first domino.
- 0.8–5.8s: the wave runs outward round the spiral at a steady pace; the camera follows and climbs.
- 5.8–6.9s: the chain leaves the spiral through five growing dominoes, each falling slower.
- 6.9–8.4s: the giants fall left to right, landing almost flat; the word appears letter by letter.
- 8.4–9.0s: line and brand rise in below the word.
- 9.0–10s: hold.
Other lengths: change the spiral's domino count, never the physics; keep 1s of hold.
</structure>

<build>
One self-contained index.html, inline CSS and JS, on a 1920×1080 (16:9) stage scaled to fit the window, built for 60fps. Google Fonts via <link>, awaited with document.fonts.load() before seek exists.
window.seek(t) sets every visual from t alone: no CSS transitions or animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Simulate the toppling once at load and store angles at 1/240 s; seek(t) only reads them.
Without ?render in the URL, drive seek from requestAnimationFrame; with ?render, don't start that loop.
three.js as an ES module pinned to three@0.160.0 via a jsDelivr import map (`three`, `three/addons/`); preserveDrawingBuffer: true; one render per seek. No image, model or typeface files beyond Google Fonts.
</build>

<check>
Before showing me, step through one frame per second (0–10s) and look at each. Fix overlaps, clipped or cramped text and anything off-style or Banned. Look for a wavefront that stutters, dominoes moving before they are struck, intersecting or floating pieces, letters out of order or upside down. Confirm the final frame holds.
</check>

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

Similar prompts

Low-Poly Landscape Flyover

Made by us

A slow golden-hour glide down a faceted valley: flat-shaded ridges, a low sun, fog melting the far range into the horiz…

Keynote Product Reveal

Made by us

A device built in three.js rises out of total darkness while a softbox reflection glides along its titanium edge, then…

Isometric Miniature City

Made by us

A toy-like isometric city block that builds itself on a floating slab: bevelled buildings rise floor by floor, cars loo…

Extruded 3D Type

Made by us

Chunky two-tone 3D letters swing into place one by one on a seamless studio sweep, lit like a product shot with soft sh…