Glass Shatter

About this style

Ordinary annealed glass breaks the way a struck window does: radial cracks run out from the point of impact and concentric cracks link them, leaving a spiderweb of long, dagger-shaped shards, while toughened safety glass crumbles into small cubes instead. The cut edges of window glass look green because of the iron it contains. High-speed cameras made slow-motion shattering a fixture of commercials, title sequences and music videos, often played forward and then in reverse so the pieces fly back together.

Make a 10-second slow-motion glass shatter: a pane etched with a word breaks from a single impact, its shards hang in the air, then fly back and lock together whole.

<inputs>
If I don't give you something, use the default and don't ask.
- Etched word: UNBROKEN
- Studio: Corvell Glass Studio (fictional).
- Line: "Cut, etched and finished by hand."
- Length: 10 seconds.
</inputs>

<direction>
- Palette: a seamless studio sweep (a cyclorama mesh, the floor curving up into the back wall) shading from #FF8E5E at the top through #E8502F at the floor line to #C93A23 at the front edge; glass faces barely tinted #EAF4EF; float-glass edges #5FA88F; frosted etching #FFFFFF; brushed steel #B9BEC3; type #FFF4EA, secondary #FFD9C4.
- The pane: 1.8 × 0.9 units and 0.012 thick, standing on two brushed-steel foot clamps (rounded blocks 0.16 × 0.06 × 0.1, each with a slot and two hex screws) on the sweep floor, centered at screen (960, 450) and about 1180px wide in the opening view.
- Glass: MeshPhysicalMaterial with transmission 1, roughness 0.02, ior 1.52, thickness 0.012, attenuationColor #CFE9DE, attenuationDistance 0.6, specularIntensity 1, envMapIntensity 1.2. Every edge face (the pane's rim and every broken edge) gets its own material, transmission 0.4, color #5FA88F, attenuationColor #3E8E72, attenuationDistance 0.02, roughness 0.15, so edges read as bright green lines, the tell of real glass.
- Light, so the glass is visible from frame one: bake an environment once with PMREMGenerator.fromScene from a small room with two tall white softboxes (left and right, angled in) and a long top strip, so every face and shard carries crisp white strip reflections; a warm SpotLight from the upper left with soft shadows (PCFSoftShadowMap, 2048) casting the clamps' and shards' shadows onto the sweep; a HemisphereLight fill. ACESFilmic, exposure 1.0. Even intact, the pane shows its green edges, two vertical highlight streaks and the sweep bending through it.
- The word: UNBROKEN in Syne 700, uppercase, letters 150px tall in the opening view, tracked 0.06em, centered on the pane. Draw it once into a 4096 × 2048 canvas used as the alphaMap of a white, rough layer (roughness 0.85, opacity 0.7) 0.0005 in front of each shard's front face, with UVs from the shard's original place on the pane, so the letters break with the glass and reassemble exactly.
- Fracture, built once at load from a seeded PRNG, the way annealed glass breaks: impact at pane coordinates (−0.28, 0.06); 16 radial cracks (evenly spaced angles with ±7° jitter, each a polyline with 2–3 small kinks) crossed by 5 concentric cracks at radii 0.04, 0.11, 0.22, 0.4 and 0.7 (±12% jitter), sharing vertices so cracks meet cleanly, clipped to the pane rectangle; split the innermost cells into 2–3 small triangles each. That gives about 110 shards: slivers and crumbs near the impact, long daggers toward the rim. Extrude each polygon to the pane's thickness with a 0.0015 bevel.
- The break, solved in closed form per shard from seeded values: velocity outward from the impact of 0.35 ÷ (distance + 0.15), plus 0.25–0.6 toward the camera; gravity −0.6; spin up to 2.2 rad/s about a random axis, faster for smaller shards. Position p(τ) = p₀ + v·τ + ½·g·τ², rotation = axis-angle(ω·τ). A slow-motion clock drives it: τ(t) = 1.0·(1 − e^(−(t − 2.25)/0.45)), a fast first instant and then a crawl, held near its peak, then returned to 0 on easeInOutCubic over 6.6–8.2 s, so the shards retrace their paths exactly and lock home with a 1px settle.
- Impact: a chrome ball bearing (radius 0.045, mirror steel) flies in from the right foreground, strikes at 2.0 s and passes through. Over 2.0–2.25 s the cracks race out from the impact as thin white lines, radial ones first, rings joining them; 400 seeded glass crumbs (tiny bright points) spray from the impact and drift. On reassembly the crack lines show faintly and fade over 0.6 s; the ball and crumbs are gone.
- Camera: fov 30, a front view slightly left and above (yaw −8°, pitch 6°); during the hang (3.0–6.6 s) it orbits 16° to the right on easeInOutSine so the shards' depth and edges show, then returns to the front view for the end.
- Type (HTML over the canvas): the studio name in Onest 600, 22px, tracked 0.24em, uppercase, #FFF4EA, centered at y 902; the line in Onest 400, 30px, #FFD9C4, centered at y 950.
- Easing: as above; text rises 12px as it fades in over 0.6 s on cubic-bezier(0.22, 1, 0.36, 1).
- Premium: glass that looks like glass (green edges, strip reflections, the sweep bending through it), a believable break pattern, the same paths run backward to the exact pane. Cheap: a flat picture cut into triangles that fade out, a white flash, an explosion that never comes back.
Banned: white flashes, lens flares, bloom or glow, hammers, fists or injury, flat untextured triangles, shards crossing through each other once whole, motion blur, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–1.4s: the intact pane on its clamps against the sweep; strip highlights slide across it as the camera eases in 3%; the etched word reads clearly.
- 1.4–2.0s: the ball bearing streaks in toward the impact point.
- 2.0–2.25s: impact: the cracks race outward in a spiderweb; crumbs spray.
- 2.25–3.0s: the pane bursts: shards fly outward and toward the camera, fast for an instant, then slow to a crawl.
- 3.0–6.6s: the shards hang almost still, turning slowly and catching the strip lights as the camera orbits; pieces of the letters ride on them.
- 6.6–8.2s: everything flies back along the same paths and locks into one pane; the crack lines fade.
- 8.2–8.8s: the studio name and line rise in below the pane.
- 8.8–10.0s: hold: the whole pane and the word UNBROKEN, still.
For other lengths, stretch the hang; keep 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.
- Every shard's transform is a closed-form function of τ(t), and the crack reveal and fade are functions of t; nothing is integrated frame to frame.
</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 the pane reads as glass from the first frame (green edges, strip highlights, the sweep visible through it), every shard carries its piece of the letters and returns to its exact place, the word reads cleanly at the end, no shard covers the type, the 6 s frame shows the hanging shards clearly lit, and nothing flashes at the impact. 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

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…