designlang 12.15.0 → 12.16.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # 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.**

package/bin/design-extract.js

@@ -29,6 +29,9 @@ import { formatGradientsCss, formatGradientsJson } from '../src/formatters/gradi
 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';
@@ -355,6 +358,9 @@ program
         { 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.15.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

@@ -39,6 +39,9 @@ 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';
@@ -92,6 +95,9 @@ export const RENDERERS = Object.freeze({
   '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),
@@ -156,6 +162,9 @@ export function renderAll(design, opts = {}) {
     '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

@@ -5,6 +5,11 @@
 // (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;
@@ -21,10 +26,25 @@ 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);
@@ -75,13 +95,33 @@ export function formatFramerMotion(design) {
   }
   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: { type: 'spring', stiffness: 320, damping: 30 },`);
+  lines.push(`  spring: springs.${primarySpringKey},`);
   lines.push('};', '');
 
   lines.push('/** Common variants wired to the extracted timing. */');
@@ -98,12 +138,60 @@ export function formatFramerMotion(design) {
   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('};', '');
-  lines.push('export default { easings, durations, transitions, variants };');
+
+  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-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');
+}