XR Features

Fold.page has built-in WebXR support. The same page and URL become an immersive experience in a VR or AR headset, or in AR on a phone — no separate XR version.

XR Detection

When Fold loads, it checks whether the device supports WebXR (immersive-ar first, then immersive-vr). The result controls the default XR button and the XR visibility classes.

Default XR Button

On devices that support WebXR, Fold shows an Enter / Exit button in the bottom-right corner. No HTML is needed. It reads "Enter" outside a session and "Exit" during one.

To hide it, use Fold.init({ xrButton: false }). EXIT XR still appears during a session either way.

XR Visibility Classes

These classes let you show or hide HTML elements based on XR device support. They're fully documented in the CSS Class API — here's the quick version:

Class	When Visible
`.foldpage-xr`	Device supports WebXR (AR or VR)
`.foldpage-noxr`	Device does not support WebXR

Important: Both classes require style="display: none;" in your HTML to prevent a flash of content before detection completes.

html

<!-- Show XR instructions only on XR devices -->
<div class="foldpage-xr" style="display: none;">
  <p>Press Enter XR in the corner to view this page in your headset.</p>
</div>

<!-- Show fallback message on non-XR devices -->
<div class="foldpage-noxr" style="display: none;">
  <p>Visit on a WebXR device for the full experience.</p>
</div>

How toggling works: After detection, Fold.page queries the DOM for all elements with .foldpage-xr and .foldpage-noxr classes and sets their display style to either block or none based on the result.

Scrolling in XR

There's no browser scroll bar in XR, so Fold provides its own scrolling. Scrolling stops at the top and bottom of the page, just like on screen.

Controllers: push the thumbstick (or trackpad) on either hand. Speed follows how far the stick is pushed. Works with Quest, Index, Vive and other standard controllers.
Touch (phone AR): drag with one finger.

Scroll Position

Entering XR starts at the page's current scroll position.
window.scrollTo(), anchor links and scroll-to-top buttons keep working during a session.

Text Readability

Text without a CSS text-shadow gets a soft contrasting outline in XR — dark behind light text, light behind dark text — so it stays readable against any background. Text with a text-shadow keeps your shadow instead.

Auto-Origin: Scene Follows Your Position

In XR, the page re-centers in front of the user when they move or turn, so it stays at a comfortable reading distance wherever they stand. It's on by default; turn it off with autoOriginXr: false to keep the page fixed in place.

Parameter	Value	Description
Position threshold	~25 cm	Movement that triggers re-centering
Rotation threshold	~15°	Head rotation that triggers re-centering
Check interval	5 seconds	How often position is checked
Initial centering	3× at 0.3 s intervals	Settles the page as the headset starts tracking

Auto-origin applies only in XR, not on screen.

HTTPS Requirement

WebXR only works on secure origins. Over plain HTTP, XR detection reports "not supported" — even on capable devices — and no error is shown.

Development: localhost counts as secure. To test on a headset or phone over your network, serve the page over HTTPS (a self-signed certificate is fine).
Production: serve your site over HTTPS.

XR Features ​

XR Detection ​

Default XR Button ​

XR Visibility Classes ​

Scrolling in XR ​

Scroll Position ​

Text Readability ​

Auto-Origin: Scene Follows Your Position ​

HTTPS Requirement ​