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

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,105 @@
+"use client";
+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 abstract 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: each abstract form gets a slightly different response.
+    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 movement runs at different rates and 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,46 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId } from 'react';
+import { useTransform, motion } from 'motion/react';
+import { eyelidVariants, clickTransition, bodyTransition, blobBodyVariants, blobMouthPaths } from '../InteractiveCharacters.animations.js';
+
+const LEFT_EYE = { cx: 32, cy: -58 };
+const RIGHT_EYE = { cx: 62, cy: -58 };
+const CLICK_STATES = new Set(['surprised', 'love', 'excited']);
+const BlobCharacter = ({ state, eyeOffset, idle, blinkAmount, onClick, }) => {
+    const id = useId().replace(/:/g, '');
+    const leftClipId = `${id}-aura-eye-l`;
+    const rightClipId = `${id}-aura-eye-r`;
+    const bodyGradientId = `${id}-aura-body`;
+    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("defs", { children: jsxs("linearGradient", { id: bodyGradientId, x1: "15", y1: "-105", x2: "92", y2: "-5", gradientUnits: "userSpaceOnUse", children: [jsx("stop", { stopColor: "#16B8A6" }), jsx("stop", { offset: "1", stopColor: "#0F766E" })] }) }), jsx(motion.path, { d: "M 19 -99 C 40 -113 78 -101 92 -75 C 108 -45 91 -10 58 -1 C 26 8 -2 -13 -5 -47 C -8 -72 3 -89 19 -99 Z", fill: `url(#${bodyGradientId})`, animate: {
+                    d: state === 'surprised'
+                        ? 'M 19 -105 C 42 -121 82 -106 97 -78 C 115 -43 94 -6 57 1 C 21 8 -9 -17 -10 -52 C -11 -79 2 -96 19 -105 Z'
+                        : 'M 19 -99 C 40 -113 78 -101 92 -75 C 108 -45 91 -10 58 -1 C 26 8 -2 -13 -5 -47 C -8 -72 3 -89 19 -99 Z',
+                }, transition: transition }), jsx("path", { d: "M 72 -91 C 91 -78 98 -52 88 -30", fill: "none", stroke: "#7DD3C7", strokeWidth: 5, strokeLinecap: "round", opacity: 0.38 }), jsx("ellipse", { cx: 11, cy: -31, rx: 8, ry: 12, fill: "#5EEAD4", opacity: 0.34, transform: "rotate(-24 11 -31)" }), jsxs(motion.g, { style: {
+                    originX: '50px',
+                    originY: '-50px',
+                    rotate: combinedHeadRotate,
+                    x: combinedHeadX,
+                    y: combinedHeadY,
+                }, children: [jsxs("g", { children: [jsx("clipPath", { id: leftClipId, 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: 12, ry: 14, fill: "#F8FAFC" }), jsx(motion.circle, { cx: leftPupilX, cy: leftPupilY, r: 7, fill: "#122A33", clipPath: `url(#${leftClipId})` }), 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 - 12, y: LEFT_EYE.cy - 14, width: 24, height: 28, fill: "#16B8A6", rx: 3, style: { scaleY: eyelidScale, originX: '50%', originY: '0%', transformBox: 'fill-box' } })] }), jsxs("g", { children: [jsx("clipPath", { id: rightClipId, 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: 12, ry: 14, fill: "#F8FAFC" }), jsx(motion.circle, { cx: rightPupilX, cy: rightPupilY, r: 7, fill: "#122A33", clipPath: `url(#${rightClipId})` }), 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 - 12, y: RIGHT_EYE.cy - 14, width: 24, height: 28, fill: "#16B8A6", rx: 3, style: { scaleY: eyelidScale, originX: '50%', originY: '0%', transformBox: 'fill-box' } })] }), jsx("ellipse", { cx: 20, cy: -37, rx: 6, ry: 3.5, fill: "#99F6E4", opacity: state === 'surprised' ? 0.72 : 0.45 }), jsx("ellipse", { cx: 76, cy: -36, rx: 6, ry: 3.5, fill: "#99F6E4", opacity: state === 'surprised' ? 0.72 : 0.45 }), jsx(motion.path, { d: blobMouthPaths[state], fill: "none", stroke: "#122A33", strokeWidth: 2.4, strokeLinecap: "round", animate: { d: blobMouthPaths[state] }, transition: transition, transform: "translate(47, -30)" })] })] }));
+};
+
+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,46 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId } from 'react';
+import { useTransform, motion } from 'motion/react';
+import { eyelidVariants, clickTransition, bodyTransition, smallBodyVariants, smallMouthPaths } from '../InteractiveCharacters.animations.js';
+
+const LEFT_EYE = { cx: -13, cy: -34 };
+const RIGHT_EYE = { cx: 12, cy: -34 };
+const CLICK_STATES = new Set(['surprised', 'love', 'excited']);
+const SmallCharacter = ({ state, eyeOffset, idle, blinkAmount, onClick, }) => {
+    const id = useId().replace(/:/g, '');
+    const leftClipId = `${id}-glyph-eye-l`;
+    const rightClipId = `${id}-glyph-eye-r`;
+    const bodyGradientId = `${id}-glyph-body`;
+    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("defs", { children: jsxs("linearGradient", { id: bodyGradientId, x1: "-48", y1: "-73", x2: "38", y2: "0", gradientUnits: "userSpaceOnUse", children: [jsx("stop", { stopColor: "#FDA4AF" }), jsx("stop", { offset: "1", stopColor: "#FB7185" })] }) }), jsx(motion.path, { d: "M -38 -28 C -43 -57 -18 -78 13 -67 C 39 -58 50 -27 31 -8 C 13 10 -29 3 -38 -28 Z", fill: `url(#${bodyGradientId})`, animate: {
+                    d: state === 'excited'
+                        ? 'M -40 -31 C -47 -63 -17 -85 17 -72 C 45 -61 56 -27 33 -5 C 12 15 -31 5 -40 -31 Z'
+                        : 'M -38 -28 C -43 -57 -18 -78 13 -67 C 39 -58 50 -27 31 -8 C 13 10 -29 3 -38 -28 Z',
+                }, transition: transition }), jsx("path", { d: "M 20 -59 C 38 -47 42 -26 31 -13", fill: "none", stroke: "#FFE4E6", strokeWidth: 4, strokeLinecap: "round", opacity: 0.5 }), jsx("circle", { cx: -44, cy: -61, r: 7, fill: "#38BDF8", opacity: state === 'excited' ? 0.95 : 0.65 }), jsxs(motion.g, { style: {
+                    originX: '0px',
+                    originY: '-30px',
+                    rotate: combinedHeadRotate,
+                    x: combinedHeadX,
+                    y: combinedHeadY,
+                }, children: [jsxs("g", { children: [jsx("clipPath", { id: leftClipId, children: jsx("circle", { cx: LEFT_EYE.cx, cy: LEFT_EYE.cy, r: 10 }) }), jsx("circle", { cx: LEFT_EYE.cx, cy: LEFT_EYE.cy, r: 8.5, fill: "#FFF7ED" }), jsx(motion.circle, { cx: leftPupilX, cy: leftPupilY, r: 5.5, fill: "#253040", clipPath: `url(#${leftClipId})` }), 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 - 8.5, y: LEFT_EYE.cy - 8.5, width: 17, height: 17, fill: "#FB7B8C", rx: 2, style: { scaleY: eyelidScale, originX: '50%', originY: '0%', transformBox: 'fill-box' } })] }), jsxs("g", { children: [jsx("clipPath", { id: rightClipId, children: jsx("circle", { cx: RIGHT_EYE.cx, cy: RIGHT_EYE.cy, r: 10 }) }), jsx("circle", { cx: RIGHT_EYE.cx, cy: RIGHT_EYE.cy, r: 8.5, fill: "#FFF7ED" }), jsx(motion.circle, { cx: rightPupilX, cy: rightPupilY, r: 5.5, fill: "#253040", clipPath: `url(#${rightClipId})` }), 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 - 8.5, y: RIGHT_EYE.cy - 8.5, width: 17, height: 17, fill: "#FB7B8C", rx: 2, style: { scaleY: eyelidScale, originX: '50%', originY: '0%', transformBox: 'fill-box' } })] }), jsx("ellipse", { cx: -25, cy: -20, rx: 5, ry: 3, fill: "#FFE4E6", opacity: state === 'excited' ? 0.9 : 0.55 }), jsx("ellipse", { cx: 23, cy: -20, rx: 5, ry: 3, fill: "#FFE4E6", opacity: state === 'excited' ? 0.9 : 0.55 }), jsx(motion.path, { d: smallMouthPaths[state], fill: "none", stroke: "#1E293B", strokeWidth: 2, strokeLinecap: "round", animate: { d: smallMouthPaths[state] }, transition: transition, transform: "translate(0, -17)" })] })] }));
+};
+
+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,48 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId } from 'react';
+import { useTransform, motion } from 'motion/react';
+import { eyelidVariants, clickTransition, bodyTransition, tallBodyVariants, eyebrowVariants, tallMouthPaths } from '../InteractiveCharacters.animations.js';
+
+const LEFT_EYE = { cx: -12, cy: -73 };
+const RIGHT_EYE = { cx: 12, cy: -73 };
+const CLICK_STATES = new Set(['surprised', 'love', 'excited']);
+const TallCharacter = ({ state, eyeOffset, idle, blinkAmount, onClick, }) => {
+    const id = useId().replace(/:/g, '');
+    const leftClipId = `${id}-stack-eye-l`;
+    const rightClipId = `${id}-stack-eye-r`;
+    const topGradientId = `${id}-stack-top`;
+    const baseGradientId = `${id}-stack-base`;
+    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: [jsxs("defs", { children: [jsxs("linearGradient", { id: topGradientId, x1: "-33", y1: "-128", x2: "34", y2: "-54", gradientUnits: "userSpaceOnUse", children: [jsx("stop", { stopColor: "#A5B4FC" }), jsx("stop", { offset: "1", stopColor: "#6366F1" })] }), jsxs("linearGradient", { id: baseGradientId, x1: "-46", y1: "-69", x2: "45", y2: "0", gradientUnits: "userSpaceOnUse", children: [jsx("stop", { stopColor: "#67E8F9" }), jsx("stop", { offset: "1", stopColor: "#14B8A6" })] })] }), jsx(motion.path, { d: "M -20 -132 C 8 -146 37 -124 34 -94 C 32 -70 8 -57 -16 -65 C -42 -74 -47 -117 -20 -132 Z", fill: `url(#${topGradientId})`, animate: {
+                    d: state === 'love'
+                        ? 'M -22 -136 C 9 -153 42 -126 37 -92 C 34 -66 8 -53 -18 -63 C -48 -74 -51 -120 -22 -136 Z'
+                        : 'M -20 -132 C 8 -146 37 -124 34 -94 C 32 -70 8 -57 -16 -65 C -42 -74 -47 -117 -20 -132 Z',
+                }, transition: transition }), jsx("path", { d: "M -39 -63 C -15 -86 31 -78 43 -47 C 55 -13 28 9 -10 4 C -47 -1 -66 -35 -39 -63 Z", fill: `url(#${baseGradientId})` }), jsx("path", { d: "M -25 -121 C -6 -132 15 -129 25 -112", fill: "none", stroke: "#E0E7FF", strokeLinecap: "round", strokeWidth: 4, opacity: 0.48 }), jsxs(motion.g, { style: {
+                    originX: '0px',
+                    originY: '-70px',
+                    rotate: combinedHeadRotate,
+                    x: combinedHeadX,
+                    y: combinedHeadY,
+                }, children: [jsx(motion.line, { x1: -23, y1: -94, x2: -5, y2: -94, 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: 5, y1: -94, x2: 23, y2: -94, 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: leftClipId, 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: 10, ry: 12, fill: "#F8FAFC" }), jsx(motion.circle, { cx: leftPupilX, cy: leftPupilY, r: 6.5, fill: "#1E293B", clipPath: `url(#${leftClipId})` }), 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 - 10, y: LEFT_EYE.cy - 12, width: 20, height: 24, fill: "#7C83F3", rx: 3, style: { scaleY: eyelidScale, originX: '50%', originY: '0%', transformBox: 'fill-box' } })] }), jsxs("g", { children: [jsx("clipPath", { id: rightClipId, 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: 10, ry: 12, fill: "#F8FAFC" }), jsx(motion.circle, { cx: rightPupilX, cy: rightPupilY, r: 6.5, fill: "#1E293B", clipPath: `url(#${rightClipId})` }), 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 - 10, y: RIGHT_EYE.cy - 12, width: 20, height: 24, fill: "#7C83F3", rx: 3, style: { scaleY: eyelidScale, originX: '50%', originY: '0%', transformBox: 'fill-box' } })] }), jsx("ellipse", { cx: -25, cy: -57, rx: 6, ry: 3.5, fill: "#C4B5FD", opacity: state === 'love' ? 0.75 : 0.45 }), jsx("ellipse", { cx: 25, cy: -57, rx: 6, ry: 3.5, fill: "#C4B5FD", opacity: state === 'love' ? 0.75 : 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, -49)" })] })] }));
+};
+
+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,42 @@
+"use client";
+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 {};

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

