Mixed Usage

Regular HTML page · 3D titles only · dark mode

Most of this page is ordinary HTML — paragraphs, a list, a blockquote, an image, some code. None of it sits inside a .foldpage wrapper, so none of it is touched by the 3D pipeline. It renders and scrolls exactly like any other web page.

The title above is different. It's wrapped in its own standalone <div class="foldpage"> — nothing else lives inside it — and the <h1> itself carries the data-foldpage-depth attribute (the depth value must sit on the text element being rendered, not on the wrapper). Fold finds the wrapper, hides the flat DOM heading, and renders an extruded 3D text mesh in its place, layered forward toward the camera along the Z axis.

Fold supports multiple independent .foldpage wrappers on a single page — it isn't all-or-nothing. Each wrapper is processed on its own and contains only what you want in 3D, so you can opt a handful of titles into the scene while every surrounding paragraph, list, and image stays plain, fast, ordinary HTML.

<div class="foldpage">
  <h1 data-foldpage-depth="90">Mixed Usage</h1>
</div>

<p>Just a regular, unprocessed paragraph.</p>

Why mix the two

A fully 3D page is a strong statement, but it isn't always what a piece of content calls for. Long-form writing, documentation, and articles usually want to stay readable, scrollable, and cheap to render — while still getting a moment of spatial polish where it counts most: the headline.

Body copy stays in the normal DOM — selectable, indexable, accessible.
No text meshes are generated for content you never wanted in 3D.
Titles get real depth and presence without adopting a whole 3D layout.
The page degrades perfectly if the Fold script fails to load.

If Fold never initializes, this page shows nothing but a normal heading and normal paragraphs — the .foldpage wrapper carries no visual styling of its own.

How the depth attribute works

data-foldpage-depth takes a pixel value. On a heading with no CSS background and no CSS text-shadow — true of every title on this page — Fold has nothing else to extrude, so it synthesizes stacked text layers along Z instead, using the depth value to set how far forward the title bulges toward the viewer.

Compare the three depths on this page: the H1 title at the top uses data-foldpage-depth="90", "Why mix the two" uses data-foldpage-depth="40", and this heading uses data-foldpage-depth="65". Higher values push further out of the page.

Relative Z-push of the three titles on this page (not to scale).

Everything below this line, including the footer navigation, is once again plain HTML with no Fold.page involvement at all.