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 itself — background, fog, panel, type — in that book’s colours. Hover the cover and it cracks open. Drag it wide and the title page waits inside: colophon, essays, foil plates, specs and a closing quote, five sheets per volume, each one curling 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 — a studio, an agency, a solo maker with shipped projects — and 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 literally 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 — 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 — no bundler, no backend, 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 per 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 & 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: bone paper, quiet negative space, Inter set in confident caps — and each volume carries its own cloth, foil and ink system that rethemes the whole room
- Native scripts kept native — 灯籠 on the TŌRŌ boards, ยอด 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 as a design feature
Mobile & speed optimization
The library recomposes for a phone; 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 same conversion logic the OGtraplord homepage runs on.
- The strongest visual moment loads first, so a visitor forms a positive impression before reading a word
- Every section answers one question and hands off to the next, keeping scroll momentum toward the call to action
- The ask arrives only after the proof — by the time a visitor reaches 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; there is 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: its own volumes, book construction, textures, copy and sound, with 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, links — and the same press binds your portfolio instead; nothing else needs touching
How it works
One self-contained HTML file on a pinned Three.js 0.165 import map — no bundler, no backend, 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 own seven volumes (the studio’s real shipped work), its own book construction, palettes, essays, textures and sound — and it credits the source on its own page.
Screenshots
Captured from the live build, section by section. This is the template as it actually renders, not a mock-up.
