@enact-ui/animate 1.0.0

package/dist/hooks/use-motion-preset.d.ts

@@ -0,0 +1,53 @@
+import { type MotionPreset } from "../presets/motion-presets";
+/** Computed motion configuration for paths component */
+export interface ComputedPathsMotion {
+    /** Computed base duration (preset * CSS multiplier) */
+    baseDuration: number;
+    /** Computed opacity keyframes respecting CSS bounds */
+    opacity: [number, number, number];
+    /** Easing function from preset */
+    ease: "linear" | "easeInOut";
+    /** Delay variation factor from preset */
+    delayVariation: number;
+    /** Duration variation factor from preset */
+    durationVariation: number;
+    /** Whether reduced motion is preferred */
+    prefersReducedMotion: boolean;
+}
+/** Computed motion configuration for rays component */
+export interface ComputedRaysMotion {
+    /** Computed cycle duration (preset speed * CSS multiplier) */
+    cycleDuration: number;
+    /** Base intensity from preset */
+    intensity: number;
+    /** Swing variation from preset */
+    swingVariation: number;
+    /** Whether reduced motion is preferred */
+    prefersReducedMotion: boolean;
+}
+/**
+ * Hook for using motion presets with theme-aware CSS variables.
+ *
+ * Provides computed motion configuration that:
+ * - Respects `prefers-reduced-motion` preference
+ * - Reads and applies CSS motion variables from the theme
+ * - Memoizes calculations to prevent unnecessary re-renders
+ *
+ * @param component - The component type ("paths" | "rays")
+ * @param preset - The motion preset ("slow" | "medium" | "fast")
+ * @returns Computed motion configuration for the component
+ *
+ * @example
+ * ```tsx
+ * // In BackgroundPaths component
+ * const motion = useMotionPreset("paths", "medium");
+ * // Returns: { baseDuration: 20, opacity: [...], ... }
+ *
+ * // In LightRays component
+ * const motion = useMotionPreset("rays", "fast");
+ * // Returns: { cycleDuration: 8, intensity: 0.7, ... }
+ * ```
+ */
+export declare function useMotionPreset(component: "paths", preset: MotionPreset): ComputedPathsMotion;
+export declare function useMotionPreset(component: "rays", preset: MotionPreset): ComputedRaysMotion;
+//# sourceMappingURL=use-motion-preset.d.ts.map

package/dist/hooks/use-motion-preset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-motion-preset.d.ts","sourceRoot":"","sources":["../../src/hooks/use-motion-preset.ts"],"names":[],"mappings":"AAIA,OAAO,EAAgF,KAAK,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAY5I,wDAAwD;AACxD,MAAM,WAAW,mBAAmB;IAChC,uDAAuD;IACvD,YAAY,EAAE,MAAM,CAAC;IACrB,uDAAuD;IACvD,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,kCAAkC;IAClC,IAAI,EAAE,QAAQ,GAAG,WAAW,CAAC;IAC7B,yCAAyC;IACzC,cAAc,EAAE,MAAM,CAAC;IACvB,4CAA4C;IAC5C,iBAAiB,EAAE,MAAM,CAAC;IAC1B,0CAA0C;IAC1C,oBAAoB,EAAE,OAAO,CAAC;CACjC;AAED,uDAAuD;AACvD,MAAM,WAAW,kBAAkB;IAC/B,8DAA8D;IAC9D,aAAa,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,kCAAkC;IAClC,cAAc,EAAE,MAAM,CAAC;IACvB,0CAA0C;IAC1C,oBAAoB,EAAE,OAAO,CAAC;CACjC;AAmFD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,eAAe,CAAC,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,YAAY,GAAG,mBAAmB,CAAC;AAC/F,wBAAgB,eAAe,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,GAAG,kBAAkB,CAAC"}

package/dist/hooks/use-motion-preset.js

@@ -0,0 +1,117 @@
+// Copyright (c) 2025 Amsterdam Data Labs
+"use client";
+import { useEffect, useMemo, useState } from "react";
+import { getPreset } from "../presets/motion-presets";
+/** Default CSS variable values (fallback if not in browser) */
+const DEFAULT_CSS_VARS = {
+    durationMultiplier: 1,
+    opacityMin: 0.35,
+    opacityMax: 0.6,
+};
+/**
+ * Reads motion CSS variables from the document root.
+ * Returns default values if not in browser environment.
+ */
+function readCSSVariables() {
+    if (typeof window === "undefined") {
+        return DEFAULT_CSS_VARS;
+    }
+    const root = document.documentElement;
+    const styles = getComputedStyle(root);
+    const parseFloat_ = (value, fallback) => {
+        const parsed = parseFloat(value);
+        return Number.isNaN(parsed) ? fallback : parsed;
+    };
+    return {
+        durationMultiplier: parseFloat_(styles.getPropertyValue("--motion-duration-multiplier"), DEFAULT_CSS_VARS.durationMultiplier),
+        opacityMin: parseFloat_(styles.getPropertyValue("--motion-opacity-min"), DEFAULT_CSS_VARS.opacityMin),
+        opacityMax: parseFloat_(styles.getPropertyValue("--motion-opacity-max"), DEFAULT_CSS_VARS.opacityMax),
+    };
+}
+/**
+ * Computes paths motion configuration from preset and CSS variables.
+ */
+function computePathsMotion(preset, cssVars, prefersReducedMotion) {
+    if (prefersReducedMotion) {
+        return {
+            baseDuration: 0,
+            opacity: [cssVars.opacityMin, cssVars.opacityMin, cssVars.opacityMin],
+            ease: preset.ease,
+            delayVariation: 0,
+            durationVariation: 0,
+            prefersReducedMotion: true,
+        };
+    }
+    return {
+        baseDuration: preset.duration * cssVars.durationMultiplier,
+        opacity: [
+            Math.max(preset.opacity[0], cssVars.opacityMin),
+            Math.min(preset.opacity[1], cssVars.opacityMax),
+            Math.max(preset.opacity[2], cssVars.opacityMin),
+        ],
+        ease: preset.ease,
+        delayVariation: preset.delayVariation,
+        durationVariation: preset.durationVariation,
+        prefersReducedMotion: false,
+    };
+}
+/**
+ * Computes rays motion configuration from preset and CSS variables.
+ */
+function computeRaysMotion(preset, cssVars, prefersReducedMotion) {
+    if (prefersReducedMotion) {
+        return {
+            cycleDuration: 0,
+            intensity: 0,
+            swingVariation: 0,
+            prefersReducedMotion: true,
+        };
+    }
+    return {
+        cycleDuration: Math.max(preset.speed * cssVars.durationMultiplier, 0.1),
+        intensity: preset.intensity,
+        swingVariation: preset.swingVariation,
+        prefersReducedMotion: false,
+    };
+}
+export function useMotionPreset(component, preset) {
+    // Track reduced motion preference with state for reactivity
+    const [prefersReducedMotion, setPrefersReducedMotion] = useState(() => {
+        if (typeof window === "undefined")
+            return false;
+        return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    });
+    // Track CSS variables (may change with theme)
+    const [cssVars, setCssVars] = useState(DEFAULT_CSS_VARS);
+    // Listen for reduced motion preference changes
+    useEffect(() => {
+        const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+        setPrefersReducedMotion(mediaQuery.matches);
+        const handler = (e) => setPrefersReducedMotion(e.matches);
+        mediaQuery.addEventListener("change", handler);
+        return () => mediaQuery.removeEventListener("change", handler);
+    }, []);
+    // Read CSS variables on mount and when theme might change
+    useEffect(() => {
+        setCssVars(readCSSVariables());
+        // Listen for theme changes via attribute mutations on document
+        const observer = new MutationObserver(() => {
+            setCssVars(readCSSVariables());
+        });
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ["class", "data-theme"],
+        });
+        return () => observer.disconnect();
+    }, []);
+    // Compute and memoize the motion configuration
+    return useMemo(() => {
+        if (component === "paths") {
+            const presetConfig = getPreset(preset, "paths");
+            return computePathsMotion(presetConfig, cssVars, prefersReducedMotion);
+        }
+        const presetConfig = getPreset(preset, "rays");
+        return computeRaysMotion(presetConfig, cssVars, prefersReducedMotion);
+    }, [component, preset, cssVars, prefersReducedMotion]);
+}
+//# sourceMappingURL=use-motion-preset.js.map

