@motion.page/sdk 1.0.8 → 1.1.1

package/dist/registries/SDKRegistry.d.ts

@@ -7,8 +7,10 @@
  */
 import type { ParsedFilterFunction } from '../utils/FilterParser';
 import type { ParsedDrawSVG } from '../utils/DrawSVGParser';
-import type { AnimationTarget, StaggerVars, SplitType } from '../types';
+import type { ParsedClipPath } from '../utils/ClipPathParser';
+import type { AnimationTarget, StaggerVars, SplitType, FlapConfig } from '../types';
 import type { TriggerManager } from '../triggers/TriggerManager';
+import type { FlapController, FlapCharDriver, UserPropEntry } from '../utils/TextFlapper';
 interface ColorParserFunctions {
     parseColor: (color: string, element?: Element) => Float32Array | null;
     getCurrentColor: (element: Element, property: string) => Float32Array;
@@ -32,6 +34,13 @@ interface DrawSVGParserFunctions {
     getPathLength: (element: Element) => number;
     applyDrawSVG: (element: Element, start: number, end: number, length: number) => void;
 }
+interface ClipPathParserFunctions {
+    parseClipPath: (value: string) => ParsedClipPath | null;
+    getCurrentClipPath: (element: Element) => ParsedClipPath | null;
+    interpolateClipPaths: (start: ParsedClipPath, end: ParsedClipPath, progress: number) => ParsedClipPath;
+    clipPathToString: (parsed: ParsedClipPath) => string;
+    canInterpolate: (start: ParsedClipPath, end: ParsedClipPath) => boolean;
+}
 interface TextSplitterFunctions {
     split: (element: Element, type: SplitType, options?: {
         mask?: boolean;
@@ -49,6 +58,11 @@ interface StyleResetFunctions {
 interface FitResolverFunctions {
     registerPendingSetup(animation: import('../core/Animation').Animation, element: Element, fitConfig: import('../types').FitConfig, propTweenPool: typeof import('../memory/PropTweenPool').PropTweenPool): void;
 }
+interface TextFlapperFunctions {
+    prepare: (charElements: HTMLElement[], config: FlapConfig, continuous?: boolean, userProps?: UserPropEntry[]) => FlapCharDriver[];
+    flap: (charElements: HTMLElement[], config: FlapConfig, staggerDelays?: number[], continuous?: boolean) => FlapController;
+    revert: (charElements: HTMLElement[]) => void;
+}
 /**
  * Unified registry for all optional SDK features.
  * Each slot is null until the corresponding module loads and self-registers.
@@ -57,10 +71,12 @@ export declare const SDKRegistry: {
     color: ColorParserFunctions | null;
     filter: FilterParserFunctions | null;
     drawSVG: DrawSVGParserFunctions | null;
+    clipPath: ClipPathParserFunctions | null;
     stagger: {
         resolve: (targets: AnimationTarget[], stagger: number | StaggerVars) => number[];
     } | null;
     textSplitter: TextSplitterFunctions | null;
+    textFlapper: TextFlapperFunctions | null;
     triggerManager: {
         getInstance: () => TriggerManager;
     } | null;

package/dist/render/CSSRenderer.d.ts

@@ -12,6 +12,7 @@
  * - Outside tick → write immediately to DOM (responsiveness for seek/progress/etc.)
  */
 import type { ParsedFilterFunction } from '../utils/FilterParser';
+import type { ParsedClipPath } from '../utils/ClipPathParser';
 /**
  * Set a CSS property value on an element
  * Automatically batches during animation tick, writes immediately otherwise
@@ -31,3 +32,12 @@ export declare function getCSSProperty(element: Element, property: string): stri
  * Interpolates between start and end filter arrays at given progress
  */
 export declare function setCSSFilterProperty(element: Element, startFilters: ParsedFilterFunction[], endFilters: ParsedFilterFunction[], progress: number): void;
+/**
+ * Set a CSS clip-path property by interpolating two parsed shape functions.
+ *
+ * Mirrors `setCSSFilterProperty`: looks up the (optional) ClipPathParser
+ * through SDKRegistry, interpolates the components at the given progress,
+ * serializes the result to a CSS string, then either queues the write or
+ * applies it immediately depending on tick context.
+ */
+export declare function setCSSClipPathProperty(element: Element, property: string, startClipPath: ParsedClipPath, endClipPath: ParsedClipPath, progress: number): void;

package/dist/triggers/EventTrigger.d.ts

@@ -14,6 +14,7 @@ export interface EventTriggerConfig {
     secondTarget?: string | Element;
     toggle?: 'reverse' | 'restart' | 'play';
     preventDefault?: boolean;
+    onEnter?: 'play' | 'restart';
     onLeave?: 'reverse' | 'pause' | 'stop' | 'restart' | 'none';
     leaveDelay?: number;
 }

package/dist/triggers/MarkerManager.d.ts

@@ -9,7 +9,7 @@
 import type { MarkerConfig } from '../types';
 interface MarkerSetupConfig {
     scroller: Element | Window;
-    triggerElement: HTMLElement | null;
+    triggerElement: Element | null;
     startConfig: string;
     endConfig: string;
     markerConfig: MarkerConfig | boolean;
@@ -43,7 +43,7 @@ export declare class MarkerManager {
      * Update marker positions on scroll.
      * Uses cached document-relative positions to avoid getLayoutRect() per frame.
      */
-    update(scrollTop: number, triggerElement: HTMLElement | null, viewportHeight: number): void;
+    update(scrollTop: number, triggerElement: Element | null, viewportHeight: number): void;
     /**
      * Recache element positions after layout changes (resize, refresh).
      */

package/dist/types/index.d.ts

@@ -131,6 +131,100 @@ export interface PathConfig {
     /** Auto-rotate element along path tangent */
     rotate?: boolean;
 }
+/**
+ * Preset character sets available for TextFlapper cycling animations.
+ */
+export type CharsetPreset = 'alphanumeric' | 'alpha' | 'numeric' | 'hex' | 'binary' | 'katakana' | 'symbols' | 'blocks';
+/**
+ * Configuration for TextFlapper split-flap display animations.
+ * Passed as the `flap` property on an AnimationConfig to enable character cycling.
+ *
+ * **Per-cycle composition** — When `flap` is present on an AnimationConfig, all
+ * `from`/`to` properties automatically animate per character-swap cycle instead of
+ * once over the full duration. Each cycle follows a V-curve: rests at `to`, dips to
+ * `from` at the midpoint (when the character swaps), then returns to `to`.
+ */
+export interface FlapConfig {
+    /**
+     * Visual style for each character cycle.
+     * - `'flip'`  — 3D CSS rotateX transition (default)
+     * - `'fade'`  — CSS opacity fade out/in
+     * - `'slide'` — CSS translateY slide out/in
+     * - `'blur'`  — CSS filter blur out/in
+     * - `'scale'` — CSS scale pop/shrink
+     * - `'board'` — mechanical split-flap (departure board)
+     * - `'none'`  — No built-in visual effect; characters cycle with instant swap.
+     *   Use with `from`/`to` to create fully custom flap animations — all
+     *   properties animate per-cycle (V-curve: to→from→to on each swap).
+     */
+    type?: 'flip' | 'fade' | 'slide' | 'blur' | 'scale' | 'board' | 'none';
+    /**
+     * Character set used for intermediate (scrambled) frames.
+     * Use a CharsetPreset name or any custom string of characters.
+     * @default 'alphanumeric'
+     */
+    charset?: CharsetPreset | string;
+    /**
+     * Number of random cycles each character performs before settling.
+     * - `number`      : exact cycle count for every character
+     * - `[min, max]`  : random count in range, chosen independently per character
+     * @default [2, 5]
+     */
+    cycles?: number | [min: number, max: number];
+    /**
+     * Perspective depth (px) for the 3D flip/board animation.
+     * Only used when `type` is 'flip' or 'board'.
+     * @default 400
+     */
+    perspective?: number;
+    /**
+     * When true, board-type flaps get a realistic departure-board look:
+     * dark gradient background, rounded corners, and a visible split line.
+     * Only applies when `type` is 'board'.
+     * @default true
+     */
+    styledBoard?: boolean;
+    /**
+     * Strategy for preventing layout shift while characters cycle:
+     *
+     *   - `false` (default) — no pinning. Text width flexes with each glyph.
+     *     Fine for same-width charsets (Latin → alphanumeric).
+     *   - `true` or `'cells'` — pin each character cell to the widest glyph
+     *     across the target chars AND the charset pool. Every cell is the
+     *     same width regardless of which random glyph renders at the moment.
+     *     Good for monospace aesthetics (departure boards, counters). Adds
+     *     visible horizontal space around narrow Latin letters when paired
+     *     with wide charsets (katakana, CJK).
+     *   - `'container'` — pin the parent element's outer width to whatever
+     *     the text would measure at the widest possible flap state, but
+     *     DON'T pin individual cells. Characters flow naturally (no extra
+     *     spacing between Latin letters), while the surrounding layout
+     *     (rows of links, inline columns, etc.) stays rock-steady because
+     *     the element's outer box never changes size. Best choice for
+     *     inline hover flappers on navigation links where cell-pinning
+     *     would space the letters out unnaturally.
+     *
+     * Automatically enabled (as `'cells'`) for `board` + `styledBoard: true`.
+     * @default false
+     */
+    stableWidth?: boolean | 'cells' | 'container';
+    /**
+     * When true and `type` is 'board', whitespace characters (spaces, tabs,
+     * newlines) are rendered as empty board cells — the cell frame, background,
+     * perspective, and split line are built as usual, but the cell face is blank
+     * (non-breaking space) and no flap animation runs.
+     *
+     * Rationale: real split-flap departure boards have fixed cells regardless of
+     * which positions contain characters. Enabling this lets you animate text of
+     * varying lengths without the board width or cell count shifting between
+     * lines.
+     *
+     * Has no effect when `type` is anything other than 'board'. Default `false`
+     * preserves existing behavior (whitespace cells are skipped entirely).
+     * @default false
+     */
+    preserveWhitespaceCells?: boolean;
+}
 /**
  * Configuration for Fit animations.
  * Morphs one element's geometry to match another's — captures source and target
@@ -182,6 +276,18 @@ export interface AnimationConfig {
      * Motion('reveal', 'h1', { split: 'lines', mask: true, from: { y: '100%' }, to: { y: 0 }, stagger: 0.1 })
      */
     mask?: boolean;
+    /**
+     * Split-flap display animation configuration.
+     * Animates pre-split character elements through random character cycling before
+     * settling on the target character. Requires the target elements to already be
+     * split into individual character spans (e.g. via TextSplitter with 'chars').
+     *
+     * Per-character animations are created by the engine; flap preset values
+     * (rotateX, opacity, etc.) merge into from/to at low priority — user values always win.
+     * @example
+     * Motion('scramble', chars, { flap: { type: 'flip', charset: 'alphanumeric', cycles: [2, 5] } })
+     */
+    flap?: FlapConfig;
     /**
      * Fit animation configuration.
      * Morphs the source element's geometry toward the target element's geometry.
@@ -254,6 +360,20 @@ export interface MarkerConfig {
 export interface HoverConfig {
     target?: string | Element;
     each?: boolean;
+    /**
+     * What happens on mouseenter:
+     *   - `'play'` (default) — `.play()` the timeline. Resumes from current
+     *     position; silently no-ops when already at the end. Best for
+     *     reversible hover animations paired with `onLeave: 'reverse'`.
+     *   - `'restart'` — `.restart()` the timeline ONLY when the previous run
+     *     has finished (or hasn't started yet). If the timeline is still
+     *     mid-play, the current run is allowed to finish uninterrupted —
+     *     jittery cursors at the element edge won't stutter the animation
+     *     and leaving + re-entering mid-flap won't reset it. Best for
+     *     one-shot effects (text flappers, shake, decode reveal). Pair with
+     *     `onLeave: 'none'` so the animation finishes naturally on leave.
+     */
+    onEnter?: 'play' | 'restart';
     onLeave?: 'reverse' | 'pause' | 'stop' | 'restart' | 'none';
     leaveDelay?: number;
 }

package/dist/types/public.d.ts

@@ -4,4 +4,4 @@
  * This file re-exports only the public types intended for SDK users.
  * Internal types are co-located with their implementations.
  */
-export type { EasingFunction, SplitType, RepeatConfig, StaggerVars, AnimationVars, PathConfig, FitConfig, AnimationConfig, AnimationEntry, ObjectTarget, AnimationTarget, TargetInput, MarkerConfig, HoverConfig, ClickConfig, ScrollConfig, MouseMoveConfig, PageExitConfig, GestureInputType, GestureEvent, GestureAction, GestureConfig, CursorStateVars, CursorSqueezeConfig, CursorConfig, } from './index';
+export type { EasingFunction, SplitType, RepeatConfig, StaggerVars, AnimationVars, PathConfig, FitConfig, CharsetPreset, FlapConfig, AnimationConfig, AnimationEntry, ObjectTarget, AnimationTarget, TargetInput, MarkerConfig, HoverConfig, ClickConfig, ScrollConfig, MouseMoveConfig, PageExitConfig, GestureInputType, GestureEvent, GestureAction, GestureConfig, CursorStateVars, CursorSqueezeConfig, CursorConfig, } from './index';

package/dist/utils/ClipPathParser.d.ts

@@ -0,0 +1,74 @@
+/**
+ * ClipPathParser - Parse and interpolate CSS clip-path shape functions
+ *
+ * Supports:
+ * - circle(<radius> at <x> <y>)
+ * - ellipse(<rx> <ry> at <x> <y>)
+ * - inset(<top> <right>? <bottom>? <left>? round <radius>?)
+ * - polygon(<x1> <y1>, <x2> <y2>, …)
+ * - rect(<top> <right> <bottom> <left> round <radius>?)
+ * - xywh(<x> <y> <w> <h> round <radius>?)
+ *
+ * Interpolation rules:
+ * - From and To must use the same shape function — otherwise we snap to the
+ *   end value at progress >= 0.5 (no shape morphing across types).
+ * - polygon vertex counts must match — otherwise we snap to the end value.
+ * - Each numeric component is lerped while preserving the unit emitted in the
+ *   end value (start unit kept when end has none).
+ *
+ * Loaded conditionally through SDKRegistry so the bundler can drop it when
+ * no animation uses clip-path.
+ */
+export type ClipPathShape = 'circle' | 'ellipse' | 'inset' | 'polygon' | 'rect' | 'xywh';
+/**
+ * A single numeric component with its CSS unit (e.g. 71 + "%" or 10 + "px").
+ */
+export interface ClipPathComponent {
+    value: number;
+    unit: string;
+}
+/**
+ * Parsed clip-path shape function.
+ *
+ * `components` holds the ordered numeric values that get interpolated. The
+ * meaning of each slot is shape-specific — see the assemble* helpers.
+ *
+ * `extras` carries non-numeric tokens (e.g. the `round` keyword for inset/rect/
+ * xywh) that we preserve verbatim when re-serializing.
+ */
+export interface ParsedClipPath {
+    shape: ClipPathShape;
+    components: ClipPathComponent[];
+    extras?: {
+        hasRound?: boolean;
+    };
+}
+/**
+ * Parse a clip-path value string into a structured `ParsedClipPath`.
+ * Returns null if the value is `none`, empty, or an unsupported shape.
+ */
+export declare function parseClipPath(value: string): ParsedClipPath | null;
+/**
+ * Read the current computed clip-path on an element.
+ * Returns null when there is no clip-path or it's a non-shape value.
+ */
+export declare function getCurrentClipPath(element: Element): ParsedClipPath | null;
+/**
+ * Returns true when start/end are interpolatable: same shape and component
+ * count. Polygon morphing requires identical vertex counts.
+ */
+export declare function canInterpolate(start: ParsedClipPath, end: ParsedClipPath): boolean;
+/**
+ * Interpolate two parsed clip-paths at `progress` (0-1).
+ *
+ * If shapes/lengths don't match, falls back to a hard swap at progress >= 0.5
+ * — no smooth morphing is possible across different shape functions.
+ *
+ * Returns a `ParsedClipPath` whose `components` array is reused on subsequent
+ * calls — consume it (e.g. via `clipPathToString`) before the next invocation.
+ */
+export declare function interpolateClipPaths(start: ParsedClipPath, end: ParsedClipPath, progress: number): ParsedClipPath;
+/**
+ * Serialize a parsed clip-path back into a valid CSS clip-path string.
+ */
+export declare function clipPathToString(parsed: ParsedClipPath): string;

package/dist/utils/PropertyParser.d.ts

@@ -15,6 +15,7 @@
 import type { AnimationTarget } from '../types';
 import type { ParsedFilterFunction } from './FilterParser';
 import type { ParsedDrawSVG } from './DrawSVGParser';
+import type { ParsedClipPath } from './ClipPathParser';
 /**
  * Valid property value types for animation
  */
@@ -60,6 +61,14 @@ interface ParsedDrawSVGProperty extends ParsedPropertyBase {
     endDraw: ParsedDrawSVG;
     length: number;
 }
+/**
+ * Clip-path property (CSS clip-path shape function interpolation)
+ */
+interface ParsedClipPathProperty extends ParsedPropertyBase {
+    type: 'clipPath';
+    startClipPath: ParsedClipPath;
+    endClipPath: ParsedClipPath;
+}
 /**
  * Path property (motion along SVG path)
  */
@@ -82,7 +91,7 @@ interface ParsedPathProperty extends ParsedPropertyBase {
 /**
  * Discriminated union of all parsed property types
  */
-export type ParsedProperty = ParsedScalarProperty | ParsedColorProperty | ParsedFilterProperty | ParsedDrawSVGProperty | ParsedPathProperty;
+export type ParsedProperty = ParsedScalarProperty | ParsedColorProperty | ParsedFilterProperty | ParsedDrawSVGProperty | ParsedPathProperty | ParsedClipPathProperty;
 /**
  * Check if a property is a transform property
  */
@@ -103,6 +112,10 @@ export declare function isDrawSVGProp(prop: string): boolean;
  * Check if a property is the path property (motion path)
  */
 export declare function isPathProp(prop: string): boolean;
+/**
+ * Check if a property is the clip-path property (accepts both kebab and camel case)
+ */
+export declare function isClipPathProp(prop: string): boolean;
 /**
  * Check if a property is a CSS variable (custom property)
  */
@@ -127,6 +140,25 @@ export declare function getDefaultUnit(prop: string): string;
  * Handles both DOM Elements and plain objects
  */
 export declare function getCurrentValue(target: AnimationTarget, prop: string): number;
+/**
+ * Convert a pixel value to a target CSS unit by measuring the element in the DOM.
+ *
+ * Uses the browser's layout engine: temporarily sets `100{targetUnit}` on the
+ * element, reads the computed pixel equivalent, then derives the conversion ratio.
+ * This handles %, em, rem, vw, vh, vmin, vmax, ch, ex — any unit the browser supports.
+ *
+ * When the target unit is 'px' or empty, returns the value unchanged (no conversion).
+ * Falls back to the raw pixel value if measurement fails (e.g. detached element).
+ */
+export declare function convertPxToUnit(element: Element, prop: string, pxValue: number, targetUnit: string): number;
+/**
+ * Get the current computed value of a property, converted to the specified unit.
+ *
+ * Combines getCurrentValue (which always returns px for layout properties)
+ * with convertPxToUnit to return the value in the desired CSS unit.
+ * Only performs conversion for DOM Element targets with non-px units.
+ */
+export declare function getCurrentValueInUnit(target: AnimationTarget, prop: string, targetUnit: string): number;
 /**
  * Get the original CSS value AND unit of a property (excluding inline styles)
  * Returns both value and unit to preserve the original CSS unit (%, rem, em, vh, etc.)

package/dist/utils/TextFlapper.d.ts

@@ -0,0 +1,105 @@
+/**
+ * TextFlapper - Split-flap display animation utility
+ *
+ * Produces per-character render drivers that animate text through random
+ * character cycling before settling on the target character — inspired by
+ * split-flap departure boards.
+ *
+ * Seven visual modes:
+ *   - 'flip'  : 3D rotateX (default)
+ *   - 'fade'  : opacity fade
+ *   - 'slide' : translateY slide
+ *   - 'blur'  : filter blur out/in
+ *   - 'scale' : scale pop/shrink
+ *   - 'board' : mechanical split-flap (departure board)
+ *   - 'none'  : instant text swap
+ *
+ * Integration paths:
+ *   1. SDK pipeline — `prepare()` returns drivers consumed by AnimationBuilder,
+ *      which creates real Animation objects managed by Engine/Timeline.
+ *   2. Standalone — `flap()` drives the animation via requestAnimationFrame
+ *      for direct usage outside the SDK pipeline (e.g. ConnectAI button).
+ *
+ * Usage (standalone):
+ *   const ctrl = TextFlapper.flap(charEls, { type: 'flip' });
+ *   ctrl.kill();
+ *
+ * Revert:
+ *   TextFlapper.revert(charEls);
+ */
+import type { FlapConfig } from '../types';
+/**
+ * A single numeric property to interpolate per flap cycle.
+ * AnimationBuilder populates these from user-provided from/to vars so that
+ * CSS properties animate once per character-swap cycle instead of once over
+ * the full animation duration.
+ */
+export interface UserPropEntry {
+    /** CSS property name or transform shorthand (e.g. 'y', 'opacity', 'rotateX') */
+    prop: string;
+    /** Start value (from) */
+    from: number;
+    /** End value (to) */
+    to: number;
+    /** CSS unit string: 'px', 'deg', '%', or '' for unitless */
+    unit: string;
+    /** True when prop is a TransformCache property (routes through setTransformValue) */
+    isTransform: boolean;
+}
+/** Lightweight controller for standalone flap() usage (ConnectAI, etc.) */
+export interface FlapController {
+    kill(): void;
+    readonly finished: Promise<void>;
+    readonly isComplete: boolean;
+}
+/**
+ * Per-character render driver returned by `prepare()`.
+ * AnimationBuilder uses these to create real Animation objects via Engine.
+ */
+export interface FlapCharDriver {
+    /** The character element */
+    readonly el: HTMLElement;
+    /** Called each frame with progress (0-1). Drives text swaps + visual effects. */
+    readonly render: (progress: number) => void;
+    /** Snap to resolved final state. Called on animation complete. */
+    readonly finalize: () => void;
+}
+export declare class TextFlapper {
+    /**
+     * Prepare per-character animation drivers for the split-flap effect.
+     *
+     * Returns one FlapCharDriver per non-whitespace character. Each driver
+     * provides `duration`, `render(progress)`, and `finalize()` — intended to
+     * be consumed by AnimationBuilder, which creates real Engine-managed
+     * Animation objects from them.
+     *
+     * This method handles:
+     *   - Recording original textContent for revert
+     *   - Applying one-time type-specific setup styles
+     *   - Pre-generating random character sequences
+     *
+     * @param charElements - Pre-split character span elements
+     * @param config - Flap animation configuration
+     */
+    static prepare(charElements: HTMLElement[], config: FlapConfig, continuous?: boolean, userProps?: UserPropEntry[]): FlapCharDriver[];
+    /**
+     * Standalone split-flap animation using requestAnimationFrame.
+     *
+     * For use outside the SDK pipeline (e.g. ConnectAI button) where Engine
+     * may not be initialised. Returns a lightweight FlapController.
+     *
+     * Duration is computed internally from cycles and a default speed (80ms).
+     * Stagger defaults to sequential character start with 2× speed gap.
+     *
+     * @param charElements - Pre-split character span elements
+     * @param config - Flap animation configuration
+     * @param staggerDelays - Optional per-element start delays in milliseconds
+     * @param continuous - When true, characters cycle indefinitely (never land on target)
+     */
+    static flap(charElements: HTMLElement[], config: FlapConfig, staggerDelays?: number[], continuous?: boolean): FlapController;
+    /**
+     * Revert character elements to their original text content and remove
+     * all inline styles applied by TextFlapper.
+     */
+    static revert(charElements: HTMLElement[]): void;
+}

package/dist/utils/TextSplitter.d.ts

@@ -118,6 +118,14 @@ export declare class TextSplitter {
      *
      * Without this, inline-block split spans inherit `-webkit-text-fill-color: transparent`
      * but NOT the parent's gradient background, making the text invisible.
+     *
+     * IMPORTANT: We copy the computed background-image directly instead of using
+     * `background: inherit` because `background` is NOT an inherited CSS property.
+     * When the split element contains intermediate wrapper elements (e.g.
+     * `<h1><span class="line"><span class="accent">word</span></span></h1>`),
+     * `inherit` resolves to `none` at each intermediate element, breaking the chain.
+     * Copying the resolved value ensures the gradient reaches every split span
+     * regardless of DOM depth.
      */
     private static _propagateGradientText;
     /**

package/llms.txt

@@ -42,7 +42,7 @@ For complete SDK documentation, install the motion-page skill: `npx skills add m
 ## 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
+- **AnimationVars**: Transforms, opacity, colors, CSS properties, filter, clip-path, 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)
@@ -52,6 +52,7 @@ For complete SDK documentation, install the motion-page skill: `npx skills add m
 - **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)
+- **Clip Path**: Animate clip-path/clipPath between matching shapes (circle, ellipse, inset, polygon, rect, xywh); same shape on both ends; polygon vertex counts must match; cross-shape hard-swaps at progress >= 0.5; renderer also writes -webkit-clip-path
 - **Motion Path**: path: { target, align, start, end, rotate }
 - **Custom Cursors**: type: basic/text/media; mp-cursor-text and mp-cursor-media HTML attributes
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion.page/sdk",
-  "version": "1.0.8",
+  "version": "1.1.1",
   "description": "High-performance CSS animation SDK with scroll, hover, gesture, and cursor triggers",
   "type": "module",
   "main": "dist/index.js",
@@ -15,10 +15,11 @@
   },
   "files": [
     "dist",
-    "llms.txt"
+    "llms.txt",
+    "!dist/**/*.map"
   ],
   "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",
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && bun build src/index.ts --outdir dist --minify --sourcemap=external && mkdir -p dist/.cjs-tmp && bun build src/index.ts --outdir dist/.cjs-tmp --format=cjs --minify --sourcemap=external && 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",
     "test": "bun test",
     "test:parity": "bun test tests/parity",
     "test:bench": "bun test --bench",
@@ -30,7 +31,7 @@
     "@types/jsdom": "^27.0.0",
     "esbuild": "^0.27.2",
     "jsdom": "^27.3.0",
-    "typescript": "^5.3.0"
+    "typescript": "^6.0.3"
   },
   "keywords": [
     "animation",