@syncedco/motion 0.1.0

package/dist/recipes.d.ts

@@ -0,0 +1,76 @@
+import type { MotionRuntimeRecipe } from './index.js'
+
+/**
+ * Individually importable runtime recipe specs.
+ *
+ * Import only what a page uses so bundlers can drop the rest:
+ *
+ * ```js
+ * import { revealRise, marquee } from '@syncedco/motion/recipes'
+ * ```
+ */
+
+export declare const accessibleMenu: MotionRuntimeRecipe
+export declare const accordionDisclosure: MotionRuntimeRecipe
+export declare const ambientFloat: MotionRuntimeRecipe
+export declare const commandPalette: MotionRuntimeRecipe
+export declare const counterValue: MotionRuntimeRecipe
+export declare const dialogOverlay: MotionRuntimeRecipe
+export declare const expandPanels: MotionRuntimeRecipe
+export declare const flipCardToDetail: MotionRuntimeRecipe
+export declare const flipFilterGrid: MotionRuntimeRecipe
+export declare const flipListReorder: MotionRuntimeRecipe
+export declare const flipNavIndicator: MotionRuntimeRecipe
+export declare const horizontalComparisonSlider: MotionRuntimeRecipe
+export declare const horizontalFeatureRail: MotionRuntimeRecipe
+export declare const horizontalGalleryScrub: MotionRuntimeRecipe
+export declare const horizontalGallerySnap: MotionRuntimeRecipe
+export declare const horizontalLogoReel: MotionRuntimeRecipe
+export declare const hoverLift: MotionRuntimeRecipe
+export declare const hoverMediaSwitch: MotionRuntimeRecipe
+export declare const imageFocusPan: MotionRuntimeRecipe
+export declare const layoutAccordionGrid: MotionRuntimeRecipe
+export declare const loopingLogoBelt: MotionRuntimeRecipe
+export declare const magneticAction: MotionRuntimeRecipe
+export declare const marquee: MotionRuntimeRecipe
+export declare const mediaClipReveal: MotionRuntimeRecipe
+export declare const mediaCurtainSplit: MotionRuntimeRecipe
+export declare const mediaExpand: MotionRuntimeRecipe
+export declare const navActiveIndicator: MotionRuntimeRecipe
+export declare const pageLoadBrandMark: MotionRuntimeRecipe
+export declare const pageLoadHero: MotionRuntimeRecipe
+export declare const pinnedChapterCrossfade: MotionRuntimeRecipe
+export declare const pinnedFounderStory: MotionRuntimeRecipe
+export declare const pinnedProductExplainer: MotionRuntimeRecipe
+export declare const pinnedStatement: MotionRuntimeRecipe
+export declare const pinnedSteps: MotionRuntimeRecipe
+export declare const pointerSpotlight: MotionRuntimeRecipe
+export declare const progressRing: MotionRuntimeRecipe
+export declare const revealClipWipe: MotionRuntimeRecipe
+export declare const revealDirectional: MotionRuntimeRecipe
+export declare const revealRise: MotionRuntimeRecipe
+export declare const revealScaleIn: MotionRuntimeRecipe
+export declare const revealStaggerCascade: MotionRuntimeRecipe
+export declare const routeFade: MotionRuntimeRecipe
+export declare const routeScrollRestore: MotionRuntimeRecipe
+export declare const routeSharedMedia: MotionRuntimeRecipe
+export declare const scrollDepthStack: MotionRuntimeRecipe
+export declare const scrollDrift: MotionRuntimeRecipe
+export declare const scrollExit: MotionRuntimeRecipe
+export declare const scrollParallax: MotionRuntimeRecipe
+export declare const scrollProgressMeter: MotionRuntimeRecipe
+export declare const splitCharsShimmer: MotionRuntimeRecipe
+export declare const splitLinesRise: MotionRuntimeRecipe
+export declare const splitWordsCascade: MotionRuntimeRecipe
+export declare const svgIconState: MotionRuntimeRecipe
+export declare const svgLineDraw: MotionRuntimeRecipe
+export declare const svgOrbit: MotionRuntimeRecipe
+export declare const svgPathMorph: MotionRuntimeRecipe
+export declare const svgSignatureReveal: MotionRuntimeRecipe
+export declare const textHighlightSweep: MotionRuntimeRecipe
+export declare const typewriterAnnounce: MotionRuntimeRecipe
+export declare const videoPosterPlay: MotionRuntimeRecipe
+
+/** Every built-in spec. Importing this opts into all sixty recipes. */
+export declare const builtinMotionSpecs: readonly MotionRuntimeRecipe[]
+export declare const SHARED_REDUCED_MOTION: Readonly<{ strategy: 'final'; behavior: string }>

