Fold.page

Fold.page transforms standard HTML DOM content into a 3D scene — rendered with Three.js and WebXR-ready. Drop it into any web page and your existing HTML/CSS markup is rendered as interactive 3D UI.

• Reads standard DOM
• Renders HTML/CSS as 3D objects
• WebXR support for AR/VR (controller input, thumbstick scroll)
• Works with any front-end framework or plain HTML/CSS

Installation as NPM package

npm i fold-page

// Standalone (default) — works everywhere, no peer dependencies
import Fold from 'fold-page';

// ESM — for React + Three.js apps, avoids bundling them twice
import Fold from 'fold-page/esm';

Build Variants

| Variant | Import | Bundles | Use when | |---|---|---|---| | Standalone (default) | fold-page | Everything | Vanilla JS, Angular, Vue, or any app without React + Three.js | | ESM | fold-page/esm | Everything except React + Three.js | React / React Three Fiber apps that already provide those packages |

Configuration

Fold.init({
  foldpage: true,
});

Page content

Mark the content you want rendered in 3D with the foldpage class (or a custom namespace):

<main class="foldpage">
  <h1>Hello</h1>
  <p>This content will be rendered in 3D.</p>
</main>

Package contents

| Path | Contents | |---|---| | dist-lib/ | Library files, type definitions and fonts/ — copy this folder to self-host (see docs/install-guide.md) | | docs/ | The documentation as Markdown | | skills/fold-page/SKILL.md | An Agent Skill for AI coding agents building Fold.page sites |

For full information please see the docs on Fold.page/docs

License

See LICENSE.md. redistribution prohibited.