Skip to content
hantui

HTML in Canvasv0.3.0

Living Book

A 3D book whose pages are live, selectable DOM.

Experimental · Chrome origin trialChecking support…

Built on the WICG HTML-in-Canvas proposal, which is not a web standard and changes between Chrome versions. Every component works without it: other browsers get the same live DOM with a CSS approximation of the effect.

To try the native version locally, open Chrome Canary and enable chrome://flags/#canvas-draw-element. In production, register for the origin trial and set NEXT_PUBLIC_HTML_IN_CANVAS_OT_TOKEN.

Installation

CLI

npx shadcn@latest add https://hantui-theta.vercel.app/r/living-book.json

Manual

  1. Install the dependencies

    npm install clsx lucide-react motion tailwind-merge

  2. Add the shared helpers

    Components use cn() from lib/utils.ts and the motion tokens below. See Installation if you have not set them up yet.

    lib/html-canvas/gl.ts
    /**
 * Small WebGL2 helpers shared by the HTML-in-Canvas components. Shaders work in the canvas's CSS
 * pixels, so a DOMMatrix used to draw an element is the same one passed to `syncElementGeometry`.
 */

/**
 * GLSL: projects a CSS-px position (already multiplied by the draw matrix, so it may carry a
 * perspective w) to clip space. Keeps w for perspective-correct texturing. Needs `uniform vec2 u_canvas`.
 */
export const PROJECT_GLSL = /* glsl */ `
uniform vec2 u_canvas;
vec4 projectCss(vec4 q) {
  return vec4(2.0 * q.x / u_canvas.x - q.w, -(2.0 * q.y / u_canvas.y - q.w), 0.0, q.w);
}`;

/** GLSL: signed distance to a rounded rectangle centered at the origin (half size `b`, radius `r`). */
export const ROUND_RECT_GLSL = /* glsl */ `
float sdRoundRect(vec2 p, vec2 b, float r) {
  vec2 q = abs(p) - b + r;
  return length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - r;
}`;

function compile(gl: WebGL2RenderingContext, type: number, source: string) {
  const shader = gl.createShader(type);
  if (!shader) throw new Error("Could not create a shader");
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS) && !gl.isContextLost()) {
    const log = gl.getShaderInfoLog(shader);
    gl.deleteShader(shader);
    throw new Error(`Shader compile failed: ${log}`);
  }
  return shader;
}

export interface Program {
  program: WebGLProgram;
  /** Cached uniform location lookup. */
  u: (name: string) => WebGLUniformLocation | null;
}

/** Compiles and links a program. Attribute 0 is always `a_pos`. */
export function createProgram(gl: WebGL2RenderingContext, vertex: string, fragment: string): Program {
  const program = gl.createProgram();
  if (!program) throw new Error("Could not create a program");
  gl.attachShader(program, compile(gl, gl.VERTEX_SHADER, vertex));
  gl.attachShader(program, compile(gl, gl.FRAGMENT_SHADER, fragment));
  gl.bindAttribLocation(program, 0, "a_pos");
  gl.linkProgram(program);
  if (!gl.getProgramParameter(program, gl.LINK_STATUS) && !gl.isContextLost()) throw new Error(`Program link failed: ${gl.getProgramInfoLog(program)}`);
  const cache = new Map<string, WebGLUniformLocation | null>();
  return {
    program,
    u: (name) => {
      if (!cache.has(name)) cache.set(name, gl.getUniformLocation(program, name));
      return cache.get(name) ?? null;
    },
  };
}

export interface Mesh {
  vao: WebGLVertexArrayObject;
  count: number;
}

/** A unit grid over [0, 1]² as indexed triangles, in attribute 0. One cell is a plain quad. */
export function createGrid(gl: WebGL2RenderingContext, cols = 1, rows = 1): Mesh {
  const vao = gl.createVertexArray();
  if (!vao) throw new Error("Could not create a vertex array");
  gl.bindVertexArray(vao);
  const positions: number[] = [];
  for (let y = 0; y <= rows; y++) for (let x = 0; x <= cols; x++) positions.push(x / cols, y / rows);
  const indices: number[] = [];
  for (let y = 0; y < rows; y++) {
    for (let x = 0; x < cols; x++) {
      const i = y * (cols + 1) + x;
      indices.push(i, i + 1, i + cols + 1, i + 1, i + cols + 2, i + cols + 1);
    }
  }
  const vbo = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
  gl.enableVertexAttribArray(0);
  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
  const ibo = gl.createBuffer();
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo);
  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint32Array(indices), gl.STATIC_DRAW);
  gl.bindVertexArray(null);
  return { vao, count: indices.length };
}

/** Draws a mesh from `createGrid`. */
export function drawMesh(gl: WebGL2RenderingContext, mesh: Mesh, instances = 0) {
  gl.bindVertexArray(mesh.vao);
  if (instances > 0) gl.drawElementsInstanced(gl.TRIANGLES, mesh.count, gl.UNSIGNED_INT, 0, instances);
  else gl.drawElements(gl.TRIANGLES, mesh.count, gl.UNSIGNED_INT, 0);
  gl.bindVertexArray(null);
}

/** Uploads a DOMMatrix to a mat4 uniform. */
export function setMatrix(gl: WebGL2RenderingContext, location: WebGLUniformLocation | null, matrix: DOMMatrix) {
  gl.uniformMatrix4fv(location, false, matrix.toFloat32Array());
}

