V0.9.2 - RELEASE

Web pages in another
dimension.

Fold.page automatically converts any web page into a dynamic 3D scene.

Scroll to explore

npm install fold-page

Get a Key ›

One page — every platform.

Flat screens to immersive headset, one web page can handle it all.

🖥

Desktop Browser

Enhance desktop web pages with the possibilities of 3D design. Depth, rotation, and scroll-driven camera movement work in all standard browsers.

📱

Mobile

Efficiently runs on mobile with responsive 3D layout, touch and gyro-aware. “Enter” the spatial web page with 6DOF on WebXR capable phones.

🥽

AR/VR Devices

Walk into your web page. AR and VR phones and headsets see a full spatial layout with stereoscopic vision — the same page, the same URL, navigated with gaze and thumbsticks.

W3C Standards to 3D.

A rendering engine advanced enough to convert most web pages into 3D as-is.

80+

HTML Elements Supported

Divs, headings, forms, lists, SVG — every HTML tag becomes real 3D geometry.

60+

CSS Properties Supported

Type, backgrounds, borders, transforms, shadows — most stylesheets port over seamlessly.

76%

HTML5 Spec Coverage

Estimated share of the elements in the HTML Living Standard rendered faithfully.

Spatial Features

Add a new dimension to web pages and enhance them with a powerful toolkit of features.

HTML & CSS to 3D

Most standard HTML elements and CSS properties are faithfully rendered as spatial WebGL geometry. Your existing markup becomes pixel-perfect dynamic 3D content.

HTMLCSSResponsiveAccessible

Views & Navigation

Scroll and click driven camera choreography. Navigate by scrolling the camera through your spatial layout in 3d space. Arrange web page manually or using our collection of 3D layouts.

viewview-layoutview-link

WebXR Native

Same page, same URL — No separate build. Enter your web page and see your content spatially. Mobile devices enter with a 6DOF window while AR and VR headsets see a nicely sized web page floating ahead.

ARVRWebXR

3D Models

Drop 3D assets into your web page alongside HTML-derived geometry. Models share the same spatial scene, lighting and camera as your content. Add an object model treated like an image, or a scene like a web page background.

ObjectsScenesmodel-src

Rich 3D Text

Use HTML and CSS to create rich, styled content that matches browser text capabilities in 3D.

Rangecolorfont-familyletter-spacingline-heightfont-sizetext-aligntext-decorationvertical-align

3D Transforms

Full control over position, rotation, and scale per element, each with its own origin point. CSS transforms — now spatial.

translaterotatescaleorigin

Depth & Parallax

Add Z-depth to any element. Images float, backgrounds recede, text layers create natural parallax. Unlock a third dimension of visual hierarchy.

depthoffset-z

Shaders & Effects

Apply GLSL shaders to any element with a single data attribute.

built-in shadersshader

Transitions & Animations

CSS transitions and transforms work out of the box. Use a library of built-in animations and mix them, tune speed, amplitude, axis, and phase.

animationstransitiontransformanimate

From Flat to Spatial in Minutes

Three steps, zero rebuilds — any web page can be 3D. For a more detailed guide see: Install Guide ›

Install

npm install fold-page

Install with npm, OR drop in a single script tag. Works everywhere.

<script src="foldpage.js">

Init a Target

Fold.init()

Init and set your target. Pass {foldpage:true} to init the full page, OR wrap your target content with .foldpage class.

<div class="foldpage">

Enhance

transform:translateZ(50px)

Use CSS transforms and position in 3D. Add data attributes to control what CSS can't.

data-foldpage-depth="50"

Our Mission

Traditional design principles must be re-examined and new visual vocabularies invented to be consonant with this multi-dimensional information environment.
— Muriel Cooper

At MIT's Visible Language Workshop and Media Lab, Muriel Cooper and her students researched how graphic design in a digital medium could transcend the limits of print — existing in a multi-dimensional, non-linear landscape. This work has had a lasting imprint and is becoming more relevant with the proliferation of 3D technologies.

Fold.page aims to build on Muriel Cooper’s “sketch for the future”. Our mission is to help the web become that spatial medium Cooper envisioned, using today's technology, tools and IxD sensibilities.

Muriel Cooper — Graphic Designer, Educator & MIT Media Lab Visionary

Get started with Fold.page

Add a new dimension to web pages.

Read the Docs See the Demos npm install fold-page

Easy Install · Spatial Graphics · Rich Text · WebXR Ready · Highly Customizable

Web pages in another dimension.