designlang 12.14.0 → 12.16.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,74 @@
 # Changelog
 
+## [12.16.0] — 2026-06-06
+
+**motionlang grows two framework-agnostic emitters + the website PDF download is fixed.**
+
+The motion language already shipped to Framer Motion and Motion One. This
+release covers the two surfaces that needed no framework at all — plain CSS
+and Tailwind — and fixes the brand-book PDF download on the website.
+
+- **Motion CSS (`<host>-motion.css`)** — drop-in stylesheet: `--duration-*`
+  and `--ease-*` custom properties from the live page, reusable `@keyframes`
+  (`fade-in` / `slide-up` / `scale-in` / `pop`, plus any on-page `@keyframes`
+  reconstructed from their real steps), `.mo-*` utility classes wired to the
+  vars, and a `prefers-reduced-motion: reduce` guard so motion degrades to
+  none for users who ask for it. No build step, no framework.
+
+- **Tailwind motion preset (`<host>-motion.tailwind.js`)** — a require-able
+  `theme.extend` block mapping the extracted timing onto Tailwind's own
+  scales: `transitionDuration`, `transitionTimingFunction` (incl. a `spring`
+  curve when an overshoot bezier is detected), `keyframes` and `animation`
+  utilities (`animate-slide-up`, …). Merge into `tailwind.config` and use
+  class names instead of magic numbers.
+
+  Both are exposed through `designlang/api` as the `motion-css` and
+  `motion-tailwind` renderer ids, alongside the existing `framer-motion` and
+  `motion-one` emitters.
+
+- **Website: brand-book PDF download fixed.** Downloads sometimes produced a
+  file that wouldn't open. Root cause: the streaming extractor wrote its
+  Blob cache fire-and-forget *after* the response closed, so on serverless
+  the write was killed before completing — leaving `/api/pdf/<hash>` with no
+  cached design and returning a 404 JSON body that the browser dutifully
+  saved as `host-brand.pdf`. The cache write is now awaited before the
+  stream closes, and the download button fetches + validates the response is
+  actually a PDF before saving (and surfaces an error instead of writing a
+  broken file).
+
+## [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,11 @@ 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 { formatMotionOne } from '../src/formatters/motion-one.js';
+import { formatMotionCss } from '../src/formatters/motion-css.js';
+import { formatMotionTailwind } from '../src/formatters/motion-tailwind.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 +356,11 @@ 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}-motion.one.js`,      content: formatMotionOne(design),    label: 'Motion One presets (animate() + springs + scroll)' },
+        { name: `${prefix}-motion.css`,         content: formatMotionCss(design),    label: 'Motion CSS (vars + keyframes + utilities + reduced-motion)' },
+        { name: `${prefix}-motion.tailwind.js`, content: formatMotionTailwind(design), label: 'Tailwind motion preset (duration/easing/keyframes/animation)' },
         { 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.16.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,12 @@ 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';
+import { formatMotionOne }       from './formatters/motion-one.js';
+import { formatMotionCss }       from './formatters/motion-css.js';
+import { formatMotionTailwind }  from './formatters/motion-tailwind.js';
 
 // Utils
 import { compressPalette }       from './utils/palette-compress.js';
@@ -86,6 +92,12 @@ 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),
+  'motion-one':          (d) => formatMotionOne(d),
+  'motion-css':          (d) => formatMotionCss(d),
+  'motion-tailwind':     (d) => formatMotionTailwind(d),
 
   // frameworks
   'react-theme':         (d) => formatReactTheme(d),
@@ -147,6 +159,12 @@ 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',
+    'motion-one':         'motion.one.js',
+    'motion-css':         'motion.css',
+    'motion-tailwind':    'motion.tailwind.js',
     'react-theme':        'theme.js',
     'shadcn-theme':       'shadcn-theme.css',
     'vue-theme':          'theme.vue.js',

package/src/formatters/framer-motion.js