package/dist/recipes.js

@@ -0,0 +1,129 @@
+import {
+  SHARED_REDUCED_MOTION,
+  accessibleMenu,
+  accordionDisclosure,
+  ambientFloat,
+  builtinMotionSpecs,
+  commandPalette,
+  counterValue,
+  dialogOverlay,
+  expandPanels,
+  flipCardToDetail,
+  flipFilterGrid,
+  flipListReorder,
+  flipNavIndicator,
+  horizontalComparisonSlider,
+  horizontalFeatureRail,
+  horizontalGalleryScrub,
+  horizontalGallerySnap,
+  horizontalLogoReel,
+  hoverLift,
+  hoverMediaSwitch,
+  imageFocusPan,
+  layoutAccordionGrid,
+  loopingLogoBelt,
+  magneticAction,
+  marquee,
+  mediaClipReveal,
+  mediaCurtainSplit,
+  mediaExpand,
+  navActiveIndicator,
+  pageLoadBrandMark,
+  pageLoadHero,
+  pinnedChapterCrossfade,
+  pinnedFounderStory,
+  pinnedProductExplainer,
+  pinnedStatement,
+  pinnedSteps,
+  pointerSpotlight,
+  progressRing,
+  revealClipWipe,
+  revealDirectional,
+  revealRise,
+  revealScaleIn,
+  revealStaggerCascade,
+  routeFade,
+  routeScrollRestore,
+  routeSharedMedia,
+  scrollDepthStack,
+  scrollDrift,
+  scrollExit,
+  scrollParallax,
+  scrollProgressMeter,
+  splitCharsShimmer,
+  splitLinesRise,
+  splitWordsCascade,
+  svgIconState,
+  svgLineDraw,
+  svgOrbit,
+  svgPathMorph,
+  svgSignatureReveal,
+  textHighlightSweep,
+  typewriterAnnounce,
+  videoPosterPlay
+} from "./chunk-JET2MYEG.js";
+export {
+  SHARED_REDUCED_MOTION,
+  accessibleMenu,
+  accordionDisclosure,
+  ambientFloat,
+  builtinMotionSpecs,
+  commandPalette,
+  counterValue,
+  dialogOverlay,
+  expandPanels,
+  flipCardToDetail,
+  flipFilterGrid,
+  flipListReorder,
+  flipNavIndicator,
+  horizontalComparisonSlider,
+  horizontalFeatureRail,
+  horizontalGalleryScrub,
+  horizontalGallerySnap,
+  horizontalLogoReel,
+  hoverLift,
+  hoverMediaSwitch,
+  imageFocusPan,
+  layoutAccordionGrid,
+  loopingLogoBelt,
+  magneticAction,
+  marquee,
+  mediaClipReveal,
+  mediaCurtainSplit,
+  mediaExpand,
+  navActiveIndicator,
+  pageLoadBrandMark,
+  pageLoadHero,
+  pinnedChapterCrossfade,
+  pinnedFounderStory,
+  pinnedProductExplainer,
+  pinnedStatement,
+  pinnedSteps,
+  pointerSpotlight,
+  progressRing,
+  revealClipWipe,
+  revealDirectional,
+  revealRise,
+  revealScaleIn,
+  revealStaggerCascade,
+  routeFade,
+  routeScrollRestore,
+  routeSharedMedia,
+  scrollDepthStack,
+  scrollDrift,
+  scrollExit,
+  scrollParallax,
+  scrollProgressMeter,
+  splitCharsShimmer,
+  splitLinesRise,
+  splitWordsCascade,
+  svgIconState,
+  svgLineDraw,
+  svgOrbit,
+  svgPathMorph,
+  svgSignatureReveal,
+  textHighlightSweep,
+  typewriterAnnounce,
+  videoPosterPlay
+};
+//# sourceMappingURL=recipes.js.map

