@flikk/ui 1.0.0-beta.2 → 1.0.0-beta.21

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/InteractiveCharacters/InteractiveCharacters.animations.d.ts

@@ -0,0 +1,39 @@
+import type { Variants } from 'motion/react';
+import type { CharacterState } from './InteractiveCharacters.types';
+export declare const eyelidVariants: Record<CharacterState, {
+    scaleY: number;
+}>;
+export declare const blobBodyVariants: Variants;
+export declare const tallBodyVariants: Variants;
+export declare const smallBodyVariants: Variants;
+export declare const blobMouthPaths: Record<CharacterState, string>;
+export declare const tallMouthPaths: Record<CharacterState, string>;
+export declare const smallMouthPaths: Record<CharacterState, string>;
+export declare const eyebrowVariants: Record<CharacterState, {
+    rotate: number;
+    y: number;
+}>;
+export declare const springConfigs: {
+    readonly small: {
+        readonly stiffness: 300;
+        readonly damping: 20;
+    };
+    readonly blob: {
+        readonly stiffness: 150;
+        readonly damping: 25;
+    };
+    readonly tall: {
+        readonly stiffness: 80;
+        readonly damping: 30;
+    };
+};
+export declare const bodyTransition: {
+    type: "spring";
+    stiffness: number;
+    damping: number;
+};
+export declare const clickTransition: {
+    type: "spring";
+    stiffness: number;
+    damping: number;
+};

package/dist/components/effects/InteractiveCharacters/InteractiveCharacters.animations.js

@@ -0,0 +1,98 @@
+// Eyelid variants — controls how much the eye is covered
+// scaleY: 0 = fully open, 1 = fully closed
+const eyelidVariants = {
+    idle: { scaleY: 0 },
+    email: { scaleY: 0 },
+    password: { scaleY: 1 },
+    peek: { scaleY: 0.6 },
+    surprised: { scaleY: 0 }, // wide open
+    love: { scaleY: 0.65 }, // happy squint ^_^
+    excited: { scaleY: 0 }, // wide open
+};
+// Body sway variants per character
+const blobBodyVariants = {
+    idle: { rotate: 0, y: 0 },
+    email: { rotate: 2, y: -2 },
+    password: { rotate: -1, y: 2, scale: 0.97 },
+    peek: { rotate: 3, y: -1 },
+    surprised: { rotate: 0, y: -8, scale: 1.05 }, // jump up, puff out
+    love: { rotate: 0, y: 0 },
+    excited: { rotate: 0, y: 0 },
+};
+const tallBodyVariants = {
+    idle: { rotate: 0, y: 0 },
+    email: { rotate: -1.5, y: 0 },
+    password: { rotate: 0, y: 3, scale: 0.96 },
+    peek: { rotate: 2, y: -2 },
+    surprised: { rotate: 0, y: 0 },
+    love: { rotate: -2, y: -3, scale: 1.03 }, // slight lean, puff up
+    excited: { rotate: 0, y: 0 },
+};
+const smallBodyVariants = {
+    idle: { rotate: 0, y: 0 },
+    email: { rotate: 3, y: -3 },
+    password: { rotate: -2, y: 1, scale: 0.95 },
+    peek: { rotate: -3, y: -2 },
+    surprised: { rotate: 0, y: 0 },
+    love: { rotate: 0, y: 0 },
+    excited: { rotate: 5, y: -10, scale: 1.08 }, // big bounce, spin
+};
+// Mouth paths for each character per state
+// All paths use M + Q for smooth interpolation between states
+const blobMouthPaths = {
+    idle: 'M -10 0 Q 0 8 10 0', // wide gentle smile
+    email: 'M -12 -2 Q 0 12 12 -2', // big happy smile
+    password: 'M -6 0 Q 0 2 6 0', // flat/neutral
+    peek: 'M -8 0 Q 0 5 8 0', // small smirk
+    surprised: 'M -5 -4 Q 0 10 5 -4', // round "O" mouth
+    love: 'M -10 0 Q 0 8 10 0', // gentle smile
+    excited: 'M -12 -2 Q 0 12 12 -2', // big grin
+};
+const tallMouthPaths = {
+    idle: 'M -6 0 Q 0 3 6 0', // subtle relaxed smile
+    email: 'M -10 -1 Q 0 10 10 -1', // big happy smile
+    password: 'M -5 0 Q 0 0 5 0', // flat line (Q-based for animation)
+    peek: 'M -5 0 Q 2 6 7 -1', // asymmetric smirk
+    surprised: 'M -5 -3 Q 0 8 5 -3', // small O
+    love: 'M -10 -2 Q 0 12 10 -2', // wide beaming smile
+    excited: 'M -8 -1 Q 0 10 8 -1', // happy grin
+};
+const smallMouthPaths = {
+    idle: 'M -7 0 Q 0 6 7 0', // sweet smile
+    email: 'M -9 -1 Q 0 9 9 -1', // big grin
+    password: 'M -4 0 Q 0 1 4 0', // tiny neutral
+    peek: 'M -4 1 Q 1 6 6 0', // cheeky smirk
+    surprised: 'M -4 -3 Q 0 8 4 -3', // little O
+    love: 'M -7 0 Q 0 6 7 0', // sweet smile
+    excited: 'M -10 -3 Q 0 14 10 -3', // huge open grin
+};
+// Eyebrow angles for Tall character
+const eyebrowVariants = {
+    idle: { rotate: 0, y: 0 },
+    email: { rotate: -5, y: -2 },
+    password: { rotate: 8, y: 2 },
+    peek: { rotate: -10, y: -1 },
+    surprised: { rotate: -12, y: -4 }, // raised high
+    love: { rotate: -6, y: -2 }, // gently raised
+    excited: { rotate: -8, y: -3 }, // raised
+};
+// Spring configs per character for mouse tracking
+const springConfigs = {
+    small: { stiffness: 300, damping: 20 },
+    blob: { stiffness: 150, damping: 25 },
+    tall: { stiffness: 80, damping: 30 },
+};
+// Body spring for state transitions
+const bodyTransition = {
+    type: 'spring',
+    stiffness: 200,
+    damping: 20,
+};
+// Bouncier transition for click reactions
+const clickTransition = {
+    type: 'spring',
+    stiffness: 300,
+    damping: 15,
+};
+
+export { blobBodyVariants, blobMouthPaths, bodyTransition, clickTransition, eyebrowVariants, eyelidVariants, smallBodyVariants, smallMouthPaths, springConfigs, tallBodyVariants, tallMouthPaths };

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { InteractiveCharactersProps } from './InteractiveCharacters.types';
+export declare const InteractiveCharacters: React.FC<InteractiveCharactersProps>;