@@ -0,0 +1,198 @@
+// 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.
+//
+// v12.16 — now also emits:
+//   • spring presets derived from detected overshoot beziers
+//   • whileInView variants when the source uses scroll/view-timeline
+//   • keyframe variants reconstructed from on-page @keyframes
+
+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]/, '_$&');
+}
+
+// Rough inverse of a critically-damped second-order response.
+// Shorter durations → stiffer; deeper overshoot → less damping.
+// Same heuristic the Motion One emitter uses, kept in sync for parity.
+function springFromBezier(pts, ms) {
+  const [, y1, , y2] = pts;
+  const overshoot = Math.max(0, Math.max(y1 - 1, y2 - 1, -y1, -y2));
+  const seconds = Math.max(0.1, (ms || 400) / 1000);
+  const stiffness = Math.round(Math.min(700, Math.max(80, 600 / seconds)));
+  const damping = Math.round(Math.max(8, 30 - overshoot * 40));
+  return { stiffness, damping, mass: 1 };
+}
+
+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   : [];
+  const springs   = Array.isArray(design?.motion?.springs)   ? design.motion.springs   : [];
+  const keyframes = Array.isArray(design?.motion?.keyframes) ? design.motion.keyframes : [];
+  const scroll    = design?.motion?.scrollLinked || { present: false, signals: [] };
+
+  // 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('};', '');
+
+  // Spring presets — derived from detected overshoot beziers when present,
+  // else a single tasteful default so consumers can always reach for one.
+  const springEntries = [];
+  springs.forEach((s, i) => {
+    const pts = bezier(s.raw);
+    if (!pts) return;
+    springEntries.push({ key: i === 0 ? 'soft' : `spring${i + 1}`, opts: springFromBezier(pts, defaultDur * 1000) });
+  });
+  if (springEntries.length === 0) {
+    springEntries.push({ key: 'soft', opts: { stiffness: 320, damping: 30, mass: 1 } });
+  }
+  const primarySpringKey = springEntries[0].key;
+
+  lines.push('/** Spring presets — pass to a Framer Motion `transition` prop. */');
+  lines.push('export const springs = {');
+  for (const { key, opts } of springEntries) {
+    lines.push(`  ${key}: { type: 'spring', stiffness: ${opts.stiffness}, damping: ${opts.damping}, mass: ${opts.mass} },`);
+  }
+  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: springs.${primarySpringKey},`);
+  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('  pop: {');
+  lines.push('    hidden: { opacity: 0, scale: 0.9 },');
+  lines.push(`    show:   { opacity: 1, scale: 1, transition: springs.${primarySpringKey} },`);
+  lines.push('  },');
+  lines.push('  stagger: {');
+  lines.push('    hidden: {},');
+  lines.push('    show:   { transition: { staggerChildren: ' + Math.max(0.04, defaultDur * 0.25).toFixed(3) + ' } },');
+  lines.push('  },');
+
+  // Reconstructed keyframe variants — Framer Motion accepts arrays per
+  // property to produce keyframe animations. We use the camelCased
+  // @keyframes name so the source intent survives.
+  const usedKeyframes = keyframes.filter(k => k.used && k.steps && k.steps.length);
+  for (const kf of usedKeyframes.slice(0, 8)) {
+    const propMap = {};
+    for (const step of kf.steps) {
+      for (const part of (step.style || '').split(';')) {
+        const [p, v] = part.split(':').map(s => (s || '').trim());
+        if (!p || !v) continue;
+        (propMap[p] ||= []).push(v);
+      }
+    }
+    const entries = Object.entries(propMap)
+      .filter(([, vals]) => vals.length >= 2)
+      .map(([prop, vals]) => `      ${JSON.stringify(camel(prop))}: ${JSON.stringify(vals)}`);
+    if (!entries.length) continue;
+    lines.push(`  ${camel(kf.name)}: {`);
+    lines.push('    hidden: {},');
+    lines.push('    show: {');
+    lines.push(entries.join(',\n') + ',');
+    lines.push('      transition: transitions.base,');
+    lines.push('    },');
+    lines.push('  },');
+  }
+
+  lines.push('};', '');
+
+  if (scroll.present) {
+    lines.push('/** Site uses scroll- or view-timeline. Drop-in `whileInView` props. */');
+    lines.push('export const inView = {');
+    lines.push('  fadeIn: {');
+    lines.push('    initial: variants.fade.hidden,');
+    lines.push('    whileInView: variants.fade.show,');
+    lines.push('    viewport: { once: true, amount: 0.3 },');
+    lines.push('  },');
+    lines.push('  riseIn: {');
+    lines.push('    initial: variants.slideUp.hidden,');
+    lines.push('    whileInView: variants.slideUp.show,');
+    lines.push('    viewport: { once: true, amount: 0.3 },');
+    lines.push('  },');
+    lines.push('};', '');
+  }
+
+  lines.push(`export default { easings, durations, springs, transitions, variants${scroll.present ? ', inView' : ''} };`);
+  lines.push('');
+
+  return lines.join('\n');
+}

package/src/formatters/motion-css.js

@@ -0,0 +1,136 @@
+// Motion CSS emitter — `<host>-motion.css`.
+//
+// The framework-agnostic sibling of the Framer Motion / Motion One
+// emitters. Anything that renders HTML can drop this file in: it ships
+//   • custom properties — `--duration-*` and `--ease-*` from the live page
+//   • `@keyframes` — fade-in / slide-up / scale-in / pop, plus any used
+//     on-page @keyframes reconstructed from their real steps
+//   • utility classes — `.mo-fade-in`, `.mo-slide-up`, … wired to the vars
+//   • a `prefers-reduced-motion: reduce` guard so the whole thing degrades
+//     to no-motion for users who ask for it (accessibility by default)
+
+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 `cubic-bezier(${parseFloat(m[1])}, ${parseFloat(m[2])}, ${parseFloat(m[3])}, ${parseFloat(m[4])})`;
+  const named = {
+    linear: 'linear', ease: 'ease', 'ease-in': 'ease-in',
+    'ease-out': 'ease-out', 'ease-in-out': 'ease-in-out',
+  };
+  return named[String(raw).trim()] || null;
+}
+
+// CSS identifiers: lowercase, hyphen-separated, never leading with a digit.
+function kebab(s) {
+  return String(s || '')
+    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+    .replace(/[^a-zA-Z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .toLowerCase()
+    .replace(/^(\d)/, '_$1');
+}
+
+export function formatMotionCss(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 springs   = Array.isArray(design?.motion?.springs)   ? design.motion.springs   : [];
+  const keyframes = Array.isArray(design?.motion?.keyframes) ? design.motion.keyframes : [];
+
+  // Default duration (the most common "medium" feel) and easing.
+  const defaultDur = durations.length
+    ? (durations[Math.min(2, durations.length - 1)].css || '300ms')
+    : '300ms';
+  const sortedEase = [...easings].sort((a, b) => (b.count || 0) - (a.count || 0));
+
+  // Named easing variables, deduped by classified family.
+  const easeEntries = [];
+  sortedEase.forEach((e, i) => {
+    const css = bezier(e.raw);
+    if (!css) return;
+    const key = e.family && e.family !== 'custom' ? kebab(e.family) : `custom-${i + 1}`;
+    if (easeEntries.find((x) => x.key === key)) return;
+    easeEntries.push({ key, css, count: e.count });
+  });
+  const firstSpring = springs.map(s => bezier(s.raw)).find(Boolean);
+  if (firstSpring) easeEntries.push({ key: 'spring', css: firstSpring, count: 0 });
+  if (easeEntries.length === 0) easeEntries.push({ key: 'standard', css: 'cubic-bezier(0.25, 0.1, 0.25, 1)', count: 0 });
+  const defaultEaseVar = easeEntries[0].key;
+
+  const lines = [
+    '/* Motion CSS — generated by designlang (motionlang)',
+    ` * Source: ${design?.meta?.url || host}`,
+    ` * ${new Date().toISOString()}`,
+    ' *',
+    ' *   <link rel="stylesheet" href="./' + host + '-motion.css">',
+    ' *   <div class="mo-slide-up">…</div>',
+    ' */',
+    '',
+    ':root {',
+  ];
+
+  if (durations.length) {
+    for (const d of durations) lines.push(`  --duration-${kebab(d.name || `ms-${d.ms}`)}: ${d.css};`);
+  } else {
+    lines.push('  --duration-fast: 150ms;', '  --duration-base: 300ms;', '  --duration-slow: 500ms;');
+  }
+  for (const { key, css, count } of easeEntries) {
+    lines.push(`  --ease-${key}: ${css};${count ? ` /* ${count}× on page */` : ''}`);
+  }
+  lines.push('}', '');
+
+  // Built-in keyframes — the same vocabulary the JS emitters expose.
+  lines.push('@keyframes fade-in   { from { opacity: 0; }                              to { opacity: 1; } }');
+  lines.push('@keyframes slide-up  { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }');
+  lines.push('@keyframes scale-in  { from { opacity: 0; transform: scale(0.96); }      to { opacity: 1; transform: none; } }');
+  lines.push('@keyframes pop       { 0% { transform: scale(0.9); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }');
+  lines.push('');
+
+  // Reconstructed @keyframes that the page actually attached to elements.
+  const usedKeyframes = keyframes.filter(k => k.used && k.steps && k.steps.length);
+  for (const kf of usedKeyframes.slice(0, 12)) {
+    const name = kebab(kf.name);
+    if (['fade-in', 'slide-up', 'scale-in', 'pop'].includes(name)) continue;
+    const steps = kf.steps
+      .map(s => {
+        const offset = s.offset === 'from' ? '0%' : s.offset === 'to' ? '100%' : s.offset;
+        const body = String(s.style || '').split(';').map(x => x.trim()).filter(Boolean).join('; ');
+        return offset && body ? `  ${offset} { ${body}; }` : '';
+      })
+      .filter(Boolean);
+    if (!steps.length) continue;
+    lines.push(`@keyframes ${name} {`);
+    lines.push(steps.join('\n'));
+    lines.push('}', '');
+  }
+
+  // Utility classes wired to the extracted timing.
+  lines.push('.mo-animate,');
+  lines.push('[class^="mo-"], [class*=" mo-"] {');
+  lines.push(`  animation-duration: var(--duration-${kebab(durations[Math.min(2, durations.length - 1)]?.name || 'base')}, ${defaultDur});`);
+  lines.push(`  animation-timing-function: var(--ease-${defaultEaseVar});`);
+  lines.push('  animation-fill-mode: both;');
+  lines.push('}', '');
+
+  const utility = (cls, kf, ease) => {
+    lines.push(`.mo-${cls} { animation-name: ${kf};${ease ? ` animation-timing-function: var(--ease-${ease});` : ''} }`);
+  };
+  utility('fade-in', 'fade-in');
+  utility('slide-up', 'slide-up');
+  utility('scale-in', 'scale-in');
+  utility('pop', 'pop', firstSpring ? 'spring' : defaultEaseVar);
+  lines.push('');
+
+  // Accessibility: honour reduced-motion globally.
+  lines.push('@media (prefers-reduced-motion: reduce) {');
+  lines.push('  *, ::before, ::after {');
+  lines.push('    animation-duration: 0.01ms !important;');
+  lines.push('    animation-iteration-count: 1 !important;');
+  lines.push('    transition-duration: 0.01ms !important;');
+  lines.push('    scroll-behavior: auto !important;');
+  lines.push('  }');
+  lines.push('}');
+  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>`;
+}

package/src/formatters/motion-one.js

@@ -0,0 +1,191 @@
+// Motion One emitter — `<host>-motion.one.js`.
+//
+// Sibling of the Framer Motion emitter, targeting the `motion` package
+// (a.k.a. Motion One / Motion for the Web) — a ~3kb library that wraps
+// the Web Animations API and ships first-class spring + scroll helpers.
+//
+// We emit:
+//   • `easings`   — cubic-bezier arrays keyed by classified family
+//   • `durations` — extracted timings in seconds
+//   • `springs`   — Motion One spring options (stiffness/damping/mass)
+//                   derived from detected overshoot beziers; falls back
+//                   to a sensible default when the site has no springs.
+//   • `keyframes` — animation maps reconstructed from on-page @keyframes
+//   • `animations`— ready-to-call wrappers around `animate()` so users
+//                   can do `animations.fadeIn('#hero')` without thinking
+//                   about timing.
+//   • `inView` / `scroll` helpers when the site actually uses
+//     scroll-/view-timeline.
+
+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]/, '_$&');
+}
+
+// Rough inverse of a critically-damped second-order response:
+// shorter durations → stiffer, deeper overshoot → less damping.
+// Not physically exact — just a useful starting point that matches feel.
+function springFromBezier(pts, ms) {
+  const [, y1, , y2] = pts;
+  const overshoot = Math.max(0, Math.max(y1 - 1, y2 - 1, -y1, -y2));
+  const seconds = Math.max(0.1, (ms || 400) / 1000);
+  const stiffness = Math.round(Math.min(700, Math.max(80, 600 / seconds)));
+  const damping = Math.round(Math.max(8, 30 - overshoot * 40));
+  return { stiffness, damping, mass: 1 };
+}
+
+export function formatMotionOne(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 springs   = Array.isArray(design?.motion?.springs)   ? design.motion.springs   : [];
+  const keyframes = Array.isArray(design?.motion?.keyframes) ? design.motion.keyframes : [];
+  const scroll    = design?.motion?.scrollLinked || { present: false, signals: [] };
+
+  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;
+
+  // Easings: keep families by frequency, dedupe by family key, fall back to a
+  // good Motion One default if the page didn't expose anything parseable.
+  const sortedEase = [...easings].sort((a, b) => (b.count || 0) - (a.count || 0));
+  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, count: e.count });
+  });
+  if (easeEntries.length === 0) {
+    easeEntries.push({ key: 'standard', pts: [0.25, 0.1, 0.25, 1], count: 0 });
+  }
+  const primaryEaseKey = easeEntries[0].key;
+
+  // Springs: derive Motion One options from any detected overshoot beziers.
+  const springEntries = [];
+  springs.forEach((s, i) => {
+    const pts = bezier(s.raw);
+    if (!pts) return;
+    springEntries.push({ key: i === 0 ? 'soft' : `spring${i + 1}`, opts: springFromBezier(pts, defaultDur * 1000) });
+  });
+  if (springEntries.length === 0) {
+    springEntries.push({ key: 'soft', opts: { stiffness: 320, damping: 30, mass: 1 } });
+  }
+  const primarySpringKey = springEntries[0].key;
+
+  const lines = [
+    '// Motion One presets — generated by designlang (motionlang)',
+    `// Source: ${design?.meta?.url || host}`,
+    `// ${new Date().toISOString()}`,
+    '//',
+    '//   import { animate } from \'motion\';',
+    '//   import { animations, easings, durations } from \'./' + host + '-motion.one.js\';',
+    '//',
+    '//   animations.fadeIn(\'#hero\');',
+    '//   animations.slideUp(\'.card\', { delay: 0.1 });',
+    '',
+    '/** Easing curves extracted from the live page, as Motion One cubic-bezier arrays. */',
+    'export const easings = {',
+  ];
+  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('};', '');
+
+  lines.push('/** Motion One spring options — pass as the `type: \'spring\'` block of an animate() call. */');
+  lines.push('export const springs = {');
+  for (const { key, opts } of springEntries) {
+    lines.push(`  ${key}: { type: 'spring', stiffness: ${opts.stiffness}, damping: ${opts.damping}, mass: ${opts.mass} },`);
+  }
+  lines.push('};', '');
+
+  // Reconstructed keyframes — Motion One accepts arrays per-property, so
+  // we flatten step values per property and emit a usable animation map.
+  const usedKeyframes = keyframes.filter(k => k.used && k.steps && k.steps.length);
+  if (usedKeyframes.length) {
+    lines.push('/** @keyframes blocks reconstructed as Motion One keyframe maps. */');
+    lines.push('export const keyframes = {');
+    for (const kf of usedKeyframes.slice(0, 16)) {
+      const propMap = {};
+      for (const step of kf.steps) {
+        for (const part of (step.style || '').split(';')) {
+          const [p, v] = part.split(':').map(s => (s || '').trim());
+          if (!p || !v) continue;
+          (propMap[p] ||= []).push(v);
+        }
+      }
+      const entries = Object.entries(propMap)
+        .filter(([, vals]) => vals.length >= 2)
+        .map(([prop, vals]) => `    ${JSON.stringify(camel(prop))}: ${JSON.stringify(vals)}`);
+      if (!entries.length) continue;
+      lines.push(`  ${camel(kf.name)}: {`);
+      lines.push(entries.join(',\n'));
+      lines.push('  },');
+    }
+    lines.push('};', '');
+  } else {
+    lines.push('/** No on-page @keyframes were attached to elements; emit empty for shape parity. */');
+    lines.push('export const keyframes = {};', '');
+  }
+
+  lines.push('/** Animate-on-call helpers. Each takes a Motion One target + optional override. */');
+  lines.push('import { animate } from \'motion\';');
+  lines.push('');
+  lines.push('const _t = { duration: ' + defaultDur + ', easing: easings.' + primaryEaseKey + ' };');
+  lines.push('');
+  lines.push('export const animations = {');
+  lines.push('  fadeIn: (target, opts = {}) =>');
+  lines.push('    animate(target, { opacity: [0, 1] }, { ..._t, ...opts }),');
+  lines.push('  fadeOut: (target, opts = {}) =>');
+  lines.push('    animate(target, { opacity: [1, 0] }, { ..._t, ...opts }),');
+  lines.push('  slideUp: (target, opts = {}) =>');
+  lines.push('    animate(target, { opacity: [0, 1], y: [16, 0] }, { ..._t, ...opts }),');
+  lines.push('  slideDown: (target, opts = {}) =>');
+  lines.push('    animate(target, { opacity: [0, 1], y: [-16, 0] }, { ..._t, ...opts }),');
+  lines.push('  scaleIn: (target, opts = {}) =>');
+  lines.push('    animate(target, { opacity: [0, 1], scale: [0.96, 1] }, { ..._t, ...opts }),');
+  lines.push('  pop: (target, opts = {}) =>');
+  lines.push('    animate(target, { scale: [0.9, 1] }, { ...springs.' + primarySpringKey + ', ...opts }),');
+  lines.push('};', '');
+
+  if (scroll.present) {
+    lines.push('/** Site uses scroll- or view-timeline. Helpers wired to Motion One\'s `inView` / `scroll`. */');
+    lines.push('import { inView, scroll } from \'motion\';');
+    lines.push('');
+    lines.push('export const enterOnView = (target, variant = animations.slideUp) =>');
+    lines.push('  inView(target, (el) => { variant(el.target); });');
+    lines.push('');
+    lines.push('export const parallaxY = (target, distance = 80) =>');
+    lines.push('  scroll(animate(target, { y: [0, -distance] }, { easing: \'linear\' }));');
+    lines.push('');
+  }
+
+  lines.push('export default { easings, durations, springs, keyframes, animations };');
+  lines.push('');
+
+  return lines.join('\n');
+}

