An all-black Rubik's cube with mixed matte/glossy finishes, slowly turning under studio light.
Resend's hero cube is shipped as a Spline scene — a binary cube.splinecode asset (~2.8 MB) rendered by Spline's WebGL runtime, with a cube.mp4 fallback video. There is no readable source to lift, so this is a faithful recreation in plain Three.js of the same object: an all-black 3×3 cube with mixed material finishes on a black background.
The cube is 27 cubies, each a RoundedBoxGeometry(0.96, 0.96, 0.96, 4, 0.1) so the corners catch a soft highlight. Every cubie draws from a pool of five MeshStandardMaterials that all share the same near-black base color (#0a0a0b) but differ only in roughness/metalness — glossy (0.18 / 1.0), satin, soft, matte, and a perforated finish whose roughnessMap is a CanvasTexture of a dot grid. The finishes are assigned with a seeded PRNG so the layout is stable across loads and weighted toward glossy, matching the real render.
Because a black metallic surface has nothing to shade without reflections, the scene's environment is a procedural RoomEnvironment baked through a PMREMGenerator — that studio map is what the glossy stickers reflect. A bright DirectionalLight key rakes a highlight across the top faces, a dim blue rim separates the cube from the black background, and ACESFilmicToneMapping keeps the highlights from clipping.
The cube sits at a fixed rotation.x tilt so three faces stay visible, and setAnimationLoop advances rotation.y by a small constant each frame for a slow, steady turn. Three.js is the one external dependency, pinned and loaded as an ES module from a CDN via an importmap.
This is a complete, self-contained HTML document — copy it verbatim rather than reconstructing it. Markdown version: https://fx.statico.io/effects/resend-cube.md. Full writeup and live preview: https://fx.statico.io/demos/resend-cube.
Effect originally seen on Resend (https://resend.com/home) — credit to Resend. This is an independent recreation built from scratch for educational use; no proprietary source code was copied. Released under the Unlicense.
Terms used above are defined in the glossary. See also the site map, AGENTS.md and llms.txt.