Supported HTML Elements

Fold.page renders the HTML elements inside each .foldpage target — and the target itself, if it qualifies (see Scoped Target Wrapper(s)). Elements are recognized by tag name, so no extra classes are needed. Most HTML elements are supported.

Render Types

Every element Fold.page processes maps to one or more of these render types. Think of these as UI primitives:

Render Type	3D Representation	Description
Text	text mesh	High-quality SDF text with font variants, line wrapping, and per-character style overrides.
Button	Interactive text mesh	Rendered as text with 3D click handling.
Background	Rounded plane geometry	Background color, border radius, optional extrusion, background image.
Image	Textured plane	Flat plane sized to match the original `<img>`, textured with the image source.
SVG	Texture or geometry	SVG images rendered as a flat canvas texture or as 3D mesh geometry with optional extrusion.
Video	Video texture plane	`<video>` element displayed on a plane with a live-updating video texture.
Audio	UI control mesh	`<audio>` element rendered as a 3D audio player control.
Input	3D form control	`<input>`, `<textarea>`, and `<select>` rendered as interactive 3D controls with live text editing.

Auto-Detected Tags

All tags below are automatically discovered and rendered when inside a .foldpage target, or when the tag itself carries .foldpage. No extra classes needed.

Column key:

Interactive ✓ — click triggers the original DOM element's native .click(), with 3D raycasting for hit detection
Pseudo ✓ — ::before and ::after pseudo-elements are processed for this element

Text Content

Tag	Render	Pseudo	Notes
`<p>`	Text + Background	✓	Paragraph text.
`<h1>` – `<h6>`	Text + Background	✓	All heading levels with computed font size and weight.
`<span>`	Text + Background	✓	Inline text container. Usually a style range within a parent.
`<strong>`	Text	✓	Bold style range within a parent. See Style Ranges.
`<b>`	Text	✓	Same as `<strong>`.
`<em>`	Text	✓	Italic style range within a parent.
`<i>`	Text	✓	Same as `<em>`.
`<u>`	Text	✓	Rendered with underline decoration (CSS `text-decoration`).
`<small>`	Text	✓	Smaller text; uses computed `font-size`.
`<mark>`	Text	✓	Rendered with a background highlight color behind the text (reads `background-color`).
`<cite>`	Text	✓	Citation — typically italic via browser default styles.
`<q>`	Text	✓	Inline quotation. `::before`/`::after` commonly used for CSS quote characters.
`<blockquote>`	Text + Background	✓	Block quotation with optional background plane.
`<abbr>`	Text	✓	Abbreviation.
`<dfn>`	Text	✓	Definition term.
`<time>`	Text	✓	Temporal content.
`<data>`	Text	✓	Machine-readable value.
`<var>`	Text	✓	Variable — typically italic via browser default styles.
`<ins>`	Text	✓	Inserted text.
`<sub>`	Text	✓	Subscript — uses CSS `vertical-align: sub` offset.
`<sup>`	Text	✓	Superscript — uses CSS `vertical-align: super` offset.
`<address>`	Text + Background	✓	Contact/address block.

Interactive

Tag	Render	Interactive	Pseudo	Notes
`<a>`	Text + Background	✓	✓	Links are clickable. Click triggers native `click()`. Underline driven by CSS `text-decoration`.
`<button>`	Button + Background	✓	✓	Click triggers native DOM button `click()`.
`<summary>`	Text + Background	✓	✓	Disclosure triangle rendered as a 3D marker. Click toggles the parent `<details>`.
`<label>`	Text + Background	✓	✓	Form label. Click forwards to the associated input element.

Lists

Tag	Render	Pseudo	Notes
`<ul>`	Background	✓	Unordered list container — background plane only. Children (`<li>`) render separately.
`<ol>`	Background	✓	Ordered list container — background plane only.
`<li>`	Text + Background	✓	List item text. Add `data-foldpage-list-3d` to the parent `<ul>/<ol>` for animated 3D sphere markers.
`<dt>`	Text + Background	✓	Definition list term.
`<dd>`	Text + Background	✓	Definition list description.

Tables