package/dist/recipes.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"mappings":"","names":[]}

package/dist/styles.css

@@ -0,0 +1,57 @@
+/* src/styles.css */
+@layer synced-motion {
+  :root {
+    --motion-duration-fast: 180ms;
+    --motion-duration-base: 480ms;
+    --motion-duration-slow: 800ms;
+    --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+  }
+  html[data-motion-scroll-locked] {
+    overflow: hidden;
+  }
+  [data-motion-hover-group][data-motion-recipe] [data-motion-hover-media],
+  [data-motion-scroll-steps][data-motion-recipe] [data-motion-step-panel] {
+    opacity: 0;
+    pointer-events: none;
+    visibility: hidden;
+  }
+  [data-motion-hover-group][data-motion-recipe] [data-motion-hover-media][data-active],
+  [data-motion-scroll-steps][data-motion-recipe] [data-motion-step-panel][data-active] {
+    opacity: 1;
+    pointer-events: auto;
+    visibility: visible;
+  }
+  [data-motion-step-link] {
+    color: var(--sf-colour-muted, currentColor);
+    transition: color var(--motion-duration-base) var(--motion-ease-out);
+  }
+  [data-motion-step-link][data-active] {
+    color: var(--sf-colour-primary, currentColor);
+  }
+  [data-motion-expand-panel] {
+    transition: flex var(--motion-duration-slow) var(--motion-ease-out), color var(--motion-duration-base) var(--motion-ease-out);
+  }
+  [data-motion-menu][data-state=closed] [data-motion-menu-panel] {
+    pointer-events: none;
+    visibility: hidden;
+  }
+  [data-motion-menu][data-state=open] [data-motion-menu-panel] {
+    pointer-events: auto;
+    visibility: visible;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      scroll-behavior: auto !important;
+    }
+    [data-motion-reveal],
+    [data-motion-stagger] > *,
+    [data-motion-parallax] {
+      opacity: 1 !important;
+      transform: none !important;
+      visibility: visible !important;
+    }
+  }
+}
+/*# sourceMappingURL=styles.css.map */

package/dist/styles.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/styles.css"],"mappings":";AAAA;AACE;AACE,4BAAwB;AACxB,4BAAwB;AACxB,4BAAwB;AACxB,uBAAmB,aAAa,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE;AACjD;AAEA,MAAI,CAAC;AACH,cAAU;AACZ;AAEA,GAAC,wBAAwB,CAAC,oBAAoB,CAAC;AAAA,EAC/C,CAAC,yBAAyB,CAAC,oBAAoB,CAAC;AAC9C,aAAS;AACT,oBAAgB;AAChB,gBAAY;AACd;AAEA,GAAC,wBAAwB,CAAC,oBAAoB,CAAC,wBAAwB,CAAC;AAAA,EACxE,CAAC,yBAAyB,CAAC,oBAAoB,CAAC,uBAAuB,CAAC;AACtE,aAAS;AACT,oBAAgB;AAChB,gBAAY;AACd;AAEA,GAAC;AACC,WAAO,IAAI,iBAAiB,EAAE;AAC9B,gBAAY,MAAM,IAAI,wBAAwB,IAAI;AACpD;AAEA,GAAC,sBAAsB,CAAC;AACtB,WAAO,IAAI,mBAAmB,EAAE;AAClC;AAEA,GAAC;AACC,gBACE,KAAK,IAAI,wBAAwB,IAAI,kBAAkB,EACvD,MAAM,IAAI,wBAAwB,IAAI;AAC1C;AAEA,GAAC,iBAAiB,CAAC,mBAAqB,CAAC;AACvC,oBAAgB;AAChB,gBAAY;AACd;AAEA,GAAC,iBAAiB,CAAC,iBAAmB,CAAC;AACrC,oBAAgB;AAChB,gBAAY;AACd;AAEA,UAAO,wBAAyB;AAC9B;AAAA,IACA,CAAC;AAAA,IACD,CAAC;AACC,uBAAiB;AACnB;AAEA,KAAC;AAAA,IACD,CAAC,qBAAqB,EAAE;AAAA,IACxB,CAAC;AACC,eAAS;AACT,iBAAW;AACX,kBAAY;AACd;AACF;AACF;","names":[]}

