@prestyj/cli 5.27.0 → 5.28.1

package/assets/motion/library/looks/dark-studio/look.md

@@ -0,0 +1,85 @@
+# Dark Studio
+
+A product photographed on a black set. One soft **key light** from above,
+everything else falls off to near-black. The product (UI, device, card) is
+the only lit object; type is calm, wide and quiet. One cool **accent** marks
+the single number or state that matters. Think Apple and Linear dark
+keynote launches: confidence through restraint.
+
+## Palette
+
+- `--field` #08090b is not pure black: it lets the light falloff and the
+  shadows under the slab read. `--field-2` #121418 is the "lights up" set
+  for a second scene (a brighter floor, same camera).
+- `--ink` #f3f5f8 (18:1 on field). Headlines get a vertical ink → #9aa3ae
+  gradient clip so they look lit from above; body text is flat ink.
+- `--accent` #7cc7ff ice blue, used on **one thing per scene**: the live
+  chart line, the active nav item, the status dots. Never on headlines, never
+  as a background fill larger than a nav item.
+- `--muted` for secondary UI text, `--line` (10% ink) for hairlines inside
+  the UI. Swap the accent per brand (mint #6ff0c4, amber #ffb35c), but keep
+  it cool-to-neutral and at most one.
+
+## Type
+
+- Display: Mona Sans 620, width 108%, tracking −0.045em. Headlines 104–128px
+  centered, max two lines, max six words, sentence case with a full stop.
+- Eyebrow above the headline: Mona Sans 560 at 110% width, 28–32px, in
+  `--accent`. That is the only colored type.
+- In-product numbers: Mona Sans 560, 112% width, 96–140px, tabular numerals,
+  unit in `--muted` at 40% of the size.
+- UI text 18–22px Mona Sans 500. Martian Mono only for timestamps and IDs
+  inside the UI, 16–18px, never as a label on the frame.
+
+## Background and framing
+
+- Key light: a radial ellipse (≈900×620px) at 50% −8%, 20% cool white,
+  falling to zero by 80%. A second faint accent-tinted ellipse under the
+  floor line bounces light back up.
+- A single hairline "floor" at y≈900 fading out at both ends.
+- The product sits on a glass slab: `--radius` 28px, vertical 34→16 gray
+  gradient, 1px inner top highlight (22% white) as the metal rim, a 7% inner
+  outline, and a long 120px black drop shadow. Beneath it, an accent glow
+  ellipse blurred 30px is the floor reflection.
+- Camera: perspective 2200px, slab tilted rotateX 10–16° from its bottom
+  edge, centered, occupying 60–70% of the frame width. No full-bleed
+  screenshots, no device frames with notches.
+
+## Motion
+
+- Lights first: key light fades up 1.2–1.4s `power2.inOut` before anything
+  else lands.
+- Headline words: blur-rise (y 44 → 0, blur 16px → 0, opacity) `power3.out`
+  1.1s, stagger 0.07s.
+- Product: rises from y 260 and rotateX 42° → 14° with `expo.out` over
+  1.8s. It settles; it never bounces.
+- Inside the UI: data lines draw with `power2.inOut` 1.2–1.4s while the
+  number counts toward its value on the same tween length. End dot pops with
+  `back.out(2)` 0.5s — the only overshoot in the look.
+- One specular sheen crosses the slab (`power1.inOut` 1.4s) after the data
+  lands, as the "shine" beat.
+- Holds: 1.5s minimum on a composed frame. Scene transitions are slow camera
+  pushes (scale 1 → 1.06 over the whole scene) and fades through black
+  (0.4s out, 0.4s in), never slides or wipes.
+
+## Avoid
+
+- Purple/blue gradient backgrounds, gradient orbs, neon glows on type.
+- More than one accent color; accent on headlines.
+- Bouncy eases on the product, spinning 3D, glassmorphism blur panels
+  floating everywhere.
+- Mono labels framing the shot; the frame is empty black.
+- Pure #000 field (kills the light falloff) and pure white slabs.
+
+## Scene recipes
+
+1. **Reveal:** eyebrow + two-line headline at top center, product slab
+   rises into the lower 60% with its reflection; the key metric counts up
+   while its chart draws; sheen passes; hold.
+2. **Detail push:** field-2 set. Camera pushes into one card of the UI
+   (scale 1 → 2.2 on the slab, transform-origin on the card, `expo.inOut`
+   1.6s); the card's accent state toggles; a 56px caption fades in bottom
+   center.
+3. **Spec line-up:** three large numbers in a row (Mona Sans 560, 120px), each
+   with a 22px muted caption, lit by the same key light; they blur-rise with
+   0.12s stagger and the key light slides left → right across them over 3s.

package/assets/motion/library/looks/dark-studio/meta.json

@@ -0,0 +1,11 @@
+{
+  "id": "dark-studio",
+  "name": "Dark Studio",
+  "description": "A near-black set lit by one soft key light from above. Product UI sits on a glass slab with a brushed-metal rim and a floor reflection; one cool ice-blue accent marks the single thing that matters. Wide, calm Mona Sans headlines. The Apple / Linear dark keynote launch.",
+  "tags": ["dark", "product", "launch", "keynote", "glass", "cinematic", "premium", "ui"],
+  "fonts": ["Mona Sans", "Martian Mono"],
+  "bestFor": ["product launches", "SaaS feature reveals", "app UI walkthroughs", "keynote openers", "developer platforms"],
+  "pieces": [],
+  "samplePieces": [],
+  "previewAt": 2.8
+}

package/assets/motion/library/looks/dark-studio/sample.html

@@ -0,0 +1,324 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="assets/fonts/fonts.css" />
+    <link rel="stylesheet" href="assets/looks/dark-studio.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);
+      }
+      /* Key light: one soft overhead source, falling off to black at the edges. */
+      .key {
+        position: absolute;
+        inset: 0;
+        background:
+          radial-gradient(ellipse 900px 620px at 50% -8%, rgba(196, 214, 240, 0.2), rgba(196, 214, 240, 0.05) 55%, transparent 80%),
+          radial-gradient(ellipse 1400px 500px at 50% 112%, rgba(124, 199, 255, 0.07), transparent 70%);
+      }
+      .floor {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 900px;
+        height: 1px;
+        background: linear-gradient(90deg, transparent, rgba(243, 245, 248, 0.12) 30%, rgba(243, 245, 248, 0.12) 70%, transparent);
+      }
+      .eyebrow {
+        position: absolute;
+        top: 100px;
+        width: 100%;
+        text-align: center;
+        font-size: 30px;
+        font-weight: 560;
+        font-stretch: 110%;
+        letter-spacing: -0.01em;
+        color: var(--accent);
+      }
+      .headline {
+        position: absolute;
+        top: 200px;
+        width: 100%;
+        text-align: center;
+        font-family: var(--display);
+        font-weight: var(--display-weight);
+        font-stretch: var(--display-stretch);
+        letter-spacing: var(--display-tracking);
+        font-size: 118px;
+        line-height: 1;
+        background: linear-gradient(180deg, #ffffff 30%, #9aa3ae 110%);
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+      }
+      .headline span {
+        display: inline-block;
+        line-height: 1.2;
+        padding: 0.1em 0.12em 0.16em;
+        margin: -0.2em -0.12em -0.16em;
+        background: inherit;
+        -webkit-background-clip: text;
+        background-clip: text;
+      }
+      .stage {
+        position: absolute;
+        left: 0;
+        top: 380px;
+        width: 1920px;
+        height: 700px;
+        perspective: 2200px;
+        perspective-origin: 50% 0%;
+      }
+      .reflection {
+        position: absolute;
+        left: 460px;
+        top: 470px;
+        width: 1000px;
+        height: 120px;
+        background: radial-gradient(ellipse at 50% 50%, rgba(124, 199, 255, 0.22), transparent 70%);
+        filter: blur(30px);
+      }
+      .slab {
+        position: absolute;
+        left: 320px;
+        top: 0;
+        width: 1280px;
+        height: 560px;
+        border-radius: var(--radius);
+        transform-origin: 50% 100%;
+        transform: rotateX(14deg);
+        background: linear-gradient(180deg, rgba(34, 38, 45, 0.96), rgba(16, 18, 22, 0.98));
+        box-shadow:
+          inset 0 1px 0 rgba(255, 255, 255, 0.22),
+          inset 0 0 0 1px rgba(255, 255, 255, 0.07),
+          0 60px 120px rgba(0, 0, 0, 0.7),
+          0 0 0 1px rgba(0, 0, 0, 0.9);
+        overflow: hidden;
+      }
+      .bar {
+        height: 56px;
+        border-bottom: 1px solid var(--line);
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding-left: 24px;
+      }
+      .bar i {
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        background: rgba(243, 245, 248, 0.16);
+      }
+      .side {
+        position: absolute;
+        left: 0;
+        top: 57px;
+        bottom: 0;
+        width: 260px;
+        border-right: 1px solid var(--line);
+        padding: 28px 24px;
+        box-sizing: border-box;
+      }
+      .side div {
+        height: 40px;
+        border-radius: 10px;
+        margin-bottom: 10px;
+        display: flex;
+        align-items: center;
+        padding-left: 16px;
+        font-size: 20px;
+        font-weight: 500;
+        color: var(--muted);
+      }
+      .side .on {
+        background: rgba(124, 199, 255, 0.12);
+        color: var(--ink);
+      }
+      .main {
+        position: absolute;
+        left: 300px;
+        top: 96px;
+        right: 48px;
+      }
+      .label {
+        font-size: 22px;
+        font-weight: 500;
+        color: var(--muted);
+      }
+      .big {
+        margin-top: 30px;
+        font-family: var(--display);
+        font-weight: 560;
+        font-stretch: 112%;
+        letter-spacing: -0.04em;
+        font-size: 112px;
+        line-height: 1;
+        font-variant-numeric: tabular-nums;
+      }
+      .big small {
+        font-size: 44px;
+        font-weight: 500;
+        color: var(--muted);
+        letter-spacing: -0.01em;
+        margin-left: 10px;
+      }
+      .delta {
+        margin-top: 16px;
+        font-size: 22px;
+        font-weight: 560;
+        color: var(--accent);
+      }
+      .chart {
+        position: absolute;
+        left: 740px;
+        top: 150px;
+      }
+      .rows {
+        position: absolute;
+        left: 300px;
+        right: 48px;
+        top: 376px;
+      }
+      .rows div {
+        display: flex;
+        align-items: center;
+        height: 52px;
+        border-top: 1px solid var(--line);
+        font-size: 20px;
+        color: var(--muted);
+      }
+      .rows b {
+        font-weight: 560;
+        color: var(--ink);
+        width: 360px;
+      }
+      .rows em {
+        font-style: normal;
+        margin-left: auto;
+        font-family: var(--mono);
+        font-size: 17px;
+      }
+      .rows i {
+        width: 9px;
+        height: 9px;
+        border-radius: 50%;
+        background: var(--accent);
+        margin-right: 18px;
+        box-shadow: 0 0 12px var(--accent);
+      }
+      .sheen {
+        position: absolute;
+        top: -20%;
+        left: 0;
+        width: 380px;
+        height: 140%;
+        background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.07) 45%, rgba(255, 255, 255, 0.11) 50%, transparent 60%);
+        transform: translateX(-500px) skewX(-12deg);
+        pointer-events: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      class="look-dark-studio"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="key" id="key"></div>
+      <div class="floor"></div>
+      <!-- edit: eyebrow -->
+      <div class="eyebrow" id="eyebrow">Introducing Relay 2</div>
+      <!-- edit: headline -->
+      <div class="headline" id="headline"><span>Every</span> <span>deploy,</span> <span>one</span> <span>view.</span></div>
+      <div class="stage">
+        <div class="reflection" id="reflection"></div>
+        <div class="slab" id="slab">
+          <div class="bar"><i></i><i></i><i></i></div>
+          <div class="side">
+            <div>Overview</div>
+            <div class="on">Deployments</div>
+            <div>Edge network</div>
+            <div>Logs</div>
+            <div>Settings</div>
+          </div>
+          <div class="main">
+            <div class="label">Median cold start</div>
+            <div class="big"><span id="ms">142</span><small>ms</small></div>
+            <div class="delta">38% faster than last release</div>
+          </div>
+          <svg class="chart" width="480" height="200" viewBox="0 0 480 200">
+            <defs>
+              <linearGradient id="area" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0" stop-color="#7cc7ff" stop-opacity="0.28" />
+                <stop offset="1" stop-color="#7cc7ff" stop-opacity="0" />
+              </linearGradient>
+              <clipPath id="reveal"><rect id="revealRect" x="0" y="0" width="480" height="200" /></clipPath>
+            </defs>
+            <g clip-path="url(#reveal)">
+              <path d="M0 40 C60 44 90 70 140 78 S230 96 270 120 S360 150 400 158 S450 164 480 166 L480 200 L0 200 Z" fill="url(#area)" />
+            </g>
+            <path id="line" d="M0 40 C60 44 90 70 140 78 S230 96 270 120 S360 150 400 158 S450 164 480 166" fill="none" stroke="var(--accent)" stroke-width="4" stroke-linecap="round" />
+            <circle id="dot" cx="480" cy="166" r="8" fill="var(--accent)" />
+          </svg>
+          <div class="rows">
+            <div><i></i><b>api-gateway</b>Production · eu-west<em>31s ago</em></div>
+            <div><i></i><b>checkout-web</b>Production · us-east<em>2m ago</em></div>
+            <div><i></i><b>search-indexer</b>Preview · ap-south<em>6m ago</em></div>
+          </div>
+          <div class="sheen" id="sheen"></div>
+        </div>
+      </div>
+    </div>
+    <script>
+      const tl = gsap.timeline({ paused: true });
+      const line = document.getElementById("line");
+      const len = line.getTotalLength();
+      gsap.set(line, { strokeDasharray: len, strokeDashoffset: len });
+      const ms = { v: 371 };
+
+      tl.from("#key", { opacity: 0, duration: 1.4, ease: "power2.inOut" }, 0)
+        .from("#eyebrow", { opacity: 0, y: 14, duration: 0.8, ease: "power3.out" }, 0.25)
+        .from(
+          "#headline span",
+          { opacity: 0, y: 44, filter: "blur(16px)", duration: 1.1, ease: "power3.out", stagger: 0.07 },
+          0.35,
+        )
+        .from("#slab", { y: 260, rotateX: 42, opacity: 0, duration: 1.8, ease: "expo.out" }, 0.7)
+        .from("#reflection", { opacity: 0, duration: 1.6, ease: "power2.out" }, 1.0)
+        .to(line, { strokeDashoffset: 0, duration: 1.3, ease: "power2.inOut" }, 1.4)
+        .from("#revealRect", { attr: { width: 0 }, duration: 1.3, ease: "power2.inOut" }, 1.4)
+        .from("#dot", { scale: 0, transformOrigin: "50% 50%", duration: 0.5, ease: "back.out(2)" }, 2.55)
+        .to(
+          ms,
+          {
+            v: 142,
+            duration: 1.3,
+            ease: "power2.inOut",
+            onUpdate: () => (document.getElementById("ms").textContent = Math.round(ms.v)),
+          },
+          1.4,
+        )
+        .to("#sheen", { x: 1700, duration: 1.4, ease: "power1.inOut" }, 1.9)
+        .to({}, { duration: 0.1 }, 3.9);
+      window.__timelines = { main: tl };
+    </script>
+  </body>
+</html>