Tag	Render	Pseudo	Notes
`<table>`	Text + Background	✓	Table root — background plane + text content.
`<thead>`	Background	✓	Table head section.
`<tbody>`	Background	✓	Table body section.
`<tfoot>`	Background	✓	Table footer section.
`<tr>`	Text + Background	✓	Table row.
`<th>`	Text + Background	✓	Header cell.
`<td>`	Text + Background	✓	Data cell.
`<caption>`	Text + Background	✓	Table caption — rendered as text above the table.

Code & Technical

Tag	Render	Pseudo	Notes
`<code>`	Text	✓	Inline code. Uses `font-family: monospace` → Inconsolata.
`<pre>`	Text + Background	✓	Preformatted — preserves whitespace via `white-space: pre`.
`<kbd>`	Text + Background	✓	Keyboard input. Monospace, typically with border styling.
`<samp>`	Text + Background	✓	Sample output.
`<output>`	Text	✓	Form output.
`<meter>`	Text	✓	Scalar measurement (e.g. disk usage).
`<progress>`	Text	✓	Progress indicator.

Forms

Tag	Render	Interactive	Notes
`<input>`	Input	✓	Covers all `type` values: `text`, `password`, `email`, `number`, `url`, `tel`, `search`, `checkbox`, `radio`. Checkbox and radio dispatch to dedicated 3D controls.
`<textarea>`	Input	✓	Multi-line text input with scrollable 3D text area.
`<select>`	Input	✓	Single-select dropdown rendered as a 3D control.
`<fieldset>`	Background		Group container — background plane only.
`<legend>`	Text + Background		Fieldset label — rendered as text. Pseudo-elements supported.

Media

Tag	Render	Interactive	Notes
`<img>`	Image / SVG / Relief		Textured plane sized to CSS layout. SVG sources get their own pipeline. See Image Capabilities.
`<svg>` (inline)	SVG		Inline `<svg>` elements are rendered as geometry by default, falling back to a texture when they use texture-only features (see SVG). Override with `data-foldpage-svg-mode`.
`<video>`	Video	✓	Live video texture updated per frame. Playback controlled by original DOM element.
`<audio>`	Audio	✓	Rendered as a 3D audio player control.

Structural / Separator

Tag	Render	Pseudo	Notes
`<hr>`	Background	✓	Horizontal rule rendered as a thin background plane. `::before`/`::after` supported for decorative dividers.
`<details>`	Background	✓	Disclosure container — background plane. Toggle state driven by `<summary>` click.

Semantic Layout

These elements render as background planes.

Tag	Render	Pseudo	Notes
`<section>`	Background	✓	Generic content section.
`<article>`	Text + Background	✓	Self-contained content block.
`<aside>`	Background	✓	Sidebar or complementary content.
`<nav>`	Background	✓	Navigation region.
`<header>`	Background	✓	Page or section header.
`<footer>`	Text + Background	✓	Page or section footer.
`<main>`	Background	✓	Main content region.
`<div>`	Background	✓	Generic block container. Add `.foldpage-bg` for background rendering, `.foldpage-text` for text.
`<figure>`	Background	✓	Figure container (typically wraps `<img>`).
`<figcaption>`	Background	✓	Caption for a figure.

Deprecated HTML Elements

Fold.page supports these deprecated tags for compatibility with legacy content. They render identically to their modern equivalents.

Tag	Render	Notes
`<s>`	Text	Strikethrough. Equivalent to `text-decoration: line-through`. Pseudo-elements supported.
`<strike>`	Text	Same as `<s>`.
`<del>`	Text	Deleted text — rendered with strikethrough decoration. Pseudo-elements supported.
`<center>`	Text + Background	Centered text block.
`<font>`	Text	Legacy font element. CSS properties still applied.
`<big>`	Text	Larger text via browser default styles.
`<tt>`	Text	Monospace (teletype) text.
`<acronym>`	Text	Equivalent to `<abbr>`.

Class-Based Elements

Use CSS classes to render any element regardless of tag name:

Class	Render Type	Description
`.foldpage-text`	Text	Forces any element to render as 3D text. Always renders independently — never merged into a parent style range.
`.foldpage-bg`	Background	Renders the element as a 3D background plane with color, border, and optional depth.

Custom Elements & Framework Components

Any element carrying a primary Fold data attribute is automatically included in the render pipeline, even if its tag name is not in the supported list above. This is how Angular components, React elements, Vue custom elements, and Web Components work with Fold.page natively — no wrapper, no workaround.

html

<!-- Angular component elements carry Fold attributes directly on the host element -->
<div class="foldpage" data-foldpage-view-layout="ring">
  <app-hero    data-foldpage-view="0" />
  <app-section data-foldpage-view data-foldpage-animate="pulse" data-foldpage-animate-axis="y" />
  <app-section data-foldpage-view data-foldpage-depth="60" />
</div>

This applies to the .foldpage target element itself, too — it doesn't have to be a plain wrapper around attribute-carrying children. A single custom element (or plain <div>/<img>) can carry .foldpage and its own primary attribute together and render on its own, with no children required:

html

<!-- No wrapper, no children — the target element renders itself -->
<app-hero class="foldpage" data-foldpage-depth="60" data-foldpage-animate="pulse" data-foldpage-animate-axis="y" />

How it works

The element is treated as a transparent group container:

No 3D mesh is generated for the custom element itself
Its inner standard HTML children (<h1>, <p>, <img>, etc.) are discovered and rendered normally by their own configs
Fold data attributes on the custom element (data-foldpage-depth, data-foldpage-animate, data-foldpage-shader, etc.) are applied as a 3D group transform that cascades to all children
data-foldpage-view on the custom element is collected as a view target for scroll-driven camera navigation — the camera reads the element's full 3D position including any transforms from the View Layout service

Primary trigger attributes

An element is picked up if it carries any of these primary feature attributes (modifier attributes like data-foldpage-shader-speed or data-foldpage-animate-phase alone are not sufficient):

Attribute	Feature enabled
`data-foldpage-view`	View anchor for scroll-driven camera
`data-foldpage-view-link`	Click-to-fly navigation target
`data-foldpage-view-layout`	View layout container (ring, grid, etc.)
`data-foldpage-view-auto`	Auto-view discovery
`data-foldpage-depth`	Z-depth / extrusion
`data-foldpage-animate`	Per-frame animation
`data-foldpage-shader`	GLSL shader effect
`data-foldpage-lit`	Physical lighting
`data-foldpage-scale`	Scale
`data-foldpage-model-src`	GLB / GLTF model
`data-foldpage-svg-mode`	SVG rendering mode
`data-foldpage-list-3d`	3D list markers
`data-foldpage-hdr-src`	HDRI environment

The Style Ranges System

Inline formatting inside a paragraph or heading renders as one flowing block of 3D text.

html

<p>
  Regular text with a <strong>bold word</strong> and a
  <a href="https://example.com">link</a>.
</p>

Here <strong> and <a> are not separate 3D objects. Their text and styles are merged into the parent <p> as style ranges ("characters X–Y use this font and color"), so line wrapping and spacing match the browser. The link keeps its color, underline and click area.

Which Elements Merge Into Their Parent?

An element merges into its parent when:

It is nested inside another supported element
It was detected by tag name (not by CSS class)
Its parent is not a background-only type (like .foldpage-bg)

Elements detected by class name (.foldpage-text) are never children — they always render independently.

Elements detected by data attribute (custom/framework elements — see Custom Elements) are also never children. They are always standalone group containers.

Example: Full Inline Formatting

html

<p>
  Here is <strong>bold</strong>, <em>italic</em>,
  <b>also bold</b>, and a <a href="/about">link with
  <strong>bold text inside</strong></a>.
</p>

Single text mesh with: bold font at "bold" and "also bold", italic font at "italic", link color + underline + click zone at "link with bold text inside", bold font additionally nested within the link range.

Interactive Elements

Link Clicking

Clicking a link's 3D text calls the original <a> element's click(), so href, target="_blank" and your event listeners all work. The cursor becomes a pointer over links.

Buttons

