@flikk/ui 1.0.0-beta.1 → 1.0.0-beta.3

package/dist/components/effects/DotPattern/DotPattern.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import type { DotPatternProps } from "./DotPattern.types";
+/**
+ * DotPattern renders an SVG-based dot grid background pattern.
+ *
+ * Use it as an absolute-positioned decorative background inside a container
+ * with `position: relative`. The pattern is fully non-interactive
+ * (`pointer-events: none`) and sits at `z-index: 0` by default.
+ *
+ * @example
+ * ```tsx
+ * <div className="relative overflow-hidden h-96">
+ *   <DotPattern spacing={24} dotSize={1.5} fade animated />
+ *   <div className="relative z-10">Your content here</div>
+ * </div>
+ * ```
+ */
+export declare const DotPattern: React.ForwardRefExoticComponent<DotPatternProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/effects/DotPattern/DotPattern.js

@@ -0,0 +1,65 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default, { useId, useMemo } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * Build a CSS mask-image value for the given fade direction and size.
+ */
+function buildMaskImage(direction, fadeSize) {
+    const stop = Math.max(0, Math.min(100, fadeSize));
+    if (direction === "radial") {
+        return `radial-gradient(ellipse at center, black ${100 - stop}%, transparent 100%)`;
+    }
+    const directionMap = {
+        top: "to top",
+        bottom: "to bottom",
+        left: "to left",
+        right: "to right",
+    };
+    return `linear-gradient(${directionMap[direction]}, black ${100 - stop}%, transparent 100%)`;
+}
+/**
+ * DotPattern renders an SVG-based dot grid background pattern.
+ *
+ * Use it as an absolute-positioned decorative background inside a container
+ * with `position: relative`. The pattern is fully non-interactive
+ * (`pointer-events: none`) and sits at `z-index: 0` by default.
+ *
+ * @example
+ * ```tsx
+ * <div className="relative overflow-hidden h-96">
+ *   <DotPattern spacing={24} dotSize={1.5} fade animated />
+ *   <div className="relative z-10">Your content here</div>
+ * </div>
+ * ```
+ */
+const DotPattern = React__default.forwardRef(({ spacing = 20, dotSize = 1, color = "var(--color-border)", fade = true, fadeDirection = "radial", fadeSize = 50, animated = false, className, style, ...rest }, ref) => {
+    const patternId = useId();
+    const shouldReduceMotion = useReducedMotion();
+    const enableAnimation = animated && !shouldReduceMotion;
+    const maskImage = useMemo(() => (fade ? buildMaskImage(fadeDirection, fadeSize) : undefined), [fade, fadeDirection, fadeSize]);
+    const containerStyle = {
+        ...style,
+        ...(maskImage
+            ? {
+                maskImage,
+                WebkitMaskImage: maskImage,
+            }
+            : {}),
+    };
+    // Center the dot within each cell
+    const cx = spacing / 2;
+    const cy = spacing / 2;
+    const dotElement = enableAnimation ? (jsx(motion.circle, { cx: cx, cy: cy, r: dotSize, fill: color, animate: {
+            opacity: [0.4, 1, 0.4],
+        }, transition: {
+            duration: 4,
+            ease: "easeInOut",
+            repeat: Infinity,
+        } })) : (jsx("circle", { cx: cx, cy: cy, r: dotSize, fill: color }));
+    return (jsx("div", { ref: ref, className: cn("absolute inset-0 pointer-events-none z-0 overflow-hidden", className), style: containerStyle, ...rest, children: jsxs("svg", { "aria-hidden": "true", className: "absolute inset-0 w-full h-full", children: [jsx("defs", { children: jsx("pattern", { id: patternId, x: "0", y: "0", width: spacing, height: spacing, patternUnits: "userSpaceOnUse", children: dotElement }) }), jsx("rect", { width: "100%", height: "100%", fill: `url(#${patternId})` })] }) }));
+});
+DotPattern.displayName = "DotPattern";
+
+export { DotPattern };

package/dist/components/effects/DotPattern/DotPattern.types.d.ts