package/assets/motion/library/looks/dark-studio/tokens.css

@@ -0,0 +1,16 @@
+/* Dark Studio: near-black set, one key light, glass and brushed metal, one cool accent. */
+.look-dark-studio {
+  --field: #08090b;
+  --field-2: #121418;
+  --ink: #f3f5f8;
+  --accent: #7cc7ff;
+  --muted: rgba(243, 245, 248, 0.56);
+  --line: rgba(243, 245, 248, 0.1);
+  --display: "Mona Sans", sans-serif;
+  --display-weight: 620;
+  --display-stretch: 108%;
+  --display-tracking: -0.045em;
+  --text: "Mona Sans", sans-serif;
+  --mono: "Martian Mono", monospace;
+  --radius: 28px;
+}

package/assets/motion/library/looks/data-desk/look.md

@@ -0,0 +1,19 @@
+# Data desk
+
+A readable research page in motion. Lead with the finding, then show the evidence that supports it.
+
+## System
+
+Sage paper and forest ink replace a glowing dashboard. Schibsted Grotesk carries the finding; Martian Mono carries units, tick labels and source notes. Use straight rules, square geometry and a 96px perimeter. Reserve the right two-thirds for the chart and the left third for a single takeaway. No decorative cards around every number.
+
+## Motion
+
+Draw axes before data. Reveal series over 1.2s with `power2.inOut`, then reveal the conclusion. Keep baselines fixed. Hold the complete plot for 2–3s. For comparisons, animate bars from zero with a common scale. Never use easing or cropping to exaggerate a result.
+
+## Scene recipes
+
+1. **Trend:** a single large change at left, an annotated line plot at right, source and period below. The sample uses explicitly illustrative indexed data.
+2. **Comparison:** `comparison-bars`, one emphasized category, a common zero baseline and visible units.
+3. **Composition:** `donut-fill` paired with a plain-language fraction and denominator. Follow with `stat-grid` only when the audience needs the additional metrics.
+
+Avoid invented factual claims, unlabeled axes, red/green-only distinctions, fake precision, giant dashboards and numbers counting forever. Replace sample values and source notes before publishing.

