Shifting
Interface

The entire visual system is governed by a single plain JavaScript object — the state. Each state defines visual and behavioral parameters that the engine distributes across all layers simultaneously. To wire in AI output, the hardcoded states array is replaced with parsed JSON from a model. The interface does the rest.

function applyState(state) {
  const root = document.documentElement;
  root.style.setProperty('--ai-color-a', state.colorA);  // cascades to all layers
  root.style.setProperty('--ai-color-b', state.colorB);

  stateLabel.textContent = `state: ${state.name}`;

  state.fragments.forEach((f, i) => {
    const el = fragmentEls[i];
    el.style.width  = f.w + 'px';
    el.style.height = f.h + 'px';
    el.style.left   = f.x;
    el.style.top    = f.y;
  });

  injectTextFragments(state.textFragments);   // surface semantic labels
  buildHalos(state);                           // regenerate background atmosphere
  buildRibbons(state);
}

Rather than mutating every element's color individually on state change, the design system routes all color through two root-level custom properties. Every gradient, glow, and tint in the stylesheet reads from these two values. A single setProperty() call cascades through eight visual layers simultaneously — no DOM traversal needed.

/* AI-facing interface — only two variables for the model to set */
:root {
  --ai-color-a: #1a1a1a;   /* fragment base — overwritten per state */
  --ai-color-b: #2c3e50;   /* atmosphere tint — halos, ribbons, glows */
}

.halo {
  background: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--ai-color-b) 70%, white 5%) 0%,
    transparent 62%);
  mix-blend-mode: screen;   /* additive — layers brighten, never cover */
  filter: blur(46px); opacity: 0.16;
}

.fragment {
  background:
    radial-gradient(circle at 50% 50%,
      color-mix(in srgb, var(--ai-color-b) 35%, transparent),
      transparent 72%);
  mix-blend-mode: lighten;  /* max channel — color tints without masking */
}

Each fragment panel carries a data-depth attribute (0–1) defining how strongly it responds to mouse movement. A mousemove listener computes a normalized cursor offset and applies proportional translate3d transforms — deeper fragments drift further. The state's energy value scales the entire amplitude, making the AI directly responsible for how alive the interface feels.

document.addEventListener('mousemove', e => {
  const cx = e.clientX / window.innerWidth  - 0.5;  // −0.5 → +0.5
  const cy = e.clientY / window.innerHeight - 0.5;

  fragmentEls.forEach(el => {
    const d = parseFloat(el.dataset.depth);
    const nrg = currentState.energy;       // AI-governed amplitude
    el.style.transform = `translate3d(${cx*d*40*nrg}px, ${cy*d*28*nrg}px, 0)`;
  });
});

function spawnEcho(el) {
  const r = el.getBoundingClientRect();
  const ghost = document.createElement('div');
  ghost.className = 'fragment-echo';
  Object.assign(ghost.style, {
    left: r.left + 'px', top: r.top + 'px',
    width: r.width + 'px', height: r.height + 'px',
    borderRadius: getComputedStyle(el).borderRadius
  });
  echoLayer.appendChild(ghost);
  ghost.addEventListener('animationend', () => ghost.remove(), { once: true });
}

The scene is not a flat canvas — it is eight distinct planes stacked at explicit z-index values, each with a single visual responsibility. This separation is what allows a two-variable color change to produce complex atmospheric variety. Each layer responds independently to state changes, and all of them are composited together through blend modes rather than standard CSS occlusion.

.scene {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  perspective: 1400px;                  /* 3D context for depth illusion */
  transform-style: preserve-3d;
  isolation: isolate;                    /* contains blend modes within scene */
}

/* All eight layers share this base — different z-index only */
.halos, .ribbons, .contours,
.text-fragments, .echo-layer,
.fragments-layer, .grain, .vignette {
  position: absolute; inset: 0;
}

.grain {
  z-index: 30; opacity: 0.06;           /* topmost — reads across everything */
  mix-blend-mode: soft-light;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 3px 3px;
}