Standalone Demo Pages

Basic Usage

A first look at Fold.page — standard HTML elements rendered in 3D.

HTML5 Elements

Every major HTML5 element rendered spatially, from forms to media.

CSS Showcase

Common CSS properties — gradients, shadows, flexbox, grid — all in 3D.

CSS Position

Every CSS position type, and how Fold.page handles each in space.

Color Accuracy

Comparing on-screen color against its 3D-rendered material.

CSS Transitions

CSS transitions and hover states, translated into 3D motion.

Transform Composition

Rotate, scale, and offset — composing 3D transforms together.

Mixed Usage — 3D Titles

A flat article with just its headings popping into 3D.

Element Animations

Six built-in animation modes for bringing elements to life.

GLB Models

Loading and placing 3D GLB/GLTF models on the page.

Milky Way Night Sky

A full HDR night sky environment, lighting the scene.

HDRI — JavaScript API

A full HDR night sky environment, configured entirely through JS.

Particle System

A GPU-powered particle engine reacting to the page and cursor.

Particle Controls

Tune a live particle field with Fold.gui() — friction, mode, gravity.

Shader Modes

Built-in GLSL shader effects you can apply to any element.

Fold.set() — Live Control Panel

Swap particles, HDR, and blend modes live, no reload needed.

Views & Navigation

Scroll-driven camera views that are manually positioned along with view-links for an image gallery.

Views — Ring Layout

Panels auto-arranged in a circle, facing the center.

Views — Ring Layout (Arc)

A ring layout trimmed to a half-circle arc.

Views — Grid Layout

Panels auto-arranged into a 3D grid.

Views — Grid Layout (Depth)

A single-column grid descending in depth.

Views — Grid Layout (Rising)

A grid layout rising toward the viewer.

Views — Random Layout

Panels scattered at random, seeded for a stable layout.

Views — Helix Layout

Panels spiraling around a central axis.

Views — Auto Views (Headings)

Views auto-generated from a page's headings.

Views — Auto Views (Selector)

Views auto-generated from any CSS selector.

Scene API — Basics

The three coordinate spaces Fold.page scenes live in.

Scene API — JavaScript

Loading a 3D environment into the scene with JavaScript.

Scene API — Data Attributes

The same environment, loaded with just data attributes.

Bundled Library APIs

Direct access to Text, SVG, and model-loading libraries bundled with Fold.page.

Fold.querySelector()

Reach into the live 3D scene using plain CSS selectors.

Camera Offset

Shifting and rotating the camera away from its default view.

XR Progressive Enhancement

A standard web page that becomes a 3D scene only for XR.