A
still
ambient field· four tiers · one canvas
the brand has a heartbeat
a kinetic background that adapts to the device, the motion preference, and the semantic state of the page. css-only on still phones, webgl shader on capable hardware. paused when the tab loses focus. forced to still on prefers-reduced-motion.
as of
01 · four tierscapability-aware fallback chainfour renderers, one fallback chain
capability governor probes the device once on mount and chooses the highest tier that passes every gate. the chain falls D → C → B → A. tier A is always reachable.
B
drift
C
field
D
compute
as of
02 · semantic statespage state drives ambient hue, speed, amplitudefive states · one bus
set data-semantic-state on <html> and the ambient field adapts. the engine reads --ambient-hue, --ambient-speed, --ambient-amplitude live from the cascade.
settle
default · resting state
slow driftceremony
drop · settlement · league posting
amber pulserefusal
covenant clause · refused entry
red shiftcapture
user pointer down · scroll-into-view edge
focus ripplelive
tick stream active · live data flowing
acid pulseas of
03 · glass compositionliquid glass surface · three thicknesses · three posturesglass composes above ambient
the glass layer reads ambient tint live. three thicknesses (thin / default / thick) and three postures (rest / capture / lift) cover every floating panel, modal backdrop, and card surface.
8 px blur · light cards
strip cells · inline floating panels
16 px blur · floating panels
menu surfaces · tooltips · receipts
24 px blur · modal backdrop
dialog · drop ceremony · settlement
capture posture · pointer-active
brand-signal border · 1.005x scale
as of
04 · accessibility floorfive guardrails · one always-reachable still tiernever animate against the user
the engine downgrades to tier A on prefers-reduced-motion, low memory, low concurrency, save-data, or low contrast. it pauses on document.hidden. battery is respected by default.
| reducedMotion | must downgrade to tier A when prefers-reduced-motion: reduce |
|---|---|
| saveData | must downgrade at least one tier when prefers-reduced-data: reduce or connection.saveData is true |
| lowMemory | must downgrade to tier A when navigator.deviceMemory < 4 GB or hardwareConcurrency < 4 |
| battery | must pause when document.hidden |
| contrast | ambient brightness must never overlap content tone within 0.4 contrast ratio (AA floor) |
as of
05 · capability probewhat your device gets · livethis device · this tier
the probe reads data-ambient-tier from <html> and reports the underlying capability stack. shipped as a primitive (capability-probe) for QA and for /ambient.
probing…
data-ambient-force="A|B|C|D" on <html> before the engine mounts.ssr posture
the engine renders nothing on the server. the html element is stamped with data-ambient-tier="A" by the layout, then upgraded on the client after capability detection. no flash, no layout shift.as of
06 · closing ruleone engine · every surfacethe brand is the field, not the figure
a brand that holds still in 2026 reads as dead. a brand that flails reads as cheap. an ambient field at 60 fps that the shader can pause on a heartbeat reads as alive.