package/dist/components/effects/InteractiveCharacters/InteractiveCharacters.js

@@ -0,0 +1,104 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useState, useCallback, useEffect } from 'react';
+import { useReducedMotion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { springConfigs } from './InteractiveCharacters.animations.js';
+import { useMouseTracking } from './hooks/useMouseTracking.js';
+import { useIdleAnimation } from './hooks/useIdleAnimation.js';
+import { useBlink } from './hooks/useBlink.js';
+import { BlobCharacter } from './characters/BlobCharacter.js';
+import { TallCharacter } from './characters/TallCharacter.js';
+import { SmallCharacter } from './characters/SmallCharacter.js';
+
+const sizeMap = {
+    sm: 'w-[200px]',
+    md: 'w-[320px]',
+    lg: 'w-[400px]',
+};
+/** Click reaction states per character */
+const CLICK_REACTIONS = {
+    blob: 'surprised',
+    tall: 'love',
+    small: 'excited',
+};
+/** How long click reactions last (ms) */
+const CLICK_DURATION = 1500;
+const InteractiveCharacters = ({ state = 'idle', trackMouse = true, size = 'md', className, }) => {
+    const svgRef = useRef(null);
+    const shouldReduceMotion = useReducedMotion();
+    const clickTimeoutRef = useRef(null);
+    const [clickedChar, setClickedChar] = useState(null);
+    const handleCharacterClick = useCallback((character) => {
+        if (clickTimeoutRef.current)
+            clearTimeout(clickTimeoutRef.current);
+        setClickedChar(character);
+        clickTimeoutRef.current = setTimeout(() => setClickedChar(null), CLICK_DURATION);
+    }, []);
+    // Cleanup timeout on unmount
+    useEffect(() => {
+        return () => {
+            if (clickTimeoutRef.current)
+                clearTimeout(clickTimeoutRef.current);
+        };
+    }, []);
+    // Determine effective state per character (click overrides form state)
+    const blobState = clickedChar === 'blob' ? CLICK_REACTIONS.blob : state;
+    const tallState = clickedChar === 'tall' ? CLICK_REACTIONS.tall : state;
+    const smallState = clickedChar === 'small' ? CLICK_REACTIONS.small : state;
+    const isTrackingEnabled = trackMouse && state !== 'password' && !shouldReduceMotion;
+    const isIdleAnimated = !shouldReduceMotion;
+    // Mouse tracking — different spring configs per character
+    const blobEye = useMouseTracking({
+        containerRef: svgRef,
+        enabled: isTrackingEnabled,
+        ...springConfigs.blob,
+    });
+    const tallEye = useMouseTracking({
+        containerRef: svgRef,
+        enabled: isTrackingEnabled,
+        ...springConfigs.tall,
+    });
+    const smallEye = useMouseTracking({
+        containerRef: svgRef,
+        enabled: isTrackingEnabled,
+        ...springConfigs.small,
+    });
+    // Idle sway/breathing/head — each character at different rates & phase offsets
+    const blobIdle = useIdleAnimation({
+        enabled: isIdleAnimated,
+        swayAmount: 1.5,
+        swaySpeed: 0.8,
+        breathAmount: 0.008,
+        headTiltAmount: 3,
+        headNudgeAmount: 1.5,
+        phaseOffset: 0,
+    });
+    const tallIdle = useIdleAnimation({
+        enabled: isIdleAnimated,
+        swayAmount: 1,
+        swaySpeed: 0.6,
+        breathAmount: 0.006,
+        headTiltAmount: 2,
+        headNudgeAmount: 1,
+        phaseOffset: 2.5,
+    });
+    const smallIdle = useIdleAnimation({
+        enabled: isIdleAnimated,
+        swayAmount: 2.5,
+        swaySpeed: 1.2,
+        breathAmount: 0.012,
+        headTiltAmount: 4,
+        headNudgeAmount: 2,
+        phaseOffset: 5,
+    });
+    // Blink — disable during password/peek and click reactions
+    const canBlinkBlob = blobState === 'idle' || blobState === 'email';
+    const canBlinkTall = tallState === 'idle' || tallState === 'email';
+    const canBlinkSmall = smallState === 'idle' || smallState === 'email';
+    const blobBlink = useBlink({ enabled: canBlinkBlob, minInterval: 2500, maxInterval: 5000 });
+    const tallBlink = useBlink({ enabled: canBlinkTall, minInterval: 3000, maxInterval: 6000 });
+    const smallBlink = useBlink({ enabled: canBlinkSmall, minInterval: 1800, maxInterval: 4000 });
+    return (jsx("div", { className: cn(sizeMap[size], className), "data-state": state, children: jsxs("svg", { ref: svgRef, viewBox: "0 0 400 180", xmlns: "http://www.w3.org/2000/svg", className: "w-full h-auto", role: "img", "aria-label": "Interactive characters that react to form input", children: [jsx("g", { transform: "translate(200, 170)", className: "cursor-pointer", children: jsx(TallCharacter, { state: tallState, eyeOffset: { x: tallEye.x, y: tallEye.y }, idle: tallIdle, blinkAmount: tallBlink, onClick: () => handleCharacterClick('tall') }) }), jsx("g", { transform: "translate(100, 170)", className: "cursor-pointer", children: jsx(BlobCharacter, { state: blobState, eyeOffset: { x: blobEye.x, y: blobEye.y }, idle: blobIdle, blinkAmount: blobBlink, onClick: () => handleCharacterClick('blob') }) }), jsx("g", { transform: "translate(310, 170)", className: "cursor-pointer", children: jsx(SmallCharacter, { state: smallState, eyeOffset: { x: smallEye.x, y: smallEye.y }, idle: smallIdle, blinkAmount: smallBlink, onClick: () => handleCharacterClick('small') }) })] }) }));
+};
+
+export { InteractiveCharacters };

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

@@ -0,0 +1,30 @@
+import type { MotionValue } from 'motion/react';
+export type CharacterState = 'idle' | 'email' | 'password' | 'peek' | 'surprised' | 'love' | 'excited';
+export type CharacterSize = 'sm' | 'md' | 'lg';
+export interface InteractiveCharactersProps {
+    /** Current character state — controls expressions and animations */
+    state?: CharacterState;
+    /** Enable mouse/cursor tracking for eye movement (default: true) */
+    trackMouse?: boolean;
+    /** Size preset (default: 'md') */
+    size?: CharacterSize;
+    /** Additional class names for the container */
+    className?: string;
+}
+export interface CharacterProps {
+    state: CharacterState;
+    eyeOffset: {
+        x: MotionValue<number>;
+        y: MotionValue<number>;
+    };
+    idle: {
+        sway: MotionValue<number>;
+        bob: MotionValue<number>;
+        breath: MotionValue<number>;
+        headTilt: MotionValue<number>;
+        headX: MotionValue<number>;
+        headY: MotionValue<number>;
+    };
+    blinkAmount: MotionValue<number>;
+    onClick?: () => void;
+}

package/dist/components/effects/InteractiveCharacters/characters/BlobCharacter.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { CharacterProps } from '../InteractiveCharacters.types';
+export declare const BlobCharacter: React.FC<CharacterProps>;

package/dist/components/effects/InteractiveCharacters/characters/BlobCharacter.js

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTransform, motion } from 'motion/react';
+import { eyelidVariants, clickTransition, bodyTransition, blobBodyVariants, blobMouthPaths } from '../InteractiveCharacters.animations.js';
+
+const LEFT_EYE = { cx: 32, cy: -50 };
+const RIGHT_EYE = { cx: 68, cy: -50 };
+const CLICK_STATES = new Set(['surprised', 'love', 'excited']);
+const BlobCharacter = ({ state, eyeOffset, idle, blinkAmount, onClick, }) => {
+    const leftPupilX = useTransform(eyeOffset.x, (v) => LEFT_EYE.cx + v);
+    const leftPupilY = useTransform(eyeOffset.y, (v) => LEFT_EYE.cy + v);
+    const rightPupilX = useTransform(eyeOffset.x, (v) => RIGHT_EYE.cx + v);
+    const rightPupilY = useTransform(eyeOffset.y, (v) => RIGHT_EYE.cy + v);
+    // Combine idle head movement with cursor tracking for head turning
+    const combinedHeadX = useTransform([idle.headX, eyeOffset.x], ([idleX, cursorX]) => idleX + cursorX * 0.5);
+    const combinedHeadY = useTransform([idle.headY, eyeOffset.y], ([idleY, cursorY]) => idleY + cursorY * 0.3);
+    const combinedHeadRotate = useTransform([idle.headTilt, eyeOffset.x], ([tilt, cursorX]) => tilt + cursorX * 0.5);
+    const stateEyelid = eyelidVariants[state].scaleY;
+    const eyelidScale = useTransform(blinkAmount, (blink) => Math.max(stateEyelid, blink));
+    const isClickReaction = CLICK_STATES.has(state);
+    const transition = isClickReaction ? clickTransition : bodyTransition;
+    return (jsxs(motion.g, { animate: state, variants: blobBodyVariants, transition: transition, style: {
+            originX: '50%',
+            originY: '100%',
+            x: idle.sway,
+            y: idle.bob,
+            scale: idle.breath,
+        }, onClick: onClick, children: [jsx("path", { d: "M 0 0 Q 0 -95 65 -95 Q 100 -95 100 -50 Q 100 0 100 0 Z", fill: "#F97316" }), jsxs(motion.g, { style: {
+                    originX: '50px',
+                    originY: '-50px',
+                    rotate: combinedHeadRotate,
+                    x: combinedHeadX,
+                    y: combinedHeadY,
+                }, children: [jsxs("g", { children: [jsx("clipPath", { id: "blob-eye-l", children: jsx("ellipse", { cx: LEFT_EYE.cx, cy: LEFT_EYE.cy, rx: 14, ry: 16 }) }), jsx("ellipse", { cx: LEFT_EYE.cx, cy: LEFT_EYE.cy, rx: 14, ry: 16, fill: "white" }), jsx(motion.circle, { cx: leftPupilX, cy: leftPupilY, r: 8.5, fill: "#1E293B", clipPath: "url(#blob-eye-l)" }), jsx("circle", { cx: LEFT_EYE.cx + 4, cy: LEFT_EYE.cy - 5.5, r: 3, fill: "white", opacity: 0.95 }), jsx("circle", { cx: LEFT_EYE.cx - 3, cy: LEFT_EYE.cy + 4, r: 1.5, fill: "white", opacity: 0.7 }), jsx(motion.rect, { x: LEFT_EYE.cx - 14, y: LEFT_EYE.cy - 16, width: 28, height: 32, fill: "#F97316", rx: 2, style: { scaleY: eyelidScale, originX: '50%', originY: '0%', transformBox: 'fill-box' } })] }), jsxs("g", { children: [jsx("clipPath", { id: "blob-eye-r", children: jsx("ellipse", { cx: RIGHT_EYE.cx, cy: RIGHT_EYE.cy, rx: 14, ry: 16 }) }), jsx("ellipse", { cx: RIGHT_EYE.cx, cy: RIGHT_EYE.cy, rx: 14, ry: 16, fill: "white" }), jsx(motion.circle, { cx: rightPupilX, cy: rightPupilY, r: 8.5, fill: "#1E293B", clipPath: "url(#blob-eye-r)" }), jsx("circle", { cx: RIGHT_EYE.cx + 4, cy: RIGHT_EYE.cy - 5.5, r: 3, fill: "white", opacity: 0.95 }), jsx("circle", { cx: RIGHT_EYE.cx - 3, cy: RIGHT_EYE.cy + 4, r: 1.5, fill: "white", opacity: 0.7 }), jsx(motion.rect, { x: RIGHT_EYE.cx - 14, y: RIGHT_EYE.cy - 16, width: 28, height: 32, fill: "#F97316", rx: 2, style: { scaleY: eyelidScale, originX: '50%', originY: '0%', transformBox: 'fill-box' } })] }), jsx("ellipse", { cx: 18, cy: -28, rx: 8, ry: 5.5, fill: "#FB923C", opacity: state === 'surprised' ? 0.7 : 0.5 }), jsx("ellipse", { cx: 82, cy: -28, rx: 8, ry: 5.5, fill: "#FB923C", opacity: state === 'surprised' ? 0.7 : 0.5 }), jsx(motion.path, { d: blobMouthPaths[state], fill: "none", stroke: "#1E293B", strokeWidth: 2.5, strokeLinecap: "round", animate: { d: blobMouthPaths[state] }, transition: transition, transform: "translate(50, -24)" })] })] }));
+};
+
+export { BlobCharacter };

