designlang 12.13.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,77 @@
 # 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.**
+
+Two big shipping themes: every extraction now produces a real
+print-ready PDF on demand (not just an HTML brand book), and every
+extraction writes a self-contained agent prompt that drops into any
+LLM — Claude, GPT, Gemini, Cursor, Windsurf, v0.
+
+- **`--pdf` flag in the main `extract` command** — renders the
+  brand-book HTML to a 13-chapter PDF (chapter bookmarks, running
+  footer, embedded fonts, selectable text). Verified ~440KB per brand.
+
+  ```bash
+  npx designlang stripe.com --pdf --paper letter --landscape
+  ```
+
+- **One-shot agent prompt (`<host>-AGENT.md`)** — a single file you
+  paste into any AI agent. Includes colour roles, type, spacing, radii,
+  motion, voice (tone / pronoun / CTA verbs / real headlines),
+  component anatomy, WCAG score, 7 build rules ("never invent a hex",
+  "snap spacing to scale", etc.), and a manifest of every other
+  artefact designlang produced for context.
+
+- **Server-side PDF endpoint** — `GET /api/pdf/<hash>` renders the
+  cached extraction's brand book to PDF via the same Browserless /
+  Chromium path the `/api/extract` route uses. Cached for an hour on
+  CDN edge with 24h stale-while-revalidate.
+
+- **Website UI** — `/gallery/[slug]` hero CTA is now
+  `Download brand book PDF`; new full-width "Agent prompt" section
+  with a `Copy NN.NKB prompt` button. Post-extraction share row gains
+  `Download brand PDF` and `Copy agent prompt`.
+
+- **Pre-rendered static assets** — all 8 featured brand books in
+  `website/public/gallery/<slug>/` now include the new `.brand.pdf`,
+  `-AGENT.md`, `-reset.css`, `-gradients.css/.json` files so the
+  static gallery has working downloads from minute one.
+
 ## [12.13.0] — 2026-05-16
 
 **Six new emitters + a public programmatic API.**

package/bin/design-extract.js

@@ -26,6 +26,9 @@ import { formatTailwindV4 } from '../src/formatters/tailwind-v4.js';
 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';
@@ -113,6 +116,9 @@ program
   .option('--responsive-shots', 'capture full-page PNGs at 4 breakpoints × (light,dark)')
   .option('--perf', 'measure Core Web Vitals + bundle profile (LCP/CLS/INP, JS/CSS/font/img bytes, third-party count)')
   .option('--palette <n>', 'compress the extracted palette to N perceptually distinct colours via LAB-space k-means (default: emit every unique colour)', parseInt)
+  .option('--pdf', 'also render a print-ready brand-book PDF (chapter bookmarks, running footer, embedded tokens)')
+  .option('--paper <size>', 'PDF paper size when --pdf is set: a4 | letter | tabloid', 'a4')
+  .option('--landscape', 'PDF landscape orientation when --pdf is set')
   .option('--json', 'output raw JSON to stdout (for CI/CD)')
   .option('--json-pretty', 'output formatted JSON to stdout')
   .option('--no-history', 'skip saving to history')
@@ -346,6 +352,9 @@ program
         { name: `${prefix}-reset.css`,          content: formatCssReset(design),   label: 'Brand-aware CSS reset' },
         { 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' },
@@ -448,6 +457,32 @@ program
         writeFileSync(join(outDir, file.name), file.content, 'utf-8');
       }
 
+      // Brand book — always emit the HTML (cheap, ~100KB). Optionally
+      // render it to PDF behind --pdf (needs Playwright, ~3–5s).
+      try {
+        const brandHtml = formatBrandBook(design, { version: PKG_VERSION });
+        const brandHtmlPath = join(outDir, `${prefix}.brand.html`);
+        writeFileSync(brandHtmlPath, brandHtml, 'utf-8');
+        files.push({ name: `${prefix}.brand.html`, label: 'Brand book (HTML)' });
+
+        if (opts.pdf) {
+          spinner.text = 'Rendering brand book PDF...';
+          const pdfPath = join(outDir, `${prefix}.brand.pdf`);
+          await htmlToPdf(brandHtml, {
+            paper: opts.paper || 'a4',
+            landscape: !!opts.landscape,
+            outPath: pdfPath,
+            metadata: {
+              title: `${new URL(design?.meta?.url || `https://${prefix}`).hostname} brand guidelines`,
+              subject: `${prefix} brand guidelines`,
+            },
+          });
+          files.push({ name: `${prefix}.brand.pdf`, label: 'Brand book (PDF · print-ready)' });
+        }
+      } catch (e) {
+        if (!merged.quiet) console.warn(`(brand book skipped: ${e.message})`);
+      }
+
       // Multi-platform emission (v7.0). web is already emitted above.
       const platforms = merged.platforms || ['web'];
       const dtcgTokens = formatDtcgTokens(design);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "designlang",
