Getting Started with Fold.page

What is Fold.page?

Fold.page reads any existing web page and renders part or all of it in 3D. The HTML stays, the CSS stays, Fold.page reads any web page and progressively enhances it with a 3D scene that mirrors how the browser normally renders HTML and CSS — but in a new dimension.

The key idea: your web page is the input. Fold.page doesn't ask you to learn a 3D engine, write shaders, or think in vertices. You write HTML and CSS the way you always have, Fold.page reads the browser's computed web page and builds a 3D scene from them that can be tailored for 3D space.

And when viewing your web page from an XR device, the page becomes an immersive spatial experience. No separate "XR version" required.

How Fold.page Works

The DOM-to-3D Pipeline

Here's what happens when Fold.page loads on a page:

Your HTML/CSS with Fold.page →
1) Target Selection →
2) Element Discovery →
3) Style Extraction →
4) DOM Hiding →
5) 3D Rendering →
6) Scroll & Resize Tracking

1. Target Selection

Fold.page looks for one or more target elements with the class .foldpage. Everything inside each target is a candidate for 3D rendering; content outside is left alone. The .foldpage element itself is a candidate too, not just a container — a single element can carry .foldpage and its own renderable content (a tag, a render class, a data attribute) at once, with no wrapper needed. Alternatively, pass foldpage: true to Fold.init() to skip the class entirely and render the whole page body — no class required.

2. Element Discovery

Fold.page queries the DOM inside each .foldpage target for supported HTML elements, and also checks the target element itself against the same rules. Any element marked with .foldpage-exclude is skipped. See HTML Elements for the full HTML reference.

In addition to tag-name discovery, any element carrying a primary Fold data attribute — data-foldpage-view, data-foldpage-depth, data-foldpage-animate, data-foldpage-shader, data-foldpage-model-src, and others — is automatically included regardless of its tag name, whether it's a descendant or the .foldpage element itself. This means framework component elements (<app-hero>, <my-card>, etc.) that carry Fold attributes work natively without any workaround.

3. Style Extraction

For each discovered element, Fold.page reads the element attributes and computed CSS values. Fold.page supports media queries, cascading rules and pseudo states (like :hover) as well as pseudo elements (like ::before). Most CSS properties are extracted, See Supported CSS Properties for the full CSS reference.

4. DOM Hiding

The original DOM elements are gracefully faded out with a CSS transition, pointer events are disabled on them because they are handled in the 3D scene. The original HTML stays in the document — it's just invisible. Screen readers, search engines, and accessibility tools still see it.

5. 3D Rendering

Each element is re-created as a 3D object that matches browser standards and patterns. Fold.page works like 2D browser engines but all derived HTML attributes and CSS values extracted in step 3 are rendered in 3D with Fold.page.

6. Scroll and Resize Tracking

The 3D scene tracks browser scroll and resize, smoothly animating the content group to match the current scroll position and viewport size. In XR mode, controller thumbstick and touch inputs replace native browser scroll, letting users navigate the page spatially. See XR Features for the full XR reference.

The Power of This Approach

Progressive Enhancement

Your site works without Fold.page. If the script fails to load, if the browser doesn't support WebGL, if JavaScript is disabled — users see your normal HTML page. Nothing breaks.

There's no lock-in. No proprietary markup language. No custom components. Standard HTML elements. Standard CSS properties. Fold.page is a layer on top, not a replacement underneath.

Write HTML, Get 3D

The fundamental insight is this: Anyone building for the web already has the skills with Fold.page

You don't need to learn coordinate systems, understand projection matrices, or write a single line of code with a 3D library. If you know basic HTML and CSS or have your own tools to build web pages, you can go spatial. 🚀

Accessibility

Fold.page is built with accessibility in mind. The goal is to match the same ADA-compliant behaviour browsers provide for standard HTML — visual focus indicators, keyboard navigation, and screen reader support are considered from the ground up, not added as an afterthought.

Because the original DOM elements are never removed, when Fold.page renders an element in 3D it can use the browser's native accessibility features. Screen readers, search engines, keyboard tab order, and browser accessibility APIs all continue to operate on the real HTML as normal. Fold.page leans on the browser's existing accessibility infrastructure wherever possible rather than reimplementing it in 3D.

Next Steps

• CSS Class API — All classes that control what Fold.page renders and how
• HTML Elements — Which HTML tags are auto-detected, including video, audio, SVG, and pseudo-elements
• CSS Properties — Which styles translate to 3D, including transforms, overflow, and pseudo-elements
• Data Attribute API — Fine-grained control: transforms, lighting, relief, views, and more
• Image Capabilities — Images, SVG, depth repetition, and height-map displacement meshes
• Views & Navigation — Scroll-driven views, click-to-fly, and spatial tour navigation
• XR Features — WebXR scrolling, auto-origin recentering, and device visibility