@@ -0,0 +1,47 @@
+import React from "react";
+/** Direction for the fade gradient mask */
+export type DotPatternFadeDirection = "radial" | "top" | "bottom" | "left" | "right";
+export interface DotPatternProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Distance between dots in pixels (center to center).
+     * @default 20
+     */
+    spacing?: number;
+    /**
+     * Radius of each dot in pixels.
+     * @default 1
+     */
+    dotSize?: number;
+    /**
+     * Fill color of the dots.
+     * Accepts any valid CSS color value or CSS variable.
+     * @default "var(--color-border)"
+     */
+    color?: string;
+    /**
+     * Whether to apply a gradient mask that fades the pattern at the edges.
+     * @default true
+     */
+    fade?: boolean;
+    /**
+     * Direction of the fade gradient.
+     * - "radial" fades from center outward
+     * - "top" | "bottom" | "left" | "right" fades toward that edge
+     * @default "radial"
+     */
+    fadeDirection?: DotPatternFadeDirection;
+    /**
+     * Size of the fade area as a percentage (0-100).
+     * Higher values create a larger transparent region.
+     * @default 50
+     */
+    fadeSize?: number;
+    /**
+     * Whether to apply a subtle pulse animation to the dots.
+     * Respects prefers-reduced-motion automatically.
+     * @default false
+     */
+    animated?: boolean;
+    /** Additional className for style overrides (shadcn pattern). */
+    className?: string;
+}

package/dist/components/effects/DotPattern/index.d.ts

@@ -0,0 +1,2 @@
+export { DotPattern } from "./DotPattern";
+export type { DotPatternProps, DotPatternFadeDirection, } from "./DotPattern.types";

package/dist/components/effects/GridPattern/GridPattern.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import type { GridPatternProps } from "./GridPattern.types";
+/**
+ * GridPattern renders an SVG-based grid background pattern.
+ *
+ * Use it as an absolute-positioned decorative background inside a container
+ * with `position: relative`. The pattern is fully non-interactive
+ * (`pointer-events: none`) and sits at `z-index: 0` by default.
+ *
+ * @example
+ * ```tsx
+ * <div className="relative overflow-hidden h-96">
+ *   <GridPattern size={48} color="var(--color-border)" fade animated />
+ *   <div className="relative z-10">Your content here</div>
+ * </div>
+ * ```
+ */
+export declare const GridPattern: React.ForwardRefExoticComponent<GridPatternProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/effects/GridPattern/GridPattern.js

@@ -0,0 +1,64 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useId, useMemo } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * Build a CSS mask-image value for the given fade direction and size.
+ */
+function buildMaskImage(direction, fadeSize) {
+    const stop = Math.max(0, Math.min(100, fadeSize));
+    if (direction === "radial") {
+        return `radial-gradient(ellipse at center, black ${100 - stop}%, transparent 100%)`;
+    }
+    const directionMap = {
+        top: "to top",
+        bottom: "to bottom",
+        left: "to left",
+        right: "to right",
+    };
+    return `linear-gradient(${directionMap[direction]}, black ${100 - stop}%, transparent 100%)`;
+}
+/**
+ * GridPattern renders an SVG-based grid background pattern.
+ *
+ * Use it as an absolute-positioned decorative background inside a container
+ * with `position: relative`. The pattern is fully non-interactive
+ * (`pointer-events: none`) and sits at `z-index: 0` by default.
+ *
+ * @example
+ * ```tsx
+ * <div className="relative overflow-hidden h-96">
+ *   <GridPattern size={48} color="var(--color-border)" fade animated />
+ *   <div className="relative z-10">Your content here</div>
+ * </div>
+ * ```
+ */
+const GridPattern = React__default.forwardRef(({ size = 40, strokeWidth = 1, color = "var(--color-border)", fade = true, fadeDirection = "radial", fadeSize = 50, animated = false, className, style, ...rest }, ref) => {
+    const patternId = useId();
+    const shouldReduceMotion = useReducedMotion();
+    const enableAnimation = animated && !shouldReduceMotion;
+    const maskImage = useMemo(() => (fade ? buildMaskImage(fadeDirection, fadeSize) : undefined), [fade, fadeDirection, fadeSize]);
+    const containerStyle = {
+        ...style,
+        ...(maskImage
+            ? {
+                maskImage,
+                WebkitMaskImage: maskImage,
+            }
+            : {}),
+    };
+    const svgContent = (jsxs("svg", { "aria-hidden": "true", className: "absolute inset-0 w-full h-full", children: [jsx("defs", { children: jsxs("pattern", { id: patternId, x: "0", y: "0", width: size, height: size, patternUnits: "userSpaceOnUse", children: [jsx("line", { x1: size, y1: "0", x2: size, y2: size, stroke: color, strokeWidth: strokeWidth }), jsx("line", { x1: "0", y1: size, x2: size, y2: size, stroke: color, strokeWidth: strokeWidth })] }) }), jsx("rect", { width: "100%", height: "100%", fill: `url(#${patternId})` })] }));
+    const animatedSvgContent = enableAnimation ? (jsxs(motion.svg, { "aria-hidden": "true", className: "absolute inset-0 w-full h-full", animate: {
+            x: [0, size],
+            y: [0, size],
+        }, transition: {
+            duration: 20,
+            ease: "linear",
+            repeat: Infinity,
+        }, children: [jsx("defs", { children: jsxs("pattern", { id: patternId, x: "0", y: "0", width: size, height: size, patternUnits: "userSpaceOnUse", children: [jsx("line", { x1: size, y1: "0", x2: size, y2: size, stroke: color, strokeWidth: strokeWidth }), jsx("line", { x1: "0", y1: size, x2: size, y2: size, stroke: color, strokeWidth: strokeWidth })] }) }), jsx("rect", { x: -size, y: -size, width: `calc(100% + ${size * 2}px)`, height: `calc(100% + ${size * 2}px)`, fill: `url(#${patternId})` })] })) : null;
+    return (jsx("div", { ref: ref, className: cn("absolute inset-0 pointer-events-none z-0 overflow-hidden", className), style: containerStyle, ...rest, children: enableAnimation ? animatedSvgContent : svgContent }));
+});
+GridPattern.displayName = "GridPattern";
+
+export { GridPattern };