<button> elements render with 3D click handling. Clicking triggers the original DOM button's click event.

Video

<video> elements inside the .foldpage wrapper are rendered as 3D planes with a live video texture that updates in real time.

html

<video src="intro.mp4" autoplay muted loop
       style="width: 400px; height: 225px;">
</video>

The plane is sized and positioned to match the DOM element's layout.
Playback is controlled by the original DOM <video> element — autoplay, loop, controls, muted all work.

Audio

<audio> elements are rendered as 3D audio player controls — a visual interface element that plays audio and responds to user interaction in 3D space.

html

<audio src="track.mp3" controls></audio>

SVG

<img> elements with SVG sources are automatically detected and routed through the SVG pipeline. Inline <svg> tags within the .foldpage wrapper are also supported.

Two rendering modes are available, selected with data-foldpage-svg-mode:

Mode	How	Supports depth?
Texture (`data-foldpage-svg-mode="texture"`)	SVG rendered to canvas, used as flat texture	No
Geometry (`data-foldpage-svg-mode="geo"`)	SVG paths converted to 3D mesh geometry	Yes — via `data-foldpage-depth`

The default depends on how the SVG is placed:

<img src="….svg"> — texture. Add data-foldpage-svg-mode="geo" for geometry.
Inline <svg> — geometry, unless the SVG contains texture-only features (<linearGradient>, <radialGradient>, <filter>, <clipPath>, <mask>, <text>/<tspan>, <image>, <foreignObject>, SMIL animation, or CSS animation in a <style> block) and has no data-foldpage-depth, in which case it falls back to texture. data-foldpage-svg-mode always overrides the automatic choice.

Geometry mode supports all data-foldpage-lit material presets.

Pseudo-Elements

CSS ::before and ::after pseudo-elements are rendered in 3D. Fold.page reads their computed styles — content, background-color, border, border-radius, width, height, and positioning — and creates background planes and/or text meshes.

css

.card::before {
  content: "";
  background: linear-gradient(135deg, #f093fb, #f5576c);
  border-radius: 12px;
}

.label::after {
  content: "NEW";
  color: #fff;
  background: #e74c3c;
}

Both the background plane and text content of pseudo-elements are rendered with the same pipeline as regular elements.

List Markers

By default, <li> elements render as text. For 3D animated bullet markers, add data-foldpage-list-3d to the parent list:

html

<ul data-foldpage-list-3d>
  <li>Item one</li>
  <li>Item two</li>
</ul>

3D markers are rendered as small animated spheres positioned at each list item's bullet point. Marker appearance follows the list's CSS color.

Hidden Element Handling

Elements hidden with display: none or visibility: hidden are skipped.

Exception: Elements inside a .foldpage-include container are force-shown before processing, allowing content to be measured and rendered in 3D even if it starts hidden.

Exclusion: Elements with .foldpage-exclude are filtered out at query time and never processed.

Supported HTML Elements ​

Render Types ​

Auto-Detected Tags ​

Text Content ​

Interactive ​

Lists ​

Tables ​

Code & Technical ​

Forms ​

Media ​

Structural / Separator ​

Semantic Layout ​

Deprecated HTML Elements ​

Class-Based Elements ​

Custom Elements & Framework Components ​

How it works ​

Primary trigger attributes ​

The Style Ranges System ​

Which Elements Merge Into Their Parent? ​

Example: Full Inline Formatting ​

Interactive Elements ​

Link Clicking ​

Buttons ​

Video ​

Audio ​

SVG ​

Pseudo-Elements ​

List Markers ​

Hidden Element Handling ​

Supported HTML Elements

Render Types

Auto-Detected Tags

Text Content

Interactive

Lists

Tables

Code & Technical

Forms

Media

Structural / Separator

Semantic Layout

Deprecated HTML Elements

Class-Based Elements

Custom Elements & Framework Components

How it works

Primary trigger attributes

The Style Ranges System

Which Elements Merge Into Their Parent?

Example: Full Inline Formatting

Interactive Elements

Link Clicking

Buttons

Video

Audio

SVG

Pseudo-Elements

List Markers

Hidden Element Handling