Quick summary
Studio Sketchbook is a portfolio you handle instead of scroll: a foil-stamped book waiting on a leather desk. Drag the cover and the pages bend like real paper — each leaf curls through an arc as you pull it, commits or falls back on a spring when you let go. Inside are eight of the studio’s shipped templates as watercolor concept plates, taped in with palette swatches, handwritten notes and live links. Then the twist: slide the brass magnifier over any plate and the glass re-renders that spot with the shipped site’s real pixels. Every template starts as a sketch — the lens shows what it became.
Who this template is for
This build is for anyone whose work deserves better than a grid of thumbnails — a studio with a body of work, a designer with a process worth showing, a brand that wants its catalog handled like an object.
- Studios and freelancers who want a portfolio visitors handle rather than scroll — a book on a desk invites a different kind of attention than a card grid
- Teams who sell process: every plate pairs the concept sketch with the shipped result, and the lens is the proof that one became the other
- Developers who want a worked example of a CSS-3D paper engine — page bend, spring physics and a live magnifier with no framework and no WebGL
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 static HTML file — open it and the book is already on the desk.
- A complete page-flip book: foil-stamped cover, ex libris, clickable contents, eight plate spreads, and a closing spread that points at the rest of the shelf
- The reality lens — a brass magnifier that re-renders whatever it crosses with the shipped site’s real screenshot, pixel-aligned to the sketch beneath it
- The full paper engine: drag with momentum, throw-to-turn, tap and arrow-key turns, an index riffle, and a mobile layout that trades the lens for tap-to-turn
Page sections overview
| Section | Purpose |
|---|---|
| The Cover | A book you have to open, not a page you scroll. |
| The Paper Engine | Pages that bend like paper, not cards that flip. |
| Eight Plates | The template shelf as watercolor concept art. |
| The Reality Lens | The twist — the glass shows what shipped. |
| The Contents Riffle | An index that flips there for you. |
Design & branding system
The design brief was a working designer’s object — a sketchbook that has been used, not a mockup that has been rendered.
- Cream paper against a near-black desk, brass foil and a single vermilion accent for stamps and links — the palette of a bookbinder, not a dashboard
- DM Serif Display for the plate titles, Caveat for every handwritten note — both bundled locally so the page makes zero external requests
- Washi tape, page numbers, an ex libris and inked stamps sell the object; nothing on the paper reads as interface chrome
Mobile & speed optimization
The desk collapses; the book stays.
- Below the coarse-pointer line the lens retires and pages turn on a tap — right page forward, left page back
- The book rescales to the viewport from a zero-size center anchor, so no screen width strands it off-canvas
- Reduced-motion visitors get instant page changes — the same book with the physics stripped out
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 static HTML file with the engine inline — no framework, no build step, no WebGL; any static host serves it
- The reality lens needs one screenshot per plate; swap the eight images and the eight watercolors and the book is yours
- The page-flip idea is an homage: it is an original, from-scratch rebuild after MengTo’s Sketchbook and Matthew Yu’s portfolio, credited on the page — no code or art was copied
- Turns are resolved mathematically from the pointer, not by DOM hit-testing — which is why dragging stays reliable even while the book animates in 3D
How it works
One static HTML file, no framework and no WebGL. The turning leaf is eighteen nested CSS-3D segments whose rotations sum through an arc, with shading baked into gradients so only opacity animates per frame. Page drags are resolved mathematically from the pointer rather than DOM hit-testing, which is what keeps them reliable while the book animates. Each watercolor plate was painted from the live site’s own screenshot, so the lens overlay lines up with the washes beneath it.
On its origins
The page-flip book idea is an homage to MengTo’s open Sketchbook experiment and the portfolio of Matthew Yu, credited on the page and in the book’s own colophon. That project grants no licence for reuse, so this build is an original, written from scratch: its own paper engine, its own reality-lens concept, its own art and copy.
Screenshots
Captured from the live build, section by section. This is the template as it actually renders, not a mock-up.
