Canvas Atlas
Overview Status Activity Open support

HTML-in-canvas demo page

Live UI surfaces mapped onto WebGL with full scroll and interaction.

This mock dashboard uses a high-contrast palette and grid layout to keep every element readable while the plane stays pinned in a 3D scene.

WebGPU ready 12-column grid Scroll enabled

Snapshot

98%

Contrast score

24

Active scenes

14 ms

Frame budget

  • Rendering Hybrid HTML + shader overlays
  • Controls Pointer + keyboard focus
  • Delivery Static export and live mode

Interaction lab

Modal, accordion, and looping motion to test HTML-in-canvas behavior.

Modal test

Opens a centered dialog with a dim overlay.

Accordion

Adjust wind and damping to see how the cloth settles.
Ball impulses are amplified to highlight deformation.
Watch the looping bar below while you interact.

Looping animation

Animated gradient to validate continuous updates.

Layout coverage

All regions align to the 12-column grid and respond at 8/4 columns.

Stable

Interaction fidelity

Hover, focus, and scroll are mirrored directly onto the mesh.

Verified

Texture clarity

Unlit material keeps the texture bright and color accurate.

Max contrast

Pipeline workflow

  1. Compose Author HTML UI, bind it to the layout subtree, and sync textures.
  2. Map Attach the element to a mesh and align with camera projection.
  3. Ship Deliver a single canvas with full input support and scrolling.

Release notes

v2.6

Improved texture sync under heavy UI updates.

v2.5

Added scroll locking and focus outlines for form controls.

v2.4

Introduced color-accessible palette presets.

Live activity

Interaction audit

Hover and focus states verified on all buttons and links.

2 min ago

Layout sync

Grid-based layout reflow completed in 4.2ms.

14 min ago

Snapshot export

Generated a 4k texture snapshot for QA review.

32 min ago

FAQ

Can I scroll inside the canvas?

Yes. The HTML element remains fully scrollable with native wheel input.

Do buttons keep focus rings?

Focus-visible outlines are preserved for keyboard accessibility.

Is the palette WCAG compliant?

Every text layer meets or exceeds AA contrast ratios.

Need help? [email protected]

Last updated May 2026

Release preview

This modal is rendered inside the HTML texture to validate layered UI.