@enact-ui/backgrounds 1.0.0

package/dist/components/background-paths.d.ts

@@ -0,0 +1,21 @@
+import { type MotionPreset } from "@enact-ui/animate";
+import { type FC } from "react";
+export interface BackgroundPathsProps {
+    /** Motion preset - controls animation speed and intensity (required) */
+    preset: MotionPreset;
+}
+/**
+ * BackgroundPaths Component
+ *
+ * Renders animated SVG paths for ambient background effects.
+ * Uses the motion preset system for theme-aware, configurable animations.
+ *
+ * @example
+ * ```tsx
+ * <BackgroundPaths preset="medium" />
+ * <BackgroundPaths preset="slow" />
+ * <BackgroundPaths preset="fast" />
+ * ```
+ */
+export declare const BackgroundPaths: FC<BackgroundPathsProps>;
+//# sourceMappingURL=background-paths.d.ts.map

package/dist/components/background-paths.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"background-paths.d.ts","sourceRoot":"","sources":["../../src/components/background-paths.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,YAAY,EAAmB,MAAM,mBAAmB,CAAC;AAEvE,OAAO,EAAE,KAAK,EAAE,EAAW,MAAM,OAAO,CAAC;AAiFzC,MAAM,WAAW,oBAAoB;IACjC,wEAAwE;IACxE,MAAM,EAAE,YAAY,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAyBpD,CAAC"}

package/dist/components/background-paths.js

@@ -0,0 +1,55 @@
+// Copyright (c) 2025 Amsterdam Data Labs
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMotionPreset } from "@enact-ui/animate";
+import { motion } from "motion/react";
+import { useMemo } from "react";
+function FloatingPaths({ position, baseDuration, opacity, ease, durationVariation, prefersReducedMotion }) {
+    // Memoize path calculations and random values to prevent regeneration on re-render
+    const paths = useMemo(() => Array.from({ length: 36 }, (_, i) => {
+        // Generate stable random variations per path
+        const durationRandom = Math.random();
+        return {
+            id: i,
+            d: `M-${380 - i * 5 * position} -${189 + i * 6}C-${380 - i * 5 * position} -${189 + i * 6} -${312 - i * 5 * position} ${216 - i * 6} ${152 - i * 5 * position} ${343 - i * 6}C${616 - i * 5 * position} ${470 - i * 6} ${684 - i * 5 * position} ${875 - i * 6} ${684 - i * 5 * position} ${875 - i * 6}`,
+            color: `rgba(15,23,42,${0.1 + i * 0.03})`,
+            width: 0.5 + i * 0.03,
+            durationRandom,
+        };
+    }), [position]);
+    // If reduced motion is preferred, render static paths
+    if (prefersReducedMotion) {
+        return (_jsx("div", { className: "pointer-events-none absolute inset-0", children: _jsxs("svg", { className: "text-muted h-full w-full", viewBox: "0 0 696 316", fill: "none", "aria-hidden": "true", children: [_jsx("title", { children: "Background Paths" }), paths.map((path) => (_jsx("path", { d: path.d, stroke: "currentColor", strokeWidth: path.width, strokeOpacity: opacity[1] }, path.id)))] }) }));
+    }
+    return (_jsx("div", { className: "pointer-events-none absolute inset-0", children: _jsxs("svg", { className: "text-muted h-full w-full", viewBox: "0 0 696 316", fill: "none", "aria-hidden": "true", children: [_jsx("title", { children: "Background Paths" }), paths.map((path) => {
+                    // Calculate duration with preset-based variation
+                    const duration = baseDuration + baseDuration * durationVariation * path.durationRandom;
+                    return (_jsx(motion.path, { d: path.d, stroke: "currentColor", strokeWidth: path.width, strokeOpacity: 0.1 + path.id * 0.03, initial: { pathLength: 0.3, opacity: opacity[0] }, animate: {
+                            pathLength: 1,
+                            opacity: opacity,
+                            pathOffset: [0, 1, 0],
+                        }, transition: {
+                            duration,
+                            repeat: Number.POSITIVE_INFINITY,
+                            ease,
+                        } }, path.id));
+                })] }) }));
+}
+/**
+ * BackgroundPaths Component
+ *
+ * Renders animated SVG paths for ambient background effects.
+ * Uses the motion preset system for theme-aware, configurable animations.
+ *
+ * @example
+ * ```tsx
+ * <BackgroundPaths preset="medium" />
+ * <BackgroundPaths preset="slow" />
+ * <BackgroundPaths preset="fast" />
+ * ```
+ */
+export const BackgroundPaths = ({ preset }) => {
+    const motionConfig = useMotionPreset("paths", preset);
+    return (_jsx("div", { className: "pointer-events-none relative flex h-full w-full items-center justify-center overflow-hidden", "aria-hidden": "true", children: _jsxs("div", { className: "absolute inset-0", children: [_jsx(FloatingPaths, { position: 1, baseDuration: motionConfig.baseDuration, opacity: motionConfig.opacity, ease: motionConfig.ease, durationVariation: motionConfig.durationVariation, prefersReducedMotion: motionConfig.prefersReducedMotion }), _jsx(FloatingPaths, { position: -1, baseDuration: motionConfig.baseDuration, opacity: motionConfig.opacity, ease: motionConfig.ease, durationVariation: motionConfig.durationVariation, prefersReducedMotion: motionConfig.prefersReducedMotion })] }) }));
+};
+//# sourceMappingURL=background-paths.js.map