/** Parses "#rrggbb" into 0–1 RGB. */
export function rgb(hex: string): [number, number, number] {
  const h = hex.replace("#", "");
  const n = Number.parseInt(h.length === 3 ? h.replace(/./g, (c) => c + c) : h, 16) || 0;
  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255];
}
    lib/html-canvas/setup.ts
    import type { HtmlCanvasSupport } from "@/lib/html-canvas/support";

/* eslint-disable @typescript-eslint/no-explicit-any -- the API is not in lib.dom yet */

/**
 * Attributes that make a canvas lay out and paint its children, for use in JSX so the canvas is
 * drawable from its first layout: `content="drawable"` on 155+, `layoutsubtree` before that.
 */
export function drawableCanvasAttributes(support: HtmlCanvasSupport): Record<string, string> {
  if (support.version === "155+") return { content: "drawable" };
  if (support.version === "none") return {};
  return { layoutsubtree: "" };
}

/** Makes a canvas drawable after the fact (idempotent). */
export function prepareDrawableCanvas(canvas: HTMLCanvasElement) {
  const c = canvas as any;
  if ("content" in HTMLCanvasElement.prototype) {
    if (canvas.getAttribute("content") !== "drawable") canvas.setAttribute("content", "drawable");
  } else if (!canvas.hasAttribute("layoutsubtree")) {
    canvas.setAttribute("layoutsubtree", "");
    if ("layoutSubtree" in c) c.layoutSubtree = true;
  }
}

/**
 * Attributes for an element the canvas draws on its own. On 155+ it must carry `drawable`; on older
 * versions it must instead be a direct child of the canvas, which callers arrange in their markup.
 */
export function drawableElementAttributes(support: HtmlCanvasSupport): Record<string, string> {
  return support.version === "155+" ? { drawable: "" } : {};
}

/** Asks the canvas for a `paint` event on the next frame, where supported. */
export function requestCanvasPaint(canvas: HTMLCanvasElement) {
  const c = canvas as any;
  if (typeof c.requestPaint === "function") c.requestPaint();
}
/* eslint-enable @typescript-eslint/no-explicit-any */
    lib/html-canvas/support.ts
    /**
 * Feature detection for the experimental HTML-in-Canvas API (WICG html-in-canvas). The API is a
 * Chrome origin trial, not a standard, and its shape changed in Chrome 150 and 155. Nothing outside
 * `src/lib/html-canvas/` may touch it: every call goes through these adapters.
 *
 * - 155+: `content="drawable"`, `drawable` descendants, `texElementSubImage2D`,
 *   `canvas.updateElementGeometry()` and automatic hit-testing for 2D draws.
 * - 150–154: `layoutsubtree`, `drawElementImage()` returning a DOMMatrix, `texElementImage2D(target,
 *   internalformat, element)` and `canvas.getElementTransform(element, drawTransform)`.
 * - legacy (< 150): `texElementImage2D(target, level, internalformat, format, type, element)`.
 */

export type HtmlCanvasVersion = "155+" | "150-154" | "legacy" | "none";

export interface HtmlCanvasSupport {
  /** `drawElementImage` on 2D contexts. */
  twoD: boolean;
  /** Element textures in WebGL2. */
  webgl: boolean;
  /** Element textures in WebGPU. */
  webgpu: boolean;
  version: HtmlCanvasVersion;
}

export const NO_SUPPORT: HtmlCanvasSupport = { twoD: false, webgl: false, webgpu: false, version: "none" };

/* eslint-disable @typescript-eslint/no-explicit-any -- the API is not in lib.dom yet */
let cached: HtmlCanvasSupport | null = null;

/** What this browser supports. Always "none" on the server. Cached after the first call. */
export function getHtmlCanvasSupport(): HtmlCanvasSupport {
  if (typeof window === "undefined" || typeof HTMLCanvasElement === "undefined") return NO_SUPPORT;
  if (cached) return cached;
  const canvasProto = HTMLCanvasElement.prototype as any;
  const ctx2d = typeof CanvasRenderingContext2D !== "undefined" ? (CanvasRenderingContext2D.prototype as any) : {};
  const gl2 = typeof WebGL2RenderingContext !== "undefined" ? (WebGL2RenderingContext.prototype as any) : {};
  const gpuQueue = typeof (window as any).GPUQueue !== "undefined" ? (window as any).GPUQueue.prototype : {};

  const twoD = "drawElementImage" in ctx2d;
  const sub = "texElementSubImage2D" in gl2;
  const tex = "texElementImage2D" in gl2;
  const webgpu = "drawElementImageToTexture" in gpuQueue || "copyElementImageToTexture" in gpuQueue;

  let version: HtmlCanvasVersion = "none";
  if (sub || "content" in canvasProto || "updateElementGeometry" in canvasProto) version = "155+";
  else if (tex) version = typeof gl2.texElementImage2D === "function" && gl2.texElementImage2D.length >= 6 ? "legacy" : "150-154";
  else if (twoD || "layoutSubtree" in canvasProto) version = "150-154";

  cached = { twoD, webgl: sub || tex, webgpu, version };
  return cached;
}

/** True when the API can draw into the given context type. */
export function supportsContext(support: HtmlCanvasSupport, context: "2d" | "webgl2") {
  return support.version !== "none" && (context === "2d" ? support.twoD : support.webgl);
}

/** A short label for status chips: "Chrome 150–154 API". */
export function describeSupport(support: HtmlCanvasSupport) {
  if (support.version === "none") return "Not supported";
  return { "155+": "Chrome 155+ API", "150-154": "Chrome 150–154 API", legacy: "Pre-150 API" }[support.version];
}
/* eslint-enable @typescript-eslint/no-explicit-any */
    lib/html-canvas/sync-geometry.ts
    import { getHtmlCanvasSupport } from "@/lib/html-canvas/support";

