@prestyj/cli 5.27.0 → 5.28.0

package/assets/motion/library/looks/swiss-grid/look.md

@@ -0,0 +1,81 @@
+# Swiss Grid
+
+International Typographic Style, moving. A white **field**, black **ink** and
+one signal-red **accent** on a strict 12-column grid that stays faintly
+visible. Numbers are the heroes and are set enormous; text is flush-left,
+ragged-right and aligned to column edges to the pixel. Objectivity is the
+aesthetic: no decoration that isn't structure.
+
+## Palette
+
+- `--field` pure #ffffff, `--ink` #0b0b0b (20:1). `--accent` #e8261c signal
+  red, used on at most two things per frame: the unit/percent of the hero
+  number and one bar/rule/block. Red is never used for body text below 40px.
+- `--field-2` is the red itself: a scene can cut to a full red field with
+  white type (white on #e8261c is 4.6:1, so only 120px+ display type there).
+- `--line` (12% ink) draws the column edges; `--muted` (58%) for secondary
+  header text and axis labels.
+
+## Grid
+
+- 1920×1080: 96px outer margins, 12 columns of 122px, 24px gutters. Column n
+  starts at `96 + 146 × (n − 1)`. Every left edge of every element sits on a
+  column start; nothing is centered.
+- Top: a 3px ink rule across all 12 columns at y=96, with a header row under
+  it (24px, two lines each) at columns 1, 5 and 9.
+- Bottom baseline at y=984. The hero number and the last row of any chart
+  share this baseline.
+- Leave the column hairlines visible at 12% the whole video: the grid is
+  part of the picture.
+
+## Type
+
+- Display: Schibsted Grotesk 800, tracking −0.055em. Hero numbers 600–780px
+  with line-height 0.74 so they sit on the baseline; the unit (%, ×, k) in
+  red at one third of the size, top-aligned to the cap height.
+- Statements: Schibsted Grotesk 700, 56–68px, line-height 1.02, tracking
+  −0.035em, 3–4 lines max, each line a deliberate break (no auto-wrap).
+- Header and labels: Schibsted 500/700 at 22–26px, sentence case, never
+  uppercase-tracked, never mono. Martian Mono is only for raw data tables.
+
+## Background and framing
+
+- Flat white. No texture, no light falloff, no shadow, no rounded corners.
+- The only graphic devices: rules (3px ink, 18px red), solid bars, and the
+  grid. Charts are horizontal bars with the year label in column 9 and bars
+  starting on column 10.
+
+## Motion
+
+- Mechanical and exact. Grid columns grow in top → down (`scaleY`,
+  `power4.inOut` 0.9s, stagger 0.04s) and the top rule wipes left → right
+  (`power4.inOut` 0.8s) before content arrives.
+- Numbers: count up with `power4.out` 1.4s while rising 18% into place.
+- Text lines: masked line reveals (`yPercent` 105 → 0, `power4.out` 0.7s,
+  stagger 0.08s). Bars grow from their left edge (`power4.inOut` 0.7s,
+  stagger 0.1s), values snap on without fading.
+- Hold 1.5s. Transitions are hard cuts on the beat, or a red block wiping the
+  full frame on a column-by-column stagger (12 bars, `power4.inOut` 0.5s,
+  stagger 0.03s) into the next scene.
+
+## Avoid
+
+- Centered compositions, drop shadows, rounded corners, gradients.
+- More than one accent color; red body text; red and black bars of equal
+  weight.
+- Mono labels, uppercase letterspaced captions, "01/02/03" decorative
+  numbering.
+- Elements that sit between columns; ragged spacing between rows.
+- Springy or elastic eases.
+
+## Scene recipes
+
+1. **Stat slam:** hero number in columns 1–7 on the baseline, red unit,
+   statement in columns 9–12 under an 18px red block, bar chart below it
+   ending on the baseline.
+2. **Red cut:** field flips to `--field-2` red; one 3-line statement in white
+   Schibsted 800 at 150px in columns 1–10, top-left aligned at y=240; the
+   column hairlines stay (white at 20%).
+3. **Comparison table:** four rows spanning columns 1–12, each row a 3px
+   top rule, name in columns 1–4 (56px 700), value in columns 9–12 right
+   of a bar; rows reveal on a 0.12s stagger, the winning row in red.

package/assets/motion/library/looks/swiss-grid/meta.json

@@ -0,0 +1,11 @@
+{
+  "id": "swiss-grid",
+  "name": "Swiss Grid",
+  "description": "International Typographic Style in motion: a white field, black ink and one signal red on a strict, visible 12-column grid. Huge numbers set in heavy Schibsted Grotesk, flush-left ragged-right text, everything snapping to column edges with mechanical, precise moves.",
+  "tags": ["swiss", "grid", "minimal", "typographic", "white", "red", "data", "editorial"],
+  "fonts": ["Schibsted Grotesk", "Martian Mono"],
+  "bestFor": ["annual reports", "statistics", "design-led brands", "explainers with numbers", "architecture and agencies"],
+  "pieces": [],
+  "samplePieces": [],
+  "previewAt": 2.6
+}

package/assets/motion/library/looks/swiss-grid/sample.html

@@ -0,0 +1,209 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="assets/fonts/fonts.css" />
+    <link rel="stylesheet" href="assets/looks/swiss-grid.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;
+      }
+      /* Grid: 12 columns, 96px margins, 24px gutters, 122px columns. Column n starts at 96 + 146 * (n - 1). */
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        background: var(--field);
+        overflow: hidden;
+        font-family: var(--text);
+        color: var(--ink);
+      }
+      .col {
+        position: absolute;
+        top: 0;
+        width: 122px;
+        height: 1080px;
+        border-left: 1px solid var(--line);
+        border-right: 1px solid var(--line);
+        box-sizing: border-box;
+        transform-origin: 50% 0;
+      }
+      .rule {
+        position: absolute;
+        left: 96px;
+        top: 96px;
+        width: 1728px;
+        height: 3px;
+        background: var(--ink);
+        transform-origin: 0 50%;
+      }
+      .head {
+        position: absolute;
+        top: 120px;
+        font-size: 24px;
+        line-height: 1.25;
+        font-weight: 500;
+        letter-spacing: -0.005em;
+      }
+      .head b {
+        font-weight: 700;
+      }
+      .head.m {
+        color: var(--muted);
+      }
+      .num {
+        position: absolute;
+        left: 72px;
+        bottom: 128px;
+        display: flex;
+        align-items: flex-start;
+        font-family: var(--display);
+        font-weight: var(--display-weight);
+        letter-spacing: var(--display-tracking);
+        font-size: 760px;
+        line-height: 0.74;
+        font-variant-numeric: tabular-nums;
+      }
+      .num .pct {
+        font-size: 250px;
+        line-height: 0.74;
+        color: var(--accent);
+        margin-left: 20px;
+        letter-spacing: -0.04em;
+      }
+      .block {
+        position: absolute;
+        left: 1264px;
+        top: 360px;
+        width: 560px;
+        height: 18px;
+        background: var(--accent);
+        transform-origin: 0 50%;
+      }
+      .copy {
+        position: absolute;
+        left: 1264px;
+        top: 406px;
+        width: 560px;
+        font-size: 62px;
+        line-height: 1.02;
+        font-weight: 700;
+        letter-spacing: -0.035em;
+      }
+      .copy span {
+        display: block;
+        overflow: hidden;
+      }
+      .copy span i {
+        display: block;
+        font-style: normal;
+      }
+      .bars {
+        position: absolute;
+        left: 1264px;
+        top: 758px;
+        width: 560px;
+      }
+      .row {
+        position: relative;
+        height: 45px;
+        border-top: 1px solid var(--line);
+        font-size: 22px;
+        font-weight: 500;
+        display: flex;
+        align-items: center;
+      }
+      .row .y {
+        width: 146px;
+        color: var(--muted);
+        font-variant-numeric: tabular-nums;
+      }
+      .row .b {
+        height: 18px;
+        background: var(--ink);
+        transform-origin: 0 50%;
+      }
+      .row .v {
+        margin-left: 12px;
+        font-weight: 700;
+        font-variant-numeric: tabular-nums;
+      }
+      .row.now .b {
+        background: var(--accent);
+      }
+      .row.now .y,
+      .row.now .v {
+        color: var(--accent);
+        font-weight: 700;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      class="look-swiss-grid"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="grid"></div>
+      <div class="rule" id="rule"></div>
+      <!-- edit: header line, one item per column group -->
+      <div class="head" style="left: 96px"><b>Release cadence</b><br />State of Shipping 2026</div>
+      <div class="head m" style="left: 680px">Survey of 4,210<br />product teams</div>
+      <div class="head m" style="left: 1264px">Share shipping to<br />production weekly</div>
+      <div class="num" id="num"><span id="n">87</span><span class="pct">%</span></div>
+      <div class="block" id="block"></div>
+      <!-- edit: statement -->
+      <div class="copy" id="copy">
+        <span><i>of product teams</i></span>
+        <span><i>now ship to users</i></span>
+        <span><i>every single week.</i></span>
+      </div>
+      <div class="bars" id="bars">
+        <div class="row"><span class="y">2022</span><span class="b" style="width: 150px"></span><span class="v">36</span></div>
+        <div class="row"><span class="y">2023</span><span class="b" style="width: 200px"></span><span class="v">48</span></div>
+        <div class="row"><span class="y">2024</span><span class="b" style="width: 262px"></span><span class="v">63</span></div>
+        <div class="row"><span class="y">2025</span><span class="b" style="width: 308px"></span><span class="v">74</span></div>
+        <div class="row now"><span class="y">2026</span><span class="b" style="width: 362px"></span><span class="v">87</span></div>
+      </div>
+    </div>
+    <script>
+      const grid = document.getElementById("grid");
+      for (let i = 0; i < 12; i++) {
+        const c = document.createElement("div");
+        c.className = "col";
+        c.style.left = 96 + 146 * i + "px";
+        grid.appendChild(c);
+      }
+      const tl = gsap.timeline({ paused: true });
+      const count = { v: 0 };
+      const n = document.getElementById("n");
+
+      tl.from(".col", { scaleY: 0, duration: 0.9, ease: "power4.inOut", stagger: 0.04 }, 0)
+        .from("#rule", { scaleX: 0, duration: 0.8, ease: "power4.inOut" }, 0.2)
+        .from(".head", { opacity: 0, y: 12, duration: 0.5, ease: "power3.out", stagger: 0.08 }, 0.6)
+        .from("#num", { yPercent: 18, opacity: 0, duration: 0.9, ease: "power4.out" }, 0.55)
+        .fromTo(
+          count,
+          { v: 0 },
+          { v: 87, duration: 1.4, ease: "power4.out", onUpdate: () => (n.textContent = Math.round(count.v)) },
+          0.55,
+        )
+        .from("#block", { scaleX: 0, duration: 0.6, ease: "power4.inOut" }, 1.0)
+        .from("#copy i", { yPercent: 105, duration: 0.7, ease: "power4.out", stagger: 0.08 }, 1.15)
+        .from(".row", { opacity: 0, duration: 0.01, stagger: 0.1 }, 1.5)
+        .from(".row .b", { scaleX: 0, duration: 0.7, ease: "power4.inOut", stagger: 0.1 }, 1.5)
+        .from(".row .v", { opacity: 0, duration: 0.3, stagger: 0.1 }, 1.9)
+        .to({}, { duration: 0.1 }, 3.9);
+      window.__timelines = { main: tl };
+    </script>
+  </body>
+</html>

package/assets/motion/library/looks/swiss-grid/tokens.css

@@ -0,0 +1,16 @@
+/* Swiss Grid: white field, black ink, one signal red, a strict 12-column grid. */
+.look-swiss-grid {
+  --field: #ffffff;
+  --field-2: #e8261c;
+  --ink: #0b0b0b;
+  --accent: #e8261c;
+  --muted: rgba(11, 11, 11, 0.58);
+  --line: rgba(11, 11, 11, 0.12);
+  --display: "Schibsted Grotesk", sans-serif;
+  --display-weight: 800;
+  --display-stretch: 100%;
+  --display-tracking: -0.055em;
+  --text: "Schibsted Grotesk", sans-serif;
+  --mono: "Martian Mono", monospace;
+  --radius: 0px;
+}

package/assets/motion/library/looks/terminal-phosphor/look.md

@@ -0,0 +1,77 @@
+# Terminal Phosphor
+
+A phosphor CRT in a dark room. Near-black glass, green phosphor type with a
+soft bloom, fine scanlines and a curved-glass vignette. Commands type out
+character by character; results land as huge **Doto** dot-matrix readouts.
+**Amber** is the one alert: the win, the warning, the number you want
+remembered. Everything feels like it is being printed by a machine, live.
+
+## Palette
+
+- `--field` #050805 (green-black glass), `--field-2` #0a110b for a second
+  "window" or a split pane.
+- `--ink` #8dff9a phosphor green (16:1 on field). Commands, check marks and
+  readouts are full ink; program output is `--muted` (56%).
+- `--accent` #ffb338 amber, one line per scene (▲ improvement, ! warning).
+  An amber-only variant is valid: set `--ink` to #ffb338 and `--accent` to
+  #8dff9a, never both at full weight in equal amounts.
+- Bloom: `text-shadow: 0 0 6px ink@55%, 0 0 22px ink@22%` on all type,
+  `0 0 12px @70%, 0 0 60px @35%` on the Doto readout.
+
+## Type
+
+- Readouts: Doto 900, `"ROND" 100` (round dots), 300–380px, tracking −0.02em.
+  Integers only (Doto's decimal point and punctuation look like crosses at
+  display sizes): show 840 ms, not 0.84 s. Unit in Doto at 60% size, muted.
+- Everything else: Martian Mono 400, 26–32px, line-height 1.8. The prompt
+  line is full ink; output lines are muted with an ink ✓.
+- Column-aligned output: pad values with spaces so numbers right-align, as
+  a real CLI would.
+- No proportional fonts anywhere. No uppercase except in real command
+  output.
+
+## Background and framing
+
+- Center screen glow: a radial at 7% ink, 1300×900px.
+- Scanlines: `repeating-linear-gradient(180deg, transparent 0 2px,
+  rgba(0,0,0,.34) 2px 4px)` over everything, including type.
+- Curved-glass vignette: radial to 85% black at the corners.
+- Layout like a real terminal: text flush-left at x=140, top at y=128.
+  Readouts bottom-left, supporting stats to their right on the same
+  baseline region. No windows chrome, no fake macOS title bar.
+
+## Motion
+
+- Typing: width from `0ch` to `Nch` with `ease: "steps(N)"` — 30–40 chars
+  per second for the human-typed prompt, a single fast 0.16s sweep per
+  output line (machines print, humans type). Lines land 0.2–0.25s apart.
+- Numbers: count with `steps(20)` so they tick, not glide.
+- Readout lands with a CRT flicker: opacity 0.2 ↔ 1, 0.06s, `repeat: 4`,
+  `yoyo` (even repeat count so it ends lit).
+- Progress bars are block characters (█ ░) rebuilt from the tween's
+  `onUpdate`, `steps(20)`.
+- Cursor blink is a finite `repeat` on the timeline, never a CSS
+  `infinite` animation.
+- Transitions: a hard cut to black for 2 frames, or `clear` — all lines drop
+  out at once and the prompt starts again at the top. No crossfades.
+
+## Avoid
+
+- Proportional fonts, rounded windows, macOS traffic lights.
+- Matrix rain, glitch RGB split, heavy chromatic aberration.
+- More than one amber line per scene; green and amber in equal amounts.
+- Smooth `power` eases on type or numbers: everything steps.
+- Decimal points in the Doto readout.
+
+## Scene recipes
+
+1. **Deploy run:** prompt types, four output lines print, the total time
+   ticks up in a huge Doto readout, amber improvement line and a block
+   progress bar beside it.
+2. **Benchmark duel:** two Doto readouts stacked (ours ink, theirs muted),
+   each with a block bar under it filling at their real ratio; the amber
+   line "▲ 3.1× faster" prints last.
+3. **Changelog scroll:** a `git log --oneline` list prints line by line,
+   then the whole block scrolls up in `steps(12)` as new lines arrive; one
+   line highlights in amber and its hash becomes the next scene's Doto
+   readout.

package/assets/motion/library/looks/terminal-phosphor/meta.json

@@ -0,0 +1,11 @@
+{
+  "id": "terminal-phosphor",
+  "name": "Terminal Phosphor",
+  "description": "A phosphor CRT in a dark room: near-black glass, green phosphor type with a soft bloom, fine scanlines and a curved-glass vignette. Commands type out character by character in Martian Mono; results land as huge Doto dot-matrix readouts. Amber is reserved for the one alert or win.",
+  "tags": ["terminal", "cli", "developer", "retro", "dot-matrix", "mono", "dark", "green"],
+  "fonts": ["Doto", "Martian Mono"],
+  "bestFor": ["developer tools", "CLI launches", "benchmarks", "infrastructure", "hacker aesthetics", "changelogs"],
+  "pieces": [],
+  "samplePieces": [],
+  "previewAt": 3.4
+}

package/assets/motion/library/looks/terminal-phosphor/sample.html

@@ -0,0 +1,182 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="assets/fonts/fonts.css" />
+    <link rel="stylesheet" href="assets/looks/terminal-phosphor.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(--mono);
+        color: var(--ink);
+        text-shadow: 0 0 6px rgba(141, 255, 154, 0.55), 0 0 22px rgba(141, 255, 154, 0.22);
+      }
+      /* Screen glow in the middle, curved-glass falloff at the corners. */
+      .glass {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(ellipse 1300px 900px at 50% 48%, rgba(141, 255, 154, 0.07), transparent 70%);
+      }
+      /* Scanlines and curved-glass vignette sit over everything as one pseudo-layer. */
+      #root::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
+        background:
+          radial-gradient(ellipse 1150px 760px at 50% 50%, transparent 62%, rgba(0, 0, 0, 0.85) 100%),
+          repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, 0.34) 2px 4px);
+      }
+      .term {
+        position: absolute;
+        left: 140px;
+        top: 128px;
+        font-size: 30px;
+        line-height: 54px;
+        font-weight: 400;
+      }
+      .ln {
+        display: block;
+        white-space: pre;
+        overflow: hidden;
+        width: 0ch;
+      }
+      .ln.out {
+        color: var(--muted);
+      }
+      .ln .ok {
+        color: var(--ink);
+      }
+      .cursor {
+        display: inline-block;
+        width: 0.62em;
+        height: 1em;
+        background: var(--ink);
+        vertical-align: -0.12em;
+        box-shadow: 0 0 10px rgba(141, 255, 154, 0.6);
+      }
+      .label {
+        position: absolute;
+        left: 124px;
+        top: 496px;
+        font-size: 26px;
+        color: var(--muted);
+      }
+      .readout {
+        position: absolute;
+        left: 120px;
+        top: 590px;
+        font-family: var(--display);
+        font-weight: var(--display-weight);
+        letter-spacing: var(--display-tracking);
+        font-variation-settings: "ROND" 100;
+        font-size: 360px;
+        line-height: 1;
+        text-shadow: 0 0 12px rgba(141, 255, 154, 0.7), 0 0 60px rgba(141, 255, 154, 0.35);
+      }
+      .readout small {
+        font-size: 220px;
+        color: var(--muted);
+      }
+      .side {
+        position: absolute;
+        left: 1180px;
+        top: 700px;
+        width: 620px;
+        font-size: 28px;
+        line-height: 50px;
+      }
+      .side .alert {
+        color: var(--accent);
+        text-shadow: 0 0 8px rgba(255, 179, 56, 0.6), 0 0 26px rgba(255, 179, 56, 0.25);
+      }
+      .bar {
+        margin-top: 10px;
+        color: var(--muted);
+        white-space: pre;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      class="look-terminal-phosphor"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="glass"></div>
+      <!-- edit: command and log lines (keep data-n = character count) -->
+      <div class="term">
+        <span class="ln" data-n="31">~/relay $ gg deploy --prod</span>
+        <span class="ln out" data-n="34"><span class="ok">✓</span> resolved 214 packages      12ms</span>
+        <span class="ln out" data-n="34"><span class="ok">✓</span> compiled 1,208 modules    410ms</span>
+        <span class="ln out" data-n="34"><span class="ok">✓</span> pushed to 38 edge regions 302ms</span>
+        <span class="ln out" data-n="34"><span class="ok">✓</span> live at relay.dev         116ms</span>
+      </div>
+      <div class="label" id="label">total deploy time</div>
+      <div class="readout" id="readout"><span id="t">840</span><small>ms</small></div>
+      <div class="side" id="side">
+        <div class="alert">▲ 3.1× faster than v1</div>
+        <div>p99 cold start 142ms</div>
+        <div class="bar" id="bar">████████████████████ 100%</div>
+      </div>
+    </div>
+    <script>
+      const tl = gsap.timeline({ paused: true });
+      const lines = gsap.utils.toArray(".ln");
+      const cursor = document.createElement("span");
+      cursor.className = "cursor";
+
+      // Prompt types out; each log line then prints in one fast sweep.
+      tl.fromTo(lines[0], { width: "0ch" }, { width: "31ch", duration: 0.75, ease: "steps(26)" }, 0.15);
+      lines.slice(1).forEach((l, i) => {
+        tl.fromTo(l, { width: "0ch" }, { width: "34ch", duration: 0.16, ease: "steps(34)" }, 1.0 + i * 0.22);
+      });
+      const t = { v: 0 };
+      const tEl = document.getElementById("t");
+      tl.fromTo(
+        t,
+        { v: 0 },
+        { v: 840, duration: 1.0, ease: "steps(21)", onUpdate: () => (tEl.textContent = String(Math.round(t.v)).padStart(3, "0")) },
+        1.0,
+      );
+      tl.from("#label, #readout", { opacity: 0, duration: 0.05 }, 1.0)
+        .fromTo("#readout", { opacity: 0.2 }, { opacity: 1, duration: 0.06, repeat: 4, yoyo: true, ease: "none" }, 2.0)
+        .from("#side > div", { opacity: 0, duration: 0.05, stagger: 0.18 }, 2.2);
+      const bar = document.getElementById("bar");
+      const b = { v: 0 };
+      tl.fromTo(
+        b,
+        { v: 0 },
+        {
+          v: 20,
+          duration: 0.8,
+          ease: "steps(20)",
+          onUpdate: () => {
+            const n = Math.round(b.v);
+            bar.textContent = "█".repeat(n) + "░".repeat(20 - n) + " " + String(n * 5).padStart(3, " ") + "%";
+          },
+        },
+        2.55,
+      );
+      tl.to({}, { duration: 0.1 }, 3.9);
+      window.__timelines = { main: tl };
+    </script>
+  </body>
+</html>

package/assets/motion/library/looks/terminal-phosphor/tokens.css

@@ -0,0 +1,16 @@
+/* Terminal Phosphor: a CRT in a dark room. Phosphor green, amber for alerts, dot-matrix readouts. */
+.look-terminal-phosphor {
+  --field: #050805;
+  --field-2: #0a110b;
+  --ink: #8dff9a;
+  --accent: #ffb338;
+  --muted: rgba(141, 255, 154, 0.56);
+  --line: rgba(141, 255, 154, 0.16);
+  --display: "Doto", monospace;
+  --display-weight: 900;
+  --display-stretch: 100%;
+  --display-tracking: -0.02em;
+  --text: "Martian Mono", monospace;
+  --mono: "Martian Mono", monospace;
+  --radius: 0px;
+}

package/assets/motion/library/pieces/animated-beam/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Magic UI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/assets/motion/library/pieces/animated-beam/meta.json

@@ -0,0 +1,16 @@
+{
+  "id": "animated-beam",
+  "name": "Animated beam",
+  "kind": "diagram",
+  "description": "Icon nodes on the left send curved gradient beams into a central accent hub, which beams out to nodes on the right. Nodes pop in, faint base paths draw on, then light sweeps along each connection on a staggered expo-out loop. Use for integrations, 'connects everything', data flowing through a product. Edit INPUTS / OUTPUTS / HUB.",
+  "tags": ["beam", "integrations", "hub", "connections", "flow", "icons", "gradient", "launch", "magic-ui"],
+  "fonts": [],
+  "duration": 6,
+  "previewAt": 3.6,
+  "license": "MIT",
+  "source": {
+    "url": "https://github.com/magicuidesign/magicui/blob/main/apps/www/registry/magicui/animated-beam.tsx",
+    "author": "Magic UI"
+  },
+  "previewLook": "soft-light-ad"
+}