HTML-in-Canvas PageFlip

By Bramus

PageFlip?

PageFlip was a legendary, highly sought-after ActionScript open-source engine and UI component that simulated a hyper-realistic, interactive 3D book or magazine. Users could click and drag the corner of a virtual page to watch it curl, bend, drop shadows, and flip over realistically.

HTML-in-Canvas?

The HTML-in-Canvas API is an experimental browser web API that bridges the gap between traditional HTML documents (the DOM) and the high-performance rendering of the <canvas> element. It allows you to embed real, fully interactive DOM elements directly inside a canvas grid or a 3D WebGL/WebGPU context, combining the layout and accessibility of HTML with the powerful pixel-level effects of the GPU.

PageFlip + HTML-in-Canvas

While PageFlip was built with ActionScript, we can recreate the experience using HTML-in-Canvas. This allows us to use real DOM elements for the pages, which gives us:

• Native text selection
• CSS styling
• JavaScript interactivity
• Accessibility out-of-the-box

<hic-pageflip>

To abstract away all the complexity of HTML-in-Canvas and pageflip-specific logic, <hic-pageflip> is a web component for creating pageflip books.

Import the module once in your application, and the components will auto-register themselves.

Links and Resources

• The <hic-pageflip> code on GitHub
• HTML-in-Canvas
• The anatomy of a page curl