@@ -0,0 +1,85 @@
+"use client";
+import { useRef, useCallback, useEffect } from 'react';
+import { useReducedMotion, useMotionValue, useSpring } from 'motion/react';
+
+function useIdleAnimation({ enabled = true, swayAmount = 2, swaySpeed = 1, breathAmount = 0.01, headTiltAmount = 3, headNudgeAmount = 1.5, phaseOffset = 0, } = {}) {
+    const shouldReduceMotion = useReducedMotion();
+    const rafRef = useRef(0);
+    const startTimeRef = useRef(null);
+    const isFirstFrame = useRef(true);
+    const rawSway = useMotionValue(0);
+    const rawBob = useMotionValue(0);
+    const rawBreath = useMotionValue(1);
+    const rawHeadTilt = useMotionValue(0);
+    const rawHeadX = useMotionValue(0);
+    const rawHeadY = useMotionValue(0);
+    const sway = useSpring(rawSway, { stiffness: 40, damping: 15 });
+    const bob = useSpring(rawBob, { stiffness: 40, damping: 15 });
+    const breath = useSpring(rawBreath, { stiffness: 40, damping: 15 });
+    const headTilt = useSpring(rawHeadTilt, { stiffness: 30, damping: 12 });
+    const headX = useSpring(rawHeadX, { stiffness: 35, damping: 14 });
+    const headY = useSpring(rawHeadY, { stiffness: 35, damping: 14 });
+    const animate = useCallback((time) => {
+        if (startTimeRef.current === null)
+            startTimeRef.current = time;
+        const t = (time - startTimeRef.current) / 1000 + phaseOffset;
+        // Body sway: slow sinusoidal
+        const swayVal = Math.sin(t * 0.8 * swaySpeed) * swayAmount;
+        rawSway.set(swayVal);
+        // Body bob: slightly different frequency
+        const bobVal = Math.sin(t * 1.2 * swaySpeed) * (swayAmount * 0.5);
+        rawBob.set(bobVal);
+        // Breathing: subtle scale oscillation
+        const breathVal = 1 + Math.sin(t * 1.5 * swaySpeed) * breathAmount;
+        rawBreath.set(breathVal);
+        // Head tilt: layered sinusoids for organic, non-repeating feel
+        const tilt1 = Math.sin(t * 0.5 * swaySpeed) * 0.6;
+        const tilt2 = Math.sin(t * 1.3 * swaySpeed) * 0.3;
+        const tilt3 = Math.sin(t * 0.3 * swaySpeed) * 0.1;
+        const tiltVal = (tilt1 + tilt2 + tilt3) * headTiltAmount;
+        rawHeadTilt.set(tiltVal);
+        // Head nudge X/Y: different frequencies from body for independence
+        const headXVal = (Math.sin(t * 0.7 * swaySpeed) * 0.6 +
+            Math.sin(t * 1.9 * swaySpeed) * 0.4) *
+            headNudgeAmount;
+        rawHeadX.set(headXVal);
+        const headYVal = (Math.sin(t * 0.9 * swaySpeed) * 0.5 +
+            Math.sin(t * 2.1 * swaySpeed) * 0.3) *
+            headNudgeAmount *
+            0.6;
+        rawHeadY.set(headYVal);
+        // On first frame, jump springs directly to skip settling animation
+        if (isFirstFrame.current) {
+            isFirstFrame.current = false;
+            sway.jump(swayVal);
+            bob.jump(bobVal);
+            breath.jump(breathVal);
+            headTilt.jump(tiltVal);
+            headX.jump(headXVal);
+            headY.jump(headYVal);
+        }
+        rafRef.current = requestAnimationFrame(animate);
+    }, [
+        rawSway, rawBob, rawBreath, rawHeadTilt, rawHeadX, rawHeadY,
+        sway, bob, breath, headTilt, headX, headY,
+        swayAmount, swaySpeed, breathAmount, headTiltAmount, headNudgeAmount, phaseOffset,
+    ]);
+    useEffect(() => {
+        if (!enabled || shouldReduceMotion) {
+            rawSway.set(0);
+            rawBob.set(0);
+            rawBreath.set(1);
+            rawHeadTilt.set(0);
+            rawHeadX.set(0);
+            rawHeadY.set(0);
+            return;
+        }
+        startTimeRef.current = null;
+        isFirstFrame.current = true;
+        rafRef.current = requestAnimationFrame(animate);
+        return () => cancelAnimationFrame(rafRef.current);
+    }, [enabled, shouldReduceMotion, animate, rawSway, rawBob, rawBreath, rawHeadTilt, rawHeadX, rawHeadY]);
+    return { sway, bob, breath, headTilt, headX, headY };
+}
+
+export { useIdleAnimation };

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