package/dist/components/effects/InteractiveCharacters/characters/SmallCharacter.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { CharacterProps } from '../InteractiveCharacters.types';
+export declare const SmallCharacter: React.FC<CharacterProps>;

package/dist/components/effects/InteractiveCharacters/characters/SmallCharacter.js

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTransform, motion } from 'motion/react';
+import { eyelidVariants, clickTransition, bodyTransition, smallBodyVariants, smallMouthPaths } from '../InteractiveCharacters.animations.js';
+
+const LEFT_EYE = { cx: -14, cy: -32 };
+const RIGHT_EYE = { cx: 14, cy: -32 };
+const CLICK_STATES = new Set(['surprised', 'love', 'excited']);
+const SmallCharacter = ({ state, eyeOffset, idle, blinkAmount, onClick, }) => {
+    const leftPupilX = useTransform(eyeOffset.x, (v) => LEFT_EYE.cx + v);
+    const leftPupilY = useTransform(eyeOffset.y, (v) => LEFT_EYE.cy + v);
+    const rightPupilX = useTransform(eyeOffset.x, (v) => RIGHT_EYE.cx + v);
+    const rightPupilY = useTransform(eyeOffset.y, (v) => RIGHT_EYE.cy + v);
+    // Combine idle head movement with cursor tracking for head turning
+    const combinedHeadX = useTransform([idle.headX, eyeOffset.x], ([idleX, cursorX]) => idleX + cursorX * 0.6);
+    const combinedHeadY = useTransform([idle.headY, eyeOffset.y], ([idleY, cursorY]) => idleY + cursorY * 0.35);
+    const combinedHeadRotate = useTransform([idle.headTilt, eyeOffset.x], ([tilt, cursorX]) => tilt + cursorX * 0.6);
+    const stateEyelid = eyelidVariants[state].scaleY;
+    const eyelidScale = useTransform(blinkAmount, (blink) => Math.max(stateEyelid, blink));
+    const isClickReaction = CLICK_STATES.has(state);
+    const transition = isClickReaction ? clickTransition : bodyTransition;
+    return (jsxs(motion.g, { animate: state, variants: smallBodyVariants, transition: transition, style: {
+            originX: '50%',
+            originY: '100%',
+            x: idle.sway,
+            y: idle.bob,
+            scale: idle.breath,
+        }, onClick: onClick, children: [jsx("path", { d: "M -45 0 Q -45 -60 0 -60 Q 45 -60 45 0 Z", fill: "#FACC15" }), jsxs(motion.g, { style: {
+                    originX: '0px',
+                    originY: '-30px',
+                    rotate: combinedHeadRotate,
+                    x: combinedHeadX,
+                    y: combinedHeadY,
+                }, children: [jsxs("g", { children: [jsx("clipPath", { id: "small-eye-l", children: jsx("circle", { cx: LEFT_EYE.cx, cy: LEFT_EYE.cy, r: 10 }) }), jsx("circle", { cx: LEFT_EYE.cx, cy: LEFT_EYE.cy, r: 10, fill: "white" }), jsx(motion.circle, { cx: leftPupilX, cy: leftPupilY, r: 6, fill: "#1E293B", clipPath: "url(#small-eye-l)" }), jsx("circle", { cx: LEFT_EYE.cx + 3, cy: LEFT_EYE.cy - 4, r: 2.2, fill: "white", opacity: 0.95 }), jsx("circle", { cx: LEFT_EYE.cx - 2, cy: LEFT_EYE.cy + 3, r: 1.1, fill: "white", opacity: 0.7 }), jsx(motion.rect, { x: LEFT_EYE.cx - 10, y: LEFT_EYE.cy - 10, width: 20, height: 20, fill: "#FACC15", rx: 2, style: { scaleY: eyelidScale, originX: '50%', originY: '0%', transformBox: 'fill-box' } })] }), jsxs("g", { children: [jsx("clipPath", { id: "small-eye-r", children: jsx("circle", { cx: RIGHT_EYE.cx, cy: RIGHT_EYE.cy, r: 10 }) }), jsx("circle", { cx: RIGHT_EYE.cx, cy: RIGHT_EYE.cy, r: 10, fill: "white" }), jsx(motion.circle, { cx: rightPupilX, cy: rightPupilY, r: 6, fill: "#1E293B", clipPath: "url(#small-eye-r)" }), jsx("circle", { cx: RIGHT_EYE.cx + 3, cy: RIGHT_EYE.cy - 4, r: 2.2, fill: "white", opacity: 0.95 }), jsx("circle", { cx: RIGHT_EYE.cx - 2, cy: RIGHT_EYE.cy + 3, r: 1.1, fill: "white", opacity: 0.7 }), jsx(motion.rect, { x: RIGHT_EYE.cx - 10, y: RIGHT_EYE.cy - 10, width: 20, height: 20, fill: "#FACC15", rx: 2, style: { scaleY: eyelidScale, originX: '50%', originY: '0%', transformBox: 'fill-box' } })] }), jsx("ellipse", { cx: -22, cy: -18, rx: 6, ry: 4, fill: "#FDE68A", opacity: state === 'excited' ? 0.85 : 0.6 }), jsx("ellipse", { cx: 22, cy: -18, rx: 6, ry: 4, fill: "#FDE68A", opacity: state === 'excited' ? 0.85 : 0.6 }), jsx(motion.path, { d: smallMouthPaths[state], fill: "none", stroke: "#1E293B", strokeWidth: 2, strokeLinecap: "round", animate: { d: smallMouthPaths[state] }, transition: transition, transform: "translate(0, -14)" })] })] }));
+};
+
+export { SmallCharacter };

