Fold.page

Standard HTML · Rendered in 3D WebGL

Drop in a single <script> tag and call Fold.init(). Your existing HTML becomes an interactive 3D scene — text, images, backgrounds, and layout all preserved.

Get Started Browse Demos

What Fold Does

Fold reads your the DOM of a web page and extracts computed styles and positions, hides the original elements, and re-renders them as 3D objects in a Three.js scene overlaid on the page. No changes to your markup are required.

Fold handles the rendering. You keep writing standard HTML and CSS.

Incase you haven't noticed this page is rendered in Fold.page! You're looking at a 3D scene, not just a webpage.

Typography

Fold renders text meshes that faithfully reproduce your CSS typography. Bold, italic, and bold-italic runs work within a single paragraph. Links are interactive in 3D too.

Great design is not about decoration. It's about making things work so well that the experience feels effortless.

Heading hierarchy

H1 through H6, paragraph text, inline code, strong, emphasis, and block quotes are all supported out of the box.

Unordered List

  • Standard HTML markup
  • CSS styles preserved
  • Inline bold and italic
  • Links and interactive elements
  • Nested structure supported

Ordered List

  1. Load the standalone script
  2. Add the foldpage class
  3. Call Fold.init()
  4. See your page in 3D
  5. Customise from there

HTML Elements

Fold recognises all standard block and inline HTML elements.

Backgrounds & Images

Solid colours, linear and radial gradients, and image backgrounds are all sampled by Fold and reproduced as textured planes in the 3D scene.

background image

Linear Gradient

Purple → blue diagonal

Radial Gradient

Centre glow spotlight

Minimal Setup

The entire integration is two lines of HTML. Add the foldpage class to the element you want rendered, then load the script and call Fold.init().

<script src="fold.standalone.js"></script>
<script>Fold.init();</script>

<div class="foldpage">
  <!-- your existing HTML -->
</div>

About This Demo

This page uses a standalone build — no other dependencies required on your side.

WebXR support is included. If you have a compatible headset, look for the "Enter" button added automatically by Fold.

Explore the other demos via the demos index to see advanced features: GLB models, HDRI environments, particle systems, view layouts, and the full Scene API.

fold.page