package/assets/motion/library/looks/data-desk/meta.json

@@ -0,0 +1,9 @@
+{
+  "id": "data-desk", "name": "Data desk",
+  "description": "Sage paper, forest ink and an editorial chart hierarchy. One large finding leads; axes, units and source notes make the evidence legible.",
+  "tags": ["data", "report", "sage", "chart", "analysis"],
+  "fonts": ["Schibsted Grotesk", "Martian Mono"],
+  "bestFor": ["research summaries", "quarterly reports", "data explainers"],
+  "pieces": ["sparkline-draw", "comparison-bars", "donut-fill", "stat-grid", "counter-number"],
+  "samplePieces": [], "previewAt": 3.2
+}

package/assets/motion/library/looks/data-desk/sample.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en"><head><meta charset="UTF-8"><link rel="stylesheet" href="assets/fonts/fonts.css"><link rel="stylesheet" href="assets/looks/data-desk.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);color:var(--ink);font-family:var(--text)}
+.header{position:absolute;left:96px;right:96px;top:72px;padding-bottom:28px;border-bottom:2px solid var(--ink);display:flex;justify-content:space-between;font:22px/1.4 var(--mono)}
+.finding{position:absolute;left:96px;top:250px;width:510px}h1{font:650 76px/1.08 var(--display);letter-spacing:var(--display-tracking);margin:0 0 52px}.value{font:650 144px/1 var(--display);letter-spacing:-.06em}.finding p{font-size:28px;line-height:1.5;color:var(--muted);max-width:440px}
+.chart{position:absolute;left:680px;top:230px;width:1140px;height:640px}.grid{stroke:var(--line);stroke-width:1.5}.axis{fill:var(--muted);font:20px var(--mono)}.trend{fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}.area{fill:var(--accent);opacity:.08}.point{fill:var(--accent)}.note{font:24px var(--mono);fill:var(--ink)}
+.footer{position:absolute;left:96px;right:96px;bottom:72px;border-top:2px solid var(--line);padding-top:24px;font:20px/1.5 var(--mono);color:var(--muted)}
+</style></head><body><div id="root" class="look-data-desk" data-composition-id="main" data-start="0" data-duration="5" data-width="1920" data-height="1080">
+<!-- edit: report title and finding; sample data is illustrative -->
+<div class="header"><span>FIELD REPORT / 04</span><span>INDEXED SERIES · JAN–JUN</span></div><section class="finding"><h1>A steadier<br>climb.</h1><div class="value">+28%</div><p>Growth from the same baseline, shown on the same scale.</p></section>
+<svg class="chart" viewBox="0 0 1140 640" aria-label="Illustrative index rising from 100 in January to 128 in June">
+<g class="grid"><path d="M80 80H1080 M80 220H1080 M80 360H1080 M80 500H1080"/></g>
+<g class="axis"><text x="0" y="88">130</text><text x="0" y="228">120</text><text x="0" y="368">110</text><text x="0" y="508">100</text><text x="80" y="565">JAN</text><text x="280" y="565">FEB</text><text x="480" y="565">MAR</text><text x="680" y="565">APR</text><text x="880" y="565">MAY</text><text x="1030" y="565">JUN</text></g>
+<path class="area" d="M80 500L280 458L480 360L680 304L880 206L1080 108V500Z"/><path class="trend" d="M80 500L280 458L480 360L680 304L880 206L1080 108"/><circle class="point" cx="1080" cy="108" r="10"/><text class="note" x="994" y="62">128</text></svg>
+<div class="footer">ILLUSTRATIVE DATA / Index: January = 100 / Replace with verified data and source.</div></div>
+<script>(()=>{const path=document.querySelector('.trend');const length=path.getTotalLength();const tl=gsap.timeline({paused:true});tl.from('.header',{opacity:0,duration:.35},0).from('.grid,.axis',{opacity:0,duration:.5},.2).fromTo(path,{strokeDasharray:length,strokeDashoffset:length},{strokeDashoffset:0,duration:1.5,ease:'power2.inOut'},.5).from('.area',{opacity:0,duration:.7},1.3).from('.point,.note',{opacity:0,duration:.3},1.8).from('.finding',{y:24,opacity:0,duration:.6},1.4).from('.footer',{opacity:0,duration:.4},2).to({},{duration:2.6});window.__timelines={main:tl};})();</script></body></html>

