A pageflip demo puts the experimental HTML-in-Canvas API through its paces

I flipped through the demo before I read a line of the writeup. That is usually a good sign. A book, on a page, curling in true 3D, and the text inside the pages is still selectable and the links are still clickable. That is not a party trick you have been able to build declaratively before now.

The peg is a <hic-pageflip> custom element from bram.us, built on the experimental HTML-in-Canvas API. Per the writeup, HTML-in-Canvas lets you "draw live DOM elements directly into canvas contexts and WebGL textures" — the missing piece for effects that used to force a choice between two bad options.

The tradeoff the source names

The author frames it honestly. You either built the effect in Canvas or WebGL for real 3D and gave up accessibility, or you kept real HTML with CSS transforms and settled for a flat 2D clipping illusion. HTML-in-Canvas collapses that choice. Per the source, you get "true 3D conical and cylindrical page curls" while the pages "remain fully interactive and accessible, with selectable text and clickable links".

The one thing to try today

Open the flag. Per the source, the demo needs Chrome with chrome://flags#canvas-draw-element enabled, and the author calls the API experimental and "undergoing significant changes". So this is a prototype-and-read-the-spec moment, not a ship-it-tomorrow moment.

If you want to poke at the markup, the shape is small: an outer <hic-pageflip> with <hic-pageflip-page> children. The element exposes two engines via engine="2d" and engine="3d" (the default). The demo is open source on GitHub as bramus/hic-pageflip and there is a live version at hic-pageflip.netlify.app.

What I'm watching next

Two things. First, whether the canvas-draw-element flag name and shape survive spec churn — the author flags active change. Second, whether the other engines put anything on the table here, because a canvas primitive that renders live DOM is the kind of feature whose value scales with how many browsers it runs in. For now: turn on the flag, open the demo, and see what accessibility-preserving 3D effects actually feel like in a real browser.