package/dist/components/effects/InteractiveCharacters/characters/TallCharacter.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { CharacterProps } from '../InteractiveCharacters.types';
+export declare const TallCharacter: React.FC<CharacterProps>;

package/dist/components/effects/InteractiveCharacters/characters/TallCharacter.js

@@ -0,0 +1,37 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTransform, motion } from 'motion/react';
+import { eyelidVariants, clickTransition, bodyTransition, tallBodyVariants, eyebrowVariants, tallMouthPaths } from '../InteractiveCharacters.animations.js';
+
+const LEFT_EYE = { cx: -12, cy: -82 };
+const RIGHT_EYE = { cx: 12, cy: -82 };
+const CLICK_STATES = new Set(['surprised', 'love', 'excited']);
+const TallCharacter = ({ state, eyeOffset, idle, blinkAmount, onClick, }) => {
+    const leftPupilX = useTransform(eyeOffset.x, (v) => LEFT_EYE.cx + v);
+    const leftPupilY = useTransform(eyeOffset.y, (v) => LEFT_EYE.cy + v);
+    const rightPupilX = useTransform(eyeOffset.x, (v) => RIGHT_EYE.cx + v);
+    const rightPupilY = useTransform(eyeOffset.y, (v) => RIGHT_EYE.cy + v);
+    // Combine idle head movement with cursor tracking for head turning
+    const combinedHeadX = useTransform([idle.headX, eyeOffset.x], ([idleX, cursorX]) => idleX + cursorX * 0.4);
+    const combinedHeadY = useTransform([idle.headY, eyeOffset.y], ([idleY, cursorY]) => idleY + cursorY * 0.25);
+    const combinedHeadRotate = useTransform([idle.headTilt, eyeOffset.x], ([tilt, cursorX]) => tilt + cursorX * 0.4);
+    const stateEyelid = eyelidVariants[state].scaleY;
+    const eyelidScale = useTransform(blinkAmount, (blink) => Math.max(stateEyelid, blink));
+    const eyebrow = eyebrowVariants[state];
+    const isClickReaction = CLICK_STATES.has(state);
+    const transition = isClickReaction ? clickTransition : bodyTransition;
+    return (jsxs(motion.g, { animate: state, variants: tallBodyVariants, transition: transition, style: {
+            originX: '50%',
+            originY: '100%',
+            x: idle.sway,
+            y: idle.bob,
+            scale: idle.breath,
+        }, onClick: onClick, children: [jsx("rect", { x: -30, y: -140, width: 60, height: 140, rx: 22, fill: "#8B5CF6" }), jsxs(motion.g, { style: {
+                    originX: '0px',
+                    originY: '-70px',
+                    rotate: combinedHeadRotate,
+                    x: combinedHeadX,
+                    y: combinedHeadY,
+                }, children: [jsx(motion.line, { x1: -22, y1: -103, x2: -4, y2: -103, stroke: "#1E293B", strokeWidth: 2.5, strokeLinecap: "round", animate: { rotate: eyebrow.rotate, y: eyebrow.y }, transition: transition, style: { originX: '50%', originY: '50%', transformBox: 'fill-box' } }), jsx(motion.line, { x1: 4, y1: -103, x2: 22, y2: -103, stroke: "#1E293B", strokeWidth: 2.5, strokeLinecap: "round", animate: { rotate: -eyebrow.rotate, y: eyebrow.y }, transition: transition, style: { originX: '50%', originY: '50%', transformBox: 'fill-box' } }), jsxs("g", { children: [jsx("clipPath", { id: "tall-eye-l", children: jsx("ellipse", { cx: LEFT_EYE.cx, cy: LEFT_EYE.cy, rx: 11, ry: 14 }) }), jsx("ellipse", { cx: LEFT_EYE.cx, cy: LEFT_EYE.cy, rx: 11, ry: 14, fill: "white" }), jsx(motion.circle, { cx: leftPupilX, cy: leftPupilY, r: 6.5, fill: "#1E293B", clipPath: "url(#tall-eye-l)" }), jsx("circle", { cx: LEFT_EYE.cx + 3.5, cy: LEFT_EYE.cy - 5, r: 2.5, fill: "white", opacity: 0.95 }), jsx("circle", { cx: LEFT_EYE.cx - 2.5, cy: LEFT_EYE.cy + 3, r: 1.2, fill: "white", opacity: 0.7 }), jsx(motion.rect, { x: LEFT_EYE.cx - 11, y: LEFT_EYE.cy - 14, width: 22, height: 28, fill: "#8B5CF6", rx: 2, style: { scaleY: eyelidScale, originX: '50%', originY: '0%', transformBox: 'fill-box' } })] }), jsxs("g", { children: [jsx("clipPath", { id: "tall-eye-r", children: jsx("ellipse", { cx: RIGHT_EYE.cx, cy: RIGHT_EYE.cy, rx: 11, ry: 14 }) }), jsx("ellipse", { cx: RIGHT_EYE.cx, cy: RIGHT_EYE.cy, rx: 11, ry: 14, fill: "white" }), jsx(motion.circle, { cx: rightPupilX, cy: rightPupilY, r: 6.5, fill: "#1E293B", clipPath: "url(#tall-eye-r)" }), jsx("circle", { cx: RIGHT_EYE.cx + 3.5, cy: RIGHT_EYE.cy - 5, r: 2.5, fill: "white", opacity: 0.95 }), jsx("circle", { cx: RIGHT_EYE.cx - 2.5, cy: RIGHT_EYE.cy + 3, r: 1.2, fill: "white", opacity: 0.7 }), jsx(motion.rect, { x: RIGHT_EYE.cx - 11, y: RIGHT_EYE.cy - 14, width: 22, height: 28, fill: "#8B5CF6", rx: 2, style: { scaleY: eyelidScale, originX: '50%', originY: '0%', transformBox: 'fill-box' } })] }), jsx("ellipse", { cx: -22, cy: -62, rx: 7, ry: 5, fill: "#F9A8D4", opacity: state === 'love' ? 0.65 : 0.45 }), jsx("ellipse", { cx: 22, cy: -62, rx: 7, ry: 5, fill: "#F9A8D4", opacity: state === 'love' ? 0.65 : 0.45 }), jsx(motion.path, { d: tallMouthPaths[state], fill: "none", stroke: "#1E293B", strokeWidth: 2, strokeLinecap: "round", animate: { d: tallMouthPaths[state] }, transition: transition, transform: "translate(0, -55)" })] })] }));
+};
+
+export { TallCharacter };