package/dist/svelte.d.ts

@@ -0,0 +1,10 @@
+import type { MotionRuntime, MotionRuntimeOptions } from './index.js'
+
+export interface SvelteMotionAction {
+  readonly runtime: MotionRuntime | undefined
+  update(options?: Omit<MotionRuntimeOptions, 'root'>): void
+  refresh(): void
+  destroy(): void
+}
+
+export declare function syncedMotion(node: Element, options?: Omit<MotionRuntimeOptions, 'root'>): SvelteMotionAction

package/dist/svelte.js

@@ -0,0 +1,30 @@
+import {
+  createMotionController
+} from "./chunk-KA3OPI4F.js";
+import "./chunk-VOIQPPQZ.js";
+import "./chunk-24KKECMK.js";
+import "./chunk-JET2MYEG.js";
+
+// src/adapters/svelte.js
+function syncedMotion(node, options = {}) {
+  const controller = createMotionController(node, options);
+  controller.mount();
+  return {
+    get runtime() {
+      return controller.runtime;
+    },
+    update(nextOptions = {}) {
+      controller.mount(node, nextOptions);
+    },
+    refresh() {
+      controller.refresh();
+    },
+    destroy() {
+      controller.destroy();
+    }
+  };
+}
+export {
+  syncedMotion
+};
+//# sourceMappingURL=svelte.js.map

package/dist/svelte.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/adapters/svelte.js"],"mappings":";;;;;;;;AAEO,SAAS,aAAa,MAAM,UAAU,CAAC,GAAG;AAC/C,QAAM,aAAa,uBAAuB,MAAM,OAAO;AACvD,aAAW,MAAM;AACjB,SAAO;AAAA,IACL,IAAI,UAAU;AAAE,aAAO,WAAW;AAAA,IAAQ;AAAA,IAC1C,OAAO,cAAc,CAAC,GAAG;AAAE,iBAAW,MAAM,MAAM,WAAW;AAAA,IAAE;AAAA,IAC/D,UAAU;AAAE,iBAAW,QAAQ;AAAA,IAAE;AAAA,IACjC,UAAU;AAAE,iBAAW,QAAQ;AAAA,IAAE;AAAA,EACnC;AACF;","names":[]}

package/dist/vue.d.ts

@@ -0,0 +1,13 @@
+import type { MotionRuntime, MotionRuntimeOptions } from './index.js'
+
+export interface VueMotionController {
+  runtime: { value: MotionRuntime | undefined }
+  mount(): Promise<MotionRuntime | undefined>
+  refresh(): void
+  destroy(): void
+}
+
+export declare function useSyncedMotion(
+  rootRef: Element | { value?: Element | null },
+  options?: Omit<MotionRuntimeOptions, 'root'>,
+): VueMotionController

package/dist/vue.js