/* eslint-disable @typescript-eslint/no-explicit-any -- the API is not in lib.dom yet */

/**
 * Tells the browser where an element is drawn, so clicks, text selection, focus rings and screen
 * reader focus land on the drawn pixels. `canvasTransform` maps the element's own CSS px (origin at
 * its top-left) to the canvas's CSS px, and may include perspective; it is converted to the device
 * pixels the API expects.
 *
 * Canvas children are laid out at the canvas's top-left corner (they do not stack), so the transform
 * is the element's whole position.
 *
 * For non-affine warps (ripples, curls, cloth), pass the closest affine approximation and calm the
 * warp while an input inside the element has focus.
 */
export function syncElementGeometry(canvas: HTMLCanvasElement, element: HTMLElement, canvasTransform: DOMMatrix) {
  const c = canvas as any;
  const support = getHtmlCanvasSupport();
  const cssWidth = canvas.clientWidth || canvas.width;
  const cssHeight = canvas.clientHeight || canvas.height;
  // The API works in device pixels on both sides (the element's rendered image and the canvas's backing
  // store), so the CSS-px matrix is conjugated by the pixel ratio: S · M · S⁻¹.
  const toBackingStore = new DOMMatrix().scale(canvas.width / cssWidth, canvas.height / cssHeight, 1);
  const pixels = toBackingStore.multiply(canvasTransform).multiply(toBackingStore.inverse());
  try {
    if (support.version === "155+" && typeof c.updateElementGeometry === "function") {
      c.updateElementGeometry(element, { canvasTransform: pixels });
      return;
    }
    if (typeof c.getElementTransform === "function") {
      element.style.transform = c.getElementTransform(element, pixels).toString();
      return;
    }
  } catch {
    // Fall through to the manual mapping below.
  }
  // Manual: children sit at the canvas origin, so the CSS-px transform applies as is.
  element.style.transformOrigin = "0 0";
  element.style.transform = canvasTransform.toString();
}

/** Clears geometry set by `syncElementGeometry` or a legacy `drawElement2D`. */
export function clearElementGeometry(element: HTMLElement) {
  element.style.transform = "";
  element.style.transformOrigin = "";
}

/** A CSS-px perspective matrix, like `perspective(d)` in CSS. */
export function perspective(distance: number) {
  return new DOMMatrix([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -1 / distance, 0, 0, 0, 1]);
}
/* eslint-enable @typescript-eslint/no-explicit-any */
    lib/html-canvas/texture-webgl.ts
    import { getHtmlCanvasSupport } from "@/lib/html-canvas/support";

/* eslint-disable @typescript-eslint/no-explicit-any -- the API is not in lib.dom yet */

/** A WebGL texture that holds a live element's pixels. */
export interface ElementTexture {
  texture: WebGLTexture;
  /** Natural size of the last upload, in CSS px. */
  width: number;
  height: number;
  /** Allocated size on 155+, where the storage is reused until the element resizes. */
  allocated: { width: number; height: number } | null;
}

/** Creates an empty, linearly filtered, edge-clamped texture for `uploadElementTexture`. */
export function createElementTexture(gl: WebGL2RenderingContext): ElementTexture {
  const texture = gl.createTexture();
  if (!texture) throw new Error("Could not create a texture");
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  return { texture, width: 0, height: 0, allocated: null };
}

/**
 * Uploads an element's current rendering into `target`. Call it from the canvas `paint` event or on
 * resize, never every frame. Returns false when the element could not be uploaded.
 *
 * - 155+: measures with `captureElementImage`, allocates once with `texImage2D(…, null)` (again only
 *   when the size changes), then copies with `texElementSubImage2D`.
 * - 150–154: `texElementImage2D(target, internalformat, element)`.
 * - legacy: `texElementImage2D(target, level, internalformat, format, type, element)`.
 */
export function uploadElementTexture(gl: WebGL2RenderingContext, target: ElementTexture, element: Element) {
  const g = gl as any;
  const support = getHtmlCanvasSupport();
  const box = element.getBoundingClientRect();
  const html = element as HTMLElement;
  // Layout size, unaffected by the CSS transform used for hit-testing.
  const width = html.offsetWidth || box.width;
  const height = html.offsetHeight || box.height;
  if (!width || !height) return false;
  gl.bindTexture(gl.TEXTURE_2D, target.texture);
  try {
    if (support.version === "155+" && typeof g.texElementSubImage2D === "function") {
      const canvas = gl.canvas as any;
      let natural = { width, height };
      if (typeof canvas.captureElementImage === "function") {
        const image = canvas.captureElementImage(element);
        natural = { width: image.width, height: image.height };
        image.close?.();
      }
      if (!target.allocated || target.allocated.width !== natural.width || target.allocated.height !== natural.height) {
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, natural.width, natural.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
        target.allocated = natural;
      }
      g.texElementSubImage2D(gl.TEXTURE_2D, 0, 0, 0, element);
    } else if (support.version === "legacy") {
      g.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, element);
    } else if (typeof g.texElementImage2D === "function") {
      g.texElementImage2D(gl.TEXTURE_2D, gl.RGBA8, element);
    } else {
      return false;
    }
  } catch {
    return false;
  }
  target.width = width;
  target.height = height;
  return true;
}
/* eslint-enable @typescript-eslint/no-explicit-any */
    lib/html-canvas/use-html-canvas.ts
    "use client";