package/dist/components/background-paths.js.map

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

package/dist/components/background-paths.story.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { type BackgroundPathsProps } from "./background-paths";
+declare const meta: Meta<BackgroundPathsProps>;
+export default meta;
+type Story = StoryObj<BackgroundPathsProps>;
+export declare const Default: Story;
+export declare const Slow: Story;
+export declare const Medium: Story;
+export declare const Fast: Story;
+export declare const WithDarkBackground: Story;
+//# sourceMappingURL=background-paths.story.d.ts.map

package/dist/components/background-paths.story.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"background-paths.story.d.ts","sourceRoot":"","sources":["../../src/components/background-paths.story.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAEhF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,oBAAoB,CAuBpC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,oBAAoB,CAAC,CAAC;AAE5C,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAWlB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAWpB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAWlB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAkBhC,CAAC"}

package/dist/components/background-paths.story.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BackgroundPaths } from "./background-paths";
+const meta = {
+    title: "Backgrounds/BackgroundPaths",
+    component: BackgroundPaths,
+    parameters: {
+        layout: "fullscreen",
+    },
+    decorators: [
+        (Story) => (_jsx("div", { className: "relative h-screen w-full bg-bg-primary", children: _jsx(Story, {}) })),
+    ],
+    argTypes: {
+        preset: {
+            control: "select",
+            options: ["slow", "medium", "fast"],
+            description: "Motion preset speed - controls animation duration and intensity",
+            table: {
+                type: { summary: '"slow" | "medium" | "fast"' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        preset: "medium",
+    },
+};
+export const Slow = {
+    args: {
+        preset: "slow",
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Slow preset: Longer animation duration (30s base), subtle opacity (0.2-0.4), perfect for calm backgrounds.",
+            },
+        },
+    },
+};
+export const Medium = {
+    args: {
+        preset: "medium",
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Medium preset: Balanced animation duration (20s base), moderate opacity (0.3-0.6), suitable for most use cases.",
+            },
+        },
+    },
+};
+export const Fast = {
+    args: {
+        preset: "fast",
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Fast preset: Quick animation duration (12s base), higher opacity (0.4-0.8), creates a more dynamic feel.",
+            },
+        },
+    },
+};
+export const WithDarkBackground = {
+    args: {
+        preset: "medium",
+    },
+    decorators: [
+        (Story) => (_jsx("div", { className: "relative h-screen w-full bg-gray-900", children: _jsx(Story, {}) })),
+    ],
+    parameters: {
+        docs: {
+            description: {
+                story: "BackgroundPaths on a dark background - paths adapt to the contrast.",
+            },
+        },
+    },
+};
+//# sourceMappingURL=background-paths.story.js.map