package/assets/motion/library/looks/data-desk/tokens.css

@@ -0,0 +1,15 @@
+.look-data-desk {
+  --field: #e8ede8;
+  --field-2: #183e35;
+  --ink: #182d27;
+  --accent: #25634d;
+  --muted: #526359;
+  --line: #b4c3b8;
+  --display: "Schibsted Grotesk", sans-serif;
+  --display-weight: 650;
+  --display-stretch: 100%;
+  --display-tracking: -0.04em;
+  --text: "Schibsted Grotesk", sans-serif;
+  --mono: "Martian Mono", monospace;
+  --radius: 0px;
+}

package/assets/motion/library/looks/duotone-broadcast/look.md

@@ -0,0 +1,53 @@
+# Duotone Broadcast
+
+Two colors do everything: a saturated **field** and a dark **ink**. Every
+element is ink on field (or field on ink after a flip). No third accent, no
+gradients as decoration.
+
+## Palette
+
+- `--field` saturated mid-tone (terracotta, cobalt, acid green, signal red);
+  `--ink` near-black navy or deep brown with enough contrast (≥ 7:1).
+- Scene changes flip the whole frame: field ↔ ink (`--field-2` is the ink
+  color used as a background). A flip is a hard cut or a fast wipe on the
+  downbeat, never a crossfade.
+- Swap the pair per brand: keep one saturated + one very dark.
+
+## Type
+
+- One huge display word per scene (Archivo 880 at 88% width, or Big
+  Shoulders 900). 200–320px, tracking −0.035em, tight line-height.
+- Everything else is Martian Mono labels, 20–24px, uppercase, +0.06em.
+- Nothing in between: the contrast between huge and tiny is the look.
+
+## Background and framing
+
+- Faint dot grid (`dot-grid-field`) plus a soft top-left light falloff so the
+  flat color reads as a lit surface.
+- Broadcast frame (`broadcast-frame`): four corner labels (section, timecode,
+  counter, spec), crop marks at the edges, one underline under the section
+  label. The labels change per scene; the frame stays.
+- The graphic *is* the content: a curve, a counter, a diagram that
+  demonstrates the word. No decorative blobs.
+
+## Motion
+
+- Words: masked rise (100% → 0) with `expo.out` 0.8–0.9s, plus a width
+  morph (62% → 88%) over 1.2s.
+- Diagrams draw themselves linearly over 1.5–2s with a live readout.
+- Labels update on cuts, not animated in.
+- Hold each composed frame 1.2s+ before the next move.
+
+## Avoid
+
+- More than two colors. Glows, gradients, glass, 3D.
+- Mono on the headline. Mixed-case display words.
+- Moving the frame labels.
+
+## Scene recipes
+
+1. **Concept card:** word left, live diagram right, labels in corners.
+2. **Stat slam:** one number fills the frame (Big Shoulders 900, 420px),
+   counter label bottom-left, field flips to ink on the next beat.
+3. **List beat:** three words stacked, each rising on successive beats,
+   the current one full ink, previous ones at `--muted`.

