Quick summary
OGTRAPLORD PRESS binds the studio’s flagship builds into seven clothbound hardcovers and puts them on a shelf you handle. Scroll and the shelf glides past on an endless loop with no visible seam. Click the centre volume and it flies off the boards into a detail room that rethemes its background, fog, panel, and type in that book’s colours. Hover the cover and it cracks open. Drag it wide and the title page waits inside, with a colophon, essays, foil plates, specs, and a closing quote across five sheets per volume. Each sheet curls through a cloth-like bend as you pull it. Even the unfinished racing game is on the shelf, bound as a Forthcoming edition whose colophon promises completion.
Who this template is for
This build is for anyone whose body of work deserves better than a card grid, like a studio, an agency, or a solo maker with shipped projects. It’s also for any developer who wants a worked example of serious book mechanics in the browser.
- Studios and freelancers who want a portfolio visitors remember handling: each project becomes a clothbound volume with its own palette, foil motif, essays, and colophon
- Publishers, authors, and course makers whose product is books. The shelf, the covers, and the page physics are the pitch
- Developers who want a compact reference for hinged-cover kinematics, segmented page bends, deterministic camera choreography, and procedural PBR texturing, all in one readable file
What problem this template solves
Most site templates look fine in a screenshot and fall apart in production. You get interchangeable sections, stock imagery, and nothing that proves craft.
- Template marketplaces sell the same layouts to thousands of buyers, so nothing ends up feeling owned
- Buyers can usually preview a design but almost never see the exact instructions that produced it
- Teams need reference builds that survive contact with real content rather than lorem-ipsum mock-ups
What you get with this template
One self-contained HTML file, with no bundler, no backend, and no image or audio assets anywhere in the build.
- The complete library: a continuous seven-volume shelf with wheel, arrow-key, button, and marker navigation, and no visible wraparound seam
- Full hardcover construction for each volume: separate boards, spine, endpapers, page block, five preview sheets, headbands, bookmark, foil accents, and soft contact shadows
- The reading mechanics: hover-to-crack, click or drag the cover open, segmented drag-to-turn pages in both directions, and a themed editorial panel with specs and a live link per volume
Page sections overview
| Section | Purpose |
|---|---|
| The continuous shelf | Seven volumes on an endless run, and the seam never shows. |
| The detail room | Click a volume and the whole scene becomes that book. |
| The pages | Five sheets per volume, and they bend like cloth. |
| The bindery | Every texture on every book is drawn, not loaded. |
| The score | A library with its own quiet music, synthesized on the spot. |
Design and branding system
The design brief was a fine-press catalogue raisonné: the studio’s work presented the way a press presents its authors.
- Warm editorial minimalism with bone paper, quiet negative space, and Inter set in confident caps. Each volume carries its own cloth, foil, and ink system that rethemes the whole room
- Native scripts stay native (灯籠 on the TŌRŌ boards and ยอด on YOT’s) because the originals earned them
- The unfinished racing game ships as a “Forthcoming edition” with a disabled action and a colophon that promises completion. Honesty is part of the design
Mobile and speed optimization
The library recomposes for a phone, and nothing is cropped away.
- The shelf camera reframes itself for any window shape. Short or narrow, the strip always clears the caption band, and the fog ranges follow the camera
- In detail view the editorial panel folds into a scrollable bottom sheet and the book rises above it. Page drags work from touch exactly as from a mouse
- Reduced-motion visitors get near-instant transitions with every pose still exact, and the whole experience is keyboard-accessible with live status announcements
How this template helps you convert
The page earns attention before it asks for anything. The OGtraplord homepage runs on the same logic.
- The strongest visual moment loads first, so visitors like what they see before they read a word
- Every section answers one question and hands off to the next, which keeps the scroll moving toward the call to action
- The ask arrives only after the proof: by the time visitors reach it, the work has already made the argument
Other information about this template
A few notes before you build on this one.
- One HTML file on a pinned Three.js 0.165 import map. Any static host serves it, and there’s no build step to break
- The interactive-bookshelf idea follows MengTo’s Complete Shelf experiment, whose published brief invites remixing but grants no licence. So this is an original build, with its own volumes, book construction, textures, copy, and sound, and the source credited on the page
- The build ships with its own headless verification driver. Every navigation mode, opening gesture, page drag, and return transition is asserted over raw CDP with a zero-console-errors gate
- Swap the BOOKS array (titles, palettes, motifs, essays, and links) and the same press binds your portfolio instead. Nothing else needs touching
How it works
The library is one self-contained HTML file on a pinned Three.js 0.165 import map, with no bundler, no backend, and no image or audio assets anywhere. Cloth weave, foil (albedo, roughness, and metalness maps), paper grain, page edges, and wood are all drawn onto canvases at load. The page-turn foley and the ambient score (slow pad chords with sparse plucks through a feedback-delay room) are synthesized in WebAudio. Interaction runs on a deterministic state machine whose transitions start and end on exact poses, so a book reparenting between shelf and inspection never jumps a frame.
On its origins
The interactive-bookshelf idea follows MengTo’s Complete Shelf experiment, whose published build brief invites remixing but grants no licence for code or artwork. This build is an original written from scratch. Its seven volumes (the studio’s real shipped work), book construction, palettes, essays, textures, and sound are its own, and it credits the source on its own page.
Screenshots
Captured from the live build, section by section, exactly as the template renders.
