designlang 12.14.0 → 12.15.0

package/.engram/journal.jsonl

@@ -0,0 +1,4 @@
+{"id":"91120f2f-f7dd-4f82-babc-872679767041","ts":"2026-05-19T11:38:28.727Z","primitive":"grep","args":{"pattern":"extractDesignTokens|extractTokens","maxHits":10},"resultHash":"6568b2f5d95056ac","resultPreview":"{\"filesScanned\":630,\"hits\":[{\"col\":17,\"context\":{\"after\":[\"  const styles = Array.isArray(computedStyles) ? computedStyles : [];\",\"  const out = [];\"],\"before\":[\"}\",\"\"]},\"file\":\"src/extractors/token-sources.js\",\"line\":15,\"text\":\"export func…(+1857B)","durationMs":122,"cwd":"/Users/manavaryasingh/claude-plugin/design-extract","sessionId":"e6c0f3b7-28e9-43de-9ddb-663ccc114b54"}
+{"id":"29c684ad-10b0-4237-864d-88c173ed1e19","ts":"2026-05-19T11:38:28.988Z","primitive":"grep","args":{"pattern":"function extract","glob":"src/**/*.js","maxHits":12},"resultHash":"0687bb87846d66c3","resultPreview":"{\"filesScanned\":16,\"hits\":[{\"col\":8,\"context\":{\"after\":[\"  const pairs = new Map(); // \\\"fg|bg\\\" -> { fg, bg, count, elements }\",\"\"],\"before\":[\"}\",\"\"]},\"file\":\"src/extractors/accessibility.js\",\"line\":68,\"text\":\"export function extractAccess…(+2720B)","durationMs":3,"cwd":"/Users/manavaryasingh/claude-plugin/design-extract","sessionId":"be26c820-dafd-49d3-a8e5-4be67c6894bb"}
+{"id":"416eb4b6-abbb-43c4-9aaa-5add1632fdb8","ts":"2026-05-19T11:38:29.283Z","primitive":"ast","args":{"file":"src/formatters/brand-book.js","query":{"kind":"functions"}},"resultHash":"8510afa550a235cf","resultPreview":"{\"file\":\"src/formatters/brand-book.js\",\"query\":{\"kind\":\"functions\"},\"symbols\":[{\"endLine\":22,\"exported\":false,\"kind\":\"function\",\"line\":20,\"name\":\"esc\",\"signature\":\"function esc(s)\"},{\"endLine\":26,\"exported\":false,\"kind\":\"function\",\"line\":24…(+3575B)","durationMs":20,"cwd":"/Users/manavaryasingh/claude-plugin/design-extract","sessionId":"2e62b948-1427-4991-8806-8c6465fb04f4"}
+{"id":"fdd1592a-fea3-420b-a787-02affefe5081","ts":"2026-05-19T11:38:29.555Z","primitive":"grep","args":{"pattern":"function","maxHits":50},"resultHash":"111a7bd4e85eff05","resultPreview":"{\"filesScanned\":71,\"hits\":[{\"col\":49,\"context\":{\"after\":[\"- **`src/extractors/responsive-screenshots.js`** — full-page PNGs at mobile / tablet / desktop / wide × (light, dark). Writes to `screenshots/responsive/<breakpoint>-<scheme>.png` wi…(+18380B)","durationMs":9,"cwd":"/Users/manavaryasingh/claude-plugin/design-extract","sessionId":"0c657ec8-c6c5-424f-bfe9-91e3ec5d5e82"}

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # Changelog
 
