@enact-ui/animate 0.1.0 → 0.2.0

package/dist/presets/stagger-presets.js

@@ -0,0 +1,582 @@
+// Copyright (c) 2026 Amsterdam Data Labs
+import { getMotionStyle, msToSeconds } from "./motion-styles";
+/**
+ * Creates base item variants used across all stagger presets.
+ *
+ * @param style - The motion style for animation configuration
+ * @returns Base item variants with fade and slide effect
+ */
+function createBaseItemVariants(style) {
+    const config = getMotionStyle(style);
+    return {
+        hidden: {
+            opacity: 0,
+            y: 20,
+        },
+        visible: {
+            opacity: 1,
+            y: 0,
+            transition: {
+                type: "spring",
+                stiffness: config.spring.stiffness,
+                damping: config.spring.damping,
+                mass: config.spring.mass,
+            },
+        },
+    };
+}
+/**
+ * Sequential Stagger - Items animate one after another from top to bottom.
+ *
+ * The most common stagger pattern where items appear in their natural order.
+ * Creates a clean, predictable animation flow that guides the eye downward.
+ *
+ * @ai-hint Use staggerSequential for standard lists, menus, and vertical
+ * content where you want items to appear in reading order (top to bottom).
+ *
+ * @example
+ * ```tsx
+ * import { staggerSequential } from "@enact-ui/animate";
+ *
+ * // Navigation menu items
+ * <motion.nav variants={staggerSequential.getContainerVariants("standard")}>
+ *   {menuItems.map((item) => (
+ *     <motion.a variants={staggerSequential.getItemVariants("standard")}>
+ *       {item.label}
+ *     </motion.a>
+ *   ))}
+ * </motion.nav>
+ * ```
+ */
+export const staggerSequential = {
+    name: "Sequential",
+    description: "Items animate one after another from top to bottom",
+    useCase: ["Navigation menus", "Vertical lists", "Table rows", "Form fields", "Sidebar items"],
+    getDelay(index, _total, style) {
+        const config = getMotionStyle(style);
+        return msToSeconds(config.staggerDelay * index);
+    },
+    getContainerVariants(style) {
+        const config = getMotionStyle(style);
+        return {
+            hidden: { opacity: 0 },
+            visible: {
+                opacity: 1,
+                transition: {
+                    staggerChildren: msToSeconds(config.staggerDelay),
+                    delayChildren: msToSeconds(config.duration.fast * 0.5),
+                },
+            },
+        };
+    },
+    getItemVariants: createBaseItemVariants,
+};
+/**
+ * Reverse Stagger - Items animate from bottom to top.
+ *
+ * Creates an upward flow effect, useful for content that should draw
+ * attention upward or create a "rising" visual metaphor.
+ *
+ * @ai-hint Use staggerReverse for toast notifications, chat messages
+ * (newest first), or any content where bottom-to-top flow makes sense.
+ *
+ * @example
+ * ```tsx
+ * import { staggerReverse } from "@enact-ui/animate";
+ *
+ * // Toast notification stack
+ * <motion.div variants={staggerReverse.getContainerVariants("standard")}>
+ *   {toasts.map((toast) => (
+ *     <motion.div variants={staggerReverse.getItemVariants("standard")}>
+ *       {toast.message}
+ *     </motion.div>
+ *   ))}
+ * </motion.div>
+ * ```
+ */
+export const staggerReverse = {
+    name: "Reverse",
+    description: "Items animate from bottom to top",
+    useCase: ["Toast notifications", "Chat messages (newest first)", "Bottom-anchored content", "Rising effect animations", "Upward reveals"],
+    getDelay(index, total, style) {
+        const config = getMotionStyle(style);
+        const reverseIndex = total - 1 - index;
+        return msToSeconds(config.staggerDelay * reverseIndex);
+    },
+    getContainerVariants(style) {
+        const config = getMotionStyle(style);
+        return {
+            hidden: { opacity: 0 },
+            visible: {
+                opacity: 1,
+                transition: {
+                    staggerChildren: msToSeconds(config.staggerDelay),
+                    staggerDirection: -1,
+                    delayChildren: msToSeconds(config.duration.fast * 0.5),
+                },
+            },
+        };
+    },
+    getItemVariants(style) {
+        const config = getMotionStyle(style);
+        return {
+            hidden: {
+                opacity: 0,
+                y: -20,
+            },
+            visible: {
+                opacity: 1,
+                y: 0,
+                transition: {
+                    type: "spring",
+                    stiffness: config.spring.stiffness,
+                    damping: config.spring.damping,
+                    mass: config.spring.mass,
+                },
+            },
+        };
+    },
+};
+/**
+ * Center Stagger - Items animate from center outward.
+ *
+ * Creates a radial expansion effect where the middle item(s) appear first,
+ * then items progressively reveal outward. Great for focus-based UIs.
+ *
+ * @ai-hint Use staggerCenter for hero sections, featured content, or any
+ * UI where you want to draw attention to the center element first.
+ *
+ * @example
+ * ```tsx
+ * import { staggerCenter } from "@enact-ui/animate";
+ *
+ * // Feature cards with center focus
+ * <motion.div
+ *   className="flex gap-4"
+ *   variants={staggerCenter.getContainerVariants("bold")}
+ * >
+ *   {features.map((feature, i) => (
+ *     <motion.div
+ *       variants={staggerCenter.getItemVariants("bold")}
+ *       custom={{ index: i, total: features.length }}
+ *     >
+ *       {feature.title}
+ *     </motion.div>
+ *   ))}
+ * </motion.div>
+ * ```
+ */
+export const staggerCenter = {
+    name: "Center",
+    description: "Items animate from center outward",
+    useCase: ["Hero sections", "Featured content", "Pricing cards", "Centered navigation", "Focus-based reveals"],
+    getDelay(index, total, style) {
+        const config = getMotionStyle(style);
+        const centerIndex = (total - 1) / 2;
+        const distanceFromCenter = Math.abs(index - centerIndex);
+        return msToSeconds(config.staggerDelay * distanceFromCenter);
+    },
+    getContainerVariants(style) {
+        const config = getMotionStyle(style);
+        return {
+            hidden: { opacity: 0 },
+            visible: {
+                opacity: 1,
+                transition: {
+                    staggerChildren: msToSeconds(config.staggerDelay),
+                    delayChildren: msToSeconds(config.duration.fast * 0.5),
+                },
+            },
+        };
+    },
+    getItemVariants(style) {
+        const config = getMotionStyle(style);
+        return {
+            hidden: {
+                opacity: 0,
+                scale: 0.8,
+            },
+            visible: {
+                opacity: 1,
+                scale: 1,
+                transition: {
+                    type: "spring",
+                    stiffness: config.spring.stiffness,
+                    damping: config.spring.damping,
+                    mass: config.spring.mass,
+                },
+            },
+        };
+    },
+};
+/**
+ * Random Stagger - Items animate in random order.
+ *
+ * Creates an organic, unpredictable animation pattern. Each render
+ * produces the same "random" order using a seeded approach based on index.
+ *
+ * @ai-hint Use staggerRandom for photo galleries, tag clouds, or creative
+ * UIs where a playful, organic feel is desired. Avoid for data-heavy UIs.
+ *
+ * @example
+ * ```tsx
+ * import { staggerRandom } from "@enact-ui/animate";
+ *
+ * // Photo gallery with organic reveal
+ * <motion.div
+ *   className="grid grid-cols-3"
+ *   variants={staggerRandom.getContainerVariants("playful")}
+ * >
+ *   {photos.map((photo) => (
+ *     <motion.img
+ *       src={photo.url}
+ *       variants={staggerRandom.getItemVariants("playful")}
+ *     />
+ *   ))}
+ * </motion.div>
+ * ```
+ */
+export const staggerRandom = {
+    name: "Random",
+    description: "Items animate in random order",
+    useCase: ["Photo galleries", "Tag clouds", "Creative portfolios", "Playful interfaces", "Organic reveals"],
+    getDelay(index, total, style) {
+        const config = getMotionStyle(style);
+        // Use a deterministic pseudo-random based on index for consistency
+        const seed = ((index * 7919) % total) / total;
+        const maxDelay = config.staggerDelay * total;
+        return msToSeconds(seed * maxDelay);
+    },
+    getContainerVariants(style) {
+        const config = getMotionStyle(style);
+        return {
+            hidden: { opacity: 0 },
+            visible: {
+                opacity: 1,
+                transition: {
+                    staggerChildren: msToSeconds(config.staggerDelay * 0.3),
+                    delayChildren: msToSeconds(config.duration.fast * 0.5),
+                },
+            },
+        };
+    },
+    getItemVariants(style) {
+        const config = getMotionStyle(style);
+        return {
+            hidden: {
+                opacity: 0,
+                scale: 0.9,
+                rotate: -5,
+            },
+            visible: {
+                opacity: 1,
+                scale: 1,
+                rotate: 0,
+                transition: {
+                    type: "spring",
+                    stiffness: config.spring.stiffness,
+                    damping: config.spring.damping,
+                    mass: config.spring.mass,
+                },
+            },
+        };
+    },
+};
+/**
+ * Grid Stagger - 2D diagonal wave pattern for grid layouts.
+ *
+ * Creates a diagonal wave effect where items animate based on their
+ * row + column position. Perfect for image grids and card layouts.
+ *
+ * @ai-hint Use staggerGrid for 2D layouts like image galleries, card grids,
+ * or dashboards. Pass columns count for accurate diagonal calculation.
+ *
+ * @example
+ * ```tsx
+ * import { staggerGrid } from "@enact-ui/animate";
+ *
+ * const COLUMNS = 4;
+ *
+ * // Image grid with diagonal wave
+ * <motion.div
+ *   className="grid grid-cols-4"
+ *   variants={staggerGrid.getContainerVariants("standard")}
+ * >
+ *   {images.map((image, index) => (
+ *     <motion.div
+ *       key={image.id}
+ *       variants={staggerGrid.getItemVariants("standard")}
+ *       style={{
+ *         // Custom delay based on grid position
+ *         transitionDelay: `${staggerGrid.getDelay(
+ *           index,
+ *           images.length,
+ *           "standard"
+ *         )}s`,
+ *       }}
+ *     >
+ *       <img src={image.url} alt={image.alt} />
+ *     </motion.div>
+ *   ))}
+ * </motion.div>
+ * ```
+ */
+export const staggerGrid = {
+    name: "Grid",
+    description: "2D diagonal wave pattern for grid layouts",
+    useCase: ["Image galleries", "Card grids", "Dashboard widgets", "Product catalogs", "Portfolio items"],
+    getDelay(index, _total, style, columns = 4) {
+        const config = getMotionStyle(style);
+        const row = Math.floor(index / columns);
+        const col = index % columns;
+        // Diagonal wave: items with same row+col sum animate together
+        const diagonalIndex = row + col;
+        return msToSeconds(config.staggerDelay * diagonalIndex);
+    },
+    getContainerVariants(style) {
+        const config = getMotionStyle(style);
+        return {
+            hidden: { opacity: 0 },
+            visible: {
+                opacity: 1,
+                transition: {
+                    staggerChildren: msToSeconds(config.staggerDelay * 0.8),
+                    delayChildren: msToSeconds(config.duration.fast * 0.5),
+                },
+            },
+        };
+    },
+    getItemVariants(style) {
+        const config = getMotionStyle(style);
+        return {
+            hidden: {
+                opacity: 0,
+                scale: 0.9,
+                y: 10,
+            },
+            visible: {
+                opacity: 1,
+                scale: 1,
+                y: 0,
+                transition: {
+                    type: "spring",
+                    stiffness: config.spring.stiffness,
+                    damping: config.spring.damping,
+                    mass: config.spring.mass,
+                },
+            },
+        };
+    },
+};
+/**
+ * Wave Stagger - Sine-wave based stagger pattern.
+ *
+ * Creates an organic wave effect using sinusoidal timing. Items
+ * animate in a flowing pattern that feels natural and rhythmic.
+ *
+ * @ai-hint Use staggerWave for music/audio UIs, timeline visualizations,
+ * or any interface that benefits from organic, flowing motion.
+ *
+ * @example
+ * ```tsx
+ * import { staggerWave } from "@enact-ui/animate";
+ *
+ * // Audio equalizer bars
+ * <motion.div
+ *   className="flex items-end gap-1"
+ *   variants={staggerWave.getContainerVariants("playful")}
+ * >
+ *   {bars.map((bar, index) => (
+ *     <motion.div
+ *       key={index}
+ *       className="bg-primary"
+ *       style={{ height: bar.height }}
+ *       variants={staggerWave.getItemVariants("playful")}
+ *     />
+ *   ))}
+ * </motion.div>
+ * ```
+ */
+export const staggerWave = {
+    name: "Wave",
+    description: "Sine-wave based stagger pattern for organic motion",
+    useCase: ["Audio visualizers", "Timeline animations", "Organic reveals", "Music interfaces", "Flowing sequences"],
+    getDelay(index, total, style) {
+        const config = getMotionStyle(style);
+        // Create a sine wave pattern across all items
+        const wavePosition = (index / total) * Math.PI * 2;
+        const waveOffset = (Math.sin(wavePosition) + 1) / 2; // Normalize to 0-1
+        const baseDelay = config.staggerDelay * index;
+        const waveDelay = config.staggerDelay * waveOffset * 2;
+        return msToSeconds(baseDelay + waveDelay);
+    },
+    getContainerVariants(style) {
+        const config = getMotionStyle(style);
+        return {
+            hidden: { opacity: 0 },
+            visible: {
+                opacity: 1,
+                transition: {
+                    staggerChildren: msToSeconds(config.staggerDelay * 0.6),
+                    delayChildren: msToSeconds(config.duration.fast * 0.5),
+                },
+            },
+        };
+    },
+    getItemVariants(style) {
+        const config = getMotionStyle(style);
+        return {
+            hidden: {
+                opacity: 0,
+                y: 15,
+                x: -5,
+            },
+            visible: {
+                opacity: 1,
+                y: 0,
+                x: 0,
+                transition: {
+                    type: "spring",
+                    stiffness: config.spring.stiffness,
+                    damping: config.spring.damping,
+                    mass: config.spring.mass,
+                },
+            },
+        };
+    },
+};
+/**
+ * Cascade Stagger - Fast initial items, progressively slower.
+ *
+ * Creates an accelerating cascade effect where early items appear quickly
+ * and later items take longer. Great for emphasizing quantity.
+ *
+ * @ai-hint Use staggerCascade for long lists, data tables, or anywhere
+ * you want to convey "there's more" by slowing down the reveal.
+ *
+ * @example
+ * ```tsx
+ * import { staggerCascade } from "@enact-ui/animate";
+ *
+ * // Long data table rows
+ * <motion.tbody variants={staggerCascade.getContainerVariants("subtle")}>
+ *   {rows.map((row) => (
+ *     <motion.tr
+ *       key={row.id}
+ *       variants={staggerCascade.getItemVariants("subtle")}
+ *     >
+ *       {row.cells.map((cell) => (
+ *         <td key={cell.id}>{cell.value}</td>
+ *       ))}
+ *     </motion.tr>
+ *   ))}
+ * </motion.tbody>
+ * ```
+ */
+export const staggerCascade = {
+    name: "Cascade",
+    description: "Fast initial items, progressively slower later ones",
+    useCase: ["Long lists", "Data tables", "Search results", "Infinite scroll content", "Progressive reveals"],
+    getDelay(index, total, style) {
+        const config = getMotionStyle(style);
+        // Exponential slowdown: sqrt creates the cascade effect
+        const normalizedIndex = index / Math.max(total - 1, 1);
+        const cascadeFactor = Math.sqrt(normalizedIndex);
+        const maxDuration = config.staggerDelay * total;
+        return msToSeconds(cascadeFactor * maxDuration);
+    },
+    getContainerVariants(style) {
+        const config = getMotionStyle(style);
+        return {
+            hidden: { opacity: 0 },
+            visible: {
+                opacity: 1,
+                transition: {
+                    staggerChildren: msToSeconds(config.staggerDelay * 0.4),
+                    delayChildren: msToSeconds(config.duration.fast * 0.3),
+                },
+            },
+        };
+    },
+    getItemVariants(style) {
+        const config = getMotionStyle(style);
+        return {
+            hidden: {
+                opacity: 0,
+                x: -10,
+            },
+            visible: {
+                opacity: 1,
+                x: 0,
+                transition: {
+                    type: "spring",
+                    stiffness: config.spring.stiffness + 50, // Slightly snappier
+                    damping: config.spring.damping + 5,
+                    mass: config.spring.mass * 0.9,
+                },
+            },
+        };
+    },
+};
+/**
+ * All stagger presets indexed by name.
+ *
+ * @ai-hint Use this map to dynamically select stagger presets based on
+ * user preferences or component configuration.
+ */
+export const staggerPresets = {
+    sequential: staggerSequential,
+    reverse: staggerReverse,
+    center: staggerCenter,
+    random: staggerRandom,
+    grid: staggerGrid,
+    wave: staggerWave,
+    cascade: staggerCascade,
+};
+/**
+ * Gets a stagger preset by name.
+ *
+ * @param name - The preset name to retrieve
+ * @returns The stagger preset configuration
+ * @throws Error if preset name is not found
+ *
+ * @example
+ * ```ts
+ * const preset = getStaggerPreset("center");
+ * const containerVariants = preset.getContainerVariants("standard");
+ * ```
+ */
+export function getStaggerPreset(name) {
+    const preset = staggerPresets[name];
+    if (!preset) {
+        throw new Error(`Unknown stagger preset: ${name}. Available: ${Object.keys(staggerPresets).join(", ")}`);
+    }
+    return preset;
+}
+/**
+ * Creates custom delay values for a list of items using a specific preset.
+ *
+ * Useful when you need to calculate delays outside of Motion's variants
+ * system, such as for CSS animations or manual timing control.
+ *
+ * @param preset - The stagger preset to use
+ * @param total - Total number of items
+ * @param style - The motion style for timing
+ * @returns Array of delay values in seconds for each item
+ *
+ * @example
+ * ```ts
+ * const delays = calculateStaggerDelays("cascade", 10, "standard");
+ * // Returns: [0, 0.05, 0.071, 0.087, 0.1, ...]
+ *
+ * // Use with CSS custom properties
+ * items.forEach((item, index) => {
+ *   item.style.setProperty("--delay", `${delays[index]}s`);
+ * });
+ * ```
+ */
+export function calculateStaggerDelays(preset, total, style) {
+    const staggerPreset = getStaggerPreset(preset);
+    return Array.from({ length: total }, (_, index) => staggerPreset.getDelay(index, total, style));
+}
+//# sourceMappingURL=stagger-presets.js.map

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

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

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