package/dist/components/effects/GridPattern/GridPattern.types.d.ts

@@ -0,0 +1,47 @@
+import React from "react";
+/** Direction for the fade gradient mask */
+export type GridPatternFadeDirection = "radial" | "top" | "bottom" | "left" | "right";
+export interface GridPatternProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Grid cell size in pixels.
+     * @default 40
+     */
+    size?: number;
+    /**
+     * Stroke width of the grid lines in pixels.
+     * @default 1
+     */
+    strokeWidth?: number;
+    /**
+     * Stroke color of the grid lines.
+     * Accepts any valid CSS color value or CSS variable.
+     * @default "var(--color-border)"
+     */
+    color?: string;
+    /**
+     * Whether to apply a gradient mask that fades the pattern at the edges.
+     * @default true
+     */
+    fade?: boolean;
+    /**
+     * Direction of the fade gradient.
+     * - "radial" fades from center outward
+     * - "top" | "bottom" | "left" | "right" fades toward that edge
+     * @default "radial"
+     */
+    fadeDirection?: GridPatternFadeDirection;
+    /**
+     * Size of the fade area as a percentage (0-100).
+     * Higher values create a larger transparent region.
+     * @default 50
+     */
+    fadeSize?: number;
+    /**
+     * Whether to apply a subtle drift animation to the grid pattern.
+     * Respects prefers-reduced-motion automatically.
+     * @default false
+     */
+    animated?: boolean;
+    /** Additional className for style overrides (shadcn pattern). */
+    className?: string;
+}

package/dist/components/effects/GridPattern/index.d.ts

@@ -0,0 +1,2 @@
+export { GridPattern } from "./GridPattern";
+export type { GridPatternProps, GridPatternFadeDirection, } from "./GridPattern.types";

package/dist/components/effects/MagneticElement/MagneticElement.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import type { MagneticElementProps } from "./MagneticElement.types";
+/**
+ * MagneticElement
+ *
+ * A wrapper component that adds a magnetic pull effect to its children.
+ * When the cursor moves over the element, it subtly translates toward
+ * the cursor position, creating an engaging interactive effect.
+ *
+ * The component uses spring-based animations for smooth, natural movement
+ * and respects the user's reduced motion preferences.
+ *
+ * @example
+ * ```tsx
+ * <MagneticElement strength={0.3}>
+ *   <Button>Hover me</Button>
+ * </MagneticElement>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With parallax inner content
+ * <MagneticElement strength={0.4} innerStrength={2}>
+ *   <div className="p-4">
+ *     <span>Pull me closer</span>
+ *   </div>
+ * </MagneticElement>
+ * ```
+ */
+export declare const MagneticElement: React.ForwardRefExoticComponent<MagneticElementProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/effects/MagneticElement/MagneticElement.js