package/dist/components/effects/InteractiveCharacters/hooks/useBlink.d.ts

@@ -0,0 +1,14 @@
+interface UseBlinkOptions {
+    /** Whether blinking is enabled */
+    enabled?: boolean;
+    /** Min time between blinks in ms (default: 2000) */
+    minInterval?: number;
+    /** Max time between blinks in ms (default: 5000) */
+    maxInterval?: number;
+}
+/**
+ * Returns a MotionValue representing eyelid close amount (0 = open, 1 = closed).
+ * Fires periodic natural blinks when enabled.
+ */
+export declare function useBlink({ enabled, minInterval, maxInterval, }?: UseBlinkOptions): import("motion-dom").MotionValue<number>;
+export {};

package/dist/components/effects/InteractiveCharacters/hooks/useBlink.js

@@ -0,0 +1,41 @@
+import { useRef, useCallback, useEffect } from 'react';
+import { useMotionValue, useSpring } from 'motion/react';
+
+/**
+ * Returns a MotionValue representing eyelid close amount (0 = open, 1 = closed).
+ * Fires periodic natural blinks when enabled.
+ */
+function useBlink({ enabled = true, minInterval = 2000, maxInterval = 5000, } = {}) {
+    const raw = useMotionValue(0);
+    const blink = useSpring(raw, { stiffness: 600, damping: 30 });
+    const timeoutRef = useRef(undefined);
+    const doBlink = useCallback(() => {
+        // Close eyes
+        raw.set(1);
+        // Open after 120ms
+        setTimeout(() => raw.set(0), 120);
+    }, [raw]);
+    const scheduleNext = useCallback(() => {
+        const delay = minInterval + Math.random() * (maxInterval - minInterval);
+        timeoutRef.current = setTimeout(() => {
+            if (enabled) {
+                doBlink();
+                scheduleNext();
+            }
+        }, delay);
+    }, [enabled, minInterval, maxInterval, doBlink]);
+    useEffect(() => {
+        if (!enabled) {
+            raw.set(0);
+            return;
+        }
+        scheduleNext();
+        return () => {
+            if (timeoutRef.current)
+                clearTimeout(timeoutRef.current);
+        };
+    }, [enabled, scheduleNext, raw]);
+    return blink;
+}
+
+export { useBlink };