@@ -0,0 +1,35 @@
+import {
+  createMotionController
+} from "./chunk-KA3OPI4F.js";
+import "./chunk-VOIQPPQZ.js";
+import "./chunk-24KKECMK.js";
+import "./chunk-JET2MYEG.js";
+
+// src/adapters/vue.js
+import { nextTick, onMounted, onUnmounted, shallowRef, unref } from "vue";
+function useSyncedMotion(rootRef, options = {}) {
+  const runtime = shallowRef();
+  let controller;
+  const mount = async () => {
+    await nextTick();
+    const root = unref(rootRef);
+    if (!root) return void 0;
+    controller?.destroy();
+    controller = createMotionController(root, options);
+    runtime.value = controller.mount();
+    return runtime.value;
+  };
+  const refresh = () => controller?.refresh();
+  const destroy = () => {
+    controller?.destroy();
+    controller = void 0;
+    runtime.value = void 0;
+  };
+  onMounted(mount);
+  onUnmounted(destroy);
+  return { runtime, mount, refresh, destroy };
+}
+export {
+  useSyncedMotion
+};
+//# sourceMappingURL=vue.js.map

package/dist/vue.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/adapters/vue.js"],"mappings":";;;;;;;;AAAA,SAAS,UAAU,WAAW,aAAa,YAAY,aAAa;AAG7D,SAAS,gBAAgB,SAAS,UAAU,CAAC,GAAG;AACrD,QAAM,UAAU,WAAW;AAC3B,MAAI;AAEJ,QAAM,QAAQ,YAAY;AACxB,UAAM,SAAS;AACf,UAAM,OAAO,MAAM,OAAO;AAC1B,QAAI,CAAC,KAAM,QAAO;AAClB,gBAAY,QAAQ;AACpB,iBAAa,uBAAuB,MAAM,OAAO;AACjD,YAAQ,QAAQ,WAAW,MAAM;AACjC,WAAO,QAAQ;AAAA,EACjB;AACA,QAAM,UAAU,MAAM,YAAY,QAAQ;AAC1C,QAAM,UAAU,MAAM;AACpB,gBAAY,QAAQ;AACpB,iBAAa;AACb,YAAQ,QAAQ;AAAA,EAClB;AAEA,YAAU,KAAK;AACf,cAAY,OAAO;AACnB,SAAO,EAAE,SAAS,OAAO,SAAS,QAAQ;AAC5C;","names":[]}

package/dist/wordpress.d.ts

@@ -0,0 +1,15 @@
+import type { MotionRuntime, MotionRuntimeOptions } from './index.js'
+
+export interface WordPressMotionOptions extends Omit<MotionRuntimeOptions, 'root'> {
+  document?: Document
+  root?: Document | Element | string | (() => Document | Element | null | undefined)
+}
+
+export interface WordPressMotionController {
+  readonly runtime: MotionRuntime | undefined
+  mount(root?: Document | Element): MotionRuntime | undefined
+  refresh(): void
+  destroy(): void
+}
+
+export declare function createWordPressMotion(options?: WordPressMotionOptions): WordPressMotionController

package/dist/wordpress.js

