Over-ear headphones built in code stand on a turning plinth in a stone-colored studio: softbox reflections slide over brushed aluminium and leather, a clean wipe changes them from slate to clay, three spec callouts track the cups, and the name settles beside them.
Written and rendered by AI CSS Animations Oct 18, 2026
Turntable product photography puts an object on a slowly rotating platform under large diffused lights, so its form and materials reveal themselves as reflections slide across them. The technique runs from studio photography to the 360-degree spins of online stores and the hero shots of launch films. Softboxes give metal long, soft highlights, and a seamless cyclorama removes the horizon so nothing competes with the object. Consumer electronics brands use these films to show finishes and colorways before anyone can hold the product.
Make a 10-second studio product film: procedural over-ear headphones turn on a turntable plinth under softboxes, change colorway in one clean wipe, show three specs and end on the name. <inputs> If I don't give you something, use the default and don't ask. - Product: Avenmoor A40, wireless over-ear headphones (fictional). - Line: "Quiet you can carry." - Colorways: Slate, then Clay. - Specs: 40 mm drivers · 38-hour battery · 268 g - Length: 10 seconds. </inputs> <direction> - Studio, at 1 unit = 10 cm: a seamless cyclorama whose floor curves up into the back wall through a 3-unit cove, in matte stone #E4E0D9 that warms to #EBD9CC with the colorway, with a soft #F6F3EE lift on the wall behind the product so it separates from the background. The plinth is a turntable: a matte bone drum (#F1EEE8, radius 1.6, height 0.22, 0.02 chamfer) carrying a brushed-aluminium platter (#CDD0D4, 0.03 thick) that turns while the drum stays still. - The headphones, at true size and built to read as the real object, stand upright on the lower edges of their two cushions with the band arching above and the cups facing each other about 17 cm apart, the classic product-shot pose: - Headband: a flattened arch 3.2 cm wide and 0.9 cm thick (ExtrudeGeometry of a rounded-rectangle section along a CatmullRomCurve3), 17 cm wide inside and 19 cm tall. Under the outer shell, a separate padded strip 2.4 cm wide in protein leather with a stitched seam: tiny instanced capsules every 2 mm, 1 mm in from each edge. - Sliders: at each end, two polished steel rods 0.4 cm thick with 3 cm showing, running from the band into a hinge barrel. - Yokes: a U-shaped fork of brushed aluminium, 0.8 cm thick with rounded edges, hanging from the hinge barrel, its arms meeting the cup's sides at round pivot caps. - Cups: oval shells 7.8 × 9.6 cm and 3.4 cm deep (a LatheGeometry with a softly domed outer face and a 0.5 cm rounded rim, scaled 0.81 on x), tilted 8° inward at the bottom. A fine engraved groove 0.6 cm inside the rim, a small debossed ring mark on the outer face, two mic pinholes, and on the right cup's lower edge three small pill buttons and a port slot. - Cushions: fat oval pillows 2.4 cm thick with a 4.6 × 6.2 cm opening, in protein leather with soft radial creases from a generated normal map, a dark acoustic mesh inside. Every part touches the next: no gaps and nothing floating. - Materials: Slate has shells of anodized aluminium #3D4652 (MeshPhysicalMaterial, metalness 0.7, roughness 0.38, a seeded fine-brushed roughness map running around each cup), cushions and pad in #26292E leather (roughness 0.55, sheen 0.4, sheenColor #5A6070), and yokes and sliders in bright aluminium #C9CCD1 (metalness 1, roughness 0.22, anisotropy 0.6). Clay has shells #B65C3E, cushions and pad in sand #D8C5AC and champagne yokes #D3C2A5. The mesh is #1A1B1E in both. - Light, so the product reads clearly from the first frame: bake an environment once with PMREMGenerator.fromScene from a white room holding three emissive softboxes (a large key overhead-left, a tall strip rear-right for the rim, a low wide fill in front), so the aluminium carries long, soft softbox reflections instead of flat grey. Add a DirectionalLight key from upper left with soft shadows (PCFSoftShadowMap, 2048 map, shadow radius 6) and a HemisphereLight fill (#FFFFFF / #D9D2C8, 0.7); ACESFilmic tone mapping at exposure 1.15, sRGB output. The Slate cups always show a bright rim and a soft highlight band: no part reads as a black silhouette, and the shadow on the platter is a soft contact shadow, never a grey slab. - The colorway change is a wipe, not a crossfade: patch the materials with onBeforeCompile so each mixes its Slate and Clay values across a world-space horizontal plane that rises from the platter to above the band over 0.8s on cubic-bezier(0.65, 0, 0.35, 1), with a 1 cm soft edge; color, roughness and sheen all change at that edge. The cyclorama warms in step. - Camera: fov 28, a three-quarter view slightly above (pitch 12°). It opens as a macro on the left yoke's pivot cap and cushion seam, pulls back to the whole product on its plinth, and from 6.8s trucks so the product moves from stage x 960 to x 1230, leaving the left side for type. The platter turns at 24°/s and eases to rest by 8.2s at the hero angle: left cup three-quarters to camera, band rising to the right. - Spec callouts (HTML over the canvas): a 6px #1D1F23 dot on a projected 3D anchor (the left cup's center, the right cup's button row, the top of the band), re-projected every seek so it stays glued as the product turns, joined by a 1px hairline to a label on the side away from the product: the value in Sora 600, 36px, #1D1F23, over a label in IBM Plex Mono 500, 20px, uppercase, tracked 0.12em, #6A665F. Labels never cross the product, each other or the swatch row. - Type: the name in Sora 600, 104px, tracking −0.02em, #1D1F23, baseline at (120, 470); the line in Sora 400, 32px, #4A4741, baseline 530; a colorway row at y 610: two 28px swatch discs (Slate, Clay) with their names in IBM Plex Mono 500, 20px, the selected disc ringed by a 2px #1D1F23 ring at a 4px gap; the spec row at baseline 690 in IBM Plex Mono 500, 22px, tracked 0.08em: "40 MM DRIVERS · 38-HOUR BATTERY · 268 G". - Easing: text rises 14px while fading in over 0.5s on cubic-bezier(0.22, 1, 0.36, 1); camera and platter on easeInOutSine; callout hairlines extend over 0.3s on cubic-bezier(0.2, 0, 0, 1). Nothing bounces. - Premium: an object you believe, with brushed metal, soft leather and stitched seams, long softbox reflections crawling across it as it turns, and one clean colorway wipe. Cheap: a grey toy of cylinders and a torus spinning in a dark void under a glow. Banned: dark or black backgrounds, bloom, glow, lens flares, cables, real brands or logos, floating parts, 3D text, motion blur, a crossfade in place of the wipe, anything flashing more than 3 times per second. </direction> <structure> - 0.0–1.4s: a macro on the left yoke's pivot and the cushion seam, a softbox reflection sliding along the brushed aluminium; the camera pulls back and rises. - 1.4–3.2s: the whole product on its plinth, turning; reflections stream across the cups and band. - 3.2–4.0s: the wipe rises from Slate to Clay as the cyclorama warms; the swatch row fades up in its place, its ring sliding from Slate to Clay as the wipe passes the cups. - 4.0–5.6s: the three callouts draw out 0.5s apart: the dot pops, the hairline extends, the value and label rise. - 5.6–6.8s: the callouts hold while the product turns. At 6.0s product, callouts and swatch row form one complete frame. - 6.8–8.2s: the callouts retract into their dots and fade; the camera trucks the product right; the platter eases to the hero angle; the name, the line and the spec row rise in at left, 0.15s apart. - 8.2–8.8s: the last reflection settles on the left cup. - 8.8–10.0s: hold, perfectly still. For other lengths, stretch the turning beats at the same 24°/s and keep the wipe at 0.8s; keep at least 1s 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 platter angle, wipe height and camera are closed-form functions of t; the brushing, crease and stitch geometry are generated once at 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 product is bright and fully readable at t = 0 and in every frame, the aluminium shows long softbox reflections rather than flat grey, the cups read as cushioned oval cups hung on yokes rather than plain cylinders, stitching and grooves never z-fight, the wipe edge stays clean and level, callout dots stay on their anchors, and the 6s and final frames are both complete compositions. 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