Working Memory

Definition

Why it matters for ShurIQ reports

A multi-page brief or a multi-viewport dashboard punishes any data the reader has to carry from page A to page B. Sticky headers, comparison tables, breadcrumb navigation, and persistent filter chips all serve the same purpose: keep the relevant context visible so the reader does not have to remember it. Recognition always beats recall.

Takeaways

• Carry forward the reader's state — selected company, active filter, scroll position — across screens; never reset by default.
• Build comparison surfaces that show the items side by side; never force the reader to memorize the first to evaluate the second.
• Make visited links, expanded sections, and read content visually distinct so the reader recognizes ground already covered.

Visual motion language

Information out of focus opacity-decays slightly to signal "still here, but not active"; new context loads with a sequence-reveal that respects the held items already on screen.

Origins

George A. Miller, Eugene Galanter, and Karl Pribram, 1960s — coined the term; Atkinson and Shiffrin extended it in 1968.

Cavalry scene

The script below builds this concept's motion in Cavalry through the Stallion bridge. Pipe to cavalry_run_script via MCP, or paste into Cavalry's JavaScript Editor.

// Laws of UX · working-memory · Cavalry scene
// CORRECTED 2026-04-30 · verified from production page
// Motion family: 3x3 grid of cream circles, opacity gradient 1.0 -> 0.2 modeling memory decay
// Row-by-row top-to-bottom reveal: row 1 t=0, row 2 t=600ms, row 3 t=1200ms
// Palette: warm maroon + cream
// To run: pipe to cavalry_run_script tool, or paste into Cavalry's JavaScript Editor
// Built 2026-04-30 by ShurAI

(function () {
  var PREFIX = "claude_lawofux_working-memory_";

  var existing = api.getAllSceneLayers();
  for (var i = 0; i < existing.length; i++) {
    try {
      var nm = api.getNiceName(existing[i]);
      if (nm && nm.indexOf("claude_lawofux_") === 0) api.deleteLayer(existing[i]);
    } catch (e) {}
  }

  var BG    = "#8C2E22";
  var CREAM = "#D6CDB0";

  var bg = api.primitive("rectangle", PREFIX + "bg");
  api.set(bg, { "generator.dimensions": [1080, 1080] });
  api.setFill(bg, true);
  api.set(bg, { "material.materialColor": BG });

  // 3x3 grid; opacity per cell (row-major, top-to-bottom):
  //   row 1: 1.0  0.9  0.8
  //   row 2: 0.7  0.6  0.5
  //   row 3: 0.4  0.3  0.2
  var opacityGrid = [
    [100, 90, 80],
    [ 70, 60, 50],
    [ 40, 30, 20]
  ];

  var R       = 110;
  var SPACING = 290;
  var origin  = -SPACING; // -290 (3 cols centered: -290, 0, +290)

  // Row begin frames @ ~30fps: 0, 18, 36 (≈ 0ms, 600ms, 1200ms)
  var rowBegin = [0, 18, 36];

  for (var r = 0; r < 3; r++) {
    for (var c = 0; c < 3; c++) {
      var dot = api.primitive("ellipse", PREFIX + "r" + (r+1) + "c" + (c+1));
      api.set(dot, {
        "generator.radius": [R, R],
        "position.x": origin + c * SPACING,
        "position.y": -(origin + r * SPACING), // row 0 at top (+Y)
        "opacity": 0
      });
      api.setFill(dot, true);
      api.set(dot, { "material.materialColor": CREAM });

      var t0 = rowBegin[r];
      var t1 = t0 + 12; // ~400ms fade
      api.keyframe(dot, t0, { "opacity": 0 });
      api.keyframe(dot, t1, { "opacity": opacityGrid[r][c] });
      api.magicEasing(dot, "opacity", t1, "EaseOut", "");
    }
  }

  var layerCount = api.getAllSceneLayers().length;
  console.log("scene built: working-memory (" + layerCount + " layers)");
})();