+## [12.15.0] — 2026-05-21
+
+**motionlang — motion becomes a first-class extractable + shippable artefact.**
+
+The motion extractor already captured durations, easings and keyframes,
+but they only landed as a flat `motion-tokens.json` nobody opened. This
+release turns extracted motion into something you can see, ship and
+hand to a framework.
+
+- **Motion Lab (`<host>-motion.html`)** — a self-contained, dependency-free
+  interactive page. Every extracted easing curve is drawn as a real
+  cubic-Bezier path with a dot riding it at that exact timing function;
+  every duration shown as a pulsing bar timed to its real `ms`; every
+  `@keyframes` block replayed. Open it in any browser.
+
+- **Framer Motion presets (`<host>-motion.framer.js`)** — ready-to-import
+  `easings` (cubic-bezier arrays ranked by on-page frequency), `durations`
+  (seconds), `transitions` (`base` / `fast` / `slow` / `spring`) and
+  `variants` (`fade` / `slideUp` / `scaleIn` / `stagger`) — all wired to
+  the extracted timing. Framer Motion is the dominant React animation
+  library, so this is the highest-leverage motion emitter.
+
+- **Website Motion Lab** — every `/gallery/[slug]` brand page now renders
+  an interactive Motion Lab section: easing curves drawn in the extracted
+  brand colour, dots riding tracks, play/pause, and a link to the full
+  standalone page.
+
+- **Mobile navbar fix** — the hamburger and Install CTA no longer squish
+  together below 640px.
+
+Both emitters are exposed through the public `designlang/api` as the
+`motion-lab` and `framer-motion` renderer ids (plus `agent-prompt`).
+
 ## [12.14.0] — 2026-05-17
 
 **Real downloadable PDFs everywhere + a one-shot agent prompt every AI can paste.**

package/bin/design-extract.js

@@ -27,6 +27,8 @@ import { formatTsDefs } from '../src/formatters/ts-defs.js';
 import { formatCssReset } from '../src/formatters/css-reset.js';
 import { formatGradientsCss, formatGradientsJson } from '../src/formatters/gradients.js';
 import { formatAgentPrompt } from '../src/formatters/agent-prompt.js';
+import { formatMotionLab } from '../src/formatters/motion-lab.js';
+import { formatFramerMotion } from '../src/formatters/framer-motion.js';
 import { formatCssVars } from '../src/formatters/css-vars.js';
 import { formatPreview } from '../src/formatters/preview.js';
 import { formatFigma } from '../src/formatters/figma.js';
@@ -351,6 +353,8 @@ program
         { name: `${prefix}-gradients.css`,      content: formatGradientsCss(design), label: 'Extracted gradients (utility classes)' },
         { name: `${prefix}-gradients.json`,     content: formatGradientsJson(design), label: 'Extracted gradients (structured)' },
         { name: `${prefix}-AGENT.md`,           content: formatAgentPrompt(design), label: 'Agent system prompt (paste into Claude/GPT/Cursor)' },
+        { name: `${prefix}-motion.html`,        content: formatMotionLab(design),   label: 'Motion lab (interactive easing/duration/keyframe page)' },
+        { name: `${prefix}-motion.framer.js`,   content: formatFramerMotion(design), label: 'Framer Motion presets (transitions + variants)' },
         { name: `${prefix}-variables.css`, content: formatCssVars(design), label: 'CSS Variables' },
         { name: `${prefix}-preview.html`, content: formatPreview(design), label: 'Visual Preview' },
         { name: `${prefix}-figma-variables.json`, content: formatFigma(design), label: 'Figma Variables' },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "designlang",
