Fold.page Introduction
Fold.page is a tool that converts your standard 2D web pages into 3D web pages!
Fold.page converts standard HTML and CSS browser elements like headings, paragraphs, images, backgrounds, buttons, and ANY other HTML/CSS element, into spatial elements in a 3D scene. This gives web pages a third dimension, enabling effects and layouts that are only possible in 3D space.
When using Fold.pages you get WebXR (AR/VR) support, so that the same web page that works on a screen, mobile screen and in XR (VR/AR) devices with no separate build or URL required.
Fold.page is a living platform — features and APIs may change.
Documentation
Here is a quick summary of the Fold.page documentation.
| Document | Description |
|---|---|
| Getting Started | What Fold.page does, how it works |
| Install Guide | How to add Fold.page to your site |
| Configuration API | All Fold.init() / Fold.set() options with defaults and runtime behavior |
| Scene API | Direct Three.js access — geometry, groups, DOM element lookup, pixel scale, and raw scene state |
| HTML Elements | Which HTML elements Fold.page auto-detects and renders in 3D |
| CSS Properties | Which CSS properties are read and how they translate to 3D, including transition |
| CSS Class API | CSS classes that control rendering, visibility, and XR session behavior |
| Data Attribute API | HTML data attributes for fine-grained control over 3D rendering |
| Image Capabilities | Images, SVG, depth repetition, and height-map relief meshes |
| Views & Navigation | Scroll-driven views, click-to-fly navigation, Fold.viewTo() API, and the spatial tour system |
| View Layouts | Auto-position views in 3D space using layout types (ring, arc) |
| XR Features | WebXR support, spatial scrolling, auto-origin, and device visibility |
| Particle System | GPU particles driven by config or by page elements |
| Shaders | Animated shader effects for any element |
Philosophy 🧐
Bridging 2D and Spatial
The web is evolving — WebXR is enabled by default in mobile browsers, AR and VR headsets are improving and becoming more accessible. The problem is that most of the web is still flat, 2D layouts work well on 2D screens but we now have 3D capabilities.
When mobile devices became more prevalent the web had to adapt from a desktop only platform into one that supports mobile sites and responsive designs. Now the proliferation of XR capable devices with browsers means the web needs to adapt again.
Fold.page bridges the 2D-to-spatial gap! The same page that renders in a flat browser window also renders in a VR headset. One codebase, one URL, multiple experiences. Your 2D users see a web page (with 3d flair as desired). Your XR users see that web page spatially!
The Past of the Spatial Design
Fold.page aspires to embody Muriel Cooper's vision with today's technologies. Cooper and her students at the MIT Media Lab researched how electronic information could go beyond the limits of print and exist in a non-linear, multi-dimensional space. In 1994 she presented Information Landscapes, the accumulation of work with her students and result of decades of analog graphic design experience mixing with new computer graphical capabilities.
Fold.page picks up that thread. Your existing content, your existing design, rendered in the spatial medium that Cooper envisioned — without requiring you to start from scratch. Start with your 2D design and enhance for the new possibilities that are opened in this new multi-dimensional information landscape.
The Future of the Spatial Web
As XR capable devices become more common, web pages will need spatial presence. Just as web pages made for desktop needed to become responsive for mobile screens when smart phones became more common. Web pages now need to be progressively enhanced for spatial computing.
Fold.page's approach offers a path forward. Fold.page will continue to mature and as the mapping from 2D to 3D becomes increasingly automatic and rich we hope to foster a web where spatial rendering is as natural as responsive design.
Imagine a future where every web page has a spatial mode. Where browsing the web in a headset feels as natural as browsing it on desktop or mobile phone. Fold.page is a step toward that future — we hope you join us on this journey.
Ready to learn more? Start with Getting Started.