An isometric cube from one color and three divs

The blocks feed on explorer.b3.fun renders each chain as a little isometric cube, colored from the chain's brand color. It's pure CSS transforms, and the shading trick is nicer than I expected:

Three faces is all you need

Looking at a cube from one corner, you only ever see three faces. So that's all you build. Each face is a square rotated onto its plane and pushed outward by half the cube's size, inside a preserve-3d parent tilted to an isometric angle:

const half = size / 2;
<div style={{ transformStyle: "preserve-3d",
  transform: "rotateX(29.264deg) rotateY(-225deg)" }}>
  <div style={{ transform: `rotateY(0deg)  translateZ(${half}px)` }} /> {/* front */}
  <div style={{ transform: `rotateY(90deg) translateZ(${half}px)` }} /> {/* right */}
  <div style={{ transform: `rotateX(90deg) translateZ(${half}px)` }} /> {/* top  */}
</div>

rotateY(-225deg) is what spins the cube around so you're staring at a corner with the top, front, and right faces all visible.

Shade it from one color

The part I like: you don't pick three colors. You pass one hex and derive the faces by nudging lightness in HSL. The top catches the most light, the front sits in the middle, and the right face stays the base color as the side in shadow:

const front = hexToHSL(color, 0.22); // lifted
const right = color;                 // base — the dark side
const top   = hexToHSL(color, 0.30); // brightest

Convert hex to HSL, clamp l + adjust, convert back to an hsl() string. Now the cube reads as lit from above-left for any brand color you throw at it, and a single prop changes the whole thing. Drop a logo on the top face (rotated 180° so it reads upright at this angle), flip on spin for a slow keyframe rotation, and that's the component.

From explorer.b3.fun, a project I work on at B3. Grab the component on the Isometric Cube page.

Read the full writeup at https://seangeng.com/writing/an-isometric-cube-in-css.md and implement it in my project. It covers: An isometric cube from one color and three divs. A 3D cube in pure CSS transforms: three faces pushed out with translateZ, shaded from a single hex by nudging HSL lightness. No canvas, no library, optional logo and spin. Requirements: - Follow the technique/approach exactly as described in the writeup. - Adapt names, colors, and styling to my project's existing conventions. - If it's a component, make it reusable with sensible props and TypeScript types. - Keep it accessible: semantic HTML, keyboard support, and respect prefers-reduced-motion. - When done, tell me which files you created or changed and how to use it.

Three faces is all you need

Shade it from one color

Ask your agent to implement this

Three faces is all you need

Shade it from one color