> Markdown version of [/magazine/769-a-3d-flipbook-component-built-with-the-html-in-canvas-api](https://www.wearedevelopers.com/magazine/769-a-3d-flipbook-component-built-with-the-html-in-canvas-api). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# A 3D Flipbook Component Built with the HTML-in-Canvas API

**By:** [Daniel Cranney](https://www.wearedevelopers.com/@daniel-cranney)

**Published:** September 18, 2026

If you remember the days when Flash was all over the web, you’ll have likely seen a pageflip component, allowing the user to simulate flipping through a real book, complete with curling corners, warping and skewing of the content, and dynamic shadows.

Recreating this effect for the modern day was never going to be straightforward, with complex equations needed to handle the animations, and the ever-present challenge of making it accessible, and content selectable and (indexable by agents, too).

Chrome Developer Relations engineer Bramus Van Damme found an in-depth article on the physics , fed it to Google Antigravity, which then took the underlying geometry and [turned it into a working prototype in under two hours](https://www.bram.us/2026/09/02/html-in-canvas-pageflip), later refactored into a more polished component.

Here’s Bramus telling the story:

https://www.youtube.com/embed/yO7R9YHUY-I

The result, `hic-pageflip`, is now a small, installable package, and here’s how to get started with it:

## A Note: Browser Support

We should point out, this relies on the experimental HTML-in-Canvas API, so right now it only works in Chrome with `chrome://flags#canvas-draw-element` enabled. Turn that flag on before testing.

## Installation

You can install the package right away via npm:

    npm install hic-pageflip

Or skip npm entirely and load it from a CDN:

    <script type="module" src="https://cdn.jsdelivr.net/npm/hic-pageflip"></script>

## Basic usage

Once you’ve installed and imported `hic-pageflip`, wrap your pages in the `<hic-pageflip>` wrapper, with each page on an `<hic-pageflip-page>`:

    <hic-pageflip engine="3d" page-width="300" page-height="450" page-background="#c1c8c7">
      <hic-pageflip-page>
        <div class="content">
          <h1>Cover Page</h1>
          <p>This is HTML inside a 3D WebGL pageflip!</p>
        </div>
      </hic-pageflip-page>
    
      <hic-pageflip-page>
        <div class="content">
          <h2>Inside Page</h2>
          <p>Real links, real text, real accessibility.</p>
        </div>
      </hic-pageflip-page>
    </hic-pageflip>

## Some Attributes

A couple of points to note, the default is `engine="3d"`, which includes true conical/cylindrical page curls via WebGL shaders, though you can drop back to `engine="2d"`, which is a lighter 2D canvas version. There are also `page-width`, `page-height` and `page-background` for basic styles and sizing.

The component ships with no built-in buttons, but you can wire up your own controls with its JS methods:

    const pageflip = document.querySelector('hic-pageflip');
    
    pageflip.next(); // next page
    pageflip.previous(); // previous page
    pageflip.goToPage(4); // jump to page 4
    pageflip.flipTo(4); // animate to page 4

## Some More Resources

- [How Bramus Used Google Antigravity to Build the Pageflip Component](https://www.bram.us/2026/09/02/html-in-canvas-pageflip) ![pageflip](https://wearedevelopers.imgix.net/storage/temp/2mPBOakmIXex13K9EVua.png?w=984&auto=compress,format)
- [Live demo](https://hic-pageflip.netlify.app/)
- [Minimal CodePen example](https://codepen.io/editor/bramus/pen/01a05ee7-e4cb-703d-b441-e9316147d7d0)
- [Source on GitHub](https://github.com/bramus/hic-pageflip)
- [Package on npm](https://npmjs.com/package/hic-pageflip)



## Related Articles

- [View Transition API: Adding Single-Page Transitions With Just HTML, CSS and JS](https://www.wearedevelopers.com/magazine/632-view-transition-api-adding-single-page-transitions-with-just-html-css-and-js)
- [Creating a 3D Card Fan with CSS Transforms](https://www.wearedevelopers.com/magazine/656-creating-a-3d-card-fan-with-css-transforms)
- [3 JavaScript-Free Techniques for Accordions, Dialogs, and Table of Contents](https://www.wearedevelopers.com/magazine/684-3-javascript-free-techniques-for-accordions-dialogs-and-table-of-contents)
- [CSS-Only Scroll-Driven Animations](https://www.wearedevelopers.com/magazine/712-css-only-scroll-driven-animations)

## Related Videos

- [WeAreDevelopers LIVE - Is CSS Catching Up to Flash?](https://www.wearedevelopers.com/videos/2166-wearedevelopers-live-is-css-catching-up-to-flash)
- [WeAreDevelopers LIVE - CSS is DOOMed](https://www.wearedevelopers.com/videos/1851-wearedevelopers-live-css-is-doomed)
- [Rendering Design Software in the Browser at Penpot](https://www.wearedevelopers.com/videos/1353-rendering-design-software-in-the-browser-at-penpot)
- [Extending HTML with Web Components](https://www.wearedevelopers.com/videos/459-extending-html-with-web-components)

## Related Jobs

- [Founding Engineer (Front End)](https://www.wearedevelopers.com/jobs/48423-founding-engineer-front-end) at **Momentic**
- [Senior Design Engineer](https://www.wearedevelopers.com/jobs/ext/2644934-senior-design-engineer) at **GitHub**
- [Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/2731832-frontend-engineer) at **Almedia**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/643147-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/646086-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/679408-remote-senior-full-stack-engineer) at **Edge Impulse**