CHAOS8 · V0.1 · EXAMPLE INTEGRATION

how chaos finds its way
into the glow.

This page loads the chaos vector from chaos8 and uses it to modulate the infinity symbol's glow. Three values (intensity, warmth, texture) ride CSS custom properties; the infinity's stroke and opacity are computed from them. When chaos changes, the glow changes — subtly, never dramatically.

Try the controls below to feel how chaos affects the shape. On a live deploy, these values would come from actual Columbus, OH weather — high winds and storms push intensity up, warm days push warmth positive, overcast-and-windy pushes texture rough.

intensity
0.500
overall chaos energy · wind + precipitation + pressure deviation
warmth
0.000
temperature vs seasonal mean · ±5°C maps to ±1.0
texture
0.500
how "rough" reality feels · cloud cover + wind

simulate different chaos states

On a live site these values come from chaos.json. Here, you control them.

0.50
0.00
0.50

the integration pattern

chaos-client.js exposes three CSS custom properties on the document root. Any CSS rule can consume them via calc() and var(). No JavaScript required in the consuming rules. 

/* baseline values, used when chaos8 is unreachable */
:root {
  --chaos-intensity: 0.5;
  --chaos-warmth: 0.0;
  --chaos-texture: 0.5;
}

/* infinity glow responds to chaos */
.inf-outer {
  stroke-width: calc(10 + var(--chaos-texture) * 4);
  opacity: calc(0.2 + var(--chaos-intensity) * 0.35);
}

The philosophy: chaos modulates within tight bounds. Never goes above a ceiling that would make the site look broken. Never goes below a floor that would erase the site's baseline character. Weekly variance, not dramatic change.