LAWSOFUX · motion lab
Concept · occams-razor

Occam's Razor

Single-form composition palette · magenta / cream takeaways · 3

Definition

Among solutions that perform equally well, choose the one with the fewest moving parts. The principle is a tiebreaker, not a license to oversimplify — it instructs designers to remove what does not earn its place, not to flatten what genuinely earns complexity.

Why it matters for ShurIQ reports

Brand intelligence is intrinsically dense; the temptation is to add chrome (extra labels, decorative borders, secondary metrics) to make density feel intentional. Occam's Razor says: every element on a gap card or a stack-rank row must defend its existence. Remove the second decorative chart, the redundant subtitle, the third color in the legend — and the analytical signal sharpens.

Takeaways

Visual motion language

On state changes, non-essential elements opacity-decay before the primary content fades in. The reduction is visible — the reader feels the system editing itself.

Cavalry recreation seed. 2×2 grid of 240×240 cells. Cells 1–3 each contain 3 overlapping ø180 circles at darker maroon, opacity 0.5, drawing attention with overlapping noise. Cell 4 contains a single clean cream ø150 circle. Animate cells 1–3 fading in over 300ms each with 250ms stagger; then cell 4 scales 0.6→1 with overshoot at t=1.2s. After 1s, dim cells 1–3 to 0.3 opacity to dramatize the "razor" decision. Loop with 2s pause.

Origins

William of Ockham, 14th-century English Franciscan friar.

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 · occams-razor · Cavalry scene
// Motion family: grid-stagger (2x2 sequential then razor)
// Palette: deep 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_occams-razor_";

  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    = "#5C2A23";
  var DARK  = "#4A1F1A";
  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 });

  // 2×2 cells, each 240×240, centered at quadrants
  var quads = [
    { x: -180, y:  180, complex: true,  startF: 0  },
    { x:  180, y:  180, complex: true,  startF: 12 },
    { x: -180, y: -180, complex: true,  startF: 24 },
    { x:  180, y: -180, complex: false, startF: 36 }
  ];

  for (var q = 0; q < quads.length; q++) {
    var info = quads[q];
    if (info.complex) {
      // 3 overlapping ellipses
      var offsets = [{x:-30,y:0},{x:30,y:0},{x:0,y:25}];
      for (var o = 0; o < offsets.length; o++) {
        var c = api.primitive("ellipse", PREFIX + "q" + q + "_c" + o);
        api.set(c, {
          "generator.radius": [80, 80],
          "position.x": info.x + offsets[o].x,
          "position.y": info.y + offsets[o].y,
          "opacity": 0
        });
        api.setFill(c, true);
        api.set(c, { "material.materialColor": DARK });
        api.keyframe(c, info.startF,      { "opacity": 0  });
        api.keyframe(c, info.startF + 14, { "opacity": 50 });

        // Razor sweep — dim later
        api.keyframe(c, 80,  { "opacity": 50 });
        api.keyframe(c, 100, { "opacity": 20 });
      }
    } else {
      // Single clean cream circle
      var clean = api.primitive("ellipse", PREFIX + "q" + q + "_clean");
      api.set(clean, {
        "generator.radius": [70, 70],
        "position.x": info.x, "position.y": info.y,
        "opacity": 0,
        "scale.x": 0.5, "scale.y": 0.5
      });
      api.setFill(clean, true);
      api.set(clean, { "material.materialColor": CREAM });
      api.keyframe(clean, info.startF,      { "opacity": 0,   "scale.x": 0.5, "scale.y": 0.5 });
      api.keyframe(clean, info.startF + 18, { "opacity": 100, "scale.x": 1.0, "scale.y": 1.0 });
      api.magicEasing(clean, "scale.x", info.startF + 18, "EaseOut", "");
      api.magicEasing(clean, "scale.y", info.startF + 18, "EaseOut", "");

      // Steady sustain
      api.keyframe(clean, 80, { "opacity": 100 });
    }
  }

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