package/dist/components/background-paths.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"background-paths.story.js","sourceRoot":"","sources":["../../src/components/background-paths.story.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,eAAe,EAA6B,MAAM,oBAAoB,CAAC;AAEhF,MAAM,IAAI,GAA+B;IACrC,KAAK,EAAE,6BAA6B;IACpC,SAAS,EAAE,eAAe;IAC1B,UAAU,EAAE;QACR,MAAM,EAAE,YAAY;KACvB;IACD,UAAU,EAAE;QACR,CAAC,KAAK,EAAE,EAAE,CAAC,CACP,cAAK,SAAS,EAAC,wCAAwC,YACnD,KAAC,KAAK,KAAG,GACP,CACT;KACJ;IACD,QAAQ,EAAE;QACN,MAAM,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC;YACnC,WAAW,EAAE,iEAAiE;YAC9E,KAAK,EAAE;gBACH,IAAI,EAAE,EAAE,OAAO,EAAE,4BAA4B,EAAE;aAClD;SACJ;KACJ;CACJ,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC1B,IAAI,EAAE;QACF,MAAM,EAAE,QAAQ;KACnB;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAU;IACvB,IAAI,EAAE;QACF,MAAM,EAAE,MAAM;KACjB;IACD,UAAU,EAAE;QACR,IAAI,EAAE;YACF,WAAW,EAAE;gBACT,KAAK,EAAE,4GAA4G;aACtH;SACJ;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAU;IACzB,IAAI,EAAE;QACF,MAAM,EAAE,QAAQ;KACnB;IACD,UAAU,EAAE;QACR,IAAI,EAAE;YACF,WAAW,EAAE;gBACT,KAAK,EAAE,iHAAiH;aAC3H;SACJ;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAU;IACvB,IAAI,EAAE;QACF,MAAM,EAAE,MAAM;KACjB;IACD,UAAU,EAAE;QACR,IAAI,EAAE;YACF,WAAW,EAAE;gBACT,KAAK,EAAE,0GAA0G;aACpH;SACJ;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAU;IACrC,IAAI,EAAE;QACF,MAAM,EAAE,QAAQ;KACnB;IACD,UAAU,EAAE;QACR,CAAC,KAAK,EAAE,EAAE,CAAC,CACP,cAAK,SAAS,EAAC,sCAAsC,YACjD,KAAC,KAAK,KAAG,GACP,CACT;KACJ;IACD,UAAU,EAAE;QACR,IAAI,EAAE;YACF,WAAW,EAAE;gBACT,KAAK,EAAE,qEAAqE;aAC/E;SACJ;KACJ;CACJ,CAAC"}

package/dist/components/light-rays.d.ts

@@ -0,0 +1,42 @@
+import { type MotionPreset } from "@enact-ui/animate";
+import { type FC } from "react";
+/**
+ * LightRays Component
+ *
+ * Adapted from MagicUI (MIT Licensed)
+ * Original source: https://github.com/magicuidesign/magicui/blob/main/apps/www/registry/magicui/light-rays.tsx
+ * Reference files: references/magicui-lightrays/
+ *
+ * Creates animated light rays that shine from above, perfect for ambient background effects.
+ * Uses CSS gradients and motion animations - no Three.js dependencies required.
+ *
+ * Uses the motion preset system for theme-aware, configurable animations.
+ */
+export interface LightRaysProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+    /** Motion preset - controls animation speed and intensity (required) */
+    preset: MotionPreset;
+    /** Number of light rays to render */
+    count?: number;
+    /** Color of the light rays (CSS color value) */
+    color?: string;
+    /** Blur amount in pixels */
+    blur?: number;
+    /** Length of the rays (CSS length value) */
+    length?: string;
+}
+/**
+ * LightRays Component
+ *
+ * Creates animated light rays that shine from above, perfect for ambient background effects.
+ * Uses the motion preset system for theme-aware, configurable animations.
+ *
+ * @example
+ * ```tsx
+ * <LightRays preset="medium" />
+ * <LightRays preset="slow" count={5} color="rgba(160, 210, 255, 0.3)" />
+ * <LightRays preset="fast" blur={48} length="80vh" />
+ * ```
+ */
+export declare const LightRays: FC<LightRaysProps>;
+//# sourceMappingURL=light-rays.d.ts.map

