For the agent-readable index of this site, see /llms.txt.
Physics Participation Contract
Attribute-driven opt-in API. Use the nav controls to flip atmosphere,
physics, and color mode and verify each surface renders correctly
across the full matrix: 4 surfaces × 5 valid
(physics, mode) combinations
(glass-dark, flat-dark,
flat-light, retro-dark,
retro-light) = 20 cells.
Glass requires dark mode; flat and retro work in either (D44).
data-ve-surface
Each surface is a plain div with one attribute. Heading,
paragraph, and button inherit through natural cascade.
raised
Floating card surface. Default shadow.
sunk
Recessed well. Inset depth.
floating
Higher elevation than raised. Stronger shadow.
flat
Minimal: background + border. No shadow.
data-ve-content
Sets color. Cascades to descendants that don't
override their own color.
Primary content — uses --text-main. Highest
contrast for body copy.
Secondary content — uses --text-dim. Mid contrast
for supporting text.
Muted content — uses --text-mute. Lowest contrast
for ambient or de-emphasized text.
data-ve-emphasis
Modifies a surface's border + shadow. All three rows share
data-ve-surface="raised".
strong
Energy-primary border. Lift shadow.
subtle
Half-alpha border. No shadow.
none
Background only. Border + shadow stripped.
Demonstrates card-in-card limitation
The contract styles the wrapper element. It does not reach into descendants. A foreign component with its own opaque background, shadow, and radius will visibly nest inside any VE surface — this is the documented v1 behavior. Visible on glass most strikingly; still present on flat and retro.
This element brings its own background, shadow, and radius. It does not participate in VE physics — and the contract does not try to neutralize it.