package/dist/hooks/use-motion-preset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-motion-preset.js","sourceRoot":"","sources":["../../src/hooks/use-motion-preset.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @enact-ui/animate
+ *
+ * Animation utilities and motion presets for ENACT UI.
+ * Only install if you need animation capabilities.
+ *
+ * @packageDocumentation
+ */
+export { type ComputedPathsMotion, type ComputedRaysMotion, useMotionPreset, } from "./hooks/use-motion-preset";
+export { type AmbientPathsConfig, ambientPaths, applyMotionPreset, type ComponentType, getPreset, type LightRaysConfig, lightRays, type MotionPreset, type PresetConfig, } from "./presets/motion-presets";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA;;;;;;;GAOG;AAKH,OAAO,EACH,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,EACvB,eAAe,GAClB,MAAM,2BAA2B,CAAC;AAKnC,OAAO,EACH,KAAK,kBAAkB,EAEvB,YAAY,EACZ,iBAAiB,EACjB,KAAK,aAAa,EAElB,SAAS,EACT,KAAK,eAAe,EACpB,SAAS,EAET,KAAK,YAAY,EACjB,KAAK,YAAY,GACpB,MAAM,0BAA0B,CAAC"}

package/dist/index.js

@@ -0,0 +1,188 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ambientPaths: () => ambientPaths,
+  applyMotionPreset: () => applyMotionPreset,
+  getPreset: () => getPreset,
+  lightRays: () => lightRays,
+  useMotionPreset: () => useMotionPreset
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/hooks/use-motion-preset.ts
+var import_react = require("react");
+
+// src/presets/motion-presets.ts
+var ambientPaths = {
+  slow: {
+    duration: 30,
+    opacity: [0.2, 0.4, 0.2],
+    ease: "easeInOut",
+    delayVariation: 0.3,
+    durationVariation: 0.5
+  },
+  medium: {
+    duration: 20,
+    opacity: [0.3, 0.6, 0.3],
+    ease: "easeInOut",
+    delayVariation: 0.25,
+    durationVariation: 0.5
+  },
+  fast: {
+    duration: 12,
+    opacity: [0.4, 0.8, 0.4],
+    ease: "linear",
+    delayVariation: 0.2,
+    durationVariation: 0.4
+  }
+};
+var lightRays = {
+  slow: {
+    speed: 20,
+    intensity: 0.3,
+    swingVariation: 1.8
+  },
+  medium: {
+    speed: 14,
+    intensity: 0.5,
+    swingVariation: 1.5
+  },
+  fast: {
+    speed: 8,
+    intensity: 0.7,
+    swingVariation: 1.2
+  }
+};
+function getPreset(preset, component) {
+  if (component === "paths") {
+    return ambientPaths[preset];
+  }
+  return lightRays[preset];
+}
+function applyMotionPreset(preset, baseConfig) {
+  return { ...baseConfig, ...preset };
+}
+
+// src/hooks/use-motion-preset.ts
+var DEFAULT_CSS_VARS = {
+  durationMultiplier: 1,
+  opacityMin: 0.35,
+  opacityMax: 0.6
+};
+function readCSSVariables() {
+  if (typeof window === "undefined") {
+    return DEFAULT_CSS_VARS;
+  }
+  const root = document.documentElement;
+  const styles = getComputedStyle(root);
+  const parseFloat_ = (value, fallback) => {
+    const parsed = parseFloat(value);
+    return Number.isNaN(parsed) ? fallback : parsed;
+  };
+  return {
+    durationMultiplier: parseFloat_(styles.getPropertyValue("--motion-duration-multiplier"), DEFAULT_CSS_VARS.durationMultiplier),
+    opacityMin: parseFloat_(styles.getPropertyValue("--motion-opacity-min"), DEFAULT_CSS_VARS.opacityMin),
+    opacityMax: parseFloat_(styles.getPropertyValue("--motion-opacity-max"), DEFAULT_CSS_VARS.opacityMax)
+  };
+}
+function computePathsMotion(preset, cssVars, prefersReducedMotion) {
+  if (prefersReducedMotion) {
+    return {
+      baseDuration: 0,
+      opacity: [cssVars.opacityMin, cssVars.opacityMin, cssVars.opacityMin],
+      ease: preset.ease,
+      delayVariation: 0,
+      durationVariation: 0,
+      prefersReducedMotion: true
+    };
+  }
+  return {
+    baseDuration: preset.duration * cssVars.durationMultiplier,
+    opacity: [
+      Math.max(preset.opacity[0], cssVars.opacityMin),
+      Math.min(preset.opacity[1], cssVars.opacityMax),
+      Math.max(preset.opacity[2], cssVars.opacityMin)
+    ],
+    ease: preset.ease,
+    delayVariation: preset.delayVariation,
+    durationVariation: preset.durationVariation,
+    prefersReducedMotion: false
+  };
+}
+function computeRaysMotion(preset, cssVars, prefersReducedMotion) {
+  if (prefersReducedMotion) {
+    return {
+      cycleDuration: 0,
+      intensity: 0,
+      swingVariation: 0,
+      prefersReducedMotion: true
+    };
+  }
+  return {
+    cycleDuration: Math.max(preset.speed * cssVars.durationMultiplier, 0.1),
+    intensity: preset.intensity,
+    swingVariation: preset.swingVariation,
+    prefersReducedMotion: false
+  };
+}
+function useMotionPreset(component, preset) {
+  const [prefersReducedMotion, setPrefersReducedMotion] = (0, import_react.useState)(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  });
+  const [cssVars, setCssVars] = (0, import_react.useState)(DEFAULT_CSS_VARS);
+  (0, import_react.useEffect)(() => {
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setPrefersReducedMotion(mediaQuery.matches);
+    const handler = (e) => setPrefersReducedMotion(e.matches);
+    mediaQuery.addEventListener("change", handler);
+    return () => mediaQuery.removeEventListener("change", handler);
+  }, []);
+  (0, import_react.useEffect)(() => {
+    setCssVars(readCSSVariables());
+    const observer = new MutationObserver(() => {
+      setCssVars(readCSSVariables());
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme"]
+    });
+    return () => observer.disconnect();
+  }, []);
+  return (0, import_react.useMemo)(() => {
+    if (component === "paths") {
+      const presetConfig2 = getPreset(preset, "paths");
+      return computePathsMotion(presetConfig2, cssVars, prefersReducedMotion);
+    }
+    const presetConfig = getPreset(preset, "rays");
+    return computeRaysMotion(presetConfig, cssVars, prefersReducedMotion);
+  }, [component, preset, cssVars, prefersReducedMotion]);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ambientPaths,
+  applyMotionPreset,
+  getPreset,
+  lightRays,
+  useMotionPreset
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/hooks/use-motion-preset.ts","../src/presets/motion-presets.ts"],"sourcesContent":["// Copyright (c) 2025 Amsterdam Data Labs\n// @enact-ui/animate - Animation utilities and motion presets\n\n/**\n * @enact-ui/animate\n *\n * Animation utilities and motion presets for ENACT UI.\n * Only install if you need animation capabilities.\n *\n * @packageDocumentation\n */\n\n// =============================================================================\n// Hooks\n// =============================================================================\nexport {\n    type ComputedPathsMotion,\n    type ComputedRaysMotion,\n    useMotionPreset,\n} from \"./hooks/use-motion-preset\";\n\n// =============================================================================\n// Motion Presets\n// =============================================================================\nexport {\n    type AmbientPathsConfig,\n    // Preset configurations\n    ambientPaths,\n    applyMotionPreset,\n    type ComponentType,\n    // Utility functions\n    getPreset,\n    type LightRaysConfig,\n    lightRays,\n    // Types\n    type MotionPreset,\n    type PresetConfig,\n} from \"./presets/motion-presets\";\n","// Copyright (c) 2025 Amsterdam Data Labs\n\"use client\";\n\nimport { useEffect, useMemo, useState } from \"react\";\nimport { type AmbientPathsConfig, type ComponentType, getPreset, type LightRaysConfig, type MotionPreset } from \"../presets/motion-presets\";\n\n/** CSS motion variables read from the theme */\ninterface MotionCSSVariables {\n    /** Speed/duration multiplier (0 = no motion, 1 = normal) */\n    durationMultiplier: number;\n    /** Minimum opacity for motion animations */\n    opacityMin: number;\n    /** Maximum opacity for motion animations */\n    opacityMax: number;\n}\n\n/** Computed motion configuration for paths component */\nexport interface ComputedPathsMotion {\n    /** Computed base duration (preset * CSS multiplier) */\n    baseDuration: number;\n    /** Computed opacity keyframes respecting CSS bounds */\n    opacity: [number, number, number];\n    /** Easing function from preset */\n    ease: \"linear\" | \"easeInOut\";\n    /** Delay variation factor from preset */\n    delayVariation: number;\n    /** Duration variation factor from preset */\n    durationVariation: number;\n    /** Whether reduced motion is preferred */\n    prefersReducedMotion: boolean;\n}\n\n/** Computed motion configuration for rays component */\nexport interface ComputedRaysMotion {\n    /** Computed cycle duration (preset speed * CSS multiplier) */\n    cycleDuration: number;\n    /** Base intensity from preset */\n    intensity: number;\n    /** Swing variation from preset */\n    swingVariation: number;\n    /** Whether reduced motion is preferred */\n    prefersReducedMotion: boolean;\n}\n\n/** Default CSS variable values (fallback if not in browser) */\nconst DEFAULT_CSS_VARS: MotionCSSVariables = {\n    durationMultiplier: 1,\n    opacityMin: 0.35,\n    opacityMax: 0.6,\n};\n\n/**\n * Reads motion CSS variables from the document root.\n * Returns default values if not in browser environment.\n */\nfunction readCSSVariables(): MotionCSSVariables {\n    if (typeof window === \"undefined\") {\n        return DEFAULT_CSS_VARS;\n    }\n\n    const root = document.documentElement;\n    const styles = getComputedStyle(root);\n\n    const parseFloat_ = (value: string, fallback: number): number => {\n        const parsed = parseFloat(value);\n        return Number.isNaN(parsed) ? fallback : parsed;\n    };\n\n    return {\n        durationMultiplier: parseFloat_(styles.getPropertyValue(\"--motion-duration-multiplier\"), DEFAULT_CSS_VARS.durationMultiplier),\n        opacityMin: parseFloat_(styles.getPropertyValue(\"--motion-opacity-min\"), DEFAULT_CSS_VARS.opacityMin),\n        opacityMax: parseFloat_(styles.getPropertyValue(\"--motion-opacity-max\"), DEFAULT_CSS_VARS.opacityMax),\n    };\n}\n\n/**\n * Computes paths motion configuration from preset and CSS variables.\n */\nfunction computePathsMotion(preset: AmbientPathsConfig, cssVars: MotionCSSVariables, prefersReducedMotion: boolean): ComputedPathsMotion {\n    if (prefersReducedMotion) {\n        return {\n            baseDuration: 0,\n            opacity: [cssVars.opacityMin, cssVars.opacityMin, cssVars.opacityMin],\n            ease: preset.ease,\n            delayVariation: 0,\n            durationVariation: 0,\n            prefersReducedMotion: true,\n        };\n    }\n\n    return {\n        baseDuration: preset.duration * cssVars.durationMultiplier,\n        opacity: [\n            Math.max(preset.opacity[0], cssVars.opacityMin),\n            Math.min(preset.opacity[1], cssVars.opacityMax),\n            Math.max(preset.opacity[2], cssVars.opacityMin),\n        ],\n        ease: preset.ease,\n        delayVariation: preset.delayVariation,\n        durationVariation: preset.durationVariation,\n        prefersReducedMotion: false,\n    };\n}\n\n/**\n * Computes rays motion configuration from preset and CSS variables.\n */\nfunction computeRaysMotion(preset: LightRaysConfig, cssVars: MotionCSSVariables, prefersReducedMotion: boolean): ComputedRaysMotion {\n    if (prefersReducedMotion) {\n        return {\n            cycleDuration: 0,\n            intensity: 0,\n            swingVariation: 0,\n            prefersReducedMotion: true,\n        };\n    }\n\n    return {\n        cycleDuration: Math.max(preset.speed * cssVars.durationMultiplier, 0.1),\n        intensity: preset.intensity,\n        swingVariation: preset.swingVariation,\n        prefersReducedMotion: false,\n    };\n}\n\n/**\n * Hook for using motion presets with theme-aware CSS variables.\n *\n * Provides computed motion configuration that:\n * - Respects `prefers-reduced-motion` preference\n * - Reads and applies CSS motion variables from the theme\n * - Memoizes calculations to prevent unnecessary re-renders\n *\n * @param component - The component type (\"paths\" | \"rays\")\n * @param preset - The motion preset (\"slow\" | \"medium\" | \"fast\")\n * @returns Computed motion configuration for the component\n *\n * @example\n * ```tsx\n * // In BackgroundPaths component\n * const motion = useMotionPreset(\"paths\", \"medium\");\n * // Returns: { baseDuration: 20, opacity: [...], ... }\n *\n * // In LightRays component\n * const motion = useMotionPreset(\"rays\", \"fast\");\n * // Returns: { cycleDuration: 8, intensity: 0.7, ... }\n * ```\n */\nexport function useMotionPreset(component: \"paths\", preset: MotionPreset): ComputedPathsMotion;\nexport function useMotionPreset(component: \"rays\", preset: MotionPreset): ComputedRaysMotion;\nexport function useMotionPreset(component: ComponentType, preset: MotionPreset): ComputedPathsMotion | ComputedRaysMotion {\n    // Track reduced motion preference with state for reactivity\n    const [prefersReducedMotion, setPrefersReducedMotion] = useState(() => {\n        if (typeof window === \"undefined\") return false;\n        return window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n    });\n\n    // Track CSS variables (may change with theme)\n    const [cssVars, setCssVars] = useState<MotionCSSVariables>(DEFAULT_CSS_VARS);\n\n    // Listen for reduced motion preference changes\n    useEffect(() => {\n        const mediaQuery = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n        setPrefersReducedMotion(mediaQuery.matches);\n\n        const handler = (e: MediaQueryListEvent) => setPrefersReducedMotion(e.matches);\n        mediaQuery.addEventListener(\"change\", handler);\n        return () => mediaQuery.removeEventListener(\"change\", handler);\n    }, []);\n\n    // Read CSS variables on mount and when theme might change\n    useEffect(() => {\n        setCssVars(readCSSVariables());\n\n        // Listen for theme changes via attribute mutations on document\n        const observer = new MutationObserver(() => {\n            setCssVars(readCSSVariables());\n        });\n\n        observer.observe(document.documentElement, {\n            attributes: true,\n            attributeFilter: [\"class\", \"data-theme\"],\n        });\n\n        return () => observer.disconnect();\n    }, []);\n\n    // Compute and memoize the motion configuration\n    return useMemo(() => {\n        if (component === \"paths\") {\n            const presetConfig = getPreset(preset, \"paths\");\n            return computePathsMotion(presetConfig, cssVars, prefersReducedMotion);\n        }\n        const presetConfig = getPreset(preset, \"rays\");\n        return computeRaysMotion(presetConfig, cssVars, prefersReducedMotion);\n    }, [component, preset, cssVars, prefersReducedMotion]);\n}\n","// Copyright (c) 2025 Amsterdam Data Labs\n/**\n * Motion Presets Utility\n *\n * Defines motion preset configurations for ambient animation components.\n * These presets provide consistent, theme-aware motion settings.\n */\n\n/** Available motion speed presets */\nexport type MotionPreset = \"slow\" | \"medium\" | \"fast\";\n\n/** Component types that support motion presets */\nexport type ComponentType = \"paths\" | \"rays\";\n\n/** Configuration for ambient paths animations */\nexport interface AmbientPathsConfig {\n    /** Base duration in seconds */\n    duration: number;\n    /** Opacity keyframes [start, peak, end] */\n    opacity: [number, number, number];\n    /** Easing function */\n    ease: \"linear\" | \"easeInOut\";\n    /** Random delay variation factor (0-1) */\n    delayVariation: number;\n    /** Random duration variation factor (0-1) */\n    durationVariation: number;\n}\n\n/** Configuration for light rays animations */\nexport interface LightRaysConfig {\n    /** Base speed/cycle duration in seconds */\n    speed: number;\n    /** Base intensity multiplier (0-1) */\n    intensity: number;\n    /** Swing angle variation factor */\n    swingVariation: number;\n}\n\n/** Union type for all preset configurations */\nexport type PresetConfig = AmbientPathsConfig | LightRaysConfig;\n\n/**\n * Preset configurations for BackgroundPaths component.\n * Each preset defines duration, opacity, and variation settings.\n */\nexport const ambientPaths: Record<MotionPreset, AmbientPathsConfig> = {\n    slow: {\n        duration: 30,\n        opacity: [0.2, 0.4, 0.2],\n        ease: \"easeInOut\",\n        delayVariation: 0.3,\n        durationVariation: 0.5,\n    },\n    medium: {\n        duration: 20,\n        opacity: [0.3, 0.6, 0.3],\n        ease: \"easeInOut\",\n        delayVariation: 0.25,\n        durationVariation: 0.5,\n    },\n    fast: {\n        duration: 12,\n        opacity: [0.4, 0.8, 0.4],\n        ease: \"linear\",\n        delayVariation: 0.2,\n        durationVariation: 0.4,\n    },\n};\n\n/**\n * Preset configurations for LightRays component.\n * Each preset defines speed, intensity, and swing settings.\n */\nexport const lightRays: Record<MotionPreset, LightRaysConfig> = {\n    slow: {\n        speed: 20,\n        intensity: 0.3,\n        swingVariation: 1.8,\n    },\n    medium: {\n        speed: 14,\n        intensity: 0.5,\n        swingVariation: 1.5,\n    },\n    fast: {\n        speed: 8,\n        intensity: 0.7,\n        swingVariation: 1.2,\n    },\n};\n\n/**\n * Retrieves a preset configuration for a specific component type.\n *\n * @param preset - The motion preset name (\"slow\" | \"medium\" | \"fast\")\n * @param component - The component type (\"paths\" | \"rays\")\n * @returns The preset configuration for the specified component\n *\n * @example\n * ```ts\n * const pathsPreset = getPreset(\"medium\", \"paths\");\n * // Returns: { duration: 20, opacity: [0.3, 0.6, 0.3], ... }\n *\n * const raysPreset = getPreset(\"fast\", \"rays\");\n * // Returns: { speed: 8, intensity: 0.7, swingVariation: 1.2 }\n * ```\n */\nexport function getPreset(preset: MotionPreset, component: \"paths\"): AmbientPathsConfig;\nexport function getPreset(preset: MotionPreset, component: \"rays\"): LightRaysConfig;\nexport function getPreset(preset: MotionPreset, component: ComponentType): PresetConfig {\n    if (component === \"paths\") {\n        return ambientPaths[preset];\n    }\n    return lightRays[preset];\n}\n\n/**\n * Merges a preset configuration with a base configuration.\n * Useful for combining preset values with component-specific overrides.\n *\n * @param preset - The preset configuration to apply\n * @param baseConfig - The base configuration to merge with\n * @returns Merged configuration with preset values taking precedence\n *\n * @example\n * ```ts\n * const preset = getPreset(\"medium\", \"paths\");\n * const result = applyMotionPreset(preset, { count: 36 });\n * // Returns: { duration: 20, opacity: [...], count: 36, ... }\n * ```\n */\nexport function applyMotionPreset<T extends Record<string, unknown>>(preset: PresetConfig, baseConfig: T): PresetConfig & T {\n    return { ...baseConfig, ...preset };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACGA,mBAA6C;;;AC0CtC,IAAM,eAAyD;AAAA,EAClE,MAAM;AAAA,IACF,UAAU;AAAA,IACV,SAAS,CAAC,KAAK,KAAK,GAAG;AAAA,IACvB,MAAM;AAAA,IACN,gBAAgB;AAAA,IAChB,mBAAmB;AAAA,EACvB;AAAA,EACA,QAAQ;AAAA,IACJ,UAAU;AAAA,IACV,SAAS,CAAC,KAAK,KAAK,GAAG;AAAA,IACvB,MAAM;AAAA,IACN,gBAAgB;AAAA,IAChB,mBAAmB;AAAA,EACvB;AAAA,EACA,MAAM;AAAA,IACF,UAAU;AAAA,IACV,SAAS,CAAC,KAAK,KAAK,GAAG;AAAA,IACvB,MAAM;AAAA,IACN,gBAAgB;AAAA,IAChB,mBAAmB;AAAA,EACvB;AACJ;AAMO,IAAM,YAAmD;AAAA,EAC5D,MAAM;AAAA,IACF,OAAO;AAAA,IACP,WAAW;AAAA,IACX,gBAAgB;AAAA,EACpB;AAAA,EACA,QAAQ;AAAA,IACJ,OAAO;AAAA,IACP,WAAW;AAAA,IACX,gBAAgB;AAAA,EACpB;AAAA,EACA,MAAM;AAAA,IACF,OAAO;AAAA,IACP,WAAW;AAAA,IACX,gBAAgB;AAAA,EACpB;AACJ;AAoBO,SAAS,UAAU,QAAsB,WAAwC;AACpF,MAAI,cAAc,SAAS;AACvB,WAAO,aAAa,MAAM;AAAA,EAC9B;AACA,SAAO,UAAU,MAAM;AAC3B;AAiBO,SAAS,kBAAqD,QAAsB,YAAiC;AACxH,SAAO,EAAE,GAAG,YAAY,GAAG,OAAO;AACtC;;;ADxFA,IAAM,mBAAuC;AAAA,EACzC,oBAAoB;AAAA,EACpB,YAAY;AAAA,EACZ,YAAY;AAChB;AAMA,SAAS,mBAAuC;AAC5C,MAAI,OAAO,WAAW,aAAa;AAC/B,WAAO;AAAA,EACX;AAEA,QAAM,OAAO,SAAS;AACtB,QAAM,SAAS,iBAAiB,IAAI;AAEpC,QAAM,cAAc,CAAC,OAAe,aAA6B;AAC7D,UAAM,SAAS,WAAW,KAAK;AAC/B,WAAO,OAAO,MAAM,MAAM,IAAI,WAAW;AAAA,EAC7C;AAEA,SAAO;AAAA,IACH,oBAAoB,YAAY,OAAO,iBAAiB,8BAA8B,GAAG,iBAAiB,kBAAkB;AAAA,IAC5H,YAAY,YAAY,OAAO,iBAAiB,sBAAsB,GAAG,iBAAiB,UAAU;AAAA,IACpG,YAAY,YAAY,OAAO,iBAAiB,sBAAsB,GAAG,iBAAiB,UAAU;AAAA,EACxG;AACJ;AAKA,SAAS,mBAAmB,QAA4B,SAA6B,sBAAoD;AACrI,MAAI,sBAAsB;AACtB,WAAO;AAAA,MACH,cAAc;AAAA,MACd,SAAS,CAAC,QAAQ,YAAY,QAAQ,YAAY,QAAQ,UAAU;AAAA,MACpE,MAAM,OAAO;AAAA,MACb,gBAAgB;AAAA,MAChB,mBAAmB;AAAA,MACnB,sBAAsB;AAAA,IAC1B;AAAA,EACJ;AAEA,SAAO;AAAA,IACH,cAAc,OAAO,WAAW,QAAQ;AAAA,IACxC,SAAS;AAAA,MACL,KAAK,IAAI,OAAO,QAAQ,CAAC,GAAG,QAAQ,UAAU;AAAA,MAC9C,KAAK,IAAI,OAAO,QAAQ,CAAC,GAAG,QAAQ,UAAU;AAAA,MAC9C,KAAK,IAAI,OAAO,QAAQ,CAAC,GAAG,QAAQ,UAAU;AAAA,IAClD;AAAA,IACA,MAAM,OAAO;AAAA,IACb,gBAAgB,OAAO;AAAA,IACvB,mBAAmB,OAAO;AAAA,IAC1B,sBAAsB;AAAA,EAC1B;AACJ;AAKA,SAAS,kBAAkB,QAAyB,SAA6B,sBAAmD;AAChI,MAAI,sBAAsB;AACtB,WAAO;AAAA,MACH,eAAe;AAAA,MACf,WAAW;AAAA,MACX,gBAAgB;AAAA,MAChB,sBAAsB;AAAA,IAC1B;AAAA,EACJ;AAEA,SAAO;AAAA,IACH,eAAe,KAAK,IAAI,OAAO,QAAQ,QAAQ,oBAAoB,GAAG;AAAA,IACtE,WAAW,OAAO;AAAA,IAClB,gBAAgB,OAAO;AAAA,IACvB,sBAAsB;AAAA,EAC1B;AACJ;AA2BO,SAAS,gBAAgB,WAA0B,QAAgE;AAEtH,QAAM,CAAC,sBAAsB,uBAAuB,QAAI,uBAAS,MAAM;AACnE,QAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,WAAO,OAAO,WAAW,kCAAkC,EAAE;AAAA,EACjE,CAAC;AAGD,QAAM,CAAC,SAAS,UAAU,QAAI,uBAA6B,gBAAgB;AAG3E,8BAAU,MAAM;AACZ,UAAM,aAAa,OAAO,WAAW,kCAAkC;AACvE,4BAAwB,WAAW,OAAO;AAE1C,UAAM,UAAU,CAAC,MAA2B,wBAAwB,EAAE,OAAO;AAC7E,eAAW,iBAAiB,UAAU,OAAO;AAC7C,WAAO,MAAM,WAAW,oBAAoB,UAAU,OAAO;AAAA,EACjE,GAAG,CAAC,CAAC;AAGL,8BAAU,MAAM;AACZ,eAAW,iBAAiB,CAAC;AAG7B,UAAM,WAAW,IAAI,iBAAiB,MAAM;AACxC,iBAAW,iBAAiB,CAAC;AAAA,IACjC,CAAC;AAED,aAAS,QAAQ,SAAS,iBAAiB;AAAA,MACvC,YAAY;AAAA,MACZ,iBAAiB,CAAC,SAAS,YAAY;AAAA,IAC3C,CAAC;AAED,WAAO,MAAM,SAAS,WAAW;AAAA,EACrC,GAAG,CAAC,CAAC;AAGL,aAAO,sBAAQ,MAAM;AACjB,QAAI,cAAc,SAAS;AACvB,YAAMA,gBAAe,UAAU,QAAQ,OAAO;AAC9C,aAAO,mBAAmBA,eAAc,SAAS,oBAAoB;AAAA,IACzE;AACA,UAAM,eAAe,UAAU,QAAQ,MAAM;AAC7C,WAAO,kBAAkB,cAAc,SAAS,oBAAoB;AAAA,EACxE,GAAG,CAAC,WAAW,QAAQ,SAAS,oBAAoB,CAAC;AACzD;","names":["presetConfig"]}