package/dist/components/light-rays.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"light-rays.d.ts","sourceRoot":"","sources":["../../src/components/light-rays.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,YAAY,EAAmB,MAAM,mBAAmB,CAAC;AAGvE,OAAO,EAAsB,KAAK,EAAE,EAAW,MAAM,OAAO,CAAC;AAE7D;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,wEAAwE;IACxE,MAAM,EAAE,YAAY,CAAC;IACrB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB;AA6FD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CA8DxC,CAAC"}

package/dist/components/light-rays.js

@@ -0,0 +1,86 @@
+// Copyright (c) 2025 Amsterdam Data Labs
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMotionPreset } from "@enact-ui/animate";
+import { cx } from "@enact-ui/react";
+import { motion } from "motion/react";
+import { useMemo } from "react";
+const createRays = (count, swingVariation) => {
+    if (count <= 0)
+        return [];
+    return Array.from({ length: count }, (_, index) => {
+        const left = 8 + Math.random() * 84;
+        const rotate = -28 + Math.random() * 56;
+        const width = 160 + Math.random() * 160;
+        const swing = 0.8 + Math.random() * swingVariation;
+        const delay = Math.random();
+        const durationMultiplier = 0.75 + Math.random() * 0.5;
+        const intensityMultiplier = 0.6 + Math.random() * 0.5;
+        return {
+            id: `${index}-${Math.round(left * 10)}`,
+            left,
+            rotate,
+            width,
+            swing,
+            delay,
+            durationMultiplier,
+            intensityMultiplier,
+        };
+    });
+};
+const Ray = ({ left, rotate, width, swing, delay, durationMultiplier, intensityMultiplier, cycleDuration, intensity, prefersReducedMotion }) => {
+    const computedIntensity = intensity * intensityMultiplier;
+    const computedDuration = cycleDuration * durationMultiplier;
+    const computedDelay = delay * cycleDuration;
+    // If reduced motion is preferred, render static ray
+    if (prefersReducedMotion) {
+        return (_jsx("div", { className: "pointer-events-none absolute -top-[12%] left-[var(--ray-left)] h-[var(--light-rays-length)] w-[var(--ray-width)] origin-top -translate-x-1/2 rounded-full bg-gradient-to-b from-[color-mix(in_srgb,var(--light-rays-color)_70%,transparent)] to-transparent opacity-[var(--ray-opacity)] mix-blend-screen blur-[var(--light-rays-blur)]", style: {
+                "--ray-left": `${left}%`,
+                "--ray-width": `${width}px`,
+                "--ray-opacity": computedIntensity * 0.5,
+                transform: `rotate(${rotate}deg)`,
+            }, "aria-hidden": "true" }));
+    }
+    return (_jsx(motion.div, { className: "pointer-events-none absolute -top-[12%] left-[var(--ray-left)] h-[var(--light-rays-length)] w-[var(--ray-width)] origin-top -translate-x-1/2 rounded-full bg-gradient-to-b from-[color-mix(in_srgb,var(--light-rays-color)_70%,transparent)] to-transparent opacity-0 mix-blend-screen blur-[var(--light-rays-blur)]", style: {
+            "--ray-left": `${left}%`,
+            "--ray-width": `${width}px`,
+        }, initial: { rotate: rotate }, animate: {
+            opacity: [0, computedIntensity, 0],
+            rotate: [rotate - swing, rotate + swing, rotate - swing],
+        }, transition: {
+            duration: computedDuration,
+            repeat: Number.POSITIVE_INFINITY,
+            ease: "easeInOut",
+            delay: computedDelay,
+            repeatDelay: computedDuration * 0.1,
+        }, "aria-hidden": "true" }));
+};
+/**
+ * LightRays Component
+ *
+ * Creates animated light rays that shine from above, perfect for ambient background effects.
+ * Uses the motion preset system for theme-aware, configurable animations.
+ *
+ * @example
+ * ```tsx
+ * <LightRays preset="medium" />
+ * <LightRays preset="slow" count={5} color="rgba(160, 210, 255, 0.3)" />
+ * <LightRays preset="fast" blur={48} length="80vh" />
+ * ```
+ */
+export const LightRays = ({ className, style, preset, count = 7, color = "rgba(160, 210, 255, 0.2)", blur = 36, length = "70vh", ref, ...props }) => {
+    const motionConfig = useMotionPreset("rays", preset);
+    // Memoize rays creation based on count and swingVariation
+    const rays = useMemo(() => createRays(count, motionConfig.swingVariation), [count, motionConfig.swingVariation]);
+    return (_jsx("div", { ref: ref, className: cx("pointer-events-none absolute inset-0 isolate overflow-hidden rounded-[inherit]", className), style: {
+            "--light-rays-color": color,
+            "--light-rays-blur": `${blur}px`,
+            "--light-rays-length": length,
+            ...style,
+        }, "aria-hidden": "true", ...props, children: _jsxs("div", { className: "absolute inset-0 overflow-hidden", children: [_jsx("div", { "aria-hidden": "true", className: "absolute inset-0 opacity-60", style: {
+                        background: "radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--light-rays-color) 45%, transparent), transparent 70%)",
+                    } }), _jsx("div", { "aria-hidden": "true", className: "absolute inset-0 opacity-60", style: {
+                        background: "radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--light-rays-color) 35%, transparent), transparent 75%)",
+                    } }), rays.map((ray) => (_jsx(Ray, { ...ray, cycleDuration: motionConfig.cycleDuration, intensity: motionConfig.intensity, prefersReducedMotion: motionConfig.prefersReducedMotion }, ray.id)))] }) }));
+};
+//# sourceMappingURL=light-rays.js.map