import { useCallback, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
import { useReducedMotion } from "motion/react";
import { drawableCanvasAttributes, prepareDrawableCanvas, requestCanvasPaint } from "@/lib/html-canvas/setup";
import { getHtmlCanvasSupport, NO_SUPPORT, supportsContext, type HtmlCanvasSupport } from "@/lib/html-canvas/support";

export type HtmlCanvasMode = "auto" | "native" | "fallback";
type ContextType = "2d" | "webgl2";
type ContextFor<C extends ContextType> = C extends "2d" ? CanvasRenderingContext2D : WebGL2RenderingContext;

export interface HtmlCanvasFrame<C extends ContextType> {
  ctx: ContextFor<C>;
  canvas: HTMLCanvasElement;
  /** Canvas size in CSS px. */
  width: number;
  height: number;
  /** Device pixels per CSS px used for the backing store (capped). */
  dpr: number;
  /** Seconds since the hook started. */
  time: number;
  /** Seconds since the previous render. */
  delta: number;
  /** Why this render happened: drawn elements repainted, the canvas resized, or an animation frame. */
  reason: "paint" | "resize" | "frame" | "request";
  /** Elements that repainted (from the paint event), when known. */
  changed: readonly Element[];
}

export interface UseHtmlCanvasOptions<C extends ContextType> {
  /** Context to draw with. */
  context: C;
  /** "auto" uses the API when available, "fallback" never does, "native" requires it. @default "auto" */
  mode?: HtmlCanvasMode;
  /** Run a render every frame while true (e.g. while a ripple is fading). Paused offscreen and in hidden tabs. */
  animating?: boolean;
  /** Called once per context (again after a lost context is restored). Return a cleanup. */
  setup?: (ctx: ContextFor<C>, canvas: HTMLCanvasElement) => void | (() => void);
  /** Draws a frame. Upload element textures only when `reason` is "paint" or "resize". */
  render: (frame: HtmlCanvasFrame<C>) => void;
  /** Highest device pixel ratio for the backing store. @default 2 */
  maxDpr?: number;
  /** Context attributes for WebGL. */
  contextAttributes?: WebGLContextAttributes;
}

export interface HtmlCanvasController {
  /** True when the canvas path is active; render the fallback DOM otherwise. */
  native: boolean;
  /** What the browser supports (none on the server and during hydration). */
  support: HtmlCanvasSupport;
  /** Ref for the <canvas>. */
  canvasRef: (canvas: HTMLCanvasElement | null) => void;
  /** Spread onto the <canvas> so it lays out and paints its children from the first layout. */
  canvasProps: Record<string, string>;
  /** Asks for one more render (and a browser paint event where supported). */
  invalidate: () => void;
}

const noop = () => () => {};

/**
 * Ties the HTML-in-Canvas adapter together: decides native vs. fallback (never during SSR or
 * hydration, never under reduced motion), prepares the canvas, renders on the canvas `paint` event
 * and on resize, runs a frame loop only while `animating`, pauses offscreen and in hidden tabs,
 * recovers from a lost WebGL context and cleans up on unmount.
 */
export function useHtmlCanvas<C extends ContextType>({
  context,
  mode = "auto",
  animating = false,
  setup,
  render,
  maxDpr = 2,
  contextAttributes,
}: UseHtmlCanvasOptions<C>): HtmlCanvasController {
  const hydrated = useSyncExternalStore(
    noop,
    () => true,
    () => false,
  );
  const reduceMotion = useReducedMotion();
  const support = hydrated ? getHtmlCanvasSupport() : NO_SUPPORT;
  const [failed, setFailed] = useState(false);
  const native = hydrated && !failed && mode !== "fallback" && !reduceMotion && supportsContext(support, context);

  // The element lives in a ref (it is mutated: size, attributes); the counter re-runs the effect when it changes.
  const canvasEl = useRef<HTMLCanvasElement | null>(null);
  const [canvasVersion, setCanvasVersion] = useState(0);
  const canvasRef = useCallback((el: HTMLCanvasElement | null) => {
    if (canvasEl.current === el) return;
    canvasEl.current = el;
    setCanvasVersion((v) => v + 1);
  }, []);
  const renderRef = useRef(render);
  const setupRef = useRef(setup);
  const animatingRef = useRef(animating);
  useLayoutEffect(() => {
    renderRef.current = render;
    setupRef.current = setup;
    animatingRef.current = animating;
  });
  const kick = useRef<(reason: HtmlCanvasFrame<C>["reason"]) => void>(() => {});

  useEffect(() => {
    const canvas = canvasEl.current;
    if (!native || !canvas) return;
    prepareDrawableCanvas(canvas);
    const ctx = canvas.getContext(context, context === "webgl2" ? { alpha: true, premultipliedAlpha: true, antialias: true, ...contextAttributes } : undefined) as ContextFor<C> | null;
    if (!ctx) {
      // Defer so the state change happens outside the effect body.
      const t = window.setTimeout(() => setFailed(true), 0);
      return () => window.clearTimeout(t);
    }
    let cleanupSetup: void | (() => void);
    let ready = false;
    const runSetup = () => {
      try {
        cleanupSetup = setupRef.current?.(ctx, canvas);
        ready = true;
      } catch (error) {
        console.error(error);
        ready = false;
        window.setTimeout(() => setFailed(true), 0);
      }
    };
    runSetup();

    const start = performance.now();
    // Frame time is measured between loop frames only, so the first frame after idling has a normal step.
    let lastFrame = 0;
    let size = { width: 0, height: 0, dpr: 1 };
    let visible = true;
    let frame = 0;
    let changed: readonly Element[] = [];

    const draw = (reason: HtmlCanvasFrame<C>["reason"]) => {
      if (!ready || !size.width || !size.height) return;
      const now = performance.now();
      const delta = reason === "frame" && lastFrame ? Math.min(1 / 20, (now - lastFrame) / 1000) : reason === "frame" ? 1 / 60 : 0;
      if (reason === "frame") lastFrame = now;
      try {
        renderRef.current({ ctx, canvas, width: size.width, height: size.height, dpr: size.dpr, time: (now - start) / 1000, delta, reason, changed });
      } catch (error) {
        console.error(error);
      }
      changed = [];
    };

    const loop = () => {
      frame = 0;
      if (!visible || document.hidden || !animatingRef.current) {
        lastFrame = 0;
        return;
      }
      draw("frame");
      frame = requestAnimationFrame(loop);
    };
    const ensureLoop = () => {
      if (!frame && visible && !document.hidden && animatingRef.current) frame = requestAnimationFrame(loop);
    };
    kick.current = (reason) => {
      draw(reason);
      ensureLoop();
    };

    const resize = () => {
      const rect = canvas.getBoundingClientRect();
      const dpr = Math.min(maxDpr, window.devicePixelRatio || 1);
      const width = Math.max(1, Math.round(rect.width));
      const height = Math.max(1, Math.round(rect.height));
      if (width === size.width && height === size.height && dpr === size.dpr) return;
      size = { width, height, dpr };
      canvas.width = Math.round(width * dpr);
      canvas.height = Math.round(height * dpr);
      draw("resize");
      requestCanvasPaint(canvas);
    };
    const resizeObserver = new ResizeObserver(resize);
    resizeObserver.observe(canvas);
    resize();

    const onPaint = (event: Event) => {
      changed = ((event as Event & { changedElements?: Element[] }).changedElements ?? []) as Element[];
      draw("paint");
      ensureLoop();
    };
    canvas.addEventListener("paint", onPaint);

    const io = new IntersectionObserver(([entry]) => {
      visible = entry?.isIntersecting ?? true;
      ensureLoop();
    });
    io.observe(canvas);
    const onVisibility = () => ensureLoop();
    document.addEventListener("visibilitychange", onVisibility);

    const onLost = (event: Event) => {
      event.preventDefault();
      ready = false;
      cancelAnimationFrame(frame);
      frame = 0;
    };
    const onRestored = () => {
      runSetup();
      draw("resize");
      requestCanvasPaint(canvas);
    };
    canvas.addEventListener("webglcontextlost", onLost);
    canvas.addEventListener("webglcontextrestored", onRestored);

    requestCanvasPaint(canvas);

    return () => {
      cancelAnimationFrame(frame);
      resizeObserver.disconnect();
      io.disconnect();
      canvas.removeEventListener("paint", onPaint);
      canvas.removeEventListener("webglcontextlost", onLost);
      canvas.removeEventListener("webglcontextrestored", onRestored);
      document.removeEventListener("visibilitychange", onVisibility);
      kick.current = () => {};
      if (typeof cleanupSetup === "function") cleanupSetup();
    };
    // contextAttributes and maxDpr are read once per canvas.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [native, canvasVersion, context]);

  // Start or stop the loop when `animating` flips.
  useEffect(() => {
    if (animating) kick.current("frame");
  }, [animating]);

  const invalidate = useCallback(() => {
    kick.current("request");
    if (canvasEl.current) requestCanvasPaint(canvasEl.current);
  }, []);

  return { native, support, canvasRef, canvasProps: drawableCanvasAttributes(support), invalidate };
}

  3. Copy the source

    components/ui/living-book/living-book.tsx
    "use client";

import { useEffect, useId, useRef, useState, type ReactNode } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { cn } from "@/lib/utils";
import { createGrid, createProgram, drawMesh, PROJECT_GLSL, setMatrix, type Mesh, type Program } from "@/lib/html-canvas/gl";
import { createElementTexture, uploadElementTexture, type ElementTexture } from "@/lib/html-canvas/texture-webgl";
import { perspective, syncElementGeometry } from "@/lib/html-canvas/sync-geometry";
import { useHtmlCanvas, type HtmlCanvasMode } from "@/lib/html-canvas/use-html-canvas";

export interface LivingBookProps {
  /** Pages in order, two per spread (left, right). Each is live DOM: text, links, small forms. */
  pages: ReactNode[];
  /** Page size in px. @default { width: 240, height: 320 } */
  pageSize?: { width: number; height: number };
  /** Spread index (controlled). */
  spread?: number;
  /** Starting spread when uncontrolled. @default 0 */
  defaultSpread?: number;
  /** Called when a page turn finishes. */
  onSpreadChange?: (spread: number) => void;
  /** Accessible name for the book. @default "Book" */
  label?: string;
  /** "auto" uses HTML-in-Canvas when available, "fallback" never does. @default "auto" */
  rendering?: HtmlCanvasMode;
  /** Called when the rendering mode is known. */
  onModeChange?: (native: boolean) => void;
  /** Classes for the root. */
  className?: string;
}

const MARGIN = 36;
/** Extra room above the book for a page standing up mid-turn. */
const HEADROOM = 64;
const TILT = 16;
const DISTANCE = 1400;

const PAGE_VERT = /* glsl */ `#version 300 es
in vec2 a_pos;
uniform vec2 u_size;
uniform mat4 u_book;
uniform float u_side;     // -1 left page, 1 right page, 0 turning sheet
uniform float u_progress; // turning: 0 flat right … 1 flat left
uniform float u_dir;      // 1 turning forward, -1 backward
out vec2 v_uv;
out float v_angle;
out float v_spine;
${PROJECT_GLSL}
void main() {
  float u = a_pos.x;
  float pw = u_size.x;
  vec3 p;
  float angle = 0.0;
  if (u_side < -0.5) {
    p = vec3(-pw + u * pw, a_pos.y * u_size.y, 0.0);
    v_spine = 1.0 - u;
    angle = 3.14159265;
  } else if (u_side > 0.5) {
    p = vec3(u * pw, a_pos.y * u_size.y, 0.0);
    v_spine = u;
  } else {
    // The sheet bends as it turns: the outer edge trails behind the spine edge.
    float pi = 3.14159265;
    float a0 = (u_dir > 0.0 ? u_progress : 1.0 - u_progress) * pi;
    float k = -sin(u_progress * pi) * 0.85 * u_dir;
    float a = a0 + k * u;
    float x;
    float z;
    if (abs(k) < 0.001) {
      x = cos(a0) * u * pw;
      z = sin(a0) * u * pw;
    } else {
      x = (sin(a0 + k * u) - sin(a0)) / k * pw;
      z = (cos(a0) - cos(a0 + k * u)) / k * pw;
    }
    p = vec3(x, a_pos.y * u_size.y, z);
    angle = a;
    v_spine = u;
  }
  v_uv = a_pos;
  v_angle = angle;
  gl_Position = projectCss(u_book * vec4(p, 1.0));
}`;

const PAGE_FRAG = /* glsl */ `#version 300 es
precision highp float;
in vec2 v_uv;
in float v_angle;
in float v_spine;
uniform sampler2D u_front;
uniform sampler2D u_back;
uniform float u_side;
out vec4 outColor;
void main() {
  vec4 c;
  if (u_side > -0.5 && u_side < 0.5 && v_angle > 1.5708) {
    // The turning sheet's back is the next left page, mirrored as it faces the other way.
    c = texture(u_back, vec2(1.0 - v_uv.x, v_uv.y));
  } else {
    c = texture(u_front, v_uv);
  }
  // Paper under the page, a shadow along the spine and light from how far the sheet has turned.
  vec3 col = mix(vec3(0.99, 0.98, 0.96), c.rgb, c.a);
  float spine = smoothstep(0.0, 0.18, v_spine);
  col *= 0.78 + 0.22 * spine;
  if (u_side > -0.5 && u_side < 0.5) col *= 0.86 + 0.14 * abs(cos(v_angle));
  outColor = vec4(col, 1.0);
}`;

/**
 * A 3D book drawn through HTML-in-Canvas whose pages are live DOM: selectable text, links, even a small
 * form. Drag a page edge, use the arrow keys or the buttons to turn pages with a curl and a spine
 * shadow. The open spread's geometry is synced so text selection and clicks work on the drawn pages.
 * Without the API, it is a two-column paginated book with a CSS page turn.
 */
export function LivingBook({
  pages,
  pageSize = { width: 240, height: 320 },
  spread: spreadProp,
  defaultSpread = 0,
  onSpreadChange,
  label = "Book",
  rendering = "auto",
  onModeChange,
  className,
}: LivingBookProps) {
  const id = useId();
  const reduceMotion = useReducedMotion();
  const spreads = Math.max(1, Math.ceil(pages.length / 2));
  const [inner, setInner] = useState(defaultSpread);
  const spread = Math.min(spreads - 1, Math.max(0, spreadProp ?? inner));
  const [turn, setTurn] = useState<{ dir: 1 | -1 } | null>(null);
  const turnState = useRef({ progress: 0, target: 1, dragging: false, startX: 0 });
  const pageRefs = useRef(new Map<number, HTMLDivElement>());
  const textures = useRef(new Map<number, ElementTexture>());
  const gl = useRef<{ program: Program; flat: Mesh; sheet: Mesh } | null>(null);
  const { width: pw, height: ph } = pageSize;

  const commit = (next: number) => {
    if (spreadProp === undefined) setInner(next);
    onSpreadChange?.(next);
  };

  // Pages involved in the current view: the open spread plus, while turning, the pages being uncovered.
  const left = spread * 2;
  const right = spread * 2 + 1;
  const involved = turn ? (turn.dir > 0 ? [left, right, right + 1, right + 2] : [left - 2, left - 1, left, right]) : [left, right];

  const { native, canvasRef, canvasProps, invalidate } = useHtmlCanvas({
    context: "webgl2",
    mode: rendering,
    animating: turn !== null,
    setup: (ctx) => {
      gl.current = { program: createProgram(ctx, PAGE_VERT, PAGE_FRAG), flat: createGrid(ctx), sheet: createGrid(ctx, 24, 1) };
      return () => {
        textures.current.forEach((t) => ctx.deleteTexture(t.texture));
        textures.current.clear();
        if (gl.current) ctx.deleteProgram(gl.current.program.program);
        gl.current = null;
      };
    },
    render: ({ ctx, canvas, width, height: h, reason, changed, delta }) => {
      const g = gl.current;
      if (!g) return;
      const tex = (index: number) => {
        const el = pageRefs.current.get(index);
        if (!el) return null;
        let t = textures.current.get(index);
        if (!t) {
          t = createElementTexture(ctx);
          textures.current.set(index, t);
        }
        if (reason === "resize" || reason === "request" || !t.width || changed.some((c) => c === el || el.contains(c))) uploadElementTexture(ctx, t, el);
        return t;
      };
      const book = new DOMMatrix()
        .translate(width / 2, h / 2 + HEADROOM / 2)
        .multiply(perspective(DISTANCE))
        .rotate(TILT, 0, 0)
        .translate(0, -ph / 2);

      // Advance a turn (or follow a drag).
      const ts = turnState.current;
      if (turn && !ts.dragging && reason === "frame") {
        ts.progress += (ts.target - ts.progress) * (1 - Math.exp(-delta * 7));
        if (Math.abs(ts.target - ts.progress) < 0.004) {
          ts.progress = ts.target;
          const done = ts.target === 1;
          window.setTimeout(() => {
            setTurn(null);
            if (done) commit(spread + turn.dir);
          }, 0);
        }
      }

      ctx.viewport(0, 0, canvas.width, canvas.height);
      ctx.clearColor(0, 0, 0, 0);
      ctx.clear(ctx.COLOR_BUFFER_BIT);
      ctx.useProgram(g.program.program);
      const { u } = g.program;
      ctx.uniform2f(u("u_canvas"), width, h);
      ctx.uniform2f(u("u_size"), pw, ph);
      setMatrix(ctx, u("u_book"), book);
      ctx.uniform1i(u("u_front"), 0);
      ctx.uniform1i(u("u_back"), 1);

      const drawFlat = (index: number, side: -1 | 1) => {
        const t = tex(index);
        if (!t) return;
        ctx.uniform1f(u("u_side"), side);
        ctx.activeTexture(ctx.TEXTURE0);
        ctx.bindTexture(ctx.TEXTURE_2D, t.texture);
        drawMesh(ctx, g.flat);
      };
      // Underneath during a turn: forward shows the next right page, backward the previous left page.
      const baseLeft = turn && turn.dir < 0 ? left - 2 : left;
      const baseRight = turn && turn.dir > 0 ? right + 2 : right;
      drawFlat(baseLeft, -1);
      drawFlat(baseRight, 1);

      if (turn) {
        const front = tex(turn.dir > 0 ? right : left - 1);
        const back = tex(turn.dir > 0 ? right + 1 : left);
        if (front) {
          ctx.uniform1f(u("u_side"), 0);
          ctx.uniform1f(u("u_progress"), ts.progress);
          ctx.uniform1f(u("u_dir"), turn.dir);
          ctx.activeTexture(ctx.TEXTURE0);
          ctx.bindTexture(ctx.TEXTURE_2D, front.texture);
          ctx.activeTexture(ctx.TEXTURE1);
          ctx.bindTexture(ctx.TEXTURE_2D, (back ?? front).texture);
          drawMesh(ctx, g.sheet);
        }
      }

      // Sync the open spread so selection and clicks land on the drawn pages.
      if (!turn) {
        const l = pageRefs.current.get(left);
        const r = pageRefs.current.get(right);
        if (l) syncElementGeometry(canvas, l, book.translate(-pw, 0));
        if (r) syncElementGeometry(canvas, r, book);
      }
    },
  });

  useEffect(() => onModeChange?.(native), [native, onModeChange]);

  const start = (dir: 1 | -1) => {
    if (turn) return;
    const next = spread + dir;
    if (next < 0 || next >= spreads) return;
    if (!native || reduceMotion) {
      commit(next);
      return;
    }
    turnState.current = { progress: 0, target: 1, dragging: false, startX: 0 };
    setTurn({ dir });
    invalidate();
  };

  const onKeyDown = (event: React.KeyboardEvent) => {
    if ((event.target as HTMLElement).closest("input, textarea, select")) return;
    if (event.key === "ArrowRight") {
      event.preventDefault();
      start(1);
    } else if (event.key === "ArrowLeft") {
      event.preventDefault();
      start(-1);
    }
  };

  // Dragging the outer edge of a page turns it, following the pointer.
  const onEdgeDown = (dir: 1 | -1, event: React.PointerEvent<HTMLButtonElement>) => {
    if (!native || turn) return;
    const next = spread + dir;
    if (next < 0 || next >= spreads) return;
    event.currentTarget.setPointerCapture(event.pointerId);
    turnState.current = { progress: 0, target: 1, dragging: true, startX: event.clientX };
    setTurn({ dir });
  };
  const onEdgeMove = (event: React.PointerEvent<HTMLButtonElement>) => {
    const ts = turnState.current;
    if (!ts.dragging || !turn) return;
    const dx = (event.clientX - ts.startX) * -turn.dir;
    ts.progress = Math.max(0, Math.min(1, dx / (pw * 1.6)));
    invalidate();
  };
  const onEdgeUp = () => {
    const ts = turnState.current;
    if (!ts.dragging) return;
    ts.dragging = false;
    ts.target = ts.progress > 0.35 ? 1 : 0;
    invalidate();
  };

  const counter = `${Math.min(pages.length, left + 1)}–${Math.min(pages.length, right + 1)} of ${pages.length}`;
  const pageClass = "overflow-hidden bg-[#fcfaf6] text-[#2a2723]";

  const controls = (
    <div className="mt-3 flex items-center justify-center gap-3">
      <button type="button" onClick={() => start(-1)} disabled={spread === 0 || turn !== null} aria-label="Previous pages" className="relative after:absolute after:-inset-0.5 grid size-9 cursor-pointer place-items-center rounded-full border border-border text-foreground outline-none hover:bg-surface-2 focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40">
        <ChevronLeft className="size-4" aria-hidden="true" />
      </button>
      <span className="min-w-[6rem] text-center text-[12px] text-muted-foreground tabular-nums" aria-live="polite">
        Pages {counter}
      </span>
      <button type="button" onClick={() => start(1)} disabled={spread >= spreads - 1 || turn !== null} aria-label="Next pages" className="relative after:absolute after:-inset-0.5 grid size-9 cursor-pointer place-items-center rounded-full border border-border text-foreground outline-none hover:bg-surface-2 focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40">
        <ChevronRight className="size-4" aria-hidden="true" />
      </button>
    </div>
  );

  if (!native) {
    return (
      <div className={cn("flex w-full flex-col items-center", className)}>
        <div role="group" aria-roledescription="book" aria-label={label} tabIndex={0} onKeyDown={onKeyDown} className="flex max-w-full rounded-md shadow-[0_18px_40px_-20px_rgb(0_0_0/0.45)] outline-none [perspective:1600px] focus-visible:ring-2 focus-visible:ring-ring">
          {[left, right].map((index, i) => (
            <div key={`${spread}-${i}`} className={cn("relative", i === 0 ? "origin-right" : "origin-left")} style={{ width: pw, height: ph }}>
              <AnimatePresence initial={false} mode="popLayout">
                <motion.div
                  key={index}
                  initial={reduceMotion ? { opacity: 0 } : { rotateY: i === 0 ? 70 : -70, opacity: 0 }}
                  animate={{ rotateY: 0, opacity: 1 }}
                  transition={{ duration: reduceMotion ? 0.15 : 0.45, ease: [0.22, 1, 0.36, 1] }}
                  className={cn("absolute inset-0", pageClass, i === 0 ? "origin-right" : "origin-left")}
                  style={{ boxShadow: i === 0 ? "inset -14px 0 18px -14px rgb(0 0 0 / 0.3)" : "inset 14px 0 18px -14px rgb(0 0 0 / 0.3)" }}
                >
                  {pages[index] ?? null}
                </motion.div>
              </AnimatePresence>
            </div>
          ))}
        </div>
        {controls}
      </div>
    );
  }

  return (
    <div className={cn("flex w-full flex-col items-center", className)}>
      <div
        role="group"
        aria-roledescription="book"
        aria-label={label}
        tabIndex={0}
        onKeyDown={onKeyDown}
        className="relative max-w-full rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-ring"
        style={{ width: pw * 2 + MARGIN * 2, height: ph + MARGIN * 2 + HEADROOM }}
      >
        <canvas ref={canvasRef} {...canvasProps} id={`${id}-pages`} className="absolute inset-0 block size-full">
          {pages.map((page, index) => {
            const visible = !turn && (index === left || index === right);
            return (
              <div
                key={index}
                ref={(el) => {
                  if (el) pageRefs.current.set(index, el);
                  else pageRefs.current.delete(index);
                }}
                aria-hidden={!visible}
                inert={!visible}
                className={pageClass}
                style={{ width: pw, height: ph, visibility: involved.includes(index) ? "visible" : "hidden" }}
              >
                {page}
              </div>
            );
          })}
        </canvas>
        {/* Page edges: drag to turn. */}
        <button type="button" tabIndex={-1} aria-hidden="true" onPointerDown={(e) => onEdgeDown(1, e)} onPointerMove={onEdgeMove} onPointerUp={onEdgeUp} onPointerCancel={onEdgeUp} className="absolute cursor-grab touch-none" style={{ right: MARGIN - 8, top: MARGIN + HEADROOM, width: 28, height: ph }} />
        <button type="button" tabIndex={-1} aria-hidden="true" onPointerDown={(e) => onEdgeDown(-1, e)} onPointerMove={onEdgeMove} onPointerUp={onEdgeUp} onPointerCancel={onEdgeUp} className="absolute cursor-grab touch-none" style={{ left: MARGIN - 8, top: MARGIN + HEADROOM, width: 28, height: ph }} />
      </div>
      {controls}
    </div>
  );
}

Usage

import { LivingBook } from "@/components/ui/living-book/living-book";

<LivingBook
  pages={[<Cover key="1" />, <Intro key="2" />, <ChapterOne key="3" />, <Plate key="4" />]}
  pageSize={{ width: 240, height: 320 }}
/>

API reference

PropTypeDefaultDescription
pages*ReactNode[]–Pages in order, two per spread (left, right). Each is live DOM: text, links, small forms.
pageSize{ width: number; height: number }{ width: 240, height: 320 }Page size in px.
spreadnumber–Spread index (controlled).
defaultSpreadnumber0Starting spread when uncontrolled.
onSpreadChange(spread: number) => void–Called when a page turn finishes.
labelstring"Book"Accessible name for the book.
renderingHtmlCanvasMode"auto""auto" uses HTML-in-Canvas when available, "fallback" never does.
onModeChange(native: boolean) => void–Called when the rendering mode is known.
classNamestring–Classes for the root.
  • Experimental: uses the HTML-in-Canvas origin trial through src/lib/html-canvas/. Works in every browser via the fallback.
  • The turning sheet is a 24-segment strip bent along a circular arc in the vertex shader, showing the front page and, past 90°, the next page mirrored. Each page has its own texture, uploaded only when that page repaints.
  • Pages are drawn at `pageSize`; give each page content that fits it.

Accessibility

  • The book is a focusable group (aria-roledescription="book"): ← and → turn pages, and Previous and Next buttons with a polite page counter do the same.
  • Only the open spread is in the accessibility tree and interactive; its geometry is synced to the tilted pages, so text selection, links and the form on the last page work where they are drawn. Pages are inert while turning.
  • With reduced motion, or without the HTML-in-Canvas API, it is a two-column paginated book (pages swing in with a CSS rotateY, or swap instantly under reduced motion).