-  "version": "12.13.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/agent-prompt.js

@@ -0,0 +1,214 @@
+// One-shot agent prompt — `<host>-AGENT.md`.
+//
+// Drop the contents into Claude / GPT / Gemini / Cursor / Windsurf
+// and the agent will build any UI you ask for *in the extracted brand*.
+//
+// Distinct from the existing prompt-pack (which targets v0 / Lovable /
+// Cursor with tool-specific syntax). This file is one self-contained
+// system-prompt that works in any context window — every token, every
+// component anatomy slot, every brand voice rule, ready to paste.
+
+function hex(c) { return c?.hex || c || null; }
+function pickHex(role, design) { return hex(design?.colors?.[role]) || null; }
+
+function topN(arr, n) {
+  if (Array.isArray(arr)) return arr.slice(0, n);
+  if (arr && typeof arr === 'object') return Object.values(arr).slice(0, n);
+  return [];
+}
+
+function listColors(design) {
+  const out = [];
+  for (const role of ['primary', 'secondary', 'accent', 'background', 'foreground']) {
+    const v = pickHex(role, design);
+    if (v) out.push(`- ${role.padEnd(11)} ${v}`);
+  }
+  const neutrals = topN(design?.colors?.neutrals, 6).map((n) => hex(n)).filter(Boolean);
+  if (neutrals.length) out.push(`- neutrals    ${neutrals.join(' · ')}`);
+  return out.join('\n');
+}
+
+function listType(design) {
+  const fams = topN(design?.typography?.families, 4).map((f) => f?.name || f).filter(Boolean);
+  const weights = topN(design?.typography?.weights, 6).map((w) => w?.weight || w?.value || w).filter(Boolean);
+  const base = design?.typography?.base || 16;
+  return [
+    fams.length ? `- families   ${fams.join(' · ')}` : null,
+    weights.length ? `- weights    ${weights.join(' · ')}` : null,
+    `- base size  ${base}px`,
+  ].filter(Boolean).join('\n');
+}
+
+function listSpacing(design) {
+  const scale = topN(design?.spacing?.scale, 12).map((px) => `${px}px`);
+  if (!scale.length) return null;
+  return `- scale      ${scale.join(' · ')}`;
+}
+
+function listRadii(design) {
+  const radii = topN(design?.borders?.radii, 6).map((r) => `${typeof r === 'object' ? r.value : r}px`);
+  if (!radii.length) return null;
+  return `- scale      ${radii.join(' · ')}`;
+}
+
+function listMotion(design) {
+  const durs = topN(design?.motion?.durations, 4).map((d) => `${typeof d === 'object' ? (d.value || d.ms) : d}ms`);
+  const eas = topN(design?.motion?.easings, 4).map((e) => typeof e === 'object' ? e.value : e).filter(Boolean);
+  return [
+    durs.length ? `- durations  ${durs.join(' · ')}` : null,
+    eas.length  ? `- easings    ${eas.join(' · ')}` : null,
+  ].filter(Boolean).join('\n');
+}
+
+function listVoice(design) {
+  const v = design?.voice || {};
+  const ctas = topN(v.ctaVerbs, 6).map((c) => c?.value || c).filter(Boolean);
+  const headings = topN(v.headlines || v.headings, 3).map((h) => h?.text || h).filter(Boolean);
+  return [
+    v.tone     ? `- tone       ${v.tone}` : null,
+    v.pronoun  ? `- pronoun    ${v.pronoun}` : null,
+    v.headingStyle ? `- headings   ${v.headingStyle}` : null,
+    ctas.length    ? `- CTA verbs  ${ctas.join(' · ')}` : null,
+    headings.length ? `- real headlines:\n${headings.map(h => `  > "${String(h).slice(0, 120)}"`).join('\n')}` : null,
+  ].filter(Boolean).join('\n');
+}
+
+function listAnatomy(design) {
+  const list = design?.componentAnatomy || design?.componentClusters || [];
+  if (!Array.isArray(list) || list.length === 0) return null;
+  return topN(list, 8).map((c) => {
+    const kind = String(c?.kind || c?.name || 'component');
+    const variants = topN(c?.variants, 4).map(String).join(' · ') || '—';
+    const slots    = topN(c?.slots,    4).map(String).join(' · ') || '—';
+    return `- ${kind.padEnd(10)} variants: ${variants}  ·  slots: ${slots}`;
+  }).join('\n');
+}
+
+function listA11y(design) {
+  const a = design?.accessibility || {};
+  const score = a.score ?? null;
+  const fails = a.failCount ?? (a.remediation?.length ?? 0);
+  return `- WCAG score ${score == null ? '—' : `${score}%`} · failing pairs: ${fails}`;
+}
+
+export function formatAgentPrompt(design) {
+  const host = design?.meta?.url ? new URL(design.meta.url).hostname.replace(/^www\./, '') : 'this site';
+  const title = design?.meta?.title || host;
+  const intent = design?.pageIntent?.label || 'landing';
+  const material = design?.materialLanguage?.label || 'flat';
+  const library = design?.componentLibrary?.label || null;
+  const grade = design?.score?.grade || null;
+
+  const blocks = [];
+  blocks.push(
+    `# You are building UI in the ${host} design system.`,
+    '',
+    `Source: ${design?.meta?.url || '—'}`,
+    `Extracted by designlang on ${new Date().toISOString().slice(0, 10)}.`,
+    '',
+    '## Brand at a glance',
+    '',
+    `- title         ${title}`,
+    `- page intent   ${intent}`,
+    `- material      ${material}`,
+    library ? `- library       ${library}` : null,
+    grade ? `- design grade  ${grade}` : null,
+    '',
+    '## Colour',
+    '',
+    listColors(design) || '_(no colour roles detected)_',
+    '',
+    '## Typography',
+    '',
+    listType(design),
+    '',
+  );
+
+  const spacing = listSpacing(design);
+  if (spacing) blocks.push('## Spacing', '', spacing, '');
+
+  const radii = listRadii(design);
+  if (radii) blocks.push('## Radii', '', radii, '');
+
+  const motion = listMotion(design);
+  if (motion) blocks.push('## Motion', '', motion, '');
+
+  const voice = listVoice(design);
+  if (voice) blocks.push('## Voice', '', voice, '');
+
+  const anatomy = listAnatomy(design);
+  if (anatomy) blocks.push('## Component anatomy', '', anatomy, '');
+
+  blocks.push('## Accessibility', '', listA11y(design), '');
+
+  blocks.push(
+    '## Build rules',
+    '',
+    '1. Use the colours above. **Never invent a new hex.** If you need a',
+    '   shade between two existing colours, derive it via HSL adjustment',
+    '   from the closest extracted colour and call out the derivation.',
+    '2. Use the extracted typography families. If you need a missing weight,',
+    '   pick the nearest available weight from the list and note it.',
+    '3. Snap spacing values to the scale above. No off-scale paddings or',
+    '   margins.',
+    '4. Snap border radii to the scale above.',
+    '5. Match the voice: same tone, same pronoun stance, same heading',
+    '   style. Reuse the listed CTA verbs.',
+    '6. Aim for WCAG AA contrast minimum. When the brand colours fail,',
+    '   prefer the foreground colour on the background colour rather than',
+    '   mid-tone neutrals.',
+    '7. Reuse component anatomy when it exists — do not invent novel',
+    '   structures for things the site already has.',
+    '',
+    '## Available context files',
+    '',
+    'designlang wrote these alongside this prompt. Reach for them when',
+    'you need ground truth:',
+    '',
+    '- `<host>-design-tokens.json` — DTCG primitive · semantic · composite tokens',
+    '- `<host>-tailwind.config.js`  — Tailwind v3 config',
+    '- `<host>-tailwind-v4.css`     — Tailwind v4 `@theme` block',
+    '- `<host>-tokens.d.ts`         — TypeScript literal-union types',
+    '- `<host>-variables.css`       — bare CSS custom properties',
+    '- `<host>-reset.css`           — brand-aware base styles',
+    '- `<host>-gradients.css`       — `.grad-N` utility classes',
+    '- `<host>-anatomy.tsx`         — typed React component scaffolds',
+    '- `<host>-shadcn-theme.css`    — shadcn/ui theme',
+    '- `<host>-theme.js`            — React / Vue / Svelte theme object',
+    '- `<host>-mcp.json`            — MCP server payload (load via stdio)',
+    '- `<host>.brand.pdf`           — print-ready 13-chapter brand book',
+    '',
+    'When you reference the system in code, prefer importing from these',
+    'files over hard-coding values.',
+    '',
+    '## Output expectations',
+    '',
+    'When asked to "build a pricing page" or "make a card" or any UI:',
+    '',
+    '- Produce a single self-contained component file in the appropriate',
+    '  framework (React / Vue / Svelte — match what the user is using).',
+    '- Use Tailwind utility classes wired to the v4 `@theme` if Tailwind',
+    '  is available; otherwise use the CSS custom properties from',
+    '  `variables.css`.',
+    '- Write the headline copy using the brand voice; do not invent',
+    '  generic Lorem.',
+    '- Annotate any choice where you had to bend the system, with a',
+    '  one-line `// note:` comment explaining what and why.',
+    '',
+    `## One-line install`,
+    '',
+    '```bash',
+    `npx designlang ${host}`,
+    '```',
+    '',
+    'Run this against any other URL to extract its system in the same',
+    'shape as the one above.',
+    '',
+    '---',
+    '',
+    `Generated by designlang. Re-extract by running \`npx designlang ${host}\`.`,
+    '',
+  );
+
+  return blocks.filter((b) => b !== null).join('\n');
+}

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>`;
+}