XR Progressive Enhancement

Plain HTML — Until You Put On a Headset

This entire page is ordinary, fully visible HTML on any screen. On a WebXR-capable device it stays that way too — until you press the Enter button (bottom-right, added automatically by Fold.page). The instant a session starts, this same markup becomes a live Fold.page 3D scene; the instant it ends, it reverts to plain HTML again.

Welcome

One Page, Two Experiences

Nothing about this text changes depending on how it's viewed — it's the same DOM, the same CSS, read the same way by a search engine or a screen reader either way. What changes is whether Fold.page is allowed to touch it.

How It Works

Three Pieces, No Library Changes

.foldpage on this section marks it as a Fold target.
.foldpage-exclude, also on this section, tells Fold to skip it — target and descendants — so it stays plain, visible HTML.
Fold.init({ onXrChange }) removes that exclude class the moment a session starts, and calls Fold.refresh() so Fold re-scans immediately. It adds the class back on session end.

Try It

On a Headset

Open this page on a Quest, Vision Pro, or any WebXR-capable browser. Press Enter — this photo and every section above it will fade out of flat HTML and reappear around you in 3D.