@@ -0,0 +1,25 @@
+/**
+ * Demonstrates all four motion styles with the same animation.
+ */
+export declare const MotionStylesShowcase: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * Demonstrates all component animation presets.
+ */
+export declare const ComponentPresetsShowcase: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * Demonstrates staggered list animations.
+ */
+export declare const StaggerShowcase: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * Demonstrates micro-interaction presets.
+ */
+export declare const MicroInteractionsShowcase: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * Demonstrates how animations respect reduced motion preferences.
+ */
+export declare const ReducedMotionDemo: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * A comprehensive showcase of all motion preset features.
+ */
+export declare const MotionPresetsPlayground: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=motion-presets.demo.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"motion-presets.demo.d.ts","sourceRoot":"","sources":["../../src/showcase/motion-presets.demo.tsx"],"names":[],"mappings":"AAyBA;;GAEG;AACH,eAAO,MAAM,oBAAoB,+CA0BhC,CAAC;AA+BF;;GAEG;AACH,eAAO,MAAM,wBAAwB,+CA0EpC,CAAC;AAMF;;GAEG;AACH,eAAO,MAAM,eAAe,+CAiE3B,CAAC;AAMF;;GAEG;AACH,eAAO,MAAM,yBAAyB,+CA8ErC,CAAC;AAMF;;GAEG;AACH,eAAO,MAAM,iBAAiB,+CA0B7B,CAAC;AAMF;;GAEG;AACH,eAAO,MAAM,uBAAuB,+CA6BnC,CAAC"}