package/dist/components/light-rays.js.map

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

package/dist/components/light-rays.story.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { type LightRaysProps } from "./light-rays";
+declare const meta: Meta<LightRaysProps>;
+export default meta;
+type Story = StoryObj<LightRaysProps>;
+export declare const Default: Story;
+export declare const Slow: Story;
+export declare const Medium: Story;
+export declare const Fast: Story;
+export declare const WarmColors: Story;
+export declare const CoolColors: Story;
+export declare const IntenseRays: Story;
+//# sourceMappingURL=light-rays.story.d.ts.map

package/dist/components/light-rays.story.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"light-rays.story.d.ts","sourceRoot":"","sources":["../../src/components/light-rays.story.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,cAAc,CAmD9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC;AAEtC,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAYlB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAYpB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAYlB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAcxB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAexB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAsBzB,CAAC"}

package/dist/components/light-rays.story.js

@@ -0,0 +1,150 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LightRays } from "./light-rays";
+const meta = {
+    title: "Backgrounds/LightRays",
+    component: LightRays,
+    parameters: {
+        layout: "fullscreen",
+    },
+    decorators: [
+        (Story) => (_jsx("div", { className: "relative h-screen w-full bg-gray-900", children: _jsx(Story, {}) })),
+    ],
+    argTypes: {
+        preset: {
+            control: "select",
+            options: ["slow", "medium", "fast"],
+            description: "Motion preset speed - controls animation cycle duration and intensity",
+            table: {
+                type: { summary: '"slow" | "medium" | "fast"' },
+            },
+        },
+        count: {
+            control: { type: "range", min: 1, max: 15, step: 1 },
+            description: "Number of light rays to render",
+            table: {
+                defaultValue: { summary: "7" },
+            },
+        },
+        color: {
+            control: "color",
+            description: "Color of the light rays (CSS color value)",
+            table: {
+                defaultValue: { summary: "rgba(160, 210, 255, 0.2)" },
+            },
+        },
+        blur: {
+            control: { type: "range", min: 0, max: 100, step: 4 },
+            description: "Blur amount in pixels",
+            table: {
+                defaultValue: { summary: "36" },
+            },
+        },
+        length: {
+            control: "text",
+            description: "Length of the rays (CSS length value)",
+            table: {
+                defaultValue: { summary: "70vh" },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        preset: "medium",
+        count: 7,
+        color: "rgba(160, 210, 255, 0.2)",
+        blur: 36,
+        length: "70vh",
+    },
+};
+export const Slow = {
+    args: {
+        preset: "slow",
+        count: 5,
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Slow preset: Longer animation cycles (20s), subtle intensity (0.3), wider swing variation. Perfect for calm, ambient backgrounds.",
+            },
+        },
+    },
+};
+export const Medium = {
+    args: {
+        preset: "medium",
+        count: 7,
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Medium preset: Balanced animation cycles (14s), moderate intensity (0.5). Suitable for most use cases.",
+            },
+        },
+    },
+};
+export const Fast = {
+    args: {
+        preset: "fast",
+        count: 9,
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Fast preset: Quick animation cycles (8s), higher intensity (0.7), tighter swing variation. Creates a more dynamic, energetic feel.",
+            },
+        },
+    },
+};
+export const WarmColors = {
+    args: {
+        preset: "medium",
+        count: 7,
+        color: "rgba(255, 180, 120, 0.25)",
+        blur: 40,
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "LightRays with warm orange/amber color for a sunset-like atmosphere.",
+            },
+        },
+    },
+};
+export const CoolColors = {
+    args: {
+        preset: "slow",
+        count: 6,
+        color: "rgba(100, 200, 255, 0.3)",
+        blur: 48,
+        length: "80vh",
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "LightRays with cool blue color and extended length for a calm, oceanic effect.",
+            },
+        },
+    },
+};
+export const IntenseRays = {
+    args: {
+        preset: "fast",
+        count: 12,
+        color: "rgba(200, 220, 255, 0.35)",
+        blur: 24,
+        length: "90vh",
+    },
+    decorators: [
+        (Story) => (_jsx("div", { className: "relative h-screen w-full bg-black", children: _jsx(Story, {}) })),
+    ],
+    parameters: {
+        docs: {
+            description: {
+                story: "High intensity configuration with many rays, less blur, and longer length for dramatic effect.",
+            },
+        },
+    },
+};
+//# sourceMappingURL=light-rays.story.js.map