@@ -0,0 +1,110 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useCallback } from 'react';
+import { useReducedMotion, useMotionValue, useSpring, motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * MagneticElement
+ *
+ * A wrapper component that adds a magnetic pull effect to its children.
+ * When the cursor moves over the element, it subtly translates toward
+ * the cursor position, creating an engaging interactive effect.
+ *
+ * The component uses spring-based animations for smooth, natural movement
+ * and respects the user's reduced motion preferences.
+ *
+ * @example
+ * ```tsx
+ * <MagneticElement strength={0.3}>
+ *   <Button>Hover me</Button>
+ * </MagneticElement>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With parallax inner content
+ * <MagneticElement strength={0.4} innerStrength={2}>
+ *   <div className="p-4">
+ *     <span>Pull me closer</span>
+ *   </div>
+ * </MagneticElement>
+ * ```
+ */
+const MagneticElement = forwardRef(({ strength = 0.3, distance = 100, damping = 15, stiffness = 150, innerStrength = 1.5, disabled = false, className, children, onDrag: _onDrag, onDragStart: _onDragStart, onDragEnd: _onDragEnd, onAnimationStart: _onAnimationStart, ...restProps }, ref) => {
+    const elementRef = useRef(null);
+    const shouldReduceMotion = useReducedMotion();
+    const isDisabled = disabled || shouldReduceMotion;
+    // Motion values for outer wrapper translation
+    const x = useMotionValue(0);
+    const y = useMotionValue(0);
+    // Spring-animated versions of x and y for smooth movement
+    const springConfig = { damping, stiffness, mass: 1 };
+    const springX = useSpring(x, springConfig);
+    const springY = useSpring(y, springConfig);
+    // Motion values for inner content (parallax effect)
+    const innerX = useMotionValue(0);
+    const innerY = useMotionValue(0);
+    const innerSpringX = useSpring(innerX, springConfig);
+    const innerSpringY = useSpring(innerY, springConfig);
+    const handleMouseMove = useCallback((event) => {
+        var _a;
+        if (isDisabled)
+            return;
+        const element = elementRef.current;
+        if (!element)
+            return;
+        const rect = element.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        // Calculate distance from cursor to element center
+        const deltaX = event.clientX - centerX;
+        const deltaY = event.clientY - centerY;
+        const distanceFromCenter = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+        // Only apply effect within the configured distance
+        const maxDistance = Math.max(rect.width, rect.height) / 2 + distance;
+        if (distanceFromCenter < maxDistance) {
+            // Apply translation proportional to offset and strength
+            const translateX = deltaX * strength;
+            const translateY = deltaY * strength;
+            x.set(translateX);
+            y.set(translateY);
+            // Inner content moves slightly more for parallax feel
+            if (innerStrength !== 1) {
+                innerX.set(translateX * (innerStrength - 1));
+                innerY.set(translateY * (innerStrength - 1));
+            }
+        }
+        // Forward to user's onMouseMove if provided
+        (_a = restProps.onMouseMove) === null || _a === void 0 ? void 0 : _a.call(restProps, event);
+    }, [isDisabled, strength, distance, innerStrength, x, y, innerX, innerY, restProps.onMouseMove]);
+    const handleMouseLeave = useCallback((event) => {
+        var _a;
+        if (isDisabled)
+            return;
+        // Reset to center position; the spring will animate the return
+        x.set(0);
+        y.set(0);
+        innerX.set(0);
+        innerY.set(0);
+        // Forward to user's onMouseLeave if provided
+        (_a = restProps.onMouseLeave) === null || _a === void 0 ? void 0 : _a.call(restProps, event);
+    }, [isDisabled, x, y, innerX, innerY, restProps.onMouseLeave]);
+    // When disabled or reduced motion preferred, render without motion
+    if (isDisabled) {
+        return (jsx("div", { ref: ref, className: cn("inline-block", className), ...restProps, children: children }));
+    }
+    const hasParallax = innerStrength !== 1;
+    return (jsx(motion.div, { ref: (node) => {
+            // Assign to both the internal ref and the forwarded ref
+            elementRef.current = node;
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            else if (ref) {
+                ref.current = node;
+            }
+        }, className: cn("inline-block", className), style: { x: springX, y: springY }, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, ...restProps, children: hasParallax ? (jsx(motion.div, { style: { x: innerSpringX, y: innerSpringY }, children: children })) : (children) }));
+});
+MagneticElement.displayName = "MagneticElement";
+
+export { MagneticElement };

package/dist/components/effects/MagneticElement/MagneticElement.types.d.ts

@@ -0,0 +1,44 @@
+import React from "react";
+export interface MagneticElementProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Strength of the magnetic pull effect.
+     * Value between 0 and 1, where 0 is no effect and 1 is maximum pull.
+     * @default 0.3
+     */
+    strength?: number;
+    /**
+     * Distance in pixels at which the magnetic effect activates.
+     * Only applies when the cursor is within this radius of the element center.
+     * @default 100
+     */
+    distance?: number;
+    /**
+     * Spring damping for the animation.
+     * Higher values result in less oscillation and a more dampened feel.
+     * @default 15
+     */
+    damping?: number;
+    /**
+     * Spring stiffness for the animation.
+     * Higher values result in a snappier spring.
+     * @default 150
+     */
+    stiffness?: number;
+    /**
+     * Multiplier for inner content movement relative to the outer wrapper.
+     * Creates a subtle parallax-like effect where content moves slightly more.
+     * Set to 1 for no parallax. Values above 1 amplify inner movement.
+     * @default 1.5
+     */
+    innerStrength?: number;
+    /**
+     * When true, disables the magnetic effect entirely.
+     * The component renders as a plain div wrapper.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Additional className for the outer wrapper */
+    className?: string;
+    /** Content to wrap with the magnetic effect */
+    children: React.ReactNode;
+}

