Trevor Noah Book Collection is a procedural 3D book showcase built to recreate a premium, interactive digital library for Trevor Noah's best-selling books.

Designed to run smoothly directly in the browser without any heavy assets, the site uses three-dimensional WebGL rendering to construct realistic book geometries, procedurally painted covers, and physics-driven page-turning animations on demand.

Technical Details

• Procedural 3D Cover Painting — To bypass heavy image files and cross-origin (CORS) texture limitations from book CDNs, all covers, titles, spine typography, and textures are painted procedurally onto dynamic canvas elements at runtime and mapped as 3D textures.
• Spring Physics System — All transitions (rotating books, opening detail sheets, and sliding components) are controlled via raw spring physics calculations (acceleration = stiffness * displacement - damping * velocity), resulting in incredibly fluid, elastic animations.
• Dynamic Lighting & Env Map — Uses a custom studio environment map created procedurally using canvas gradients, paired with directional lights and soft shadow maps to simulate realistic paper texture depth and reflections.
• Deckled Edge Torn Slip — Features a custom HTML/CSS deckled torn paper element that tracks the cursor and reacts to hover states before initiating a page open.

Tech Stack

• Graphics Library: Three.js (WebGL)
• Math/Physics: Custom spring equations
• Development: Vanilla HTML5, CSS3, ES6 JavaScript
• Hosting: Vercel

This project highlights the potential of procedural asset generation and custom WebGL math, delivering a high-end, responsive 3D interactive library with zero build steps and negligible initial page load weight.