-  "version": "12.14.0",
+  "version": "12.15.0",
   "description": "Extract the complete design language from any website and ship it — clone to a working Next.js starter, guard tokens with a CI drift bot, or browse everything in a local studio. Outputs W3C DTCG tokens, motion tokens, typed anatomy stubs, Tailwind config, and ready-to-paste v0 / Lovable / Cursor / Claude-Artifacts prompts.",
   "type": "module",
   "bin": {

package/src/api.js

@@ -36,6 +36,9 @@ import { formatBrandBook }       from './formatters/brand-book.js';
 import { formatGradientsCss,
          formatGradientsJson }   from './formatters/gradients.js';
 import { formatAgentRules }      from './formatters/agent-rules.js';
+import { formatAgentPrompt }     from './formatters/agent-prompt.js';
+import { formatMotionLab }       from './formatters/motion-lab.js';
+import { formatFramerMotion }    from './formatters/framer-motion.js';
 
 // Utils
 import { compressPalette }       from './utils/palette-compress.js';
@@ -86,6 +89,9 @@ export const RENDERERS = Object.freeze({
   'brand-book-html':     (d) => formatBrandBook(d),
   'gradients-css':       (d) => formatGradientsCss(d),
   'gradients-json':      (d) => formatGradientsJson(d),
+  'agent-prompt':        (d) => formatAgentPrompt(d),
+  'motion-lab':          (d) => formatMotionLab(d),
+  'framer-motion':       (d) => formatFramerMotion(d),
 
   // frameworks
   'react-theme':         (d) => formatReactTheme(d),
@@ -147,6 +153,9 @@ export function renderAll(design, opts = {}) {
     'brand-book-html':    'brand.html',
     'gradients-css':      'gradients.css',
     'gradients-json':     'gradients.json',
+    'agent-prompt':       'AGENT.md',
+    'motion-lab':         'motion.html',
+    'framer-motion':      'motion.framer.js',
     'react-theme':        'theme.js',
     'shadcn-theme':       'shadcn-theme.css',
     'vue-theme':          'theme.vue.js',

package/src/formatters/framer-motion.js

@@ -0,0 +1,110 @@
+// Framer Motion emitter — `<host>-motion.framer.js`.
+//
+// Turns the extracted durations + easing curves into ready-to-import
+// Framer Motion `transition` presets and a few common `variants`
+// (fade, slide-up, scale-in, stagger). Framer Motion is the dominant
+// React animation library, so this is the highest-leverage motion
+// emitter for the React ecosystem.
+
+function bezier(raw) {
+  if (!raw) return null;
+  const m = String(raw).match(/cubic-bezier\(\s*([-\d.]+)\s*,\s*([-\d.]+)\s*,\s*([-\d.]+)\s*,\s*([-\d.]+)\s*\)/i);
+  if (m) return [parseFloat(m[1]), parseFloat(m[2]), parseFloat(m[3]), parseFloat(m[4])];
+  const named = {
+    linear: [0, 0, 1, 1], ease: [0.25, 0.1, 0.25, 1],
+    'ease-in': [0.42, 0, 1, 1], 'ease-out': [0, 0, 0.58, 1], 'ease-in-out': [0.42, 0, 0.58, 1],
+  };
+  return named[String(raw).trim()] || null;
+}
+
+function camel(s) {
+  return String(s || '').replace(/[^a-zA-Z0-9]+(.)/g, (_, c) => c.toUpperCase()).replace(/^[0-9]/, '_$&');
+}
+
+export function formatFramerMotion(design) {
+  const host = (() => { try { return new URL(design?.meta?.url).hostname.replace(/^www\./, ''); } catch { return 'site'; } })();
+  const durations = Array.isArray(design?.motion?.durations) ? design.motion.durations : [];
+  const easings   = Array.isArray(design?.motion?.easings)   ? design.motion.easings   : [];
+
+  // Pick a default duration (the most common "medium" feel) and easing.
+  const durSec = (d) => ((d.ms || parseInt(d.css || d.value || d, 10) || 300) / 1000);
+  const defaultDur = durations.length
+    ? durSec(durations[Math.min(2, durations.length - 1)])
+    : 0.3;
+  const sortedEase = [...easings].sort((a, b) => (b.count || 0) - (a.count || 0));
+  const defaultEase = bezier(sortedEase[0]?.raw) || [0.25, 1, 0.5, 1];
+
+  const lines = [
+    '// Framer Motion presets — generated by designlang (motionlang)',
+    `// Source: ${design?.meta?.url || host}`,
+    `// ${new Date().toISOString()}`,
+    '//',
+    '//   import { transitions, variants } from \'./' + host + '-motion.framer\';',
+    '//   <motion.div variants={variants.slideUp} initial="hidden" animate="show"',
+    '//               transition={transitions.base} />',
+    '',
+    '/** Easing curves extracted from the live page, as Framer cubic-bezier arrays. */',
+    'export const easings = {',
+  ];
+
+  const easeEntries = [];
+  sortedEase.forEach((e, i) => {
+    const pts = bezier(e.raw);
+    if (!pts) return;
+    const key = e.family && e.family !== 'custom' ? camel(e.family) : `custom${i + 1}`;
+    if (easeEntries.find((x) => x.key === key)) return;
+    easeEntries.push({ key, pts, raw: e.raw, count: e.count });
+  });
+  if (easeEntries.length === 0) {
+    easeEntries.push({ key: 'standard', pts: defaultEase, raw: 'fallback', count: 0 });
+  }
+  for (const { key, pts, count } of easeEntries) {
+    lines.push(`  ${key}: [${pts.join(', ')}],${count ? ` // ${count}× on page` : ''}`);
+  }
+  lines.push('};', '');
+
+  lines.push('/** Duration presets (seconds), extracted from the live page. */');
+  lines.push('export const durations = {');
+  if (durations.length) {
+    for (const d of durations) {
+      const name = camel(d.name || `ms${d.ms}`);
+      lines.push(`  ${name}: ${durSec(d)},`);
+    }
+  } else {
+    lines.push('  fast: 0.15,', '  base: 0.3,', '  slow: 0.5,');
+  }
+  lines.push('};', '');
+
+  const primaryEaseKey = easeEntries[0].key;
+  lines.push('/** Ready-to-spread Framer Motion transition objects. */');
+  lines.push('export const transitions = {');
+  lines.push(`  base:  { duration: ${defaultDur}, ease: easings.${primaryEaseKey} },`);
+  lines.push(`  fast:  { duration: ${Math.max(0.1, defaultDur * 0.5).toFixed(3)}, ease: easings.${primaryEaseKey} },`);
+  lines.push(`  slow:  { duration: ${(defaultDur * 1.8).toFixed(3)}, ease: easings.${primaryEaseKey} },`);
+  lines.push(`  spring: { type: 'spring', stiffness: 320, damping: 30 },`);
+  lines.push('};', '');
+
+  lines.push('/** Common variants wired to the extracted timing. */');
+  lines.push('export const variants = {');
+  lines.push('  fade: {');
+  lines.push('    hidden: { opacity: 0 },');
+  lines.push('    show:   { opacity: 1, transition: transitions.base },');
+  lines.push('  },');
+  lines.push('  slideUp: {');
+  lines.push('    hidden: { opacity: 0, y: 16 },');
+  lines.push('    show:   { opacity: 1, y: 0, transition: transitions.base },');
+  lines.push('  },');
+  lines.push('  scaleIn: {');
+  lines.push('    hidden: { opacity: 0, scale: 0.96 },');
+  lines.push('    show:   { opacity: 1, scale: 1, transition: transitions.base },');
+  lines.push('  },');
+  lines.push('  stagger: {');
+  lines.push('    hidden: {},');
+  lines.push('    show:   { transition: { staggerChildren: ' + Math.max(0.04, defaultDur * 0.25).toFixed(3) + ' } },');
+  lines.push('  },');
+  lines.push('};', '');
+  lines.push('export default { easings, durations, transitions, variants };');
+  lines.push('');
+
+  return lines.join('\n');
+}

package/src/formatters/motion-lab.js

@@ -0,0 +1,180 @@
+// Motion Lab emitter — `<host>-motion.html`.
+//
+// A self-contained, dependency-free interactive page that brings the
+// extracted motion to life: every easing curve drawn as a Bézier path
+// with a dot riding it, every duration shown as a racing bar, every
+// @keyframes animation replayed on loop. Open it in any browser.
+//
+// This is "motionlang" — motion treated as a first-class shippable
+// artefact, not a flat JSON nobody opens.
+
+function esc(s) {
+  return String(s ?? '').replace(/[&<>"']/g, (c) => (
+    { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]
+  ));
+}
+
+// Parse `cubic-bezier(x1, y1, x2, y2)` → [x1,y1,x2,y2]. Named easings
+// map to their well-known control points.
+const NAMED = {
+  linear: [0, 0, 1, 1],
+  ease: [0.25, 0.1, 0.25, 1],
+  'ease-in': [0.42, 0, 1, 1],
+  'ease-out': [0, 0, 0.58, 1],
+  'ease-in-out': [0.42, 0, 0.58, 1],
+};
+function bezierPoints(raw) {
+  if (!raw) return null;
+  const s = String(raw).trim();
+  if (NAMED[s]) return NAMED[s];
+  const m = s.match(/cubic-bezier\(\s*([-\d.]+)\s*,\s*([-\d.]+)\s*,\s*([-\d.]+)\s*,\s*([-\d.]+)\s*\)/i);
+  if (m) return [parseFloat(m[1]), parseFloat(m[2]), parseFloat(m[3]), parseFloat(m[4])];
+  return null;
+}
+
+// SVG path for a cubic-bezier curve drawn in a 0..1 box (y inverted).
+function curvePath(pts, size) {
+  const [x1, y1, x2, y2] = pts;
+  const px = (v) => (v * size).toFixed(2);
+  const py = (v) => ((1 - v) * size).toFixed(2);
+  return `M ${px(0)} ${py(0)} C ${px(x1)} ${py(y1)}, ${px(x2)} ${py(y2)}, ${px(1)} ${py(1)}`;
+}
+
+export function formatMotionLab(design) {
+  const host = (() => { try { return new URL(design?.meta?.url).hostname.replace(/^www\./, ''); } catch { return 'site'; } })();
+  const durations = Array.isArray(design?.motion?.durations) ? design.motion.durations : [];
+  const easings   = Array.isArray(design?.motion?.easings)   ? design.motion.easings   : [];
+  const keyframes = Array.isArray(design?.motion?.keyframes) ? design.motion.keyframes : [];
+
+  const SIZE = 160;
+
+  const easingCards = easings.map((e, i) => {
+    const raw = e.raw || e.value || e;
+    const pts = bezierPoints(raw);
+    const path = pts ? curvePath(pts, SIZE) : null;
+    const name = e.family && e.family !== 'custom' ? e.family : `easing-${i + 1}`;
+    return `
+    <article class="ml-card">
+      <div class="ml-card-head">
+        <span class="ml-name">${esc(name)}</span>
+        ${e.count ? `<span class="ml-count">${e.count}×</span>` : ''}
+      </div>
+      ${path ? `
+      <svg class="ml-curve" viewBox="0 0 ${SIZE} ${SIZE}" width="${SIZE}" height="${SIZE}">
+        <line x1="0" y1="${SIZE}" x2="${SIZE}" y2="0" class="ml-curve-guide"/>
+        <path d="${path}" class="ml-curve-path"/>
+      </svg>` : `<div class="ml-curve ml-curve-none">non-bezier</div>`}
+      <code class="ml-raw">${esc(raw)}</code>
+      <div class="ml-demo">
+        <span class="ml-dot" style="animation-timing-function: ${esc(raw)};"></span>
+      </div>
+    </article>`;
+  }).join('');
+
+  const durationRows = durations.map((d) => {
+    const ms = d.ms || parseInt(d.css || d.value || d, 10) || 0;
+    const pct = Math.min(100, (ms / 1000) * 100);
+    return `
+    <div class="ml-dur">
+      <span class="ml-dur-name">${esc(d.name || `${ms}ms`)}</span>
+      <span class="ml-dur-track"><span class="ml-dur-fill" style="--ms:${ms}ms; width:${pct}%"></span></span>
+      <span class="ml-dur-ms">${ms}ms</span>
+    </div>`;
+  }).join('');
+
+  const keyframeBlocks = keyframes.slice(0, 12).map((k, i) => {
+    const name = k.name || `keyframes-${i + 1}`;
+    const css = k.css || k.raw || '';
+    return `
+    <article class="ml-kf">
+      <div class="ml-card-head"><span class="ml-name">@keyframes ${esc(name)}</span></div>
+      <pre class="ml-kf-css">${esc(css).slice(0, 600)}</pre>
+    </article>`;
+  }).join('');
+
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${esc(host)} — motion lab · designlang</title>
+<style>
+  :root {
+    --bg: #0a0a0c; --fg: #f4f4f5; --fg-2: rgba(244,244,245,.62); --fg-3: rgba(244,244,245,.4);
+    --line: rgba(255,255,255,.08); --accent: #ef4444;
+    --mono: ui-monospace, 'SF Mono', Menlo, monospace;
+    --sans: -apple-system, 'Segoe UI', system-ui, sans-serif;
+  }
+  * { box-sizing: border-box; }
+  body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); }
+  .ml-wrap { max-width: 1080px; margin: 0 auto; padding: 56px 24px 96px; }
+  header.ml-h { margin-bottom: 48px; }
+  .ml-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
+    text-transform: uppercase; color: var(--fg-3); margin: 0 0 12px; }
+  h1.ml-title { font-size: clamp(34px, 6vw, 60px); letter-spacing: -.03em; margin: 0 0 12px; font-weight: 600; }
+  .ml-sub { color: var(--fg-2); font-size: 16px; max-width: 60ch; margin: 0; }
+  h2.ml-section { font-size: 22px; letter-spacing: -.01em; margin: 56px 0 20px; font-weight: 600; }
+  .ml-section-meta { font-family: var(--mono); font-size: 12px; color: var(--fg-3); margin-left: 8px; font-weight: 400; }
+
+  .ml-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
+  .ml-card { border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: rgba(255,255,255,.02); }
+  .ml-card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
+  .ml-name { font-family: var(--mono); font-size: 13px; color: var(--fg); }
+  .ml-count { font-family: var(--mono); font-size: 11px; color: var(--fg-3); }
+  .ml-curve { display: block; margin: 0 auto 12px; }
+  .ml-curve-guide { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; }
+  .ml-curve-path { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
+  .ml-curve-none { height: 160px; display: flex; align-items: center; justify-content: center;
+    color: var(--fg-3); font-family: var(--mono); font-size: 12px; }
+  .ml-raw { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--fg-3);
+    word-break: break-all; margin-bottom: 14px; }
+  .ml-demo { height: 8px; border-radius: 999px; background: rgba(255,255,255,.05); position: relative; }
+  .ml-dot { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; border-radius: 50%;
+    background: var(--accent); transform: translate(0,-50%);
+    animation: ml-ride 1.6s infinite alternate; box-shadow: 0 0 12px rgba(239,68,68,.6); }
+  @keyframes ml-ride { from { left: 0; } to { left: calc(100% - 14px); } }
+
+  .ml-durs { display: flex; flex-direction: column; gap: 10px; }
+  .ml-dur { display: grid; grid-template-columns: 90px 1fr 64px; gap: 14px; align-items: center; }
+  .ml-dur-name { font-family: var(--mono); font-size: 12px; color: var(--fg-2); }
+  .ml-dur-track { height: 8px; border-radius: 999px; background: rgba(255,255,255,.05); overflow: hidden; }
+  .ml-dur-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px;
+    transform-origin: left; animation: ml-pulse var(--ms) ease-in-out infinite alternate; }
+  @keyframes ml-pulse { from { opacity: .35; } to { opacity: 1; } }
+  .ml-dur-ms { font-family: var(--mono); font-size: 12px; color: var(--fg-3); text-align: right; }
+
+  .ml-kf { border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: rgba(255,255,255,.02); margin-bottom: 14px; }
+  .ml-kf-css { font-family: var(--mono); font-size: 11px; color: var(--fg-2); overflow-x: auto; margin: 0; }
+
+  .ml-empty { color: var(--fg-3); font-family: var(--mono); font-size: 13px;
+    border: 1px dashed var(--line); border-radius: 12px; padding: 28px; text-align: center; }
+  footer.ml-f { margin-top: 72px; padding-top: 24px; border-top: 1px solid var(--line);
+    font-family: var(--mono); font-size: 11px; color: var(--fg-3); }
+  footer.ml-f a { color: var(--accent); }
+  @media (prefers-reduced-motion: reduce) { .ml-dot, .ml-dur-fill { animation: none; } }
+</style>
+</head>
+<body>
+<div class="ml-wrap">
+  <header class="ml-h">
+    <p class="ml-eyebrow">motionlang · motion lab</p>
+    <h1 class="ml-title">${esc(host)} in motion</h1>
+    <p class="ml-sub">Every easing curve, duration and keyframe animation designlang read off the live ${esc(host)} page — drawn, timed and replayed. Generated ${new Date().toISOString().slice(0, 10)}.</p>
+  </header>
+
+  <h2 class="ml-section">Easing curves <span class="ml-section-meta">${easings.length}</span></h2>
+  ${easings.length ? `<div class="ml-grid">${easingCards}</div>` : '<div class="ml-empty">No easing curves detected. Re-run with --interactions to capture hover transitions.</div>'}
+
+  <h2 class="ml-section">Durations <span class="ml-section-meta">${durations.length}</span></h2>
+  ${durations.length ? `<div class="ml-durs">${durationRows}</div>` : '<div class="ml-empty">No durations detected.</div>'}
+
+  <h2 class="ml-section">Keyframe animations <span class="ml-section-meta">${keyframes.length}</span></h2>
+  ${keyframes.length ? keyframeBlocks : '<div class="ml-empty">No @keyframes animations detected on this page.</div>'}
+
+  <footer class="ml-f">
+    Generated by designlang · motionlang · <a href="https://designlang.app">designlang.app</a> · re-extract with <code>npx designlang ${esc(host)} --motion</code>
+  </footer>
+</div>
+</body>
+</html>`;
+}