package/dist/components/effects/MagneticElement/index.d.ts

@@ -0,0 +1,2 @@
+export { MagneticElement } from "./MagneticElement";
+export type { MagneticElementProps } from "./MagneticElement.types";

package/dist/components/effects/MorphingText/MorphingText.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { MorphingTextProps } from './MorphingText.types';
+/**
+ * MorphingText smoothly morphs between different text strings using a blur/fade
+ * transition. Two overlapping text layers cross-fade with a Gaussian blur effect
+ * to create a seamless morphing appearance.
+ *
+ * @example
+ * ```tsx
+ * <MorphingText
+ *   texts={["Innovative", "Powerful", "Beautiful"]}
+ *   interval={3000}
+ *   transitionDuration={800}
+ * />
+ * ```
+ */
+export declare const MorphingText: React.FC<MorphingTextProps>;

package/dist/components/effects/MorphingText/MorphingText.js

@@ -0,0 +1,91 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useId, useState, useRef, useCallback, useEffect } from 'react';
+import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * MorphingText smoothly morphs between different text strings using a blur/fade
+ * transition. Two overlapping text layers cross-fade with a Gaussian blur effect
+ * to create a seamless morphing appearance.
+ *
+ * @example
+ * ```tsx
+ * <MorphingText
+ *   texts={["Innovative", "Powerful", "Beautiful"]}
+ *   interval={3000}
+ *   transitionDuration={800}
+ * />
+ * ```
+ */
+const MorphingText = ({ texts, interval = 3000, transitionDuration = 800, loop = true, pauseOnHover = false, currentIndex: controlledIndex, onTextChange, className, ...props }) => {
+    const filterId = useId();
+    const shouldReduceMotion = useReducedMotion();
+    const isControlled = controlledIndex !== undefined;
+    const [internalIndex, setInternalIndex] = useState(0);
+    const activeIndex = isControlled ? controlledIndex : internalIndex;
+    const [isPaused, setIsPaused] = useState(false);
+    const intervalRef = useRef(null);
+    const hasReachedEnd = useRef(false);
+    // Clamp activeIndex to valid range
+    const safeIndex = texts.length > 0 ? ((activeIndex % texts.length) + texts.length) % texts.length : 0;
+    const advanceIndex = useCallback(() => {
+        if (isControlled)
+            return;
+        setInternalIndex((prev) => {
+            const nextIndex = prev + 1;
+            if (!loop && nextIndex >= texts.length) {
+                hasReachedEnd.current = true;
+                return prev;
+            }
+            const resolvedNext = nextIndex % texts.length;
+            onTextChange === null || onTextChange === void 0 ? void 0 : onTextChange(resolvedNext, texts[resolvedNext]);
+            return resolvedNext;
+        });
+    }, [isControlled, loop, texts, onTextChange]);
+    // Auto-cycling interval
+    useEffect(() => {
+        if (isControlled || isPaused || hasReachedEnd.current) {
+            return;
+        }
+        intervalRef.current = setInterval(advanceIndex, interval);
+        return () => {
+            if (intervalRef.current) {
+                clearInterval(intervalRef.current);
+                intervalRef.current = null;
+            }
+        };
+    }, [isControlled, isPaused, interval, advanceIndex]);
+    // Reset hasReachedEnd when loop changes or texts change
+    useEffect(() => {
+        hasReachedEnd.current = false;
+    }, [loop, texts]);
+    // Fire onTextChange for controlled index changes
+    useEffect(() => {
+        if (isControlled) {
+            onTextChange === null || onTextChange === void 0 ? void 0 : onTextChange(safeIndex, texts[safeIndex]);
+        }
+    }, [isControlled, safeIndex, texts, onTextChange]);
+    const handleMouseEnter = () => {
+        if (pauseOnHover)
+            setIsPaused(true);
+    };
+    const handleMouseLeave = () => {
+        if (pauseOnHover)
+            setIsPaused(false);
+    };
+    if (texts.length === 0) {
+        return null;
+    }
+    const durationSeconds = transitionDuration / 1000;
+    const currentText = texts[safeIndex];
+    // Reduced motion: instant swap with no animation
+    if (shouldReduceMotion) {
+        return (jsx("div", { className: cn('relative inline-block', className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, "aria-live": "polite", "aria-atomic": "true", ...props, children: jsx("span", { children: currentText }) }));
+    }
+    return (jsxs("div", { className: cn('relative inline-block', className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, "aria-live": "polite", "aria-atomic": "true", ...props, children: [jsx("svg", { className: "absolute h-0 w-0", "aria-hidden": "true", children: jsx("defs", { children: jsx("filter", { id: `${filterId}-blur`, children: jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "0" }) }) }) }), jsx("span", { className: "invisible block", "aria-hidden": "true", children: currentText }), jsx(AnimatePresence, { mode: "popLayout", initial: false, children: jsx(motion.span, { className: "absolute inset-0 flex items-center", initial: { opacity: 0, filter: 'blur(8px)' }, animate: { opacity: 1, filter: 'blur(0px)' }, exit: { opacity: 0, filter: 'blur(8px)' }, transition: {
+                        duration: durationSeconds,
+                        ease: 'easeInOut',
+                    }, children: currentText }, safeIndex) })] }));
+};
+
+export { MorphingText };

