Tesler's Law

Definition

Why it matters for ShurIQ reports

Brand intelligence is intrinsically complex — multi-source evidence, weighted scoring, value-flow context, multi-language search. The brief's job is to absorb that complexity into the methodology and the data pipeline so the executive sees a clean stack rank with a defensible score. Where complexity must surface (consensus floor explanations, evidence trails), it appears on demand and never on first paint.

Takeaways

• Audit each surface for who owns the irreducible complexity — designer, system, or reader; flag every reader-burden case for redesign.
• Move complexity into pre-processing wherever possible; the data layer should arrive at the UI in actionable form.
• Provide expert-mode affordances (raw scores, source citations, methodology page) so power users can drill in without burdening newcomers.
• Acknowledge the floor — when complexity genuinely cannot move, design the surface to communicate "this is hard but worth it" rather than hiding the cost.

Visual motion language

Initial paint hides operational complexity behind a clean primary view; secondary layers reveal on user request with a sequence-reveal cadence that signals "we are showing you more depth."

Origins

Larry Tesler, Xerox PARC — formalized in the mid-1980s as the Law of Conservation of Complexity.

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 · teslers-law · Cavalry scene
// Motion family: single-form (irreducible-complexity polygon)
// Palette: forest-green + 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_teslers-law_";

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

  // Outer hexagon (filled subtle)
  var hex = api.primitive("polygon", PREFIX + "hex");
  api.set(hex, {
    "generator.sides": 6, "generator.radius": 240,
    "position.x": 0, "position.y": 0,
    "opacity": 0
  });
  api.setFill(hex, false);
  api.setStroke(hex, true);
  api.set(hex, { "stroke.strokeColor": CREAM, "stroke.width": 5 });
  api.keyframe(hex, 0,  { "opacity": 0   });
  api.keyframe(hex, 18, { "opacity": 100 });

  // 6 vertex positions
  var R = 220;
  var verts = [];
  for (var v = 0; v < 6; v++) {
    var theta = (v / 6) * Math.PI * 2 - Math.PI / 2;
    verts.push({ x: Math.cos(theta) * R, y: Math.sin(theta) * R });
  }

  // Connect every pair (15 lines total)
  var lineCount = 0;
  for (var i = 0; i < verts.length; i++) {
    for (var j = i + 1; j < verts.length; j++) {
      var a = verts[i], b = verts[j];
      var dx = b.x - a.x, dy = b.y - a.y;
      var len = Math.sqrt(dx*dx + dy*dy);
      var ang = Math.atan2(dy, dx) * (180 / Math.PI);
      var line = api.primitive("rectangle", PREFIX + "edge_" + i + "_" + j);
      api.set(line, {
        "generator.dimensions": [len, 4],
        "position.x": (a.x + b.x) / 2,
        "position.y": (a.y + b.y) / 2,
        "rotation.z": ang,
        "opacity": 0,
        "scale.x": 0.001
      });
      api.setFill(line, true);
      api.set(line, { "material.materialColor": CREAM });

      var startF = 22 + lineCount * 2;
      var endF = startF + 14;
      api.keyframe(line, startF, { "opacity": 100, "scale.x": 0.001 });
      api.keyframe(line, endF,   { "opacity": 100, "scale.x": 1     });
      api.magicEasing(line, "scale.x", endF, "EaseOut", "");
      lineCount++;
    }
  }

  // Vertex nodes
  for (var v2 = 0; v2 < verts.length; v2++) {
    var nd = api.primitive("ellipse", PREFIX + "vert_" + v2);
    api.set(nd, {
      "generator.radius": [12, 12],
      "position.x": verts[v2].x, "position.y": verts[v2].y,
      "opacity": 0
    });
    api.setFill(nd, true);
    api.set(nd, { "material.materialColor": CREAM });
    api.keyframe(nd, 12,        { "opacity": 0   });
    api.keyframe(nd, 26 + v2*2, { "opacity": 100 });
  }

  // Slow wobble on hex
  api.keyframe(hex, 60,  { "rotation.z":  0 });
  api.keyframe(hex, 96,  { "rotation.z":  3 });
  api.keyframe(hex, 132, { "rotation.z":  0 });

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