@@ -0,0 +1,49 @@
+import {
+  createMotionController,
+  resolveMotionRoot
+} from "./chunk-KA3OPI4F.js";
+import "./chunk-VOIQPPQZ.js";
+import "./chunk-24KKECMK.js";
+import "./chunk-JET2MYEG.js";
+
+// src/adapters/wordpress.js
+function createWordPressMotion(options = {}) {
+  const ownerDocument = options.document ?? globalThis.document;
+  if (!ownerDocument) return { runtime: void 0, mount() {
+  }, refresh() {
+  }, destroy() {
+  } };
+  const controller = createMotionController();
+  let destroyed = false;
+  const mount = (nextRoot) => {
+    if (destroyed) return void 0;
+    const requested = nextRoot?.nodeType ? nextRoot : typeof options.root === "function" ? options.root() : options.root;
+    const root = typeof requested === "string" ? ownerDocument.querySelector(requested) : resolveMotionRoot(requested) ?? ownerDocument;
+    const { document: _document, root: _root, ...runtimeOptions } = options;
+    return controller.mount(root, runtimeOptions);
+  };
+  const onMount = (event) => mount(event.detail?.root);
+  const onRefresh = () => controller.refresh();
+  ownerDocument.addEventListener("motion:mount", onMount);
+  ownerDocument.addEventListener("motion:refresh", onRefresh);
+  if (ownerDocument.readyState === "loading") ownerDocument.addEventListener("DOMContentLoaded", mount, { once: true });
+  else mount();
+  return {
+    get runtime() {
+      return controller.runtime;
+    },
+    mount,
+    refresh: onRefresh,
+    destroy() {
+      destroyed = true;
+      ownerDocument.removeEventListener("DOMContentLoaded", mount);
+      ownerDocument.removeEventListener("motion:mount", onMount);
+      ownerDocument.removeEventListener("motion:refresh", onRefresh);
+      controller.destroy();
+    }
+  };
+}
+export {
+  createWordPressMotion
+};
+//# sourceMappingURL=wordpress.js.map

package/dist/wordpress.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/adapters/wordpress.js"],"mappings":";;;;;;;;;AAEO,SAAS,sBAAsB,UAAU,CAAC,GAAG;AAClD,QAAM,gBAAgB,QAAQ,YAAY,WAAW;AACrD,MAAI,CAAC,cAAe,QAAO,EAAE,SAAS,QAAW,QAAQ;AAAA,EAAC,GAAG,UAAU;AAAA,EAAC,GAAG,UAAU;AAAA,EAAC,EAAE;AACxF,QAAM,aAAa,uBAAuB;AAC1C,MAAI,YAAY;AAEhB,QAAM,QAAQ,CAAC,aAAa;AAC1B,QAAI,UAAW,QAAO;AACtB,UAAM,YAAY,UAAU,WAAW,WAAY,OAAO,QAAQ,SAAS,aAAa,QAAQ,KAAK,IAAI,QAAQ;AACjH,UAAM,OAAO,OAAO,cAAc,WAAW,cAAc,cAAc,SAAS,IAAI,kBAAkB,SAAS,KAAK;AACtH,UAAM,EAAE,UAAU,WAAW,MAAM,OAAO,GAAG,eAAe,IAAI;AAChE,WAAO,WAAW,MAAM,MAAM,cAAc;AAAA,EAC9C;AACA,QAAM,UAAU,CAAC,UAAU,MAAM,MAAM,QAAQ,IAAI;AACnD,QAAM,YAAY,MAAM,WAAW,QAAQ;AAC3C,gBAAc,iBAAiB,gBAAgB,OAAO;AACtD,gBAAc,iBAAiB,kBAAkB,SAAS;AAC1D,MAAI,cAAc,eAAe,UAAW,eAAc,iBAAiB,oBAAoB,OAAO,EAAE,MAAM,KAAK,CAAC;AAAA,MAC/G,OAAM;AAEX,SAAO;AAAA,IACL,IAAI,UAAU;AAAE,aAAO,WAAW;AAAA,IAAQ;AAAA,IAC1C;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AACR,kBAAY;AACZ,oBAAc,oBAAoB,oBAAoB,KAAK;AAC3D,oBAAc,oBAAoB,gBAAgB,OAAO;AACzD,oBAAc,oBAAoB,kBAAkB,SAAS;AAC7D,iBAAW,QAAQ;AAAA,IACrB;AAAA,EACF;AACF;","names":[]}

package/docs/API.md