package/dist/components/effects/MorphingText/MorphingText.types.d.ts

@@ -0,0 +1,18 @@
+export interface MorphingTextProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Array of text strings to morph between */
+    texts: string[];
+    /** Time between transitions in ms (default 3000) */
+    interval?: number;
+    /** Transition duration in ms (default 800) */
+    transitionDuration?: number;
+    /** Loop continuously (default true) */
+    loop?: boolean;
+    /** Pause cycling on hover (default false) */
+    pauseOnHover?: boolean;
+    /** Controlled current index (overrides internal state) */
+    currentIndex?: number;
+    /** Callback when the active text changes */
+    onTextChange?: (index: number, text: string) => void;
+    /** Additional class names for the container */
+    className?: string;
+}

package/dist/components/effects/MorphingText/index.d.ts

@@ -0,0 +1,2 @@
+export { MorphingText } from './MorphingText';
+export type { MorphingTextProps } from './MorphingText.types';

package/dist/components/effects/NoiseOverlay/NoiseOverlay.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+import type { NoiseOverlayProps } from "./NoiseOverlay.types";
+/**
+ * NoiseOverlay Component
+ *
+ * An SVG feTurbulence-based noise/grain texture overlay that adds a
+ * matte or film-like quality to surfaces. Renders as an absolute-positioned,
+ * non-interactive layer over its parent container.
+ *
+ * The parent container should have `position: relative` and `overflow: hidden`.
+ *
+ * @example
+ * ```tsx
+ * <div className="relative overflow-hidden bg-gray-900 rounded-lg p-6">
+ *   <NoiseOverlay opacity={0.2} blendMode="soft-light" />
+ *   <span className="relative z-10">Content with grain texture</span>
+ * </div>
+ * ```
+ *
+ * @example Animated grain
+ * ```tsx
+ * <div className="relative overflow-hidden bg-indigo-600 rounded-lg p-8">
+ *   <NoiseOverlay animated frequency={0.8} octaves={3} />
+ *   <h2 className="relative z-10 text-white">Film grain effect</h2>
+ * </div>
+ * ```
+ */
+export declare const NoiseOverlay: React.FC<NoiseOverlayProps>;