In a petrol-teal studio, a smoked-glass crystal relic with a copper band spins up, cracks along its facets in apricot light and bursts open; its core streams into a mythic recurve bow as its glass plates hang in orbit and a name plate builds. Inspired by Destiny's engrams.
Written and rendered by AI CSS Animations Oct 19, 2026
Loot reveals turn the moment a game hands over a reward into a short piece of theater: the item arrives sealed, builds anticipation, then opens in light colored by its rarity. Bungie's Destiny (2014) and Destiny 2 (2017) made the idea famous with engrams, faceted polyhedral tokens that players decrypt into weapons and armor. Color-coded rarity tiers, popularized by games such as Diablo II and World of Warcraft, tell players at a glance how rare the prize is. Motion designers borrow the format for unboxings, reward screens and product reveals.
Make a 10-second 3D loot reveal: a sealed crystalline relic spins up, brakes, cracks along its facets and bursts in rarity light, and its core decrypts into a mythic bow while a name plate builds beside it. <inputs> If I don't give you something, use the default and don't ask. - Relic: "RELIC 03 · SEALED", with a meter reading "DECRYPTING 0%" to "100%". - Rarity: MYTHIC (the top tier), its color apricot. - Item: "THE LONG QUIET", a mythic recurve bow. Type line: "Mythic Bow · Ember frame". - Stats: Draw time 620 ms · Range 74 · Stability 68 · Impact 91 (bars out of 100; draw time drawn as 62). - Perk: "Held Breath": "A full draw slows the world around the arrow." - Length: 10 seconds. </inputs> <direction> - Look: a game's reward moment shot like a product film: one sealed object of smoked teal glass and burnished copper in a deep petrol-teal studio, a hot apricot light inside it that leaks out through cracks, then a controlled burst and a precise, almost technical decryption into an elegant object. Light is the reward, but it stays warm and contained: never a white-out. - Palette: studio floor and backdrop petrol #0D2B2F with a soft radial lift #1E5459 behind the subject; relic plates smoked teal #2F6B6E; copper edges and band #C9824A with highlights #F0B88A; core apricot #FFB064, heart cream #FFF1D6, crack light #FFC98A; burst apricot #FF9A4D and cream #FFE6C2 with a few teal motes #7FD6D0; the bow in graphite alloy #2A3236 with satin highlights #9FB3B6, copper riser plates, teal grip cord #2F6B6E, apricot inlay #FFB064 and a cream string #FFE6C2; UI cream #F4EBDD, secondary #9FC2C2, the rarity tab apricot with petrol ink. Apricot against petrol teal is the complementary pair the piece is built on; copper bridges the two. - The relic (1 unit = 10 cm), an original design: a twelve-faced crystal made of two six-sided pyramids meeting at a waist, 2.4 tall and 1.3 across the waist, each face a separate glass plate 0.06 thick with beveled edges (MeshPhysicalMaterial, color #2F6B6E, transmission 0.6, thickness 0.3, roughness 0.15, attenuationColor #1E5459) set in copper edge rails (metalness 1, roughness 0.3); the waist girdled by a copper band 0.16 tall carrying a ring of 24 engraved original glyphs (a CanvasTexture of angular marks on a 5 × 7 grid, roughness and emissive maps from it); seen through the glass, a nested inner crystal of apricot light lines (thin emissive edges of a half-size bipyramid) around a cream heart (a sphere, radius 0.14) that pulses ±12% at 0.8 Hz; three small copper tetrahedra orbit it as satellites at radius 1.4. It hovers 0.6 above a low round plinth of dark stone #10282B with a copper rim, and the floor reflects it softly (roughness 0.35). - Light, clear from the first frame: a key DirectionalLight #FFF1E2 at 2.2 from the upper left (elevation 45°) with soft shadows (PCFSoftShadowMap, 2048); a HemisphereLight #CFEDEA / #0D2B2F at 0.7; two teal rims #7FD6D0 at 1.6 from behind left and right; an apricot PointLight inside the relic whose intensity follows the core, so the plates glow from within and the plinth warms; RoomEnvironment through PMREMGenerator at envMapIntensity 0.6 for the copper and glass. ACESFilmic, exposure 1.1. The plates always read as teal glass with bright copper edges, never as a dark silhouette. Post: EffectComposer with UnrealBloomPass (strength 0.55, radius 0.4, threshold 0.82) so only the core, cracks, inlays and burst bloom, then OutputPass. - Spin-up: the relic turns at 20°/s and accelerates to 270°/s (easeInCubic), rising 0.3; the copper band counter-rotates at half that speed; its glyphs light one by one around the ring; thin apricot hum rings expand from the waist twice a second and fade; drifting motes spiral inward; the satellites speed up and fall into the relic. Facet glints stay soft and small (no glint larger than 2% of the frame), so the spin never strobes. - Brake and crack: the spin stops with easeOutExpo, a face toward the camera, overshooting 2° and settling. A tremble begins (±0.6° from smooth seeded noise, not per-frame random). Light runs down every copper seam from the top apex to the bottom apex in 0.4 s; then crack networks (precomputed seeded branching polylines across each plate, 6–10 branches each) spread across every face in 0.4 s as glowing apricot lines, light leaking through them; 40 small glass chips spall off on short ballistic arcs. - Burst: the plates fly outward along their face normals at 3–5 units/s with drag (closed form, k = 3.2), tumbling on seeded axes, and come to hang in a loose orbit 2.6–3.4 from the center, turning slowly; the heart swells to a sphere of light (radius 0.14 to 0.6 in 0.3 s, then fading); a flat shock ring expands to 1,200px across, thinning; 40 tapered light streaks radiate and retract; 500 motes fly on ballistic paths with drag and fade. Average frame brightness rises no more than 20% within any 0.33 s: the burst is warm apricot and cream, never white. - Decrypt: the heart breaks into 1,800 glyph particles (small apricot squares and strokes) that swirl once around the axis and converge onto points sampled on the bow's surface, arriving from the grip outward to the tips; then a horizontal scan plane runs from the top tip to the bottom tip and, above it, the solid bow replaces its particles, with a 0.05-unit apricot band at the plane and thin contour lines just below it. - The bow (3.2 tall, standing vertical), an original recurve built as the real thing: a riser 1.0 tall extruded from a sculpted side profile with a sight window cut out, an arrow shelf and copper side plates; a grip wrapped in teal cord (a helix of TubeGeometry); two limbs lofted along curves that sweep back from the riser and recurve forward at the tips, their cross-section tapering from 0.16 × 0.05 to 0.06 × 0.03, each with an apricot inlay groove running its length; nock rings at the tips; a string 0.008 thick from tip to tip, faintly emissive. Graphite alloy MeshPhysicalMaterial (metalness 0.8, roughness 0.35) with a fine brushed normal map. No arrow. - Camera: fov 30. It starts with the relic centered at (960, 520), about 480px tall, and eases back and right over the burst so the finished bow stands about 760px tall centered at (720, 560), its orbiting plates inside x 300–1140 and clear of the name plate. Moves on cubic-bezier(0.45, 0, 0.2, 1); no shake. - UI (HTML over the canvas): kicker "RELIC 03 · SEALED" in Azeret Mono 500, 20px, tracked 0.16em, secondary, at (120, 110); the decrypt meter at the bottom center, a 64px ring (2px, apricot fill) beside "DECRYPTING 0%" in Azeret Mono 500, 22px, the ring and the number filling to 100% by 3.0 s, then fading out by 3.6 s. The name plate at x 1160–1800, y 280–820: a rarity tab "MYTHIC" (Azeret Mono 600, 22px, petrol on apricot, 6px radius) that slides in; the name in Cinzel 700, 76px, cream, in two lines; the type line in Instrument Sans 500, 26px, secondary; a 1px apricot rule; four stat rows (label in Instrument Sans 500, 22px; a 300 × 8 bar, cream fill on #1E5459; the value in Azeret Mono 500, 22px, counting up as its bar fills); the perk block: a 40px apricot ring icon with a tick inside, "Held Breath" in Instrument Sans 700, 24px, and its line in Instrument Sans 400, 22px, secondary. - Premium: a sealed object of real glass and copper with a light inside it, cracks that follow its facets, a burst that stays warm and readable, and a decryption precise enough to feel engineered. Cheap: a glowing gold blob, a white flash that hides a swap, confetti, an item that simply fades in. - Banned: white or full-frame flashes, guns, blood, loot shapes, names, icons or fonts from any real game, lens flares, rainbow colors, a black void, motion blur, camera shake, strobing facet glints, anything flashing more than 3 times per second. </direction> <structure> - 0.0–1.2s: the relic hovers over its plinth, turning slowly and bobbing ±0.05 at 0.4 Hz, the heart pulsing, satellites orbiting, motes drifting; the kicker and the decrypt meter rise in. - 1.2–3.0s: spin-up: the relic accelerates and rises, the band counter-rotates and its glyphs light, hum rings pulse outward, motes spiral in, the satellites fall into it; the meter counts to 100%. - 3.0–3.4s: the brake: it stops dead with a 2° overshoot, a face to the camera, and starts to tremble. - 3.4–4.2s: the seams light apex to apex, the cracks spread across every plate, light leaks out, chips spall away. - 4.2–4.7s: the burst: plates blow outward and tumble, the shock ring and streaks, the motes; the camera begins easing back. - 4.7–6.0s: the decrypt: the heart's particles swirl and converge into the bow (4.7–5.5 s); the scan resolves it from tip to tip (5.4–6.0 s); the plates slow into their orbit. At 6.0 s the finished bow stands complete and still at the left, faced front, the plates hanging round it, a few motes drifting: nothing mid-scan. - 6.0–7.6s: the bow turns to a 35° three-quarter view on cubic-bezier(0.45, 0, 0.2, 1) and a light pulse runs once along its string; the rarity tab slides in (6.2 s), the name rises 10px as it fades in (6.4 s), the type line follows (6.7 s) and the four stat bars fill 0.15 s apart from 6.9 s. - 7.6–8.4s: the perk block rises in (7.7 s); the plates orbit slower and dim, shedding a few ember motes that drift upward. - 8.4–10.0s: hold: the bow sways ±3° on a slow sine, the plates turn, embers drift. For other lengths, stretch the spin-up and the plate orbit; keep the crack and burst timings 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. - The spin angle is the closed-form integral of its speed curve; plate, chip and mote paths are closed-form ballistic paths with drag from seeded launch data; crack polylines, particle targets on the bow's surface and every particle's swirl path are precomputed once at load; crack growth, scan height and glow levels are uniforms set from t. Draw the glyph band texture after the fonts load, and call composer.render() once per seek in place of renderer.render(). </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 relic reads as a twelve-faced teal glass crystal with copper rails and a lit core from the first frame (never a dark shape), the spin never strobes, the cracks follow the facets and branch across every plate, the burst stays apricot and cream with no white frame (log mean luminance from 4.0 to 5.0 s; no jump over 20% within 0.33 s), the particles land on the bow's surface, the bow reads as a recurve with a riser, cord grip, recurved limbs and string, the 6.0 s frame shows the complete bow with no scan band, the stats read 620 ms, 74, 68 and 91, and the plates never cover the name plate. 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.
A slow golden-hour glide down a faceted valley: flat-shaded ridges, a low sun, fog melting the far range into the horiz…
A device built in three.js rises out of total darkness while a softbox reflection glides along its titanium edge, then…
A toy-like isometric city block that builds itself on a floating slab: bevelled buildings rise floor by floor, cars loo…
Chunky two-tone 3D letters swing into place one by one on a seamless studio sweep, lit like a product shot with soft sh…
More like this on the motion design inspiration board: 3D motion design inspirationParticle animation inspiration