@@ -0,0 +1,176 @@
+# JavaScript API
+
+The attribute vocabulary is in [the attribute API](ATTRIBUTE-API.md); every
+recipe is listed in [the recipe reference](RECIPE-REFERENCE.md). This page
+covers the JavaScript surface.
+
+## `createSyncedMotion(options?)`
+
+The high-level entry point. Mounts every built-in recipe found in the root,
+wires optional smooth scrolling, and refreshes triggers once fonts have loaded.
+
+```js
+import { createSyncedMotion } from '@syncedco/motion'
+
+const motion = createSyncedMotion({ smoothScroll: true })
+```
+
+| Option | Type | Default | Notes |
+| --- | --- | --- | --- |
+| `root` | `Document \| Element` | `document` | Scopes every selector. |
+| `smoothScroll` | `boolean \| object` | `false` | `true` enables Lenis; an object is passed to Lenis. Ignored under reduced motion. |
+| `revealStart` | `string` | `'top 84%'` | ScrollTrigger start for the reveal and split families. |
+| `reducedMotion` | `'system' \| 'reduce'` | `'system'` | Force reduced motion regardless of the media query. |
+| `reducedMotionQuery` | `string` | `'(prefers-reduced-motion: reduce)'` | Override for testing. |
+| `parameterOverrides` | `Record<string, Record<string, unknown>>` | `{}` | Per-recipe parameter values, keyed by recipe ID. |
+| `dependencies` | `object` | `{}` | Supply GSAP or optional plugins. See [performance](PERFORMANCE.md#optional-gsap-plugins). |
+| `debug` | `boolean` | `false` | Show ScrollTrigger markers. |
+| `strict` | `boolean` | `true` | Rethrow mount errors. Set `false` to collect them in `inspect().errors` instead. |
+
+### Returned instance
+
+| Member | Description |
+| --- | --- |
+| `gsap`, `ScrollTrigger` | The instances in use. |
+| `registry` | The active registry. |
+| `smoothScroll` | The Lenis adapter, or `undefined`. |
+| `mountRecipe(id, root?, parameters?)` | Mount one recipe, optionally into markup added after load. Returns mount keys. |
+| `refresh()` | Recalculate trigger positions after a layout change. |
+| `inspect()` | Current diagnostics. See below. |
+| `destroy()` | Tear everything down and restore the authored DOM. |
+
+Call `destroy()` on route change and on hot reload.
+
+## `inspect()`
+
+```js
+{
+  active: true,
+  reduced: false,
+  registered: ['reveal-rise', ...],
+  mounted: [{ id, root: { selector, tag, id }, slots, performance }],
+  skipped: [{ id, root, reason, slots?, dependencies?, fix? }],
+  errors: [{ id, phase, message }],
+}
+```
+
+`reason` is one of:
+
+| Reason | Meaning |
+| --- | --- |
+| `missing-slots` | The root matched but a required slot was absent. `slots` lists them. |
+| `missing-dependency` | An optional GSAP plugin was not supplied. `dependencies` and `fix` explain it. |
+| `no-op` | The recipe ran but produced no active behaviour, typically under reduced motion. |
+
+A skipped recipe never hides content.
+
+## `createMotionRuntime(options?)`
+
+The lower-level runtime, for when you want to choose the recipes yourself.
+
+```js
+import { createMotionRuntime, createMotionRegistry } from '@syncedco/motion'
+import { revealRise } from '@syncedco/motion/recipes'
+
+const runtime = createMotionRuntime({
+  registry: createMotionRegistry([revealRise], { mode: 'runtime' }),
+})
+```
+
+Accepts everything `createSyncedMotion` does except `smoothScroll` and
+`revealStart`, plus:
+
+| Option | Type | Notes |
+| --- | --- | --- |
+| `registry` | `MotionRegistry` | The registry to mount. |
+| `recipes` | `MotionRecipe[]` | Shorthand: builds a registry from these. |
+| `autoMount` | `boolean` | Defaults to `true`. Set `false` to call `mount()` yourself. |
+
+It returns the same surface as `createSyncedMotion`, plus `mount()`.
+
+## Registries
+
+```js
+createMotionRegistry(recipes?, { mode })   // build your own
+createBuiltinMotionRegistry()              // all sixty, complete manifests
+createRuntimeMotionRegistry(specs?)        // all sixty, lean specs
+```
+
+`mode` is `'complete'` (default) or `'runtime'`. Complete requires the full
+manifest including prose, preview and fixture metadata; runtime accepts lean
+specs. See [the recipe system](RECIPES.md#runtime-specs-and-authoring-metadata).
+
+| Method | Description |
+| --- | --- |
+| `register(recipe)` | Add one recipe. Throws on a duplicate ID. |
+| `has(id)` / `get(id)` | Look up by ID. |
+| `list()` | Every registered recipe. |
+| `resolve(ids?)` | Recipes for the given IDs. Throws on an unknown ID. |
+| `catalog()` | Serialisable catalog: `{ schemaVersion, count, recipes }`. |
+| `validate()` | Validate everything registered. |
+| `mode` | The registry's validation mode. |
+
+## Defining a recipe
+
+```js
+defineMotionRecipe(recipe, { mode })      // validates, freezes, returns it
+validateMotionRecipe(recipe, { mode })    // { ok, issues }
+compileMotionRecipe(recipe)               // selectors plus a setup function
+```
+
+`defineMotionRecipe` throws `MotionRecipeValidationError` (with an `issues`
+array and `recipeId`) when validation fails. Full contract in
+[the recipe system](RECIPES.md).
+
+### `setup(context)`
+
+```js
+setup({ gsap, ScrollTrigger, root, scope, slots, parameters, reduced, debug, recipe }) {
+  if (reduced) return
+  const tween = gsap.from(slots.items, { autoAlpha: 0, y: '1rem' })
+  return () => tween.revert()
+}
+```
+
+| Field | Description |
+| --- | --- |
+| `gsap`, `ScrollTrigger` | Always present. |
+| `SplitText`, `Flip`, `DrawSVGPlugin`, `MorphSVGPlugin`, `MotionPathPlugin` | Present only when supplied via `dependencies`. Declare them in the recipe's `dependencies` array and the runtime will skip the recipe rather than hand you `undefined`. |
+| `root` / `scope` | The matched root element. |
+| `slots` | `Record<string, Element[]>`, keyed by slot name. |
+| `parameters` | Resolved, validated, within declared bounds. |
+| `reduced` | Whether reduced motion is active. |
+| `recipe` | The manifest. |
+
+Return a cleanup function, an object with `destroy()`, or `false` to record the
+mount as a no-op. Anything you create must be reverted by that cleanup.
+
+## Service, inspector and Lenis
+
+`createMotionService(registry)` is the side-effect-free query layer shared by
+the CLI, MCP server and gallery: `catalog()`, `recipe(id)`, `suggest(brief)`,
+`plan(ids)`, `scanMarkup(markup)`, `compose(brief, options)` and `validate()`.
+It touches no files or processes. `createDefaultMotionService()` builds one over
+the built-in catalog.
+
+`createMotionInspector({ registry, runtime })` backs the gallery: select a
+recipe and fixture, coerce parameters within their bounds, subscribe to
+snapshots. `createLenisAdapter({ gsap, ScrollTrigger, options })` returns
+`{ lenis, start, stop, scrollTo, destroy }` and drives Lenis from the GSAP
+ticker.
+
+## Framework adapters
+
+See [framework and CMS integrations](INTEGRATIONS.md).
+
+## TypeScript
+
+Declarations ship for every subpath. `npm run types:check` verifies both that a
+consumer on NodeNext can import them and that every runtime export of every
+entry point is declared.
+
+Exported types include `MotionRecipe`, `MotionRuntimeRecipe`, `MotionRegistry`,
+`MotionRegistryMode`, `MotionRuntime`, `MotionRuntimeOptions`,
+`SyncedMotionOptions`, `SyncedMotionInstance`, `MotionRecipeContext`,
+`MotionRecipeSlot`, `MotionRecipeParameter`, `MotionTriggerType` and
+`MotionPerformanceClass`.