The Complete Shelf

An original, interactive Three.js library of seven clothbound hardcovers. Browse the continuous shelf, pull a volume into a responsive detail view, orbit the binding, and drag through a small set of physically curved pages.

View the live experience · Read the build prompt

The collection is organized around seven tools for modern creative work:

1. Codex
2. Claude Code
3. Cursor
4. Antigravity
5. Figma
6. Framer
7. Xcode

• A continuous seven-volume shelf navigated with the wheel, arrow keys, buttons, or position markers.
• Detailed hardcover construction with separate boards, spine, hinges, endpapers, page block, headbands, bookmark, foil, and contact shadows.
• Responsive inspection mode with orbit, pan, zoom, hover-to-crack-open, click-to-open, and drag-to-turn page interactions.
• Book-specific color systems that recolor the scene and editorial detail layout.
• Procedural cloth, foil, paper, page-edge, wood, roughness, normal, and shadow textures.
• Deterministic shelf-to-detail transitions with exact endpoints so reparenting the selected volume never produces a last-frame jump.
• Accessible HTML controls and status announcements layered over the WebGL scene.

The entire experience lives in index.html: markup, responsive layout, shaders and materials, book geometry, interaction state, animation, and embedded image atlases. There is no framework, bundler, backend, analytics layer, Mint dependency, or MCP call in the browser.

The render stack uses Three.js with physically based materials and OrbitControls. Cover and wood artwork are stored as embedded WebP atlases; supporting surface detail is generated at runtime with canvas textures. Each book is assembled from reusable geometry, while the front cover and pages use hinged groups and segmented meshes for curved page-turn motion.

Interaction is managed as a small state machine:

shelf -> opening detail -> closed inspection -> open book -> closing -> shelf

Camera, book, shelf, and view-offset transforms share deterministic eased timelines. This keeps the animation continuous when a book moves between the shelf and inspection scene graphs.

Start from PROMPT.md, attach a visual reference if you have one, and ask your preferred coding agent to work directly in index.html.

• Codex — work in the repository, run the local site, inspect interactions, and iterate against browser proof.
• Cursor — open the folder, give Agent the prompt, and review changes in the editor.
• Claude Code — run Claude in the project directory and point it at the prompt and HTML file.
• Aura Build — use the prompt and screenshots as a starting point for a visual build or remix.

Whichever tool you use, the useful loop is the same: make one focused change, run the page, verify the real interaction, inspect the console, and keep only the revision that improves the experience.

The page uses JavaScript modules, so serve it over HTTP instead of opening it directly from disk:

python3 -m http.server 4173

Then visit http://localhost:4173.

No install or build step is required. An internet connection is needed for the pinned Three.js modules and Inter font.

complete-shelf/
├── index.html   # Complete production experience
├── PROMPT.md    # Portable recreation and remix brief
└── README.md    # Project overview and implementation notes

The visual direction studies the clarity, material craft, and book photography of contemporary editorial publishers, including Stripe Press, while using original book titles, cover artwork, textures, layouts, and interaction design. This project is independent and is not affiliated with Stripe Press or the products represented by the seven volumes.