package/dist/components/light-rays.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"light-rays.story.js","sourceRoot":"","sources":["../../src/components/light-rays.story.tsx"],"names":[],"mappings":"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"}

package/dist/components/liquid-glass-background.d.ts

@@ -0,0 +1,11 @@
+import type React from "react";
+/**
+ * LiquidGlassBackground Component
+ *
+ * Provides a subtle animated background for the liquid glass theme.
+ * Features floating gradient orbs with gentle movements that showcase
+ * glassmorphism effects without being distracting.
+ */
+export declare const LiquidGlassBackground: React.FC;
+export default LiquidGlassBackground;
+//# sourceMappingURL=liquid-glass-background.d.ts.map

package/dist/components/liquid-glass-background.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"liquid-glass-background.d.ts","sourceRoot":"","sources":["../../src/components/liquid-glass-background.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAgGzC,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/components/liquid-glass-background.js

@@ -0,0 +1,79 @@
+// Copyright (c) 2025 Amsterdam Data Labs
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion } from "motion/react";
+import { useEffect, useState } from "react";
+/**
+ * LiquidGlassBackground Component
+ *
+ * Provides a subtle animated background for the liquid glass theme.
+ * Features floating gradient orbs with gentle movements that showcase
+ * glassmorphism effects without being distracting.
+ */
+export const LiquidGlassBackground = () => {
+    const [isDarkMode, setIsDarkMode] = useState(false);
+    useEffect(() => {
+        // Check for dark mode class on document element
+        const checkDarkMode = () => {
+            setIsDarkMode(document.documentElement.classList.contains("dark-mode"));
+        };
+        checkDarkMode();
+        // Watch for dark mode changes
+        const observer = new MutationObserver(checkDarkMode);
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ["class"],
+        });
+        return () => observer.disconnect();
+    }, []);
+    // Color gradients for light and dark modes
+    const lightModeColors = [
+        "rgba(0, 212, 255, 0.15)", // Bright cyan
+        "rgba(173, 230, 255, 0.12)", // Light cyan
+        "rgba(102, 178, 255, 0.1)", // Soft blue
+        "rgba(0, 153, 204, 0.08)", // Deeper cyan
+    ];
+    const darkModeColors = [
+        "rgba(0, 102, 255, 0.2)", // Deep blue
+        "rgba(51, 153, 255, 0.15)", // Bright blue
+        "rgba(102, 178, 255, 0.12)", // Light blue
+        "rgba(0, 51, 204, 0.1)", // Dark blue
+    ];
+    const colors = isDarkMode ? darkModeColors : lightModeColors;
+    // Check for reduced motion preference
+    const prefersReducedMotion = typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    // Animation variants - more pronounced movement for visible distortion
+    const orbVariants = {
+        animate: {
+            x: prefersReducedMotion ? 0 : [0, 100, -80, 60, -40, 0],
+            y: prefersReducedMotion ? 0 : [0, -80, 60, -50, 40, 0],
+            scale: prefersReducedMotion ? 1 : [1, 1.3, 0.8, 1.2, 0.9, 1],
+        },
+    };
+    const transition = {
+        duration: prefersReducedMotion ? 0 : 12,
+        repeat: Infinity,
+        ease: "easeInOut",
+    };
+    return (_jsxs("div", { className: "pointer-events-none fixed inset-0 -z-10 overflow-hidden", "aria-hidden": "true", children: [colors.map((color, index) => {
+                const size = 400 + index * 120;
+                const initialX = 10 + index * 30;
+                const initialY = 20 + index * 25;
+                return (_jsx(motion.div, { className: "absolute rounded-full blur-3xl", style: {
+                        width: `${size}px`,
+                        height: `${size}px`,
+                        background: `radial-gradient(circle, ${color} 0%, transparent 70%)`,
+                        left: `${initialX}%`,
+                        top: `${initialY}%`,
+                    }, variants: orbVariants, animate: "animate", transition: {
+                        ...transition,
+                        delay: index * 1.5,
+                    } }, color));
+            }), _jsx("div", { className: "absolute inset-0 opacity-30", style: {
+                    background: isDarkMode
+                        ? "radial-gradient(circle at 50% 50%, rgba(0, 102, 255, 0.1) 0%, transparent 70%)"
+                        : "radial-gradient(circle at 50% 50%, rgba(0, 212, 255, 0.08) 0%, transparent 70%)",
+                } })] }));
+};
+export default LiquidGlassBackground;
+//# sourceMappingURL=liquid-glass-background.js.map

package/dist/components/liquid-glass-background.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"liquid-glass-background.js","sourceRoot":"","sources":["../../src/components/liquid-glass-background.tsx"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @enact-ui/backgrounds
+ *
+ * Decorative background effects for ENACT UI.
+ * Purely cosmetic - can be removed without functional impact.
+ *
+ * Requires: @enact-ui/react (for cx utility)
+ * Requires: @enact-ui/animate (for motion presets)
+ * Requires: motion/react (for animations)
+ *
+ * @packageDocumentation
+ */
+export { BackgroundPaths, type BackgroundPathsProps } from "./components/background-paths";
+export { LightRays, type LightRaysProps } from "./components/light-rays";
+export { LiquidGlassBackground } from "./components/liquid-glass-background";
+//# 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;;;;;;;;;;;GAWG;AAKH,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAC3F,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC"}