package/src/formatters/motion-tailwind.js

@@ -0,0 +1,120 @@
+// Tailwind motion emitter — `<host>-motion.tailwind.js`.
+//
+// Emits a `theme.extend` block to merge into tailwind.config.{js,ts}.
+// Maps the extracted motion language onto Tailwind's own scales:
+//   • transitionDuration       → `duration-xs`, `duration-md`, …
+//   • transitionTimingFunction → `ease-out`, `ease-spring`, …
+//   • keyframes + animation    → `animate-fade-in`, `animate-slide-up`,
+//     `animate-pop`, plus any used on-page @keyframes reconstructed.
+//
+// Tailwind is the dominant utility-CSS framework, so this lets a team
+// adopt a site's real timing with class names instead of magic numbers.
+
+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 `cubic-bezier(${parseFloat(m[1])}, ${parseFloat(m[2])}, ${parseFloat(m[3])}, ${parseFloat(m[4])})`;
+  const named = {
+    linear: 'linear', ease: 'ease', 'ease-in': 'ease-in',
+    'ease-out': 'ease-out', 'ease-in-out': 'ease-in-out',
+  };
+  return named[String(raw).trim()] || null;
+}
+
+function kebab(s) {
+  return String(s || '')
+    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+    .replace(/[^a-zA-Z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .toLowerCase()
+    .replace(/^(\d)/, '_$1');
+}
+
+// Turn @keyframes steps into a Tailwind keyframes object: { '0%': { ... } }.
+function stepsToObject(steps) {
+  const obj = {};
+  for (const s of steps || []) {
+    const offset = s.offset === 'from' ? '0%' : s.offset === 'to' ? '100%' : s.offset;
+    if (!offset) continue;
+    const decl = {};
+    for (const part of String(s.style || '').split(';')) {
+      const [p, v] = part.split(':').map(x => (x || '').trim());
+      if (p && v) decl[p.replace(/-([a-z])/g, (_, c) => c.toUpperCase())] = v;
+    }
+    if (Object.keys(decl).length) obj[offset] = decl;
+  }
+  return obj;
+}
+
+export function formatMotionTailwind(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 springs   = Array.isArray(design?.motion?.springs)   ? design.motion.springs   : [];
+  const keyframes = Array.isArray(design?.motion?.keyframes) ? design.motion.keyframes : [];
+
+  const defaultDur = durations.length
+    ? (durations[Math.min(2, durations.length - 1)].css || '300ms')
+    : '300ms';
+
+  const transitionDuration = {};
+  if (durations.length) {
+    for (const d of durations) transitionDuration[kebab(d.name || `ms-${d.ms}`)] = d.css;
+  } else {
+    Object.assign(transitionDuration, { fast: '150ms', base: '300ms', slow: '500ms' });
+  }
+
+  const transitionTimingFunction = {};
+  [...easings].sort((a, b) => (b.count || 0) - (a.count || 0)).forEach((e, i) => {
+    const css = bezier(e.raw);
+    if (!css) return;
+    const key = e.family && e.family !== 'custom' ? kebab(e.family) : `custom-${i + 1}`;
+    if (!transitionTimingFunction[key]) transitionTimingFunction[key] = css;
+  });
+  const firstSpring = springs.map(s => bezier(s.raw)).find(Boolean);
+  if (firstSpring) transitionTimingFunction.spring = firstSpring;
+  if (Object.keys(transitionTimingFunction).length === 0) {
+    transitionTimingFunction.standard = 'cubic-bezier(0.25, 0.1, 0.25, 1)';
+  }
+
+  // Built-in vocabulary, shared with the CSS / JS emitters.
+  const kf = {
+    'fade-in': { '0%': { opacity: '0' }, '100%': { opacity: '1' } },
+    'slide-up': { '0%': { opacity: '0', transform: 'translateY(16px)' }, '100%': { opacity: '1', transform: 'none' } },
+    'scale-in': { '0%': { opacity: '0', transform: 'scale(0.96)' }, '100%': { opacity: '1', transform: 'none' } },
+    pop: { '0%': { transform: 'scale(0.9)' }, '60%': { transform: 'scale(1.03)' }, '100%': { transform: 'scale(1)' } },
+  };
+  for (const k of keyframes.filter(k => k.used && k.steps && k.steps.length).slice(0, 12)) {
+    const name = kebab(k.name);
+    if (kf[name]) continue;
+    const obj = stepsToObject(k.steps);
+    if (Object.keys(obj).length) kf[name] = obj;
+  }
+
+  const easeRef = transitionTimingFunction['ease-out'] ? 'ease-out'
+    : Object.keys(transitionTimingFunction)[0];
+  const animation = {};
+  for (const name of Object.keys(kf)) {
+    const timing = name === 'pop' && firstSpring ? 'spring' : easeRef;
+    animation[name] = `${name} ${defaultDur} var(--tw-ease-${timing}, ${transitionTimingFunction[timing]}) both`;
+  }
+
+  const extend = { transitionDuration, transitionTimingFunction, keyframes: kf, animation };
+
+  return [
+    '// Tailwind motion preset — generated by designlang (motionlang)',
+    `// Source: ${design?.meta?.url || host}`,
+    `// ${new Date().toISOString()}`,
+    '//',
+    '// Merge `extend` into your tailwind.config theme.extend, e.g.:',
+    `//   const motion = require('./${host}-motion.tailwind');`,
+    '//   module.exports = { theme: { extend: { ...motion.extend } } };',
+    '//',
+    '// Then: <div class="animate-slide-up" /> or `duration-md ease-spring`.',
+    '',
+    `const extend = ${JSON.stringify(extend, null, 2)};`,
+    '',
+    'module.exports = { extend };',
+    '',
+  ].join('\n');
+}