A frosted zircon crystal on a brass dop is ground on a spinning copper lap into a 57-facet round brilliant, tier by tier as a cutting diagram fills in, then polished clear and raised to the light, where it turns and throws spectral fire in a verdigris studio.
Written and rendered by AI CSS Animations Oct 19, 2026
Faceting cuts a gemstone into flat, polished planes at exact angles so that light entering the top is reflected back out of it. The cutter fixes the stone to a dop stick in a faceting machine, which sets each facet's angle on a protractor and its position around the stone on an indexing gear, while a spinning lap charged with diamond grinds and then polishes it. The round brilliant has 57 facets, or 58 with a culet, and Marcel Tolkowsky published a widely used analysis of its proportions in 1919. The flashes of spectral color called fire come from dispersion, which is strong in diamond and in zircon.
Make a 10-second 3D lapidary film: a rough zircon crystal is faceted on a spinning copper lap into a 57-facet round brilliant, polished clear, then raised to the light, where it turns and throws spectral fire. <inputs> If I don't give you something, use the default and don't ask. - Cutter: Mirrow & Pell, Gem Cutters (fictional). - Title: "Fifty-seven facets" - Line: "Colorless zircon · round brilliant · 8.2 mm · 2.68 ct" - Cutting order: girdle G, pavilion P1 and P2, transfer, crown C1, C2 and C3, table T. - Length: 10 seconds. </inputs> <direction> - Look: a macro film at a lapidary's bench, lit like a jewelry product shot: a verdigris studio, a polished copper lap, brushed-steel machine parts and one colorless stone that goes from frosted rough crystal to white faceted preform to a clear brilliant full of fire. - Palette: backdrop verdigris #123E3F lifting to #2C6D68 in a soft radial behind the stone; copper lap #C46E3F with highlights #F4B78C and darker lap tracks #8E4A2A; machine steel #B8BDBF and black anodized #22272A; dop brass #C9A24E; dop wax oxblood #7A1F2B; frost #DCE6E2; water #CFE8E6; type #F4EFE6, secondary #9CC4BD, accent copper #E48C58. Copper and verdigris are one metal, fresh and weathered: keep every warm tone on the metal and every cool tone in the room, and let the stone's fire be the only spectral color in frame. - The machine, built like a real faceting machine (1 unit = 1 mm): a horizontal lap 150 across and 4 thick, its face polished copper with fine concentric lap tracks (a generated anisotropic roughness map) under a thin wet film (clearcoat 1), set in a splash-pan ring; a steel mast 20 across rising behind it; a head on the mast carrying a protractor (a quarter-circle plate engraved every degree in a CanvasTexture, numbered every 10°, with a pointer that reads the quill's angle); the quill, a steel tube 14 across and 70 long, pivoting in the head; at its back end a 96-tooth index gear with a spring pawl seated in a tooth; at its front a brass dop 4 across with an oxblood wax collar holding the stone. The pointer always reads the angle of the facet being cut, and the pawl steps tooth by tooth as the index changes. - The rough: a colorless zircon crystal, a square prism capped with four-sided pyramids at both ends (in girdle radii: prism half-width 1.12, pyramid faces at 48° to the girdle plane, each sitting over a prism face, with apexes at z +1.25 and −1.45), each face tilted ±2° and offset ±3% by a seeded PRNG so it reads as natural, then checked at load so the finished stone stays inside it with at least a 3% margin; its faces are frosted and carry faint triangular etch marks (a generated normal map). - The finished stone, as planes n·p = d in girdle radii (R = 1 = 4.1 units; angle from the girdle plane; index on the 96-tooth gear, where 96 is azimuth 0° and one tooth is 3.75°; crown and table normals point toward +z, pavilion normals toward −z): - G girdle: 90°, 64 flats every 5.625°, d 1.0000 - P1 pavilion mains: 40.75°, index 96-12-24-36-48-60-72-84, d 0.6679 (they meet in a point, the culet, at z −0.882) - P2 lower girdles: 41.90°, index 03-09-15-21-27-33-39-45-51-57-63-69-75-81-87-93, d 0.6699 - C1 bezels: 34.50°, index 96-12-24-36-48-60-72-84, d 0.5829 - C2 upper girdles: 41.50°, index 03-09-15-21-27-33-39-45-51-57-63-69-75-81-87-93, d 0.6649 - C3 stars: 21.69°, index 06-18-30-42-54-66-78-90, d 0.4863 - T table: 0°, d 0.3121 That is a textbook brilliant: a 57.5% table, a 34.5° crown, a 40.75° pavilion and 59.7% total depth, with kite-shaped bezels, triangular stars and an octagonal table. - Rendering the stone, the hero: a ShaderMaterial on a proxy box around the rough that ray-traces the convex solid bounded by every rough face and every facet plane (a uniform array of about 135 planes, updated each seek). Per fragment, in the stone's local space: entry is the largest entering t and exit the smallest leaving t; write gl_FragDepth from the entry point so the dop and wax occlude correctly; discard misses. At entry, reflect by Schlick Fresnel into the environment and refract with one IOR per channel, R 1.915, G 1.940, B 1.975 (zircon's high dispersion, a little exaggerated so fire reads at 720p); inside, bounce up to 6 times per channel, each time finding the exit plane, reflecting totally past the critical angle and otherwise splitting by Fresnel, adding the refracted ray's environment color and following the reflected ray. The stone absorbs nothing. - Frost and polish: every plane carries a polish value. Frosted planes (the rough's faces, freshly ground facets and the girdle) scatter rather than refract: shade them as bright translucent satin (#DCE6E2 mixed with a blurred environment sample and fine seeded grain), so the ground stone reads as a white faceted preform. Polished planes are clear. The girdle stays finely frosted to the end, as many cutters leave it. - Cutting a facet: its plane's d slides from the stone's current extent in that direction (where the plane first touches it) to its final d over its cut time on easeOutCubic, so each facet appears as a point, widens into its final outline and meets its neighbors exactly. Find each starting extent at load by enumerating the solid's vertices from plane triples. - The environment makes the fire: build a small studio scene once (walls #0E2A2B, a large overhead softbox, two tall strips at left and right, seven small hot lamps of varied size at 4–12× the softbox's brightness scattered over the upper hemisphere, and the copper lap below) and render it once into a 512px half-float CubeRenderTarget with a CubeCamera, so the lamps keep their brightness above 1. The stone shader samples that cube, and its PMREM is the envMap for the metal parts. The small lamps are what split into colored flashes. - Scene light, bright from the first frame: key DirectionalLight #FFF2E2 at 2.4 from the upper left (elevation 50°) with soft shadows (PCFSoftShadowMap, 2048); HemisphereLight #DDF1EC / #3A2A22 at 0.8; a warm rim from behind right that lays a long highlight on the copper; envMapIntensity 1.0 on steel, brass and copper. ACESFilmic, exposure 1.1. The copper glows and the rough reads white against the teal from the first frame. - The lap spins at a shown 0.6 turns per second. Its concentric tracks keep their shape, so the spin shows through a moving wet glint and a seeded scatter of fine slurry specks riding round, never strobing; a small bead of water sits at the contact. - Holding the stone: while cutting, the facet being cut faces straight down onto the lap. The dop axis tilts from vertical by the facet's angle (the quill and pointer follow it) and the stone turns about the dop to the facet's index. Within a tier the stone turns steadily and each facet is ground as its index passes the lap; between tiers the quill eases to the next angle over 0.08 s with a 0.3-unit lift. - The transfer: after the pavilion, the stone lifts 3 units and turns over about a horizontal axis in 0.4 s, the dop now seated on the pavilion in a cone of wax, so the crown faces the lap. - Fire and glints: once polished, the turning stone breaks the lamps into small spectral flashes. EffectComposer with UnrealBloomPass (strength 0.55, radius 0.25, threshold 0.86) so only the hottest glints bloom, then OutputPass. Glints come from the geometry: each seek, mirror the key softbox's direction in each crown facet; where the reflection points within 3° of the camera, draw a four-ray star (thin crossed streaks 40–90px, white with a faint spectral fringe) at that facet's center, sized by the closeness. Never more than three at once. - Camera: fov 24. Close and low during the cut, the stone about 360px across at (1000, 520), the copper filling the lower half of the frame and the quill entering from the upper right; then rising and swinging round to a three-quarter view above the crown as the quill lifts the stone toward it, ending with the stone about 520px across at (1080, 540), its table tilted 30° toward the camera and the dop hidden behind it. - Cutting diagram (SVG, right column x 1460–1800, y 300–760): a crown view and a pavilion view, each about 300px across, drawn from the same plane table with every facet outlined in 1.5px #9CC4BD; a facet fills copper when it's ground and #F4EFE6 when it's polished. Above them, the current tier in Spline Sans Mono 500, 22px (for example "P1 · 40.75° · 96-12-24-36-48-60-72-84") and a counter "Facets 0/57" in Spline Sans Mono 600, 32px, tabular figures, counting every facet except the girdle. - Type (HTML over the canvas): kicker "MIRROW & PELL · GEM CUTTERS" in Spline Sans Mono 500, 20px, tracked 0.16em, accent; title Gilda Display 400, 92px, #F4EFE6, top-left at (120, 110); line Spline Sans Mono 400, 22px, secondary, beneath. Text rises 12px as it fades in over 0.6 s on cubic-bezier(0.22, 1, 0.36, 1). - Premium: a real machine whose protractor matches the cut, facets that grow and meet exactly, a white preform that clears into fire, color that comes only from the optics. Cheap: a glass icosahedron with a rainbow texture, a gem that pops in already cut, lens-flare sparkles everywhere. Banned: rainbow textures or hue cycling not produced by the optics, a stone that isn't the brilliant above, hands, lens flares, bokeh, more than three glints at once, motion blur, anything flashing more than 3 times per second. </direction> <structure> - 0.0–1.0s: close on the frosted rough on its dop as it lowers onto the spinning copper; the kicker and title rise in; the diagram draws its empty outlines. - 1.0–1.5s: G: the quill lies level at 90° and the stone turns once, its prism ground into a frosted cylinder. - 1.5–2.3s: P1: the quill tilts to 40.75°; eight mains, 0.1 s each, meet in a point at the culet. - 2.3–3.1s: P2: sixteen lower girdles at 41.90°, 0.05 s each. - 3.1–3.5s: the transfer: the stone lifts and turns over. - 3.5–4.9s: the crown: eight bezels at 34.50°, sixteen upper girdles at 41.50° and eight stars at 21.69°, then the quill stands upright and the table grinds flat; the counter reaches 57/57 and the stone is a white faceted preform. - 4.9–5.4s: the polish: the stone lifts clear and turns once on the dop as every facet clears, tier by tier from the table outward, and the first fire breaks inside it; each diagram facet turns cream. - 5.4–6.0s: the quill lifts the stone toward the camera as it rises to the three-quarter view; at 6.0 s everything has settled: the finished brilliant full of fire, the diagram complete. - 6.0–8.4s: the stone turns 40° about the dop and rocks ±8°, fire running across the crown and glints swelling and fading on the brightest facets; the line rises in at 6.6 s. - 8.4–9.0s: the turn eases to rest on a pose with strong fire. - 9.0–10.0s: hold. For other lengths, change the hero turn; keep the cutting schedule 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. - Each facet's start and end time and its starting extent are precomputed at load from the schedule; the plane array, the stone's orientation, the quill angle, the lap spin and the camera are closed-form functions of t. Call composer.render() once per seek in place of renderer.render(), and draw the protractor CanvasTexture after the fonts load. </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 stone is always the rough cut by exactly the facets scheduled so far, the protractor reads the tier's angle while it's cut, the finished stone shows an octagonal table, 8 kite bezels, 8 stars, 16 upper girdles, a frosted girdle and a pointed culet, fire appears only after the polish and comes from the optics, the stone and the copper are clearly lit from the first frame, the diagram fills in step with the cut, and the 6.0 s frame is the settled hero view. 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 inspiration