Pareto Principle

Definition

Why it matters for ShurIQ reports

Every brief contains a vital few — the two competitors moving the market, the three gaps that change the strategy, the one evidence chain that earns the recommendation. Designing every section with equal weight buries the signal. Pareto discipline forces the brief to elevate the few elements an executive will actually act on.

Takeaways

• Identify the vital 20% of content per brief and design it differently — larger, brighter, earlier in the read.
• Cut the long tail of "interesting but not actionable" content to a footer or appendix.
• Apply Pareto to design effort itself — invest the most polish on the surfaces a reader sees first and most often.
• Re-rank the vital few per recurring brief; what mattered last week is not what matters this week.

Visual motion language

The vital few elements zoom-focus on first paint with a color-emphasis pulse; the long tail opacity-decays to a quieter visual register so it remains accessible without competing.

Origins

Vilfredo Pareto, late 19th / early 20th century — observed land ownership distribution in Italy.

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 · pareto-principle · Cavalry scene
// Motion family: grid-stagger (faint-rows + hero scale-in)
// Palette: teal + 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_pareto-principle_";

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

  // Top row: 5 dots faint
  for (var c = 0; c < 5; c++) {
    var d = api.primitive("ellipse", PREFIX + "top_" + c);
    api.set(d, {
      "generator.radius": [22, 22],
      "position.x": -180 + c * 90,
      "position.y": 100,
      "opacity": 0
    });
    api.setFill(d, true);
    api.set(d, { "material.materialColor": CREAM });
    api.keyframe(d, c * 2,      { "opacity": 0  });
    api.keyframe(d, c * 2 + 14, { "opacity": 40 });
  }

  // Middle small bright dot
  var mid = api.primitive("ellipse", PREFIX + "mid");
  api.set(mid, {
    "generator.radius": [12, 12],
    "position.x": 0, "position.y": 0,
    "opacity": 0
  });
  api.setFill(mid, true);
  api.set(mid, { "material.materialColor": CREAM });
  api.keyframe(mid, 16, { "opacity": 0   });
  api.keyframe(mid, 28, { "opacity": 100 });

  // Bottom row: 5 faint + 1 hero
  for (var c2 = 0; c2 < 5; c2++) {
    var d2 = api.primitive("ellipse", PREFIX + "bot_" + c2);
    api.set(d2, {
      "generator.radius": [22, 22],
      "position.x": -180 + c2 * 90,
      "position.y": -100,
      "opacity": 0
    });
    api.setFill(d2, true);
    api.set(d2, { "material.materialColor": CREAM });
    api.keyframe(d2, c2 * 2,      { "opacity": 0  });
    api.keyframe(d2, c2 * 2 + 14, { "opacity": 40 });
  }

  // Hero dot
  var hero = api.primitive("ellipse", PREFIX + "hero");
  api.set(hero, {
    "generator.radius": [42, 42],
    "position.x": 280, "position.y": -100,
    "opacity": 0,
    "scale.x": 0.0, "scale.y": 0.0
  });
  api.setFill(hero, true);
  api.set(hero, { "material.materialColor": CREAM });
  api.keyframe(hero, 30, { "opacity": 100, "scale.x": 0.0, "scale.y": 0.0 });
  api.keyframe(hero, 50, { "opacity": 100, "scale.x": 1.0, "scale.y": 1.0 });
  api.magicEasing(hero, "scale.x", 50, "EaseOut", "");
  api.magicEasing(hero, "scale.y", 50, "EaseOut", "");

  // Breathing
  api.keyframe(hero, 80,  { "scale.x": 1.0,  "scale.y": 1.0  });
  api.keyframe(hero, 110, { "scale.x": 1.05, "scale.y": 1.05 });
  api.keyframe(hero, 140, { "scale.x": 1.0,  "scale.y": 1.0  });

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