package/dist/index.mjs

@@ -0,0 +1,157 @@
+// src/hooks/use-motion-preset.ts
+import { useEffect, useMemo, useState } from "react";
+
+// src/presets/motion-presets.ts
+var ambientPaths = {
+  slow: {
+    duration: 30,
+    opacity: [0.2, 0.4, 0.2],
+    ease: "easeInOut",
+    delayVariation: 0.3,
+    durationVariation: 0.5
+  },
+  medium: {
+    duration: 20,
+    opacity: [0.3, 0.6, 0.3],
+    ease: "easeInOut",
+    delayVariation: 0.25,
+    durationVariation: 0.5
+  },
+  fast: {
+    duration: 12,
+    opacity: [0.4, 0.8, 0.4],
+    ease: "linear",
+    delayVariation: 0.2,
+    durationVariation: 0.4
+  }
+};
+var lightRays = {
+  slow: {
+    speed: 20,
+    intensity: 0.3,
+    swingVariation: 1.8
+  },
+  medium: {
+    speed: 14,
+    intensity: 0.5,
+    swingVariation: 1.5
+  },
+  fast: {
+    speed: 8,
+    intensity: 0.7,
+    swingVariation: 1.2
+  }
+};
+function getPreset(preset, component) {
+  if (component === "paths") {
+    return ambientPaths[preset];
+  }
+  return lightRays[preset];
+}
+function applyMotionPreset(preset, baseConfig) {
+  return { ...baseConfig, ...preset };
+}
+
+// src/hooks/use-motion-preset.ts
+var DEFAULT_CSS_VARS = {
+  durationMultiplier: 1,
+  opacityMin: 0.35,
+  opacityMax: 0.6
+};
+function readCSSVariables() {
+  if (typeof window === "undefined") {
+    return DEFAULT_CSS_VARS;
+  }
+  const root = document.documentElement;
+  const styles = getComputedStyle(root);
+  const parseFloat_ = (value, fallback) => {
+    const parsed = parseFloat(value);
+    return Number.isNaN(parsed) ? fallback : parsed;
+  };
+  return {
+    durationMultiplier: parseFloat_(styles.getPropertyValue("--motion-duration-multiplier"), DEFAULT_CSS_VARS.durationMultiplier),
+    opacityMin: parseFloat_(styles.getPropertyValue("--motion-opacity-min"), DEFAULT_CSS_VARS.opacityMin),
+    opacityMax: parseFloat_(styles.getPropertyValue("--motion-opacity-max"), DEFAULT_CSS_VARS.opacityMax)
+  };
+}
+function computePathsMotion(preset, cssVars, prefersReducedMotion) {
+  if (prefersReducedMotion) {
+    return {
+      baseDuration: 0,
+      opacity: [cssVars.opacityMin, cssVars.opacityMin, cssVars.opacityMin],
+      ease: preset.ease,
+      delayVariation: 0,
+      durationVariation: 0,
+      prefersReducedMotion: true
+    };
+  }
+  return {
+    baseDuration: preset.duration * cssVars.durationMultiplier,
+    opacity: [
+      Math.max(preset.opacity[0], cssVars.opacityMin),
+      Math.min(preset.opacity[1], cssVars.opacityMax),
+      Math.max(preset.opacity[2], cssVars.opacityMin)
+    ],
+    ease: preset.ease,
+    delayVariation: preset.delayVariation,
+    durationVariation: preset.durationVariation,
+    prefersReducedMotion: false
+  };
+}
+function computeRaysMotion(preset, cssVars, prefersReducedMotion) {
+  if (prefersReducedMotion) {
+    return {
+      cycleDuration: 0,
+      intensity: 0,
+      swingVariation: 0,
+      prefersReducedMotion: true
+    };
+  }
+  return {
+    cycleDuration: Math.max(preset.speed * cssVars.durationMultiplier, 0.1),
+    intensity: preset.intensity,
+    swingVariation: preset.swingVariation,
+    prefersReducedMotion: false
+  };
+}
+function useMotionPreset(component, preset) {
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  });
+  const [cssVars, setCssVars] = useState(DEFAULT_CSS_VARS);
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setPrefersReducedMotion(mediaQuery.matches);
+    const handler = (e) => setPrefersReducedMotion(e.matches);
+    mediaQuery.addEventListener("change", handler);
+    return () => mediaQuery.removeEventListener("change", handler);
+  }, []);
+  useEffect(() => {
+    setCssVars(readCSSVariables());
+    const observer = new MutationObserver(() => {
+      setCssVars(readCSSVariables());
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme"]
+    });
+    return () => observer.disconnect();
+  }, []);
+  return useMemo(() => {
+    if (component === "paths") {
+      const presetConfig2 = getPreset(preset, "paths");
+      return computePathsMotion(presetConfig2, cssVars, prefersReducedMotion);
+    }
+    const presetConfig = getPreset(preset, "rays");
+    return computeRaysMotion(presetConfig, cssVars, prefersReducedMotion);
+  }, [component, preset, cssVars, prefersReducedMotion]);
+}
+export {
+  ambientPaths,
+  applyMotionPreset,
+  getPreset,
+  lightRays,
+  useMotionPreset
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/use-motion-preset.ts","../src/presets/motion-presets.ts"],"sourcesContent":["// Copyright (c) 2025 Amsterdam Data Labs\n\"use client\";\n\nimport { useEffect, useMemo, useState } from \"react\";\nimport { type AmbientPathsConfig, type ComponentType, getPreset, type LightRaysConfig, type MotionPreset } from \"../presets/motion-presets\";\n\n/** CSS motion variables read from the theme */\ninterface MotionCSSVariables {\n    /** Speed/duration multiplier (0 = no motion, 1 = normal) */\n    durationMultiplier: number;\n    /** Minimum opacity for motion animations */\n    opacityMin: number;\n    /** Maximum opacity for motion animations */\n    opacityMax: number;\n}\n\n/** Computed motion configuration for paths component */\nexport interface ComputedPathsMotion {\n    /** Computed base duration (preset * CSS multiplier) */\n    baseDuration: number;\n    /** Computed opacity keyframes respecting CSS bounds */\n    opacity: [number, number, number];\n    /** Easing function from preset */\n    ease: \"linear\" | \"easeInOut\";\n    /** Delay variation factor from preset */\n    delayVariation: number;\n    /** Duration variation factor from preset */\n    durationVariation: number;\n    /** Whether reduced motion is preferred */\n    prefersReducedMotion: boolean;\n}\n\n/** Computed motion configuration for rays component */\nexport interface ComputedRaysMotion {\n    /** Computed cycle duration (preset speed * CSS multiplier) */\n    cycleDuration: number;\n    /** Base intensity from preset */\n    intensity: number;\n    /** Swing variation from preset */\n    swingVariation: number;\n    /** Whether reduced motion is preferred */\n    prefersReducedMotion: boolean;\n}\n\n/** Default CSS variable values (fallback if not in browser) */\nconst DEFAULT_CSS_VARS: MotionCSSVariables = {\n    durationMultiplier: 1,\n    opacityMin: 0.35,\n    opacityMax: 0.6,\n};\n\n/**\n * Reads motion CSS variables from the document root.\n * Returns default values if not in browser environment.\n */\nfunction readCSSVariables(): MotionCSSVariables {\n    if (typeof window === \"undefined\") {\n        return DEFAULT_CSS_VARS;\n    }\n\n    const root = document.documentElement;\n    const styles = getComputedStyle(root);\n\n    const parseFloat_ = (value: string, fallback: number): number => {\n        const parsed = parseFloat(value);\n        return Number.isNaN(parsed) ? fallback : parsed;\n    };\n\n    return {\n        durationMultiplier: parseFloat_(styles.getPropertyValue(\"--motion-duration-multiplier\"), DEFAULT_CSS_VARS.durationMultiplier),\n        opacityMin: parseFloat_(styles.getPropertyValue(\"--motion-opacity-min\"), DEFAULT_CSS_VARS.opacityMin),\n        opacityMax: parseFloat_(styles.getPropertyValue(\"--motion-opacity-max\"), DEFAULT_CSS_VARS.opacityMax),\n    };\n}\n\n/**\n * Computes paths motion configuration from preset and CSS variables.\n */\nfunction computePathsMotion(preset: AmbientPathsConfig, cssVars: MotionCSSVariables, prefersReducedMotion: boolean): ComputedPathsMotion {\n    if (prefersReducedMotion) {\n        return {\n            baseDuration: 0,\n            opacity: [cssVars.opacityMin, cssVars.opacityMin, cssVars.opacityMin],\n            ease: preset.ease,\n            delayVariation: 0,\n            durationVariation: 0,\n            prefersReducedMotion: true,\n        };\n    }\n\n    return {\n        baseDuration: preset.duration * cssVars.durationMultiplier,\n        opacity: [\n            Math.max(preset.opacity[0], cssVars.opacityMin),\n            Math.min(preset.opacity[1], cssVars.opacityMax),\n            Math.max(preset.opacity[2], cssVars.opacityMin),\n        ],\n        ease: preset.ease,\n        delayVariation: preset.delayVariation,\n        durationVariation: preset.durationVariation,\n        prefersReducedMotion: false,\n    };\n}\n\n/**\n * Computes rays motion configuration from preset and CSS variables.\n */\nfunction computeRaysMotion(preset: LightRaysConfig, cssVars: MotionCSSVariables, prefersReducedMotion: boolean): ComputedRaysMotion {\n    if (prefersReducedMotion) {\n        return {\n            cycleDuration: 0,\n            intensity: 0,\n            swingVariation: 0,\n            prefersReducedMotion: true,\n        };\n    }\n\n    return {\n        cycleDuration: Math.max(preset.speed * cssVars.durationMultiplier, 0.1),\n        intensity: preset.intensity,\n        swingVariation: preset.swingVariation,\n        prefersReducedMotion: false,\n    };\n}\n\n/**\n * Hook for using motion presets with theme-aware CSS variables.\n *\n * Provides computed motion configuration that:\n * - Respects `prefers-reduced-motion` preference\n * - Reads and applies CSS motion variables from the theme\n * - Memoizes calculations to prevent unnecessary re-renders\n *\n * @param component - The component type (\"paths\" | \"rays\")\n * @param preset - The motion preset (\"slow\" | \"medium\" | \"fast\")\n * @returns Computed motion configuration for the component\n *\n * @example\n * ```tsx\n * // In BackgroundPaths component\n * const motion = useMotionPreset(\"paths\", \"medium\");\n * // Returns: { baseDuration: 20, opacity: [...], ... }\n *\n * // In LightRays component\n * const motion = useMotionPreset(\"rays\", \"fast\");\n * // Returns: { cycleDuration: 8, intensity: 0.7, ... }\n * ```\n */\nexport function useMotionPreset(component: \"paths\", preset: MotionPreset): ComputedPathsMotion;\nexport function useMotionPreset(component: \"rays\", preset: MotionPreset): ComputedRaysMotion;\nexport function useMotionPreset(component: ComponentType, preset: MotionPreset): ComputedPathsMotion | ComputedRaysMotion {\n    // Track reduced motion preference with state for reactivity\n    const [prefersReducedMotion, setPrefersReducedMotion] = useState(() => {\n        if (typeof window === \"undefined\") return false;\n        return window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n    });\n\n    // Track CSS variables (may change with theme)\n    const [cssVars, setCssVars] = useState<MotionCSSVariables>(DEFAULT_CSS_VARS);\n\n    // Listen for reduced motion preference changes\n    useEffect(() => {\n        const mediaQuery = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n        setPrefersReducedMotion(mediaQuery.matches);\n\n        const handler = (e: MediaQueryListEvent) => setPrefersReducedMotion(e.matches);\n        mediaQuery.addEventListener(\"change\", handler);\n        return () => mediaQuery.removeEventListener(\"change\", handler);\n    }, []);\n\n    // Read CSS variables on mount and when theme might change\n    useEffect(() => {\n        setCssVars(readCSSVariables());\n\n        // Listen for theme changes via attribute mutations on document\n        const observer = new MutationObserver(() => {\n            setCssVars(readCSSVariables());\n        });\n\n        observer.observe(document.documentElement, {\n            attributes: true,\n            attributeFilter: [\"class\", \"data-theme\"],\n        });\n\n        return () => observer.disconnect();\n    }, []);\n\n    // Compute and memoize the motion configuration\n    return useMemo(() => {\n        if (component === \"paths\") {\n            const presetConfig = getPreset(preset, \"paths\");\n            return computePathsMotion(presetConfig, cssVars, prefersReducedMotion);\n        }\n        const presetConfig = getPreset(preset, \"rays\");\n        return computeRaysMotion(presetConfig, cssVars, prefersReducedMotion);\n    }, [component, preset, cssVars, prefersReducedMotion]);\n}\n","// Copyright (c) 2025 Amsterdam Data Labs\n/**\n * Motion Presets Utility\n *\n * Defines motion preset configurations for ambient animation components.\n * These presets provide consistent, theme-aware motion settings.\n */\n\n/** Available motion speed presets */\nexport type MotionPreset = \"slow\" | \"medium\" | \"fast\";\n\n/** Component types that support motion presets */\nexport type ComponentType = \"paths\" | \"rays\";\n\n/** Configuration for ambient paths animations */\nexport interface AmbientPathsConfig {\n    /** Base duration in seconds */\n    duration: number;\n    /** Opacity keyframes [start, peak, end] */\n    opacity: [number, number, number];\n    /** Easing function */\n    ease: \"linear\" | \"easeInOut\";\n    /** Random delay variation factor (0-1) */\n    delayVariation: number;\n    /** Random duration variation factor (0-1) */\n    durationVariation: number;\n}\n\n/** Configuration for light rays animations */\nexport interface LightRaysConfig {\n    /** Base speed/cycle duration in seconds */\n    speed: number;\n    /** Base intensity multiplier (0-1) */\n    intensity: number;\n    /** Swing angle variation factor */\n    swingVariation: number;\n}\n\n/** Union type for all preset configurations */\nexport type PresetConfig = AmbientPathsConfig | LightRaysConfig;\n\n/**\n * Preset configurations for BackgroundPaths component.\n * Each preset defines duration, opacity, and variation settings.\n */\nexport const ambientPaths: Record<MotionPreset, AmbientPathsConfig> = {\n    slow: {\n        duration: 30,\n        opacity: [0.2, 0.4, 0.2],\n        ease: \"easeInOut\",\n        delayVariation: 0.3,\n        durationVariation: 0.5,\n    },\n    medium: {\n        duration: 20,\n        opacity: [0.3, 0.6, 0.3],\n        ease: \"easeInOut\",\n        delayVariation: 0.25,\n        durationVariation: 0.5,\n    },\n    fast: {\n        duration: 12,\n        opacity: [0.4, 0.8, 0.4],\n        ease: \"linear\",\n        delayVariation: 0.2,\n        durationVariation: 0.4,\n    },\n};\n\n/**\n * Preset configurations for LightRays component.\n * Each preset defines speed, intensity, and swing settings.\n */\nexport const lightRays: Record<MotionPreset, LightRaysConfig> = {\n    slow: {\n        speed: 20,\n        intensity: 0.3,\n        swingVariation: 1.8,\n    },\n    medium: {\n        speed: 14,\n        intensity: 0.5,\n        swingVariation: 1.5,\n    },\n    fast: {\n        speed: 8,\n        intensity: 0.7,\n        swingVariation: 1.2,\n    },\n};\n\n/**\n * Retrieves a preset configuration for a specific component type.\n *\n * @param preset - The motion preset name (\"slow\" | \"medium\" | \"fast\")\n * @param component - The component type (\"paths\" | \"rays\")\n * @returns The preset configuration for the specified component\n *\n * @example\n * ```ts\n * const pathsPreset = getPreset(\"medium\", \"paths\");\n * // Returns: { duration: 20, opacity: [0.3, 0.6, 0.3], ... }\n *\n * const raysPreset = getPreset(\"fast\", \"rays\");\n * // Returns: { speed: 8, intensity: 0.7, swingVariation: 1.2 }\n * ```\n */\nexport function getPreset(preset: MotionPreset, component: \"paths\"): AmbientPathsConfig;\nexport function getPreset(preset: MotionPreset, component: \"rays\"): LightRaysConfig;\nexport function getPreset(preset: MotionPreset, component: ComponentType): PresetConfig {\n    if (component === \"paths\") {\n        return ambientPaths[preset];\n    }\n    return lightRays[preset];\n}\n\n/**\n * Merges a preset configuration with a base configuration.\n * Useful for combining preset values with component-specific overrides.\n *\n * @param preset - The preset configuration to apply\n * @param baseConfig - The base configuration to merge with\n * @returns Merged configuration with preset values taking precedence\n *\n * @example\n * ```ts\n * const preset = getPreset(\"medium\", \"paths\");\n * const result = applyMotionPreset(preset, { count: 36 });\n * // Returns: { duration: 20, opacity: [...], count: 36, ... }\n * ```\n */\nexport function applyMotionPreset<T extends Record<string, unknown>>(preset: PresetConfig, baseConfig: T): PresetConfig & T {\n    return { ...baseConfig, ...preset };\n}\n"],"mappings":"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","names":["presetConfig"]}

package/dist/presets/motion-presets.d.ts

@@ -0,0 +1,79 @@
+/**
+ * Motion Presets Utility
+ *
+ * Defines motion preset configurations for ambient animation components.
+ * These presets provide consistent, theme-aware motion settings.
+ */
+/** Available motion speed presets */
+export type MotionPreset = "slow" | "medium" | "fast";
+/** Component types that support motion presets */
+export type ComponentType = "paths" | "rays";
+/** Configuration for ambient paths animations */
+export interface AmbientPathsConfig {
+    /** Base duration in seconds */
+    duration: number;
+    /** Opacity keyframes [start, peak, end] */
+    opacity: [number, number, number];
+    /** Easing function */
+    ease: "linear" | "easeInOut";
+    /** Random delay variation factor (0-1) */
+    delayVariation: number;
+    /** Random duration variation factor (0-1) */
+    durationVariation: number;
+}
+/** Configuration for light rays animations */
+export interface LightRaysConfig {
+    /** Base speed/cycle duration in seconds */
+    speed: number;
+    /** Base intensity multiplier (0-1) */
+    intensity: number;
+    /** Swing angle variation factor */
+    swingVariation: number;
+}
+/** Union type for all preset configurations */
+export type PresetConfig = AmbientPathsConfig | LightRaysConfig;
+/**
+ * Preset configurations for BackgroundPaths component.
+ * Each preset defines duration, opacity, and variation settings.
+ */
+export declare const ambientPaths: Record<MotionPreset, AmbientPathsConfig>;
+/**
+ * Preset configurations for LightRays component.
+ * Each preset defines speed, intensity, and swing settings.
+ */
+export declare const lightRays: Record<MotionPreset, LightRaysConfig>;
+/**
+ * Retrieves a preset configuration for a specific component type.
+ *
+ * @param preset - The motion preset name ("slow" | "medium" | "fast")
+ * @param component - The component type ("paths" | "rays")
+ * @returns The preset configuration for the specified component
+ *
+ * @example
+ * ```ts
+ * const pathsPreset = getPreset("medium", "paths");
+ * // Returns: { duration: 20, opacity: [0.3, 0.6, 0.3], ... }
+ *
+ * const raysPreset = getPreset("fast", "rays");
+ * // Returns: { speed: 8, intensity: 0.7, swingVariation: 1.2 }
+ * ```
+ */
+export declare function getPreset(preset: MotionPreset, component: "paths"): AmbientPathsConfig;
+export declare function getPreset(preset: MotionPreset, component: "rays"): LightRaysConfig;
+/**
+ * Merges a preset configuration with a base configuration.
+ * Useful for combining preset values with component-specific overrides.
+ *
+ * @param preset - The preset configuration to apply
+ * @param baseConfig - The base configuration to merge with
+ * @returns Merged configuration with preset values taking precedence
+ *
+ * @example
+ * ```ts
+ * const preset = getPreset("medium", "paths");
+ * const result = applyMotionPreset(preset, { count: 36 });
+ * // Returns: { duration: 20, opacity: [...], count: 36, ... }
+ * ```
+ */
+export declare function applyMotionPreset<T extends Record<string, unknown>>(preset: PresetConfig, baseConfig: T): PresetConfig & T;
+//# sourceMappingURL=motion-presets.d.ts.map

package/dist/presets/motion-presets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion-presets.d.ts","sourceRoot":"","sources":["../../src/presets/motion-presets.ts"],"names":[],"mappings":"AACA;;;;;GAKG;AAEH,qCAAqC;AACrC,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEtD,kDAAkD;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,MAAM,CAAC;AAE7C,iDAAiD;AACjD,MAAM,WAAW,kBAAkB;IAC/B,+BAA+B;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,2CAA2C;IAC3C,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,sBAAsB;IACtB,IAAI,EAAE,QAAQ,GAAG,WAAW,CAAC;IAC7B,0CAA0C;IAC1C,cAAc,EAAE,MAAM,CAAC;IACvB,6CAA6C;IAC7C,iBAAiB,EAAE,MAAM,CAAC;CAC7B;AAED,8CAA8C;AAC9C,MAAM,WAAW,eAAe;IAC5B,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,SAAS,EAAE,MAAM,CAAC;IAClB,mCAAmC;IACnC,cAAc,EAAE,MAAM,CAAC;CAC1B;AAED,+CAA+C;AAC/C,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,eAAe,CAAC;AAEhE;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,YAAY,EAAE,kBAAkB,CAsBjE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,YAAY,EAAE,eAAe,CAgB3D,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,SAAS,CAAC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,OAAO,GAAG,kBAAkB,CAAC;AACxF,wBAAgB,SAAS,CAAC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,GAAG,eAAe,CAAC;AAQpF;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,CAAC,GAAG,YAAY,GAAG,CAAC,CAE1H"}

package/dist/presets/motion-presets.js

@@ -0,0 +1,80 @@
+// Copyright (c) 2025 Amsterdam Data Labs
+/**
+ * Motion Presets Utility
+ *
+ * Defines motion preset configurations for ambient animation components.
+ * These presets provide consistent, theme-aware motion settings.
+ */
+/**
+ * Preset configurations for BackgroundPaths component.
+ * Each preset defines duration, opacity, and variation settings.
+ */
+export const ambientPaths = {
+    slow: {
+        duration: 30,
+        opacity: [0.2, 0.4, 0.2],
+        ease: "easeInOut",
+        delayVariation: 0.3,
+        durationVariation: 0.5,
+    },
+    medium: {
+        duration: 20,
+        opacity: [0.3, 0.6, 0.3],
+        ease: "easeInOut",
+        delayVariation: 0.25,
+        durationVariation: 0.5,
+    },
+    fast: {
+        duration: 12,
+        opacity: [0.4, 0.8, 0.4],
+        ease: "linear",
+        delayVariation: 0.2,
+        durationVariation: 0.4,
+    },
+};
+/**
+ * Preset configurations for LightRays component.
+ * Each preset defines speed, intensity, and swing settings.
+ */
+export const lightRays = {
+    slow: {
+        speed: 20,
+        intensity: 0.3,
+        swingVariation: 1.8,
+    },
+    medium: {
+        speed: 14,
+        intensity: 0.5,
+        swingVariation: 1.5,
+    },
+    fast: {
+        speed: 8,
+        intensity: 0.7,
+        swingVariation: 1.2,
+    },
+};
+export function getPreset(preset, component) {
+    if (component === "paths") {
+        return ambientPaths[preset];
+    }
+    return lightRays[preset];
+}
+/**
+ * Merges a preset configuration with a base configuration.
+ * Useful for combining preset values with component-specific overrides.
+ *
+ * @param preset - The preset configuration to apply
+ * @param baseConfig - The base configuration to merge with
+ * @returns Merged configuration with preset values taking precedence
+ *
+ * @example
+ * ```ts
+ * const preset = getPreset("medium", "paths");
+ * const result = applyMotionPreset(preset, { count: 36 });
+ * // Returns: { duration: 20, opacity: [...], count: 36, ... }
+ * ```
+ */
+export function applyMotionPreset(preset, baseConfig) {
+    return { ...baseConfig, ...preset };
+}
+//# sourceMappingURL=motion-presets.js.map

package/dist/presets/motion-presets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion-presets.js","sourceRoot":"","sources":["../../src/presets/motion-presets.ts"],"names":[],"mappings":"AAAA,yCAAyC;AACzC;;;;;GAKG;AAmCH;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAA6C;IAClE,IAAI,EAAE;QACF,QAAQ,EAAE,EAAE;QACZ,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;QACxB,IAAI,EAAE,WAAW;QACjB,cAAc,EAAE,GAAG;QACnB,iBAAiB,EAAE,GAAG;KACzB;IACD,MAAM,EAAE;QACJ,QAAQ,EAAE,EAAE;QACZ,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;QACxB,IAAI,EAAE,WAAW;QACjB,cAAc,EAAE,IAAI;QACpB,iBAAiB,EAAE,GAAG;KACzB;IACD,IAAI,EAAE;QACF,QAAQ,EAAE,EAAE;QACZ,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;QACxB,IAAI,EAAE,QAAQ;QACd,cAAc,EAAE,GAAG;QACnB,iBAAiB,EAAE,GAAG;KACzB;CACJ,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,SAAS,GAA0C;IAC5D,IAAI,EAAE;QACF,KAAK,EAAE,EAAE;QACT,SAAS,EAAE,GAAG;QACd,cAAc,EAAE,GAAG;KACtB;IACD,MAAM,EAAE;QACJ,KAAK,EAAE,EAAE;QACT,SAAS,EAAE,GAAG;QACd,cAAc,EAAE,GAAG;KACtB;IACD,IAAI,EAAE;QACF,KAAK,EAAE,CAAC;QACR,SAAS,EAAE,GAAG;QACd,cAAc,EAAE,GAAG;KACtB;CACJ,CAAC;AAoBF,MAAM,UAAU,SAAS,CAAC,MAAoB,EAAE,SAAwB;IACpE,IAAI,SAAS,KAAK,OAAO,EAAE,CAAC;QACxB,OAAO,YAAY,CAAC,MAAM,CAAC,CAAC;IAChC,CAAC;IACD,OAAO,SAAS,CAAC,MAAM,CAAC,CAAC;AAC7B,CAAC;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,iBAAiB,CAAoC,MAAoB,EAAE,UAAa;IACpG,OAAO,EAAE,GAAG,UAAU,EAAE,GAAG,MAAM,EAAE,CAAC;AACxC,CAAC"}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@enact-ui/animate",
+  "version": "1.0.0",
+  "description": "Animation utilities and motion presets for ENACT UI. Only install if you need animation.",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc --build && tsup",
+    "dev": "tsup --watch",
+    "type-check": "tsc --noEmit",
+    "lint": "biome check --write .",
+    "lint:check": "biome check .",
+    "clean": "rm -rf dist tsconfig.tsbuildinfo"
+  },
+  "peerDependencies": {
+    "@enact-ui/react": "^0.0.0",
+    "motion": "^12.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "typescript": "^5.9.2"
+  },
+  "keywords": [
+    "react",
+    "animation",
+    "motion",
+    "framer-motion",
+    "enact-ui"
+  ],
+  "engines": {
+    "node": ">=24.0.0",
+    "npm": ">=10.0.0"
+  },
+  "author": "Enact UI",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/enact-ui/enact-ui.git",
+    "directory": "packages/animate"
+  },
+  "bugs": {
+    "url": "https://github.com/enact-ui/enact-ui/issues"
+  },
+  "homepage": "https://enact-ui.com"
+}