MengTo/sketchbook: a page-flipping Singapore sketchbook in one HTML file

What MengTo/sketchbook actually is, and who it is for

MengTo/sketchbook is a page-flipping sketchbook of Singapore, built as one static HTML file. The README lists nine watercolour spreads, from Marina Bay Sands to the Botanic Gardens, with an index that jumps to any plate. You drag a spread to turn a page, or throw it and let the velocity decide whether the leaf commits or falls back. A brass magnifier lies on the desk above the paper; you drag it anywhere, and it slides aside when a turning leaf sweeps through it.

The audience is narrow and specific. This is for front-end engineers who want to see how a paper page turn is assembled in CSS and a single file of JavaScript, and for designers who want to study the interaction before commissioning their own. It is not a drawing application, despite the name. It does not accept strokes, layers or brushes. The README's own framing is that an agent will only give you the basics unless you hand it a solid open source project to work from, and that everything past the basics came from asking for one behaviour at a time. Read that as a statement of intent: the repository is a worked example, not a product.

How the page turn bends instead of pivoting

The turning leaf is not a flat panel on a hinge. According to the README, it is a chain of nested strips whose tangent sweeps through an arc, so the surface curves along its width and the paper bends instead of pivoting like a door. Each strip carries a front and back face, with backface-visibility doing the flip, plus a shading gradient and a specular wash that track the leaf's angle to the light.

That is the part worth studying. A single-element page turn is easy and looks like a card rotating. A chain of strips means the curvature is a function of position along the leaf, which is why the result reads as paper. The cost is that every strip needs its own front and back face and its own shading, so the DOM is heavier than a naive implementation and the compositor has more layers to manage. The README does not give strip counts or frame timings, so treat any performance claim about the approach as unverified.

The magnifier is built on a separate idea. The lens holds a second copy of the book, scaled about whichever page point sits under the glass and masked to a circle. That copy lives outside the parallax transform, so leaning the book never drags the glass with it. The copy also fades out as the glass wanders off the paper, leaving plain glass rather than a sliver of page floating on the desk. Two copies of the same content is the obvious trade-off here: correctness of the lens effect against the cost of rendering the book twice.

Serving index.html locally and dragging the first page

There is no install. The README says to serve the folder with any static file server, then open the local URL, and gives this command:

python3 -m http.server 4173

Open http://localhost:4173 in a browser. You should see the book on load, followed by the opening riffle that flicks through the pages, with directional motion blur on the leaves. Then drag a spread horizontally. A leaf lifts and bends along its width; release it mid-drag and the throw velocity decides whether the turn commits or falls back.

The README also notes that opening index.html straight off disk works, though the fonts load more reliably over http. That matters because the type is Instrument Serif and Newsreader, subset to the characters the page actually uses, and the three font files come to 164KB. If the fonts fail, the layout still works but the page loses the thing the README calls its personality.

Everything lives in index.html: layout, styles, the page-turn geometry, the loupe and the interaction state. It is 48KB. The sketchbook/ folder holds the art and the fonts. There is no build step, no dependency manifest and no external requests, so there is nothing to install and nothing to compile.

Touch devices, reduced motion, and where the interaction stops working

The magnifier is hidden on touch devices, where there is no cursor to drag it with, and the book falls back to tap-to-turn. That is a real capability gap rather than a graceful degradation: on a phone you get page turns and nothing else. If the loupe is the reason you came, this project does not answer the question of how to make it work under a finger.

The second limitation is scope. There is no API, no configuration object and no documented extension point. The README describes the whole thing as living in one file, which means adapting it to your own artwork is an edit to that file, not a call into it. There is no package to depend on and no version to pin. The README does not document rollback or reversion, so if you fork it and the turn logic misbehaves after an edit, you are diffing one 48KB file yourself.

The third is provenance. The artwork was generated with gpt image 2, and the repository carries no licence file. That combination is worth pausing on before you ship the spreads anywhere.

Matthew Yu's personalportfolio and the difference in approach

The README names the direct alternative and the reason this exists. It was built after seeing Matthew Yu's personal portfolio concept, open-sourced at matthewyuart/personalportfolio, and the README states plainly that the repository is what made this possible rather than a rough approximation of it.

The difference is one of scope, not of technique. A personal portfolio is a site about a person, where the page turn is one moment inside a larger presentation and the content is whatever the owner wants to show. MengTo/sketchbook strips that context away and makes the book the entire page: nine plates, an index, a magnifier, nothing else competing for attention. If you want to see the interaction embedded in a working portfolio, go to the original. If you want the interaction isolated so you can read the turn logic without a surrounding site in the way, this repository is the cleaner specimen.

The other adjacent project the README points at is MengTo/complete-shelf, described as seven interactive clothbound hardcovers in a single Three.js file. That is the same author taking a different route to the same problem: real 3D geometry in WebGL instead of layered CSS strips. Three.js buys you lighting and depth that CSS gradients approximate; it also buys you a WebGL dependency, which this project deliberately does not have. The README does not compare the two on performance, and neither should you without measuring.

Licence, maintenance and what an upgrade would cost you

The repository carries no licence file, and the README does not state terms. That is the first thing to resolve before you copy any of it, because the absence of a licence is not permission. The artwork adds a second layer: the sketches were generated with gpt image 2, and the fonts are Instrument Serif and Newsreader, each of which ships under its own terms. None of that is legal advice, and none of it is answered in the README. Check each asset's own terms.

On maintenance, the last push was on 2026-08-06, which is recent. There are no releases, so there is no version to track and no changelog to read. The project has no dependencies, which is the good news: nothing here will break because an upstream package moved. The bad news is that upgrades are manual by construction. You fork index.html, you edit it, and future changes from upstream arrive as a diff against a file you have already modified. There is no merge path, no test suite and no CI beyond the GitHub Pages workflow that builds from main and serves at mengto.com.

If you want the interaction without owning the file, this project does not offer that. The README's own framing, that everything came from asking for one behaviour at a time, is a fair description of what adopting it looks like.

Editorial conclusion

Adopt it if you are building a page-turn or loupe interaction and want a working reference to read: one 48KB index.html, no build step, no dependencies, and a documented fallback to tap-to-turn on touch plus a prefers-reduced-motion path. Skip it if you want a drawing app or a reusable library; there is no package, no API and no npm entry, and the README does not document rollback or reversion. Before you copy anything, verify the licence, since the repository carries none, and check that the font files and artwork are ones you are allowed to ship.

Frequently asked questions

Official sources

1. Issues
2. MengTo/sketchbook on GitHub
3. Project website
4. README