Cognitive Load — Laws of UX motion lab

Definition

Every interface charges a mental tax on the user, and there is a fixed budget per session. Intrinsic load is the unavoidable cost of the actual task; extraneous load is the cost a designer added by accident — visual noise, jargon, unclear labels. When the bill exceeds the budget, comprehension fails first and frustration follows.

Why it matters for ShurIQ reports

A regulatory-grade brief is intrinsically heavy — scores, evidence chains, multi-language search results, value-flow context. Every gram of extraneous load (decorative animation, redundant labels, three near-identical greys) directly shrinks the reader's capacity to engage with the analytical layer. Cognitive load discipline is what separates a report that gets read from a report that gets archived.

Takeaways

Audit every screen for extraneous load — if a flourish does not aid the decision, it is a leak.
Push intrinsic complexity into structure (chunks, hierarchy, scaffolding) rather than into the reader's head.
Pair every new data field with a visible explanation on first encounter; never make the reader reverse-engineer meaning.
Measure load by completion rate on the third page, not the first — fatigue is where load becomes visible.

Visual motion language

Strip motion to a single fade-in per scroll-section; allow non-essential overlays to opacity-decay after focus moves. The interface should grow quieter as the reader goes deeper.

Cavalry recreation seed. Center a 4px-wide vertical line, animate height 0→340px over 1.4s (ease-out). Hold for 800ms, then animate a faint second line growing alongside — implies cumulative load. Opacity stays at 0.6 to read as "barely visible mental cost".

Origins

John Sweller, 1988 — Cognitive Load Theory, Learning Difficulty, and Instructional Design.

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 · cognitive-load · Cavalry scene
// Motion family: single-form
// Palette: brick-red + 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_cognitive-load_";

  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    = "#B8442E";
  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 });

  // Vertical "load meter" line growing in height
  var line1 = api.primitive("rectangle", PREFIX + "line_a");
  api.set(line1, {
    "generator.dimensions": [6, 10],
    "position.x": -20, "position.y": 0,
    "opacity": 0,
    "scale.y": 0.05
  });
  api.setFill(line1, true);
  api.set(line1, { "material.materialColor": CREAM });

  api.keyframe(line1, 0,  { "opacity": 60, "scale.y": 0.05 });
  api.keyframe(line1, 34, { "opacity": 60, "scale.y": 34 });
  api.magicEasing(line1, "scale.y", 34, "EaseOut", "");

  // Cumulative second line appears late
  var line2 = api.primitive("rectangle", PREFIX + "line_b");
  api.set(line2, {
    "generator.dimensions": [6, 10],
    "position.x": 20, "position.y": 0,
    "opacity": 0,
    "scale.y": 0.05
  });
  api.setFill(line2, true);
  api.set(line2, { "material.materialColor": CREAM });

  api.keyframe(line2, 50, { "opacity": 0,  "scale.y": 0.05 });
  api.keyframe(line2, 80, { "opacity": 50, "scale.y": 28 });
  api.magicEasing(line2, "scale.y", 80, "EaseOut", "");

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