Living Spaces
This page is standard HTML. Only the GLB host elements below
carry the .foldpage class — everything else, including
the card text, is an standard web page.
The Potted Plant
Standard DOM text inside a plain HTML card. Only the empty div to
the right carries .foldpage — Fold renders the GLB
model there and leaves everything else on the page untouched.
Model auto-scales so its longest axis fills the div's CSS
width. Animated with data-foldpage-animate="sway" data-foldpage-animate-axis="z"
and a random phase offset so it moves organically.
Plain HTML between the two cards. No .foldpage here —
the 3D renderer never touches this content.
Monstera
A second independent scoped GLB. Each .foldpage div
is its own isolated target — the two models load and position
independently.
Animated with data-foldpage-animate="tilt" —
move your pointer toward or away from the model to tilt it.
Plain HTML between cards. No .foldpage here —
the 3D renderer never touches this content.
Plain HTML between cards. No .foldpage here —
the 3D renderer never touches this content.
Indoor Plant with Pot
Animated with data-foldpage-animate="float,rotate" —
hovers gently up and down while slowly spinning on Y. Effects
are combined with a comma-separated value on a single attribute.
Plain HTML between cards. No .foldpage here —
the 3D renderer never touches this content.
GLB on an <img> Tag
Any HTML element can host a GLB model — including <img>.
A 1×1 transparent placeholder keeps the image texture invisible; the
data-foldpage-model-src attribute tells Fold what to render in its place.
The alt attribute still provides screen-reader context,
and the element participates in layout exactly like a normal image.