@@ -0,0 +1,18 @@
+import type { RefObject } from 'react';
+interface UseMouseTrackingOptions {
+    /** Reference to the SVG container element */
+    containerRef: RefObject<SVGSVGElement | null>;
+    /** Whether tracking is enabled */
+    enabled?: boolean;
+    /** Spring stiffness (default: 150) */
+    stiffness?: number;
+    /** Spring damping (default: 25) */
+    damping?: number;
+    /** Maximum eye offset in pixels (default: 6) */
+    maxOffset?: number;
+}
+export declare function useMouseTracking({ containerRef, enabled, stiffness, damping, maxOffset, }: UseMouseTrackingOptions): {
+    x: import("motion-dom").MotionValue<number>;
+    y: import("motion-dom").MotionValue<number>;
+};
+export {};

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

@@ -0,0 +1,36 @@
+"use client";
+import { useCallback, useEffect } from 'react';
+import { useReducedMotion, useMotionValue, useSpring } from 'motion/react';
+
+function useMouseTracking({ containerRef, enabled = true, stiffness = 150, damping = 25, maxOffset = 6, }) {
+    const shouldReduceMotion = useReducedMotion();
+    const rawX = useMotionValue(0);
+    const rawY = useMotionValue(0);
+    const x = useSpring(rawX, { stiffness, damping });
+    const y = useSpring(rawY, { stiffness, damping });
+    const handleMouseMove = useCallback((e) => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        const rect = el.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        // Normalize to -1..1 range based on distance from center
+        const nx = Math.max(-1, Math.min(1, (e.clientX - centerX) / (rect.width / 2)));
+        const ny = Math.max(-1, Math.min(1, (e.clientY - centerY) / (rect.height / 2)));
+        rawX.set(nx * maxOffset);
+        rawY.set(ny * maxOffset);
+    }, [containerRef, rawX, rawY, maxOffset]);
+    useEffect(() => {
+        if (!enabled || shouldReduceMotion) {
+            rawX.set(0);
+            rawY.set(0);
+            return;
+        }
+        window.addEventListener('mousemove', handleMouseMove);
+        return () => window.removeEventListener('mousemove', handleMouseMove);
+    }, [enabled, shouldReduceMotion, handleMouseMove, rawX, rawY]);
+    return { x, y };
+}
+
+export { useMouseTracking };

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

@@ -0,0 +1,2 @@
+export { InteractiveCharacters } from './InteractiveCharacters';
+export type { InteractiveCharactersProps, CharacterState, CharacterSize, } from './InteractiveCharacters.types';