How the Encore Cube was built

The brief

I wanted the Studio Practice mark to live as more than a flat logo. The reference was a chrome cube I kept seeing in viral posts — heavy, reflective, weirdly seductive on a feed. I wanted ours to be that, but with our brand, and built the right way for the modern web: no plugins, no static renders, real geometry running live in a browser.

The non-negotiables: SP front and center, real chrome (not a flat blue gradient that pretends), and a moment of joy. A switch that turns the whole thing into a disco. Rainbow lights, a dance floor, 70s music, the works. Not synthwave. Saturday Night Fever.

How it came together

I drove the direction. I picked the references, named the phases, called out what wasn't working, and set the tone where the work would land. The collaboration ran in tight feedback loops. I'd see a render, react in one or two sentences, and we'd iterate.

A few of the calls that shaped this:

— "The music is still too electronic. Think Saturday Night Fever." We re-voiced the disco loop with a sine-body kick, a softer triangle bass, and a five-detuned super-saw string swell. No synthwave residue.

— "The letters it intersects should move out of the way, like a crowd parts when a celebrity walks through." That became a z-gated proximity push on each character mesh, with smooth lerp. The text only parts when the cube is actually traveling through it.

— "On load, the text should not move." That changed the whole text behavior from auto-reactive to event-gated. Calm by default, alive on interaction.

— "I don't like the large black surface around the SP." Pulled the bevel normal map, switched to a 2D letterpress emboss instead. No more dark halo on the chrome face.

— "Use the latest tech." Default to surfacing newer platform capabilities instead of falling back to the obvious stack. That's how we ended up with thin-film iridescence, RectAreaLight uplight, WebAudio + AnalyserNode beat detection, ConvolverNode reverb, and a ShaderMaterial dance floor instead of any of the safer-but-flatter options.

— "Name it Encore." Nested under /special-projects so it stays a lab piece, not the main site. Same nav, same brand, but its own room.

The ten phases

1. 01

   0.0–1.8s

   2D logo

   The SP mark as a flat tile. Where everything starts: brand asset, no depth, no motion.

2. 02

   1.8–3.0s

   Wireframe reveal

   The solid surface drops out and the underlying geometry shows itself. The cube is a RoundedBoxGeometry with eight smoothing segments and a 0.08 corner radius.

3. 03

   3.0–4.5s

   CSS-era flat cube

   The solid material returns in flat brand blue. This is what the same shape used to look like in pure CSS 3D transforms: opaque color, no real lighting.

4. 04

   4.5–6.0s

   Mosaic tiles

   A procedural mosaic tiles in across every face. Per-tile shade variation, occasional white highlights. The chrome surface is born from this grid.

5. 05

   6.0–8.0s

   Chrome material

   Metalness ramps from 0 to 1. Roughness drops from 0.95 to 0.18. A PMREM-baked RoomEnvironment becomes the reflection source. The cube starts catching real light.

6. 06

   8.0–10.0s

   Thin-film iridescence

   An iridescence thickness map gives each tile its own film depth, so different tiles refract different wavelengths. That's where the rainbow shimmer comes from. No texture trick, real physical optics in the material.

7. 07

   10.0–11.5s

   Showcase moment

   Environment map intensity peaks. The cube settles into its pose so the reflections, iridescence, and tile detail can all be read at once. The glamour shot before the music starts.

8. 08

   11.5–13.5s

   Hero text reveal

   "AI‑native design studio" fades in. On the live page this is real TextGeometry with per-character meshes for the crowd-parting effect. In the build film it's an HTML overlay with the same chrome-gradient text treatment.

9. 09

   13.5–15.5s

   Rainbow halo

   A conic GLSL ShaderMaterial behind the cube. Hue rotates around polar angle, slow time offset, soft inner cutout so the cube sits in the eye of the rainbow.

10. 10

    15.5–22.0s

    Full disco

    The dance floor lights up. Another ShaderMaterial with hashed per-tile colors, beat-pulsed brightness, radial fade to cream. A RectAreaLight uplight pumps from below so the cube's underside catches the floor color. The whole thing is alive.

The stack underneath

Engine

Three.js r165, ES module importmap, no build step

Geometry

RoundedBoxGeometry, TextGeometry (live page), WireframeGeometry (build film)

Material

MeshPhysicalMaterial with metalness + roughness + clearcoat + thin-film iridescence (iridescenceThicknessMap)

Environment

PMREMGenerator + RoomEnvironment for chrome reflections

Shaders

Custom GLSL ShaderMaterial for the rainbow halo and the dance floor

Lighting

DirectionalLight key + RectAreaLight uplight (RectAreaLightUniformsLib) + AmbientLight fill

Audio

AudioContext, AnalyserNode beat detection, ConvolverNode reverb, procedural synthesis (oscillators + noise buffers)

Textures

CanvasTexture redrawn per frame, seeded RNG so the chrome mosaic stays stable across captures

Type

Cormorant Garamond + JetBrains Mono via Google Fonts, chrome-gradient text via CSS background-clip

Tone mapping

ACESFilmicToneMapping with exposure 1.0

Capture

puppeteer-core driving headless Chrome with the Metal ANGLE backend, deterministic frame-stepping via window.__setTime hook

Encoding

FFmpeg libx264, CRF 18, yuv420p, faststart

See it live

The film above is a record of the build. The actual cube is interactive: drag to rotate, scroll to zoom, hit the music button to flip it into disco mode.

Open the live Encore cube →