@motion.page/sdk 0.1.0 → 0.1.2

package/dist/triggers/TriggerManager.d.ts

@@ -117,6 +117,13 @@ export declare class TriggerManager {
      * Refresh all position-based triggers after layout changes (e.g. window resize).
      * This includes scroll triggers, hover event triggers, gesture triggers, and
      * mouseMove triggers — all of which cache element bounds at setup time.
+     *
+     * Scroll triggers are refreshed in DOM document order (top to bottom).
+     * This ensures that when a pinned trigger's spacer size changes during refresh,
+     * triggers lower in the page measure the already-updated spacer positions rather
+     * than stale pre-refresh values.  Non-pinned triggers (no pin manager / layout
+     * rect) are always sorted after pinned ones so they benefit from all spacer
+     * updates before recalculating their own positions.
      */
     refreshScrollTriggers(): void;
     /**

package/dist/utils/getLayoutRect.d.ts

@@ -1,10 +1,15 @@
 /**
- * Returns the element's bounding rect as if no CSS transform were applied.
- * Temporarily strips the inline transform, measures, then restores it.
+ * Returns the element's bounding rect as if no CSS transform or position:fixed were applied.
+ * Temporarily strips inline transforms and any fixed positioning, measures, then restores.
  * This gives us the "layout" position in the document flow.
  *
  * Used by ScrollTrigger and MarkerManager to compute trigger positions and
  * marker placements relative to the element's original layout position,
- * regardless of any animation transforms currently applied.
+ * regardless of any animation transforms or pin states currently applied.
+ *
+ * Handles position:fixed elements: a fixed element returns viewport-relative
+ * coordinates from getBoundingClientRect(), which would produce incorrect
+ * document-relative trigger positions.  Temporarily clearing position/top/left/width
+ * restores document-flow measurement before reading the rect.
  */
 export declare function getLayoutRect(element: Element): DOMRect;

package/llms.txt

@@ -0,0 +1,64 @@
+# @motion.page/sdk
+
+> Zero-dependency animation SDK with named timelines, 8 trigger types, text splitting, FLIP morphing, custom cursors, and SVG drawing. Browser-only (requires document/window).
+
+For complete SDK documentation, install the motion-page skill: `npx skills add motion-page/claude-plugin`
+
+## Getting Started
+
+- **Installation**: npm install @motion.page/sdk; ESM, CJS, and browser IIFE builds
+- **Quick Start**: Basic fade-in, scroll-triggered, and multi-step timeline examples
+- **Core Concept**: Named timelines — Motion(name) retrieves or creates; same name = same instance
+- **Implicit Values**: from-only resolves current CSS as to; to-only resolves current CSS as from; natural defaults (opacity:1, x:0, y:0, scale:1) are auto-filled
+
+## Core API
+
+- **Motion()**: Factory with 3 overloads — retrieve timeline, single animation, multi-step array
+- **Motion.set()**: Instant property setting (zero duration)
+- **Motion.kill() / killAll()**: Destroy named timelines; killAll for SPA cleanup
+- **Motion.reset()**: Kill tweens on targets and revert text splits
+- **Motion.refreshScrollTriggers()**: Recalculate scroll positions after DOM changes
+- **Motion.cleanup()**: Remove ScrollTrigger spacer/marker DOM nodes
+- **Motion.utils**: toArray, clamp, random, snap, interpolate, mapRange, normalize, wrap — all support currying
+
+## Timeline
+
+- **Playback Control**: play, pause, reverse, restart, seek
+- **State**: progress, time, timeScale, duration, isActive — getter/setter pattern
+- **Lifecycle Callbacks**: onStart, onUpdate(progress, time), onComplete
+- **Sequencing**: tl.call(fn, params, position) — fire functions at timeline positions
+
+## Triggers
+
+- **.onPageLoad()**: Auto-play when DOM ready
+- **.onScroll(config)**: start, end, scrub, pin, pinSpacing, markers, toggleActions, snap, scroller
+- **.onHover(config)**: target, each, onLeave (reverse/pause/stop/restart/none), leaveDelay
+- **.onClick(config)**: target, each, toggle (reverse/restart/play), secondTarget, preventDefault
+- **.onMouseMove(config)**: type (distance/axis), smooth, startProgress, leaveProgress
+- **.onGesture(config)**: types (pointer/touch/wheel/scroll), events map, tolerance, dragMinimum, lockAxis
+- **.onCursor(config)**: type (basic/text/media), smooth, squeeze, hideNative, default/hover/click states
+- **.onPageExit(config)**: mode (all/include/exclude), selectors, skipHref
+
+## Animation Config
+
+- **AnimationConfig**: from, to, duration, delay, ease, stagger, repeat, split, mask, fit, axis, callbacks
+- **AnimationVars**: Transforms, opacity, colors, CSS properties, filter, drawSVG, path, custom properties
+- **Easing**: power1-4, sine, expo, circ, back, elastic, bounce — .in/.out/.inOut
+- **Stagger**: each, amount, from (start/center/edges/random/end/index), grid, axis, ease
+- **Position Parameter**: Absolute (number), relative (+=/-=), anchored (<, >, <0.2, >-0.1)
+
+## Features
+
+- **Text Splitting**: split: chars/words/lines; mask: true for clip reveals; data-split-* attributes
+- **FLIP Morphing**: fit: { target, scale, resize, absolute } — animate between element states
+- **DrawSVG**: String format ("0% 100%") or object ({ start, end } as 0-100 percentages)
+- **Motion Path**: path: { target, align, start, end, rotate }
+- **Custom Cursors**: type: basic/text/media; mp-cursor-text and mp-cursor-media HTML attributes
+
+## Optional
+
+- **Types Reference**: All exported TypeScript types and interfaces
+- **Browser Build**: IIFE bundle exposing window.Motion and window.MotionTimeline
+- **SPA Cleanup**: Motion.killAll() + Motion.cleanup() on route change
+- **Migration from GSAP**: gsap.to → Motion(name, target, {to}).play(); ScrollTrigger → .onScroll()
+- **Migration from Framer Motion**: motion.div → Motion(name, selector, config); whileHover → .onHover()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion.page/sdk",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "High-performance CSS animation SDK with scroll, hover, gesture, and cursor triggers",
   "type": "module",
   "main": "dist/index.js",
@@ -14,7 +14,8 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "llms.txt"
   ],
   "scripts": {
     "build": "rm -rf dist && tsc -p tsconfig.build.json && bun build src/index.ts --outdir dist --minify --sourcemap=linked && mkdir -p dist/.cjs-tmp && bun build src/index.ts --outdir dist/.cjs-tmp --format=cjs --minify --sourcemap=linked && mv dist/.cjs-tmp/index.js dist/index.cjs && mv dist/.cjs-tmp/index.js.map dist/index.cjs.map && rm -rf dist/.cjs-tmp",
@@ -42,12 +43,7 @@
     "transform"
   ],
   "author": "Motion.page",
-  "license": "SEE LICENSE IN LICENSE",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/nicDamours/motion.page",
-    "directory": "packages/sdk"
-  },
+  "license": "FSL-1.1-Apache-2.0",
   "homepage": "https://motion.page",
   "engines": {
     "node": ">=18"