package/dist/components/effects/InteractiveCharacters/hooks/useIdleAnimation.d.ts

@@ -0,0 +1,25 @@
+interface UseIdleAnimationOptions {
+    /** Whether idle animation is active */
+    enabled?: boolean;
+    /** Amplitude of the sway in SVG units (default: 2) */
+    swayAmount?: number;
+    /** Speed multiplier for the sway cycle (default: 1) */
+    swaySpeed?: number;
+    /** Amplitude of the breathing scale oscillation (default: 0.01) */
+    breathAmount?: number;
+    /** Amplitude of head tilt in degrees (default: 3) */
+    headTiltAmount?: number;
+    /** Amplitude of random head nudge in SVG units (default: 1.5) */
+    headNudgeAmount?: number;
+    /** Phase offset in seconds — staggers characters so they don't move in sync */
+    phaseOffset?: number;
+}
+export declare function useIdleAnimation({ enabled, swayAmount, swaySpeed, breathAmount, headTiltAmount, headNudgeAmount, phaseOffset, }?: UseIdleAnimationOptions): {
+    sway: import("motion-dom").MotionValue<number>;
+    bob: import("motion-dom").MotionValue<number>;
+    breath: import("motion-dom").MotionValue<number>;
+    headTilt: import("motion-dom").MotionValue<number>;
+    headX: import("motion-dom").MotionValue<number>;
+    headY: import("motion-dom").MotionValue<number>;
+};
+export {};