package/assets/motion/library/looks/duotone-broadcast/meta.json

@@ -0,0 +1,11 @@
+{
+  "id": "duotone-broadcast",
+  "name": "Duotone Broadcast",
+  "description": "One saturated color field and one dark ink. A huge condensed word, tiny mono labels in the corners, crop marks and a faint dot grid, like a broadcast graphics package. Scenes change by flipping the whole field color.",
+  "tags": ["two-color", "bold", "editorial", "kinetic-type", "showreel", "flat", "swiss"],
+  "fonts": ["Archivo", "Martian Mono"],
+  "bestFor": ["showreels", "dev tools", "explainers", "launch teasers", "concept videos"],
+  "pieces": ["broadcast-frame", "dot-grid-field", "slam-word", "ease-curve"],
+  "samplePieces": ["dot-grid-field", "slam-word", "ease-curve", "broadcast-frame"],
+  "previewAt": 2.2
+}

package/assets/motion/library/looks/duotone-broadcast/sample.html

@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="assets/fonts/fonts.css" />
+    <link rel="stylesheet" href="assets/looks/duotone-broadcast.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);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      class="look-duotone-broadcast"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="bg" data-composition-id="dot-grid-field" data-composition-src="compositions/dot-grid-field.html" data-start="0" data-duration="4" data-width="1920" data-height="1080" data-track-index="0"></div>
+      <div id="word" data-composition-id="slam-word" data-composition-src="compositions/slam-word.html" data-start="0" data-duration="3" data-width="1920" data-height="1080" data-track-index="1"></div>
+      <div id="curve" data-composition-id="ease-curve" data-composition-src="compositions/ease-curve.html" data-start="0" data-duration="4" data-width="1920" data-height="1080" data-track-index="2"></div>
+      <div id="frame" data-composition-id="broadcast-frame" data-composition-src="compositions/broadcast-frame.html" data-start="0" data-duration="4" data-width="1920" data-height="1080" data-track-index="3"></div>
+    </div>
+    <script>
+      const tl = gsap.timeline({ paused: true });
+      tl.to({}, { duration: 4 });
+      window.__timelines = { main: tl };
+    </script>
+  </body>
+</html>

package/assets/motion/library/looks/duotone-broadcast/tokens.css

@@ -0,0 +1,16 @@
+/* Duotone Broadcast: one saturated field, one dark ink, broadcast framing. */
+.look-duotone-broadcast {
+  --field: #d9774f;
+  --field-2: #0f1e3d;
+  --ink: #0f1e3d;
+  --accent: #0f1e3d;
+  --muted: rgba(15, 30, 61, 0.9);
+  --line: rgba(15, 30, 61, 0.22);
+  --display: "Archivo", sans-serif;
+  --display-weight: 880;
+  --display-stretch: 88%;
+  --display-tracking: -0.035em;
+  --text: "Archivo", sans-serif;
+  --mono: "Martian Mono", monospace;
+  --radius: 0px;
+}