@kenkaiiii/ggcoder 5.65.0 → 5.66.0

package/assets/motion/library/looks/acid-poster/look.md

@@ -0,0 +1,82 @@
+# Acid Poster
+
+A fly-posted gig poster that won't sit still. Two colors only — acid lime
+and black — and one typeface, **Anybody**, pushed to both ends of its width
+axis: 150% wide slabs against 50% condensed columns. Type runs edge to edge,
+black bands carry running tickers, and every beat lands with a hard
+inverting cut. Loud on purpose; precise underneath.
+
+## Palette
+
+- `--field` #d4ff00 acid lime, `--ink` #0a0a0a (17:1). `--accent` equals
+  ink: emphasis is made with size, width and inversion, never a third color.
+- `--field-2` #0a0a0a: the inverted frame (lime type on black). Cut to it on
+  a beat for 2–12 frames, or hold a whole scene inverted.
+- `--line` is 90% ink: rules here are 8px thick, never hairlines. `--muted`
+  is rarely used; this look doesn't whisper.
+- Swap pair per brand only if both stay extreme: hot pink #ff2e88 / black,
+  safety orange #ff5a00 / black. Never pastel, never gradients.
+
+## Type
+
+- Wide slab: Anybody 900, `font-stretch: 150%`, tracking −0.04em,
+  line-height 0.78, 280–340px, one word per line, sized so the word spans
+  the full width inside a 40px margin.
+- Condensed column: Anybody 900, `font-stretch: 50%`, tracking 0 (never
+  negative at 50%: counters close up), 360–440px.
+- Pair the two in one frame: that width contrast is the look.
+- Info type: Anybody 800 at 100%, 36–48px, uppercase for credits and URLs,
+  sentence case for the one sentence of copy.
+- Tickers: Anybody 900 at 62%, 72–80px, uppercase, separated by ✱.
+- Martian Mono is not used in frame. No lowercase display words.
+
+## Background and framing
+
+- Flat lime. No texture, no light, no shadows, no rounded corners.
+- Two 104px black bands (top and bottom) with tickers moving in opposite
+  directions, linear, the whole scene long.
+- A full-width 8px rule with a three-part credit line (left / center /
+  right) sits above the bottom band.
+- Information goes in solid black blocks (lime type inside), flush to the
+  right margin, top-aligned to a display line.
+- Arrows are thick (stroke ~14% of their box), square-capped, pointing down
+  and right.
+
+## Motion
+
+- Fast and on the beat (plan 120 bpm = 0.5s beats). Words slam in with
+  `expo.out` 0.4–0.5s from far off-frame (x ±1400 or xPercent −40).
+- Width morph: the wide word opens from 50% to 150% width with
+  `expo.inOut` 0.9s (tween a proxy, write `style.fontStretch` in
+  `onUpdate`).
+- Info blocks rise from below their own box (`yPercent` 110 → 0) `expo.out`
+  0.45s. Rules wipe via `clip-path` inset, `expo.inOut` 0.5s.
+- Punch: on a downbeat, one frame of `--field-2` (flash overlay at opacity 1
+  for 0.01s → 0), and the hero word re-lands from scale 1.08 with
+  `expo.out` 0.5s. Arrows pop with `back.out(2.5)` 0.35s.
+- Tickers never stop; everything else holds still between beats. Holds are
+  short (0.8–1.5s). Scenes change by hard cut or full inversion, never a
+  fade.
+
+## Avoid
+
+- A third color, gradients, glow, grain, drop shadows.
+- Soft eases (`sine`, `power1`), fades, slow reveals.
+- Negative tracking on condensed widths; words clipped by the frame edge
+  (bleed is fine for a ticker, not for the hero word).
+- Pill buttons, rounded stickers, emoji.
+- Small type floating in empty lime: every element is anchored to a margin,
+  a rule or a band.
+
+## Scene recipes
+
+1. **Drop poster:** tickers top and bottom, wide word full-width, condensed
+   line under it, black date block right, credit rule; the wide word morphs
+   50 → 150% on the first beat, second line slams from the right on the
+   second.
+2. **Countdown:** inverted field. A single condensed 50% number at 900px
+   fills the height; each beat hard-cuts to the next number (3, 2, 1) with a
+   one-frame lime flash between them.
+3. **Word stack:** four wide 150% words stacked edge to edge (≈210px each),
+   each line entering from alternating sides on successive beats with
+   `expo.out` 0.4s; the last line inverts (lime on a black bar).

package/assets/motion/library/looks/acid-poster/meta.json

@@ -0,0 +1,11 @@
+{
+  "id": "acid-poster",
+  "name": "Acid Poster",
+  "description": "A fly-posted gig poster that won't sit still: acid lime and black only, Anybody slammed between 50% and 150% width, type set edge to edge, black bands with running tickers and hard inverting cuts on every beat. Loud, brutal, fast.",
+  "tags": ["bold", "kinetic-type", "poster", "brutalist", "lime", "two-color", "hype", "variable-font"],
+  "fonts": ["Anybody", "Martian Mono"],
+  "bestFor": ["hype teasers", "drops and launches", "music and events", "countdowns", "social cutdowns", "sports"],
+  "pieces": [],
+  "samplePieces": [],
+  "previewAt": 2.4
+}

package/assets/motion/library/looks/acid-poster/sample.html

@@ -0,0 +1,177 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="assets/fonts/fonts.css" />
+    <link rel="stylesheet" href="assets/looks/acid-poster.css" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        background: var(--field);
+        overflow: hidden;
+        font-family: var(--display);
+        color: var(--ink);
+      }
+      .band {
+        position: absolute;
+        left: 0;
+        width: 1920px;
+        height: 104px;
+        background: var(--ink);
+        color: var(--field);
+        overflow: hidden;
+        white-space: nowrap;
+      }
+      .band span {
+        display: inline-block;
+        font-weight: 900;
+        font-stretch: 62%;
+        font-size: 76px;
+        line-height: 104px;
+        letter-spacing: -0.01em;
+      }
+      .word {
+        position: absolute;
+        left: 40px;
+        white-space: nowrap;
+        font-weight: var(--display-weight);
+        letter-spacing: var(--display-tracking);
+        line-height: 0.78;
+      }
+      #w1 {
+        top: 150px;
+        font-size: 300px;
+        font-stretch: var(--display-stretch);
+      }
+      #w2 {
+        top: 424px;
+        font-size: 400px;
+        font-stretch: 50%;
+        letter-spacing: 0;
+      }
+      .block {
+        position: absolute;
+        right: 40px;
+        top: 424px;
+        width: 540px;
+        height: 268px;
+        background: var(--ink);
+        color: var(--field);
+        box-sizing: border-box;
+        padding: 30px 36px;
+      }
+      .block .d {
+        font-weight: 900;
+        font-stretch: 125%;
+        font-size: 104px;
+        line-height: 0.9;
+        letter-spacing: -0.045em;
+      }
+      .block .t {
+        margin-top: 22px;
+        font-weight: 700;
+        font-stretch: 100%;
+        font-size: 44px;
+        line-height: 1.05;
+        letter-spacing: -0.01em;
+      }
+      .arrow {
+        position: absolute;
+        right: 32px;
+        bottom: 32px;
+        width: 96px;
+        height: 96px;
+      }
+      .foot {
+        position: absolute;
+        left: 40px;
+        right: 40px;
+        top: 836px;
+        border-top: 8px solid var(--ink);
+        padding-top: 18px;
+        display: flex;
+        justify-content: space-between;
+        font-weight: 800;
+        font-stretch: 100%;
+        font-size: 40px;
+        letter-spacing: -0.01em;
+      }
+      .flash {
+        position: absolute;
+        inset: 0;
+        background: var(--ink);
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      class="look-acid-poster"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <!-- edit: ticker text -->
+      <div class="band" id="band1" style="top: 0" data-layout-allow-overflow><div id="tick1"></div></div>
+      <!-- edit: two poster words -->
+      <div class="word" id="w1">LOUDER</div>
+      <div class="word" id="w2">THAN EVER</div>
+      <!-- edit: date block -->
+      <div class="block" id="block">
+        <svg class="arrow" id="arrow" viewBox="0 0 100 100"><path d="M12 12 L84 84 M84 28 L84 84 L28 84" fill="none" stroke="var(--field)" stroke-width="14" stroke-linecap="square" /></svg>
+        <div class="d">10.31</div>
+        <div class="t">Out Friday,<br />everywhere.</div>
+      </div>
+      <div class="foot" id="foot"><span>RELAY SOUND SYSTEM</span><span>VOL. 2</span><span>RELAYSOUND.FM</span></div>
+      <div class="band" id="band2" style="top: 976px" data-layout-allow-overflow><div id="tick2"></div></div>
+      <div class="flash" id="flash"></div>
+    </div>
+    <script>
+      // Ticker: repeated phrase, moved by the timeline (never a CSS loop).
+      const phrase = "NEW DROP ✱ VOLUME TWO ✱ ";
+      document.getElementById("tick1").innerHTML = ("<span>" + phrase + "</span>").repeat(8);
+      document.getElementById("tick2").innerHTML = ("<span>" + "OUT FRIDAY ✱ 10.31 ✱ " + "</span>").repeat(10);
+
+      const tl = gsap.timeline({ paused: true });
+      const w1 = document.getElementById("w1");
+      const wd = { s: 50 };
+
+      tl.fromTo("#tick1", { x: 0 }, { x: -900, duration: 4, ease: "none" }, 0)
+        .fromTo("#tick2", { x: -1400 }, { x: -500, duration: 4, ease: "none" }, 0)
+        // Beat 1: black frame, cut to lime with the first word already moving.
+        .set("#flash", { opacity: 1 }, 0)
+        .set("#flash", { opacity: 0 }, 0.12)
+        .from("#w1", { x: -36, clipPath: "inset(0 100% 0 0)", duration: 0.5, ease: "expo.out" }, 0.12)
+        .fromTo(
+          wd,
+          { s: 50 },
+          { s: 150, duration: 0.9, ease: "expo.inOut", onUpdate: () => (w1.style.fontStretch = wd.s + "%") },
+          0.12,
+        )
+        // Beat 2: a right-led mask reveals the second word inside the safe area.
+        .from("#w2", { x: 80, clipPath: "inset(0 0 0 100%)", duration: 0.45, ease: "expo.out" }, 0.62)
+        .from("#block", { yPercent: 110, duration: 0.45, ease: "expo.out" }, 0.95)
+        .from("#arrow", { scale: 0, transformOrigin: "0% 0%", duration: 0.35, ease: "back.out(2.5)" }, 1.15)
+        .from("#foot", { clipPath: "inset(0 100% 0 0)", duration: 0.5, ease: "expo.inOut" }, 1.1)
+        // Beat 3: an inverting punch on the word.
+        .set("#flash", { opacity: 1 }, 1.9)
+        .set("#flash", { opacity: 0 }, 1.94)
+        .from("#w1", { scale: 1.04, immediateRender: false, transformOrigin: "0% 50%", duration: 0.5, ease: "expo.out" }, 1.92)
+        .to({}, { duration: 0.1 }, 3.9);
+      window.__timelines = { main: tl };
+    </script>
+  </body>
+</html>

package/assets/motion/library/looks/acid-poster/tokens.css

@@ -0,0 +1,16 @@
+/* Acid Poster: acid lime and black, Anybody pushed to its extreme widths. */
+.look-acid-poster {
+  --field: #d4ff00;
+  --field-2: #0a0a0a;
+  --ink: #0a0a0a;
+  --accent: #0a0a0a;
+  --muted: rgba(10, 10, 10, 0.66);
+  --line: rgba(10, 10, 10, 0.9);
+  --display: "Anybody", sans-serif;
+  --display-weight: 900;
+  --display-stretch: 150%;
+  --display-tracking: -0.04em;
+  --text: "Anybody", sans-serif;
+  --mono: "Martian Mono", monospace;
+  --radius: 0px;
+}

package/assets/motion/library/looks/blueprint/look.md

@@ -0,0 +1,22 @@
+# Blueprint
+
+A technical drawing, not a sci-fi dashboard. Use this look to explain a mechanism, relationship or measured change.
+
+## System
+
+- Deep cobalt field, pale drafting lines and white ink. Yellow marks the one measurement being explained, never every node.
+- Wide Hubot Sans headlines; Martian Mono only for dimensions, units and title-block details.
+- Keep a 96px safe area. Align annotations to drawing geometry and leave the left third available for the explanation.
+- Grid lines stay subordinate to the object. Leader lines terminate at actual features, not decorative points.
+
+## Motion
+
+Draw the object first in 0.6–1.2s with `power2.inOut`, then add dimensions in reading order. Hold the completed diagram for at least 2s. Use a clean cut or a line-led wipe between mechanisms. Never animate measurements independently of the thing being measured.
+
+## Scene recipes
+
+1. **Mechanism:** headline left, large line drawing right, one highlighted ratio below the copy. The sample explains a 2:1 gear reduction.
+2. **System flow:** `blueprint-grid` behind `flow-nodes`; reveal each connection only after its source exists.
+3. **Layer breakdown:** `stack-layers` with numbered annotations, then a `chapter-card` to introduce the next subsystem.
+
+Avoid glows, tiny fake telemetry, unreadable formula wallpaper, gratuitous labels and more than one signal color. Replace all sample measurements with verified values for the subject.

package/assets/motion/library/looks/blueprint/meta.json

@@ -0,0 +1,11 @@
+{
+  "id": "blueprint",
+  "name": "Blueprint",
+  "description": "An engineering drawing that builds itself: a deep cobalt field with a faint drafting grid, white line drawings that draw on stroke by stroke, dimension lines and leader callouts, a title block in the corner. Wide Hubot Sans headlines, Martian Mono for the annotation only. One signal yellow marks the single measurement that matters.",
+  "tags": ["blueprint", "technical", "line-drawing", "engineering", "cobalt", "diagram", "explainer", "annotation"],
+  "fonts": ["Hubot Sans", "Martian Mono"],
+  "bestFor": ["engineering explainers", "hardware and product teardowns", "how-it-works videos", "infrastructure diagrams", "patents and R&D stories"],
+  "pieces": ["blueprint-grid", "flow-nodes", "stack-layers", "chapter-card"],
+  "samplePieces": [],
+  "previewAt": 3.2
+}

package/assets/motion/library/looks/blueprint/sample.html

@@ -0,0 +1,301 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="assets/fonts/fonts.css" />
+    <link rel="stylesheet" href="assets/looks/blueprint.css" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        background: var(--field);
+        overflow: hidden;
+        font-family: var(--text);
+        color: var(--ink);
+      }
+      /* Drafting grid: 24px minor, 120px major, plus a soft lamp falloff. */
+      .grid {
+        position: absolute;
+        inset: 0;
+        background:
+          linear-gradient(90deg, rgba(255, 255, 255, 0.11) 1px, transparent 1px) 0 0 / 120px 120px,
+          linear-gradient(180deg, rgba(255, 255, 255, 0.11) 1px, transparent 1px) 0 0 / 120px 120px,
+          linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 24px 24px,
+          linear-gradient(180deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 24px 24px;
+      }
+      .lamp {
+        position: absolute;
+        inset: 0;
+        background:
+          radial-gradient(ellipse 1200px 800px at 62% 44%, rgba(120, 170, 255, 0.16), transparent 70%),
+          radial-gradient(ellipse 1500px 1000px at 50% 50%, transparent 55%, rgba(6, 20, 70, 0.45) 100%);
+      }
+      .sheet {
+        position: absolute;
+        left: 48px;
+        top: 48px;
+        width: 1820px;
+        height: 980px;
+        border: 2px solid rgba(255, 255, 255, 0.55);
+        box-sizing: border-box;
+      }
+      .headline {
+        position: absolute;
+        left: 144px;
+        top: 150px;
+        margin: 0;
+        font-family: var(--display);
+        font-weight: var(--display-weight);
+        font-stretch: var(--display-stretch);
+        letter-spacing: var(--display-tracking);
+        font-size: 96px;
+        line-height: 1.04;
+      }
+      .headline span {
+        display: block;
+        clip-path: inset(0 100% 0 0);
+      }
+      .dek {
+        position: absolute;
+        left: 144px;
+        top: 390px;
+        width: 560px;
+        margin: 0;
+        font-size: 30px;
+        line-height: 1.4;
+        font-weight: 400;
+        font-stretch: 104%;
+        color: var(--muted);
+      }
+      .ratio {
+        position: absolute;
+        left: 144px;
+        top: 640px;
+      }
+      .ratio .k {
+        font-family: var(--mono);
+        font-size: 18px;
+        letter-spacing: 0.04em;
+        color: var(--muted);
+      }
+      .ratio .v {
+        margin-top: 60px;
+        font-family: var(--display);
+        font-weight: 600;
+        font-stretch: 125%;
+        font-size: 150px;
+        line-height: 1.1;
+        letter-spacing: -0.03em;
+        color: var(--accent);
+      }
+      svg.draw {
+        position: absolute;
+        left: 0;
+        top: 0;
+      }
+      .note {
+        font-family: var(--mono);
+        font-size: 17px;
+        letter-spacing: 0.02em;
+        fill: var(--ink);
+      }
+      .note.dim {
+        fill: var(--accent);
+        font-size: 19px;
+      }
+      /* Title block: the drawing's metadata, bottom-right, as on a real sheet. */
+      .block {
+        position: absolute;
+        left: 1420px;
+        top: 874px;
+        width: 400px;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        border: 2px solid rgba(255, 255, 255, 0.55);
+        border-bottom: none;
+        border-right: none;
+        font-family: var(--mono);
+        font-size: 15px;
+        color: var(--muted);
+      }
+      .block div {
+        padding: 12px 16px 14px;
+        border-right: 1px solid rgba(255, 255, 255, 0.4);
+        border-bottom: 1px solid rgba(255, 255, 255, 0.4);
+        line-height: 1.5;
+      }
+      .block div:nth-child(2n) {
+        border-right: none;
+      }
+      .block .title {
+        grid-column: 1 / 3;
+        font-family: var(--display);
+        font-size: 26px;
+        font-weight: 640;
+        font-stretch: 112%;
+        color: var(--ink);
+        letter-spacing: -0.01em;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      class="look-blueprint"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="grid" id="grid"></div>
+      <div class="lamp"></div>
+      <div class="sheet" id="sheet"></div>
+
+      <!-- edit: headline (one line per span) -->
+      <h1 class="headline"><span>Torque, traded</span><span>for speed.</span></h1>
+      <!-- edit: dek -->
+      <p class="dek" id="dek">A small gear driving one twice its size turns half as fast, and pushes twice as hard.</p>
+      <div class="ratio" id="ratio">
+        <!-- edit: key figure label and value -->
+        <div class="k">Reduction ratio</div>
+        <div class="v">2 : 1</div>
+      </div>
+
+      <svg class="draw" width="1920" height="1080" viewBox="0 0 1920 1080">
+        <g fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round">
+          <!-- centre lines (dash-dot), drawn first -->
+          <g id="centres" stroke="rgba(255,255,255,0.5)" stroke-width="1.5" stroke-dasharray="28 6 4 6">
+            <line x1="850" y1="560" x2="1680" y2="560" />
+            <line x1="1060" y1="400" x2="1060" y2="720" />
+            <line x1="1396" y1="290" x2="1396" y2="830" />
+          </g>
+          <!-- pitch circles, dashed -->
+          <g id="pitch" stroke="rgba(255,255,255,0.42)" stroke-width="1.5" stroke-dasharray="10 8">
+            <circle cx="1060" cy="560" r="112" />
+            <circle cx="1396" cy="560" r="224" />
+          </g>
+          <g id="driver" stroke-width="3"></g>
+          <g id="driven" stroke-width="3"></g>
+          <!-- dimension: centre distance -->
+          <g id="dimA" stroke-width="1.5">
+            <line x1="1060" y1="740" x2="1060" y2="890" />
+            <line x1="1396" y1="810" x2="1396" y2="890" />
+            <line x1="1060" y1="870" x2="1396" y2="870" />
+            <path d="M1060 870 l18 -6 v12 z M1396 870 l-18 -6 v12 z" fill="#ffffff" />
+          </g>
+          <!-- leader: driver -->
+          <g id="leadA" stroke-width="1.5">
+            <path d="M1003 470 L930 330 H840" />
+            <circle cx="1003" cy="470" r="5" fill="#ffffff" />
+          </g>
+          <!-- leader: driven -->
+          <g id="leadB" stroke-width="1.5">
+            <path d="M1552 400 L1640 300 H1740" />
+            <circle cx="1552" cy="400" r="5" fill="#ffffff" />
+          </g>
+          <!-- contact point, the one yellow mark -->
+          <g id="contact" stroke="#ffd84a" stroke-width="2.5">
+            <circle cx="1172" cy="560" r="16" />
+            <line x1="1172" y1="520" x2="1172" y2="600" />
+          </g>
+        </g>
+        <!-- edit: annotations -->
+        <text class="note" id="tA" x="840" y="318">DRIVER · z = 16</text>
+        <text class="note" id="tB" x="1640" y="288">DRIVEN · z = 32</text>
+        <text class="note dim" id="tD" x="1228" y="858" text-anchor="middle">a = 336</text>
+      </svg>
+
+      <div class="block" id="block">
+        <!-- edit: title block -->
+        <div class="title">Spur gear reduction</div>
+        <div>Module 14</div>
+        <div>Scale 1 : 2</div>
+        <div>Sheet 2 of 6</div>
+        <div>Rev C</div>
+      </div>
+    </div>
+    <script>
+      // Build involute-ish spur gears as polygons (deterministic geometry).
+      const NS = "http://www.w3.org/2000/svg";
+      function gear(cx, cy, z, m, holes) {
+        const r = (m * z) / 2;
+        const tip = r + m;
+        const root = r - 1.25 * m;
+        const p = (Math.PI * 2) / z;
+        const pts = [];
+        for (let i = 0; i < z; i++) {
+          const a = i * p;
+          const at = (rad, ang) => [cx + rad * Math.cos(ang), cy + rad * Math.sin(ang)];
+          pts.push(at(root, a - 0.5 * p), at(root, a - 0.28 * p), at(tip, a - 0.14 * p), at(tip, a + 0.14 * p), at(root, a + 0.28 * p));
+        }
+        const d = "M" + pts.map((q) => q[0].toFixed(1) + " " + q[1].toFixed(1)).join(" L") + " Z";
+        const parts = [d];
+        const hub = r * 0.34;
+        parts.push(`M${cx + hub} ${cy} A${hub} ${hub} 0 1 0 ${cx - hub} ${cy} A${hub} ${hub} 0 1 0 ${cx + hub} ${cy}`);
+        const bore = r * 0.14;
+        parts.push(
+          `M${cx - bore} ${cy} A${bore} ${bore} 0 1 0 ${cx + bore} ${cy} L${cx + bore} ${cy - bore * 0.6} L${cx + bore * 0.55} ${cy - bore * 0.6} L${cx + bore * 0.55} ${cy - bore * 0.86} A${bore} ${bore} 0 0 0 ${cx - bore} ${cy} Z`,
+        );
+        for (let h = 0; h < holes; h++) {
+          const a = (h / holes) * Math.PI * 2 + Math.PI / holes;
+          const hr = r * 0.13;
+          const hx = cx + r * 0.62 * Math.cos(a);
+          const hy = cy + r * 0.62 * Math.sin(a);
+          parts.push(`M${hx + hr} ${hy} A${hr} ${hr} 0 1 0 ${hx - hr} ${hy} A${hr} ${hr} 0 1 0 ${hx + hr} ${hy}`);
+        }
+        return parts.map((dd) => {
+          const el = document.createElementNS(NS, "path");
+          el.setAttribute("d", dd);
+          return el;
+        });
+      }
+      const driver = document.getElementById("driver");
+      const driven = document.getElementById("driven");
+      gear(1060, 560, 16, 14, 0).forEach((el) => driver.appendChild(el));
+      gear(1396, 560, 32, 14, 6).forEach((el) => driven.appendChild(el));
+      // Half-pitch phase so the teeth mesh at the contact point.
+      gsap.set(driven, { rotation: 180 / 32, svgOrigin: "1396 560" });
+      gsap.set(driver, { svgOrigin: "1060 560" });
+
+      const strokes = gsap.utils.toArray("#centres line, #pitch circle, #driver path, #driven path, #dimA line, #leadA path, #leadB path");
+      strokes.forEach((el) => {
+        const len = el.getTotalLength();
+        gsap.set(el, { strokeDasharray: len, strokeDashoffset: len });
+      });
+      // Dash-dot and dashed strokes: reveal with a clip instead of dash offset.
+      gsap.set("#centres line, #pitch circle", { clearProps: "strokeDasharray,strokeDashoffset" });
+
+      const tl = gsap.timeline({ paused: true });
+      tl.from("#grid", { opacity: 0, duration: 0.8, ease: "power1.inOut" }, 0)
+        .from("#sheet", { opacity: 0, scale: 1.015, duration: 0.8, ease: "power2.out" }, 0)
+        .from("#centres line", { opacity: 0, duration: 0.4, stagger: 0.08, ease: "none" }, 0.2)
+        .from("#pitch circle", { opacity: 0, duration: 0.5, stagger: 0.1, ease: "none" }, 0.4)
+        .to(".headline span", { clipPath: "inset(0 0% 0 0)", duration: 0.9, ease: "power3.inOut", stagger: 0.14 }, 0.25)
+        .from("#dek", { opacity: 0, y: 16, duration: 0.7, ease: "power2.out" }, 0.8)
+        .to("#driver path", { strokeDashoffset: 0, duration: 1.1, ease: "power1.inOut", stagger: 0.06 }, 0.5)
+        .to("#driven path", { strokeDashoffset: 0, duration: 1.4, ease: "power1.inOut", stagger: 0.05 }, 0.6)
+        .to("#dimA line, #leadA path, #leadB path", { strokeDashoffset: 0, duration: 0.5, ease: "power2.inOut", stagger: 0.08 }, 1.8)
+        .from("#dimA path, #leadA circle, #leadB circle", { opacity: 0, duration: 0.2, stagger: 0.08 }, 2.1)
+        .from("#tA, #tB", { opacity: 0, duration: 0.3, stagger: 0.1, ease: "none" }, 2.2)
+        .from("#contact", { opacity: 0, scale: 0.4, svgOrigin: "1172 560", duration: 0.5, ease: "back.out(2)" }, 2.3)
+        .from("#tD", { opacity: 0, duration: 0.3, ease: "none" }, 2.4)
+        .from("#ratio", { opacity: 0, y: 20, duration: 0.7, ease: "power3.out" }, 2.3)
+        .from("#block", { opacity: 0, duration: 0.5, ease: "none" }, 2.0)
+        // Once drawn, the pair turns: driver a full 60°, driven half that, the other way.
+        .to(driver, { rotation: 60, duration: 2.2, ease: "power1.inOut" }, 1.8)
+        .to(driven, { rotation: 180 / 32 - 30, duration: 2.2, ease: "power1.inOut" }, 1.8)
+        .to({}, { duration: 0.1 }, 3.9);
+      window.__timelines = { main: tl };
+    </script>
+  </body>
+</html>

package/assets/motion/library/looks/blueprint/tokens.css

@@ -0,0 +1,16 @@
+/* Blueprint: cobalt drafting field, white line drawings, one signal yellow for the key dimension. */
+.look-blueprint {
+  --field: #1d49b5;
+  --field-2: #102f7e;
+  --ink: #ffffff;
+  --accent: #ffd84a;
+  --muted: rgba(255, 255, 255, 0.78);
+  --line: rgba(255, 255, 255, 0.16);
+  --display: "Hubot Sans", sans-serif;
+  --display-weight: 700;
+  --display-stretch: 116%;
+  --display-tracking: -0.025em;
+  --text: "Hubot Sans", sans-serif;
+  --mono: "Martian Mono", monospace;
+  --radius: 0px;
+}