Books I recommend
Engineering books I keep coming back to. Hover over a spine to pull a book out, then click it to take it off the shelf. The shelf comes in two builds; switch between them to compare, or read the trade-offs.
Pull a book off the shelf to see why it is worth reading.
Pull a book off the shelf to see why it is worth reading.
Trade-offs
CSS 3D builds the shelf with CSS, the browser’s ordinary styling language. Each book is a box of flat panels (spine, covers, page edges), turned and stacked in 3D by the browser. Nothing in the scene knows about light, so shading and shadows are painted on with gradients. Learn more.
WebGL, the browser’s direct line to the graphics card, draws a real 3D scene onto a canvas, a blank drawing surface on the page. A window light (and a lamp in dark mode) lights the scene, books cast soft shadows on each other, and gravity decides how a book tips and settles. Learn more.
| Aspect | CSS 3D | WebGL |
|---|---|---|
| What you see | ||
| Realism | Light and shadow painted on | Real light, soft shadows, truly rounded edges, gloss |
| Motion | Animated slides and turns | Books tip, lean and rock under gravity |
| Text | Real text, sharp and selectable | Spine and cover text drawn into images |
| What it costs | ||
| Download | ~47 KB compressed | ~152 KB compressed, only when you switch |
| Complexity | Everyday web skills: HTML, CSS, animation | 3D graphics: camera, lights, shadows, physics |
| Fallback | Any modern browser | Needs WebGL, otherwise a plain list |
| Accessibility | Native page elements | Invisible buttons over the canvas give the same access |
Reach for CSS 3D when a handful of objects need to move and stay light and accessible; reach for WebGL when real light, shadow and physics are the point and worth three times the download and more specialist code.
Under the hood
- CSS 3D: each book is a box of flat faces that the browser keeps in one shared 3D space (
transform-style: preserve-3d). Gradients fake the light, and the Motion library springs books in and out. About 1,100 lines of code. - WebGL: plain three.js, without a React wrapper, since the scene is drawn frame by frame outside React. Shadow maps (a depth picture taken from each light, used to work out what sits in shade) give soft shadows; an environment map (a picture of a surrounding room that shiny surfaces reflect) gives the covers their gloss; a small physics step tips and settles each book. Spine and cover lettering is drawn on a hidden canvas and wrapped onto the books as textures, like printing a label and gluing it on. A canvas is a single picture to a screen reader, so a real button sits over each book to keep keyboard and screen-reader access. Flight paths are planned so no two books ever overlap. About 1,700 lines of code, a quarter of it the cat.
- Sizes count each build’s own code, gzipped; both also load React (~65 KB).