@mova-ui/react 0.1.0 → 0.4.1

package/registry/glassmorphic-card.json

@@ -1,8 +1,17 @@
 {
   "id": "glassmorphic-card",
+  "tier": "free",
+  "version": "0.4.1",
   "file": "glassmorphic-card.tsx",
+  "sourcePath": "ui/loading/glassmorphic-card.tsx",
+  "registryFile": "glassmorphic-card.json",
+  "exports": [
+    "GlassmorphicCard"
+  ],
   "dependencies": [
     "framer-motion"
   ],
+  "license": "MIT",
+  "previewMode": "client",
   "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const GlassmorphicCard = () => (\n  <div className=\"w-20 h-16 bg-zinc-100 dark:bg-zinc-800/50 backdrop-blur-md border border-white/50 rounded-2xl shadow-sm flex items-center justify-center relative overflow-hidden\">\n    <motion.div\n      className=\"absolute w-12 h-12 bg-zinc-300 dark:bg-zinc-700 rounded-full blur-xl -z-10\"\n      animate={{ x: [-20, 20, -20], y: [-10, 10, -10] }}\n      transition={{ duration: 3, repeat: Infinity, ease: \"easeInOut\" }}\n    />\n    <div className=\"w-5 h-5 border-2 border-zinc-800 dark:border-zinc-700 border-t-transparent rounded-full animate-spin\" />\n  </div>\n);\n"
 }

package/registry/glow-button.json

@@ -1,8 +1,17 @@
 {
   "id": "glow-button",
+  "tier": "free",
+  "version": "0.4.1",
   "file": "glow-button.tsx",
+  "sourcePath": "ui/hover/glow-button.tsx",
+  "registryFile": "glow-button.json",
+  "exports": [
+    "GlowButton"
+  ],
   "dependencies": [
     "framer-motion"
   ],
+  "license": "MIT",
+  "previewMode": "client",
   "content": "\"use client\";\nimport React, { useRef, useState } from 'react';\nimport { motion } from 'framer-motion';\n\ninterface GlowButtonProps {\n  children: React.ReactNode;\n  className?: string;\n  glowColor?: string;\n  onClick?: () => void;\n}\n\nexport function GlowButton({\n  children,\n  className = '',\n  glowColor = 'rgba(59, 130, 246, 0.15)', // Light blue default\n  onClick,\n}: GlowButtonProps) {\n  const containerRef = useRef<HTMLButtonElement>(null);\n  const [coords, setCoords] = useState({ x: 0, y: 0 });\n  const [opacity, setOpacity] = useState(0);\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLButtonElement>) => {\n    if (!containerRef.current) return;\n    const rect = containerRef.current.getBoundingClientRect();\n    setCoords({\n      x: e.clientX - rect.left,\n      y: e.clientY - rect.top,\n    });\n  };\n\n  return (\n    <button\n      ref={containerRef}\n      onMouseMove={handleMouseMove}\n      onMouseEnter={() => setOpacity(1)}\n      onMouseLeave={() => setOpacity(0)}\n      onClick={onClick}\n      className={`relative overflow-hidden inline-flex items-center justify-center rounded-xl bg-neutral-900 border border-neutral-800 text-white font-medium text-sm h-11 px-6 shadow-md transition-colors hover:border-neutral-700 cursor-pointer ${className}`}\n    >\n      {/* Dynamic Cursor Glow Layer */}\n      <motion.div\n        className=\"pointer-events-none absolute -inset-px rounded-xl opacity-0 transition-opacity duration-300\"\n        style={{\n          opacity,\n          background: `radial-gradient(120px circle at ${coords.x}px ${coords.y}px, ${glowColor}, transparent 80%)`,\n        }}\n      />\n      \n      {/* Content wrapper */}\n      <span className=\"relative z-10\">{children}</span>\n    </button>\n  );\n}\n"
 }

package/registry/glow-text.json

@@ -0,0 +1,19 @@
+{
+  "id": "glow-text",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "glow-text.tsx",
+  "registryFile": "glow-text.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion",
+    "lucide-react"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './glow-text';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/text/AnimatedText.tsx\nimport { useState } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { RefreshCw } from \"lucide-react\";\n\n// src/hooks/useWebHaptics.ts\nimport { useCallback } from \"react\";\nfunction useWebHaptics() {\n  const trigger = useCallback((type = \"light\") => {\n    if (typeof window === \"undefined\" || !window.navigator || !window.navigator.vibrate) {\n      return false;\n    }\n    try {\n      switch (type) {\n        case \"light\":\n          return window.navigator.vibrate(10);\n        case \"medium\":\n          return window.navigator.vibrate(25);\n        case \"heavy\":\n          return window.navigator.vibrate(50);\n        case \"success\":\n          return window.navigator.vibrate([15, 60, 15]);\n        case \"warning\":\n          return window.navigator.vibrate([30, 60, 30]);\n        case \"error\":\n          return window.navigator.vibrate([60, 60, 60, 60, 60]);\n        default:\n          return window.navigator.vibrate(type);\n      }\n    } catch (e) {\n      console.warn(\"Vibration API error:\", e);\n      return false;\n    }\n  }, []);\n  return { trigger };\n}\n\n// src/components/text/AnimatedText.tsx\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nvar AnimatedText = ({ config, theme }) => {\n  const [keyIndex, setKeyIndex] = useState(0);\n  const { trigger: triggerHaptic } = useWebHaptics();\n  const isDark = theme === \"dark\";\n  const replay = () => {\n    triggerHaptic(\"light\");\n    setKeyIndex((prev) => prev + 1);\n  };\n  const samplePhrase = \"MOVA UI\";\n  const sampleWords = [\"Design\", \"Motion\", \"Mova\"];\n  return /* @__PURE__ */ jsxs(\n    \"div\",\n    {\n      onClick: replay,\n      className: \"relative flex flex-col items-center justify-center w-full h-full cursor-pointer select-none px-4 group\",\n      title: \"Click to replay animation\",\n      children: [\n        /* @__PURE__ */ jsx(\"div\", { className: \"flex items-center justify-center w-full min-h-[60px] text-center\", children: (() => {\n          switch (config.interactionType) {\n            /* --- FEATURED --- */\n            case \"dia-text-reveal\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"relative overflow-hidden font-black text-2xl tracking-tighter\", children: /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { clipPath: \"polygon(0 0, 0 0, 0 100%, 0% 100%)\", filter: \"blur(8px)\" },\n                  animate: { clipPath: \"polygon(0 0, 100% 0, 100% 100%, 0 100%)\", filter: \"blur(0px)\" },\n                  transition: { duration: 0.85, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: \"DIA REVEAL\"\n                }\n              ) }, keyIndex);\n            /* --- REVEALS --- */\n            case \"blur-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { filter: \"blur(12px)\", opacity: 0, scale: 0.9 },\n                  animate: { filter: \"blur(0px)\", opacity: 1, scale: 1 },\n                  transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"BLUR REVEAL\"\n                },\n                keyIndex\n              );\n            case \"shimmer-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: `font-extrabold text-2xl bg-gradient-to-r ${isDark ? \"from-neutral-400 via-white to-neutral-400\" : \"from-neutral-600 via-black to-neutral-600\"} bg-clip-text text-transparent animate-pulse`, children: \"SHIMMER TEXT\" });\n            case \"typewriter-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex items-center font-mono text-lg font-bold\", children: /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { width: 0 },\n                  animate: { width: \"auto\" },\n                  transition: { duration: 1.2, ease: \"easeInOut\" },\n                  className: `overflow-hidden whitespace-nowrap border-r-2 ${isDark ? \"text-emerald-400 border-emerald-400\" : \"text-emerald-600 border-emerald-600\"}`,\n                  children: \"TYPEWRITER\"\n                }\n              ) }, keyIndex);\n            case \"reveal-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"relative overflow-hidden font-bold text-2xl\", children: /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { clipPath: \"inset(0 100% 0 0)\" },\n                  animate: { clipPath: \"inset(0 0 0 0)\" },\n                  transition: { duration: 0.75, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: \"CINEMATIC\"\n                }\n              ) }, keyIndex);\n            case \"fade-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { opacity: 0 },\n                  animate: { opacity: 1 },\n                  transition: { duration: 0.3, delay: i * 0.05 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"fade-in-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { opacity: 0 },\n                  animate: { opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.15 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"fade-in-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { opacity: 0 },\n                  animate: { opacity: 1 },\n                  transition: { duration: 0.8 },\n                  className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"FADE IN TEXT\"\n                },\n                keyIndex\n              );\n            case \"blur-up-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { opacity: 0, y: 15, filter: \"blur(8px)\" },\n                  animate: { opacity: 1, y: 0, filter: \"blur(0px)\" },\n                  transition: { duration: 0.5, delay: i * 0.12 },\n                  className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"blur-up-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { opacity: 0, y: 15, filter: \"blur(8px)\" },\n                  animate: { opacity: 1, y: 0, filter: \"blur(0px)\" },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            /* --- SLIDE & DROP --- */\n            case \"stagger-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: 20, opacity: 0 },\n                  animate: { y: 0, opacity: 1 },\n                  transition: { duration: 0.5, delay: i * 0.1, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-up-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: \"100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.4, delay: i * 0.04, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-up-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 overflow-hidden font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: \"100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.5, delay: i * 0.1, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-up-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"overflow-hidden\", children: /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { y: \"100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"SLIDE UP TEXT\"\n                }\n              ) }, keyIndex);\n            case \"slide-down-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: \"-100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.4, delay: i * 0.04, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-down-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 overflow-hidden font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: \"-100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.5, delay: i * 0.1, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-left-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { x: 40, opacity: 0 },\n                  animate: { x: 0, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-right-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { x: -40, opacity: 0 },\n                  animate: { x: 0, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"drop-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: -50, opacity: 0 },\n                  animate: { y: 0, opacity: 1 },\n                  transition: { type: \"spring\", stiffness: 500, damping: 25, delay: i * 0.04 },\n                  className: isDark ? \"text-cyan-400\" : \"text-cyan-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"rise-up-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: 30, opacity: 0, scale: 0.8 },\n                  animate: { y: 0, opacity: 1, scale: 1 },\n                  transition: { type: \"spring\", stiffness: 400, damping: 22, delay: i * 0.12 },\n                  className: isDark ? \"text-emerald-400\" : \"text-emerald-600\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"bounce-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scale: 0, opacity: 0 },\n                  animate: { scale: [0, 1.3, 1], opacity: 1 },\n                  transition: { duration: 0.5, delay: i * 0.05 },\n                  className: isDark ? \"text-pink-400\" : \"text-pink-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            /* --- SCALE & ZOOM --- */\n            case \"scale-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scale: 0 },\n                  animate: { scale: 1 },\n                  transition: { type: \"spring\", stiffness: 450, damping: 22, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"scale-in-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scale: 0.4, opacity: 0 },\n                  animate: { scale: 1, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.12 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"scale-in-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { scale: 0.5, opacity: 0 },\n                  animate: { scale: 1, opacity: 1 },\n                  transition: { type: \"spring\", stiffness: 400, damping: 25 },\n                  className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"SCALE IN TEXT\"\n                },\n                keyIndex\n              );\n            case \"zoom-in-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { scale: 0.2, opacity: 0 },\n                  animate: { scale: 1, opacity: 1 },\n                  transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-extrabold text-2xl ${isDark ? \"text-amber-400\" : \"text-amber-600\"}`,\n                  children: \"ZOOM IN\"\n                },\n                keyIndex\n              );\n            case \"zoom-out-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { scale: 1.8, opacity: 0 },\n                  animate: { scale: 1, opacity: 1 },\n                  transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-extrabold text-2xl ${isDark ? \"text-amber-400\" : \"text-amber-600\"}`,\n                  children: \"ZOOM OUT\"\n                },\n                keyIndex\n              );\n            /* --- 3D & ROTATE --- */\n            case \"flip-y-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl [perspective:1000px]\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { rotateY: 90, opacity: 0 },\n                  animate: { rotateY: 0, opacity: 1 },\n                  transition: { duration: 0.5, delay: i * 0.05 },\n                  className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"flip-x-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl [perspective:1000px]\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { rotateX: 90, opacity: 0 },\n                  animate: { rotateX: 0, opacity: 1 },\n                  transition: { duration: 0.5, delay: i * 0.05 },\n                  className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"rotate-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { rotate: -45, opacity: 0, scale: 0.5 },\n                  animate: { rotate: 0, opacity: 1, scale: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"swing-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl [perspective:800px]\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { rotateX: -90, opacity: 0 },\n                  animate: { rotateX: 0, opacity: 1 },\n                  transition: { type: \"spring\", stiffness: 350, damping: 18, delay: i * 0.12 },\n                  className: isDark ? \"text-purple-400\" : \"text-purple-600\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            /* --- DISTORTION & SPACING --- */\n            case \"stretch-x-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scaleX: 2.5, opacity: 0 },\n                  animate: { scaleX: 1, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"stretch-y-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scaleY: 2.5, opacity: 0 },\n                  animate: { scaleY: 1, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"skew-x-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { skewX: -30, opacity: 0 },\n                  animate: { skewX: 0, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"tracking-in-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { letterSpacing: \"0.6em\", opacity: 0 },\n                  animate: { letterSpacing: \"0.05em\", opacity: 1 },\n                  transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-black text-xl uppercase ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"TRACKING IN\"\n                },\n                keyIndex\n              );\n            case \"tracking-out-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { letterSpacing: \"-0.2em\", opacity: 0 },\n                  animate: { letterSpacing: \"0.1em\", opacity: 1 },\n                  transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-black text-xl uppercase ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"TRACKING OUT\"\n                },\n                keyIndex\n              );\n            /* --- HOVER & INTERACTIVE --- */\n            case \"spring-text\":\n            case \"hover-lift-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl cursor-pointer\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  whileHover: { y: -8, scale: 1.2, color: \"#6366f1\" },\n                  transition: { type: \"spring\", stiffness: 500, damping: 15 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) });\n            case \"hover-lift-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl cursor-pointer\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  whileHover: { y: -6, color: \"#3b82f6\" },\n                  transition: { type: \"spring\", stiffness: 400, damping: 18 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) });\n            case \"hover-scale-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl cursor-pointer\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  whileHover: { scale: 1.4 },\n                  transition: { type: \"spring\", stiffness: 500, damping: 18 },\n                  className: isDark ? \"text-pink-400\" : \"text-pink-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) });\n            case \"hover-scale-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl cursor-pointer\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  whileHover: { scale: 1.25 },\n                  transition: { type: \"spring\", stiffness: 400, damping: 20 },\n                  className: isDark ? \"text-pink-400\" : \"text-pink-600\",\n                  children: word\n                },\n                i\n              )) });\n            /* --- CONTINUOUS --- */\n            case \"float-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  animate: { y: [0, -6, 0] },\n                  transition: { duration: 2, repeat: Infinity, delay: i * 0.1, ease: \"easeInOut\" },\n                  className: isDark ? \"text-cyan-400\" : \"text-cyan-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) });\n            case \"float-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  animate: { y: [0, -8, 0] },\n                  transition: { duration: 2.4, repeat: Infinity, delay: i * 0.2, ease: \"easeInOut\" },\n                  className: isDark ? \"text-cyan-400\" : \"text-cyan-600\",\n                  children: word\n                },\n                i\n              )) });\n            case \"pulse-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  animate: { opacity: [0.3, 1, 0.3] },\n                  transition: { duration: 1.5, repeat: Infinity, delay: i * 0.08 },\n                  className: isDark ? \"text-emerald-400\" : \"text-emerald-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) });\n            case \"pulse-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  animate: { opacity: [0.3, 1, 0.3] },\n                  transition: { duration: 1.8, repeat: Infinity, delay: i * 0.25 },\n                  className: isDark ? \"text-emerald-400\" : \"text-emerald-600\",\n                  children: word\n                },\n                i\n              )) });\n            case \"glow-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  animate: { textShadow: isDark ? [\"0 0 10px rgba(99,102,241,0.5)\", \"0 0 25px rgba(99,102,241,0.9)\", \"0 0 10px rgba(99,102,241,0.5)\"] : [\"0 0 10px rgba(79,70,229,0.3)\", \"0 0 20px rgba(79,70,229,0.6)\", \"0 0 10px rgba(79,70,229,0.3)\"] },\n                  transition: { duration: 2, repeat: Infinity },\n                  className: `font-black text-3xl tracking-tight ${isDark ? \"text-indigo-300\" : \"text-indigo-600\"}`,\n                  children: \"GLOW TEXT\"\n                }\n              );\n            default:\n              return /* @__PURE__ */ jsx(\"div\", { className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`, children: config.label });\n          }\n        })() }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity p-1.5 rounded-full bg-black/20 text-white/70\", children: /* @__PURE__ */ jsx(RefreshCw, { className: \"w-3.5 h-3.5\" }) })\n      ]\n    }\n  );\n};\n\n// glow-text.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nfunction MovaComponent({ theme = \"dark\" }) {\n  return /* @__PURE__ */ jsx2(AnimatedText, { theme, config: { \"id\": \"txt-glow-text\", \"label\": \"Glow Text\", \"interactionType\": \"glow-text\", \"description\": \"Text glows with soft aura ambient light.\", \"cliCommand\": \"npx @mova-ui/react add glow-text\", \"category\": \"Continuous\" } });\n}\nexport {\n  MovaComponent as default\n};\n"
+}

package/registry/gooey-popover.json

@@ -0,0 +1,18 @@
+{
+  "id": "gooey-popover",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "gooey-popover.tsx",
+  "sourcePath": "ui/patterns/gooey-popover.tsx",
+  "registryFile": "gooey-popover.json",
+  "exports": [
+    "GooeyPopover",
+    "GooeyPopoverProps"
+  ],
+  "dependencies": [
+    "gsap"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "content": "\"use client\";\n\"use client\";\n\n/**\n * Adapted from SmoothUI's Gooey Popover component.\n * Source: https://github.com/educlopez/smoothui/blob/main/packages/smoothui/components/gooey-popover/index.tsx\n * Example: https://smoothui.dev/docs/components/gooey-popover\n * License: MIT; see ./smoothui.LICENSE.\n * Mova adaptation: the class helper and outside-click hook are inlined so this file is standalone.\n */\n\nimport React from \"react\";\nimport gsap from \"gsap\";\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\";\nimport type { ReactNode, RefObject } from \"react\";\n\n\nfunction cn(...classes: Array<string | false | null | undefined>): string {\n  return classes.filter(Boolean).join(\" \");\n}\n\ntype ClickOutsideEventType =\n  | \"mousedown\"\n  | \"mouseup\"\n  | \"touchstart\"\n  | \"touchend\"\n  | \"focusin\"\n  | \"focusout\";\n\nfunction useClickOutside<T extends HTMLElement = HTMLElement>(\n  ref: RefObject<T | null> | RefObject<T | null>[],\n  handler: (event: Event) => void,\n  eventType: ClickOutsideEventType = \"mousedown\"\n): void {\n  useEffect(() => {\n    function callback(event: Event) {\n      const target = event.target as Node;\n      if (!target?.isConnected) return;\n\n      const isOutside = Array.isArray(ref)\n        ? ref\n            .filter((item) => Boolean(item.current))\n            .every((item) => item.current && !item.current.contains(target))\n        : ref.current && !ref.current.contains(target);\n\n      if (isOutside) handler(event);\n    }\n\n    window.addEventListener(eventType, callback);\n    return () => window.removeEventListener(eventType, callback);\n  }, [ref, handler, eventType]);\n}\n\nconst MEASURE_DELAY_SHORT = 100;\nconst MEASURE_DELAY_LONG = 500;\nconst DEFAULT_TRIGGER_SIZE = 44;\nconst DEFAULT_CONTENT_WIDTH = 240;\nconst DEFAULT_SIDE_OFFSET = 24;\nconst DEFAULT_SPEED = 0.25;\nconst GOO_STD_DEVIATION = 10;\nconst GOO_MATRIX_ALPHA_MULTIPLIER = 24;\nconst GOO_MATRIX_ALPHA_OFFSET = -10;\nconst CONTENT_BORDER_RADIUS = 18;\n\nexport type GooeyPopoverProps = {\n  children: ReactNode;\n  trigger?: ReactNode;\n  triggerSize?: number;\n  isOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  side?: \"top\" | \"bottom\";\n  sideOffset?: number;\n  contentWidth?: number;\n  speed?: number;\n  bgClassName?: string;\n  contentClassName?: string;\n  className?: string;\n};\n\nexport default function GooeyPopover({\n  children,\n  trigger,\n  triggerSize = DEFAULT_TRIGGER_SIZE,\n  isOpen: controlledIsOpen,\n  onOpenChange,\n  side = \"top\",\n  sideOffset = DEFAULT_SIDE_OFFSET,\n  contentWidth = DEFAULT_CONTENT_WIDTH,\n  speed = DEFAULT_SPEED,\n  bgClassName = \"bg-neutral-900\",\n  contentClassName,\n  className,\n}: GooeyPopoverProps) {\n  const filterId = useId();\n  const isControlled = controlledIsOpen !== undefined;\n  const [internalIsOpen, setInternalIsOpen] = useState(false);\n  const isOpen = isControlled ? controlledIsOpen : internalIsOpen;\n  const [isVisible, setIsVisible] = useState(false);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const measureRef = useRef<HTMLDivElement>(null);\n  const filteredContentRef = useRef<HTMLDivElement>(null);\n  const unfilteredContentRef = useRef<HTMLDivElement>(null);\n  const innerContentRef = useRef<HTMLDivElement>(null);\n  const timelineRef = useRef<gsap.core.Timeline | null>(null);\n  const [contentHeight, setContentHeight] = useState(0);\n  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);\n\n  useEffect(() => {\n    const mq = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n    setPrefersReducedMotion(mq.matches);\n    const handler = (e: MediaQueryListEvent) => {\n      setPrefersReducedMotion(e.matches);\n    };\n    mq.addEventListener(\"change\", handler);\n    return () => mq.removeEventListener(\"change\", handler);\n  }, []);\n\n  const setIsOpen = useCallback(\n    (open: boolean) => {\n      if (!isControlled) {\n        setInternalIsOpen(open);\n      }\n      onOpenChange?.(open);\n    },\n    [isControlled, onOpenChange]\n  );\n\n  const handleClose = useCallback(() => {\n    if (isOpen) {\n      setIsOpen(false);\n    }\n  }, [isOpen, setIsOpen]);\n\n  useClickOutside(containerRef, handleClose);\n\n  // Escape key to close\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\" && isOpen) {\n        setIsOpen(false);\n      }\n    };\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => window.removeEventListener(\"keydown\", handleKeyDown);\n  }, [isOpen, setIsOpen]);\n\n  // Measure content height. The immediate and next-frame reads avoid a slow first open\n  // when the hidden measurement node has not completed layout yet; delayed reads keep\n  // the original font/layout fallback for content that settles asynchronously.\n  useEffect(() => {\n    const measureHeight = () => {\n      if (measureRef.current) {\n        const height = measureRef.current.scrollHeight;\n        if (height > 0) {\n          setContentHeight(height);\n        }\n      }\n    };\n\n    measureHeight();\n    const frameId = requestAnimationFrame(measureHeight);\n    const timeoutId = setTimeout(measureHeight, MEASURE_DELAY_SHORT);\n    const timeoutId2 = setTimeout(measureHeight, MEASURE_DELAY_LONG);\n    return () => {\n      cancelAnimationFrame(frameId);\n      clearTimeout(timeoutId);\n      clearTimeout(timeoutId2);\n    };\n  }, [children, contentWidth]);\n\n  const triggerRadius = triggerSize / 2;\n  // Position content so its edge clears the trigger with sideOffset gap\n  const translateY =\n    side === \"top\" ? -(contentHeight + sideOffset) : triggerSize + sideOffset;\n  const contentLeft = triggerRadius - contentWidth / 2;\n\n  // GSAP animations\n  useEffect(() => {\n    if (contentHeight === 0) {\n      return;\n    }\n\n    // Kill any running timeline\n    if (timelineRef.current) {\n      timelineRef.current.kill();\n    }\n\n    const filteredTarget = filteredContentRef.current;\n    const unfilteredTarget = unfilteredContentRef.current;\n    const innerTarget = innerContentRef.current;\n\n    if (!(unfilteredTarget && innerTarget)) {\n      return;\n    }\n\n    if (prefersReducedMotion) {\n      if (isOpen) {\n        setIsVisible(true);\n        gsap.set(unfilteredTarget, {\n          borderRadius: CONTENT_BORDER_RADIUS,\n          height: contentHeight,\n          opacity: 1,\n          width: contentWidth,\n          x: contentLeft,\n          y: translateY,\n        });\n        gsap.set(innerTarget, { opacity: 1, y: 0 });\n      } else {\n        gsap.set(unfilteredTarget, {\n          borderRadius: triggerRadius,\n          height: triggerSize,\n          opacity: 0,\n          width: triggerSize,\n          x: 0,\n          y: 0,\n        });\n        gsap.set(innerTarget, { opacity: 0, y: 0 });\n        setIsVisible(false);\n      }\n      return;\n    }\n\n    if (isOpen) {\n      setIsVisible(true);\n\n      // Start both content shapes as circles at trigger position\n      const startProps = {\n        borderRadius: triggerRadius,\n        height: triggerSize,\n        opacity: 1,\n        width: triggerSize,\n        x: 0,\n        y: 0,\n      };\n      if (filteredTarget) {\n        gsap.set(filteredTarget, startProps);\n      }\n      gsap.set(unfilteredTarget, startProps);\n      gsap.set(innerTarget, { opacity: 0, y: 16 });\n\n      const tl = gsap.timeline();\n\n      // Filtered content: morph to rectangle with borderRadius=0\n      // The goo filter softens the edges naturally\n      if (filteredTarget) {\n        tl.to(\n          filteredTarget,\n          {\n            borderRadius: 0,\n            duration: speed,\n            ease: \"power1.in\",\n            height: contentHeight,\n            width: contentWidth,\n            x: contentLeft,\n            y: translateY,\n          },\n          0\n        );\n      }\n\n      // Unfiltered content: morph to rectangle with rounded corners\n      tl.to(\n        unfilteredTarget,\n        {\n          borderRadius: CONTENT_BORDER_RADIUS,\n          duration: speed,\n          ease: \"power1.in\",\n          height: contentHeight,\n          width: contentWidth,\n          x: contentLeft,\n          y: translateY,\n        },\n        0\n      );\n\n      // Content text fade in (overlapping with shape morph)\n      tl.to(\n        innerTarget,\n        {\n          duration: speed * 0.75,\n          ease: \"power1.out\",\n          opacity: 1,\n          y: 0,\n        },\n        speed * 0.575\n      );\n\n      timelineRef.current = tl;\n    } else {\n      // Content text fade out first\n      const tl = gsap.timeline({\n        onComplete: () => {\n          setIsVisible(false);\n        },\n      });\n\n      tl.to(innerTarget, {\n        duration: speed * 0.4,\n        ease: \"power1.in\",\n        opacity: 0,\n        y: 8,\n      });\n\n      // Shape morph back: rectangle → circle\n      const targets = [filteredTarget, unfilteredTarget].filter(Boolean);\n      tl.to(\n        targets,\n        {\n          borderRadius: triggerRadius,\n          duration: speed,\n          ease: \"power1.in\",\n          height: triggerSize,\n          width: triggerSize,\n          x: 0,\n          y: 0,\n        },\n        speed * 0.2\n      );\n\n      // Fade out at the end\n      tl.to(\n        targets,\n        {\n          duration: speed * 0.3,\n          ease: \"power1.in\",\n          opacity: 0,\n        },\n        `-=${speed * 0.3}`\n      );\n\n      timelineRef.current = tl;\n    }\n\n    return () => {\n      if (timelineRef.current) {\n        timelineRef.current.kill();\n      }\n    };\n  }, [\n    isOpen,\n    contentHeight,\n    contentWidth,\n    triggerSize,\n    triggerRadius,\n    contentLeft,\n    translateY,\n    speed,\n    prefersReducedMotion,\n  ]);\n\n  const defaultTriggerIcon = (\n    <svg\n      fill=\"none\"\n      height={20}\n      stroke=\"currentColor\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      viewBox=\"0 0 24 24\"\n      width={20}\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <line x1=\"12\" x2=\"12\" y1=\"5\" y2=\"19\" />\n      <line x1=\"5\" x2=\"19\" y1=\"12\" y2=\"12\" />\n    </svg>\n  );\n\n  return (\n    <div className={cn(\"relative inline-flex\", className)} ref={containerRef}>\n      {/* SVG goo filter definition */}\n      <svg\n        aria-hidden=\"true\"\n        className=\"absolute\"\n        style={{ height: 0, width: 0 }}\n      >\n        <defs>\n          <filter id={filterId}>\n            <feGaussianBlur\n              in=\"SourceGraphic\"\n              result=\"blur\"\n              stdDeviation={GOO_STD_DEVIATION}\n            />\n            <feColorMatrix\n              in=\"blur\"\n              result=\"goo\"\n              type=\"matrix\"\n              values={`1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 ${String(GOO_MATRIX_ALPHA_MULTIPLIER)} ${String(GOO_MATRIX_ALPHA_OFFSET)}`}\n            />\n            <feComposite in=\"SourceGraphic\" in2=\"goo\" operator=\"atop\" />\n          </filter>\n        </defs>\n      </svg>\n\n      {/* Hidden measurement div */}\n      <div\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute\"\n        ref={measureRef}\n        style={{\n          left: -9999,\n          position: \"absolute\",\n          top: -9999,\n          visibility: \"hidden\",\n          width: contentWidth,\n        }}\n      >\n        <div className={cn(\"p-4\", contentClassName)}>{children}</div>\n      </div>\n\n      {/* Filtered layer: SVG goo filter creates liquid bridge between blob and content */}\n      {!prefersReducedMotion && (isOpen || isVisible) && (\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-0\"\n          style={{ filter: `url(#${filterId})` }}\n        >\n          {/* Blob: circle at trigger position — stays put while content morphs away */}\n          <div\n            className={cn(\"absolute rounded-full\", bgClassName)}\n            style={{\n              height: triggerSize,\n              left: 0,\n              top: 0,\n              width: triggerSize,\n            }}\n          />\n\n          {/* Content shape: morphs from circle to rectangle (borderRadius=0, goo softens edges) */}\n          <div\n            className={cn(\"absolute\", bgClassName)}\n            ref={filteredContentRef}\n            style={{\n              borderRadius: triggerRadius,\n              height: triggerSize,\n              left: 0,\n              opacity: 0,\n              top: 0,\n              width: triggerSize,\n            }}\n          />\n        </div>\n      )}\n\n      {/* Trigger button (z-10, sits on top of filtered blob) */}\n      <button\n        aria-expanded={isOpen}\n        aria-haspopup=\"dialog\"\n        className={cn(\n          \"relative z-10 flex cursor-pointer items-center justify-center rounded-full text-white transition-colors\",\n          bgClassName\n        )}\n        onClick={() => setIsOpen(!isOpen)}\n        style={{\n          height: triggerSize,\n          width: triggerSize,\n        }}\n        type=\"button\"\n      >\n        {trigger ?? defaultTriggerIcon}\n      </button>\n\n      {/* Unfiltered content panel (z-10, clean edges, actual text) */}\n      {isOpen || isVisible ? (\n        <div\n          className={cn(\n            \"absolute z-10 overflow-hidden text-white\",\n            bgClassName\n          )}\n          ref={unfilteredContentRef}\n          role=\"dialog\"\n          style={{\n            borderRadius: triggerRadius,\n            height: triggerSize,\n            left: 0,\n            opacity: 0,\n            top: 0,\n            width: triggerSize,\n          }}\n        >\n          <div\n            className={cn(\"p-4\", contentClassName)}\n            ref={innerContentRef}\n            style={{ opacity: 0, transform: \"translateY(16px)\" }}\n          >\n            {children}\n          </div>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"
+}

package/registry/gradient-arc.json

@@ -1,8 +1,17 @@
 {
   "id": "gradient-arc",
+  "tier": "free",
+  "version": "0.4.1",
   "file": "gradient-arc.tsx",
+  "sourcePath": "ui/loading/gradient-arc.tsx",
+  "registryFile": "gradient-arc.json",
+  "exports": [
+    "GradientArc"
+  ],
   "dependencies": [
     "framer-motion"
   ],
+  "license": "MIT",
+  "previewMode": "client",
   "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const GradientArc = () => {\n  return (\n    <div className=\"relative w-10 h-10 flex items-center justify-center\">\n      <motion.div\n        className=\"w-10 h-10 rounded-full\"\n        style={{\n          background: \"linear-gradient(135deg, #00f2fe 0%, #4facfe 100%)\",\n          maskImage: \"radial-gradient(transparent 55%, black 60%)\",\n          WebkitMaskImage: \"radial-gradient(transparent 55%, black 60%)\",\n        }}\n        animate={{ rotate: 360 }}\n        transition={{ duration: 1.2, repeat: Infinity, ease: \"linear\" }}\n      />\n    </div>\n  );\n};\n"
 }

package/registry/gradient-shimmer.json

@@ -0,0 +1,18 @@
+{
+  "id": "gradient-shimmer",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "gradient-shimmer.tsx",
+  "registryFile": "gradient-shimmer.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './gradient-shimmer';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/gradient-shimmer.tsx\nimport { motion } from \"framer-motion\";\n\n// src/components/css-animations/ScrambleHover.tsx\nimport { useState, useEffect, useRef, useCallback } from \"react\";\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nfunction ScrambleHover({\n  text,\n  scrambleSpeed = 40,\n  maxIterations = 10,\n  sequential = false,\n  revealDirection = \"start\",\n  useOriginalCharsOnly = true,\n  className = \"\",\n  characters = \"ABCDEFGHIJKLMNO PQRSTUVWXYZ abcdefghijklmno pqrstuvwxyz 0123456789 !@#$%^&*()_+\",\n  scrambledClassName = \"\"\n}) {\n  const [displayText, setDisplayText] = useState(text);\n  const [isScrambling, setIsScrambling] = useState(false);\n  const intervalRef = useRef(null);\n  const triggerScramble = useCallback(() => {\n    let iteration = 0;\n    const maxIterationsTotal = sequential ? revealDirection === \"center\" ? Math.ceil(text.length / 2) : text.length : maxIterations;\n    setIsScrambling(true);\n    if (intervalRef.current) {\n      clearInterval(intervalRef.current);\n    }\n    intervalRef.current = window.setInterval(() => {\n      setDisplayText(() => {\n        const nextText = text.split(\"\").map((char, index) => {\n          if (char === \" \") return \" \";\n          if (sequential) {\n            let revealed = false;\n            if (revealDirection === \"start\") {\n              revealed = index < iteration;\n            } else if (revealDirection === \"end\") {\n              revealed = index >= text.length - iteration;\n            } else if (revealDirection === \"center\") {\n              const center = Math.floor(text.length / 2);\n              revealed = Math.abs(index - center) <= iteration;\n            }\n            if (revealed) return text[index];\n          } else {\n            if (iteration >= maxIterations) {\n              return text[index];\n            }\n          }\n          if (useOriginalCharsOnly) {\n            const availableChars = text.replace(/\\s/g, \"\");\n            const randomChar = availableChars[Math.floor(Math.random() * availableChars.length)];\n            return randomChar || text[index];\n          } else {\n            return characters[Math.floor(Math.random() * characters.length)];\n          }\n        }).join(\"\");\n        return nextText;\n      });\n      iteration++;\n      if (!sequential && iteration > maxIterations || sequential && iteration >= maxIterationsTotal) {\n        if (intervalRef.current) clearInterval(intervalRef.current);\n        setDisplayText(text);\n        setIsScrambling(false);\n      }\n    }, scrambleSpeed);\n  }, [text, scrambleSpeed, maxIterations, sequential, revealDirection, useOriginalCharsOnly, characters]);\n  useEffect(() => {\n    return () => {\n      if (intervalRef.current) clearInterval(intervalRef.current);\n    };\n  }, []);\n  return /* @__PURE__ */ jsx(\n    \"span\",\n    {\n      className: `cursor-pointer transition-colors duration-150 ${isScrambling && scrambledClassName ? scrambledClassName : className}`,\n      onMouseEnter: triggerScramble,\n      children: displayText\n    }\n  );\n}\n\n// src/components/css-animations/FocusBlur.tsx\nimport { jsx as jsx2, jsxs as jsxs2 } from \"react/jsx-runtime\";\nfunction FocusBlurDemo({ theme = \"dark\" }) {\n  return /* @__PURE__ */ jsxs2(\"div\", { className: \"flex w-full flex-col items-center gap-6 font-sans\", children: [\n    /* @__PURE__ */ jsx2(\"style\", { children: `\n        .blur-group:has(.blur-target:hover) .blur-target:not(:hover) {\n          filter: blur(4px);\n          opacity: 0.35;\n        }\n        .blur-target {\n          transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);\n        }\n      ` }),\n    /* @__PURE__ */ jsxs2(\"div\", { className: `w-full rounded-[24px] p-6 sm:p-8 border flex flex-col items-center text-center gap-4 transition-colors duration-300 ${theme === \"dark\" ? \"bg-[#181818] border-white/10\" : \"bg-white border-neutral-200 shadow-sm\"}`, children: [\n      /* @__PURE__ */ jsx2(\"span\", { className: \"text-[11px] font-bold tracking-widest uppercase text-indigo-400\", children: \"CSS :has() Parent Selector\" }),\n      /* @__PURE__ */ jsxs2(\"div\", { className: \"flex flex-wrap justify-center gap-x-3 text-xl sm:text-3xl font-bold blur-group cursor-default py-4\", children: [\n        /* @__PURE__ */ jsx2(\"span\", { className: theme === \"dark\" ? \"text-neutral-500\" : \"text-neutral-400\", children: \"Explore\" }),\n        [\"Animations,\", \"Transitions,\", \"Physics,\", \"Micro-UI\"].map((word) => /* @__PURE__ */ jsx2(\n          \"span\",\n          {\n            className: `blur-target cursor-pointer hover:text-indigo-400 transition-colors ${theme === \"dark\" ? \"text-white\" : \"text-neutral-900\"}`,\n            children: word\n          },\n          word\n        ))\n      ] }),\n      /* @__PURE__ */ jsx2(\"p\", { className: `text-xs ${theme === \"dark\" ? \"text-neutral-400\" : \"text-neutral-500\"}`, children: \"Hovering over any word automatically blurs and softens its peer sibling elements using pure CSS.\" })\n    ] })\n  ] });\n}\n\n// src/components/gradient-shimmer.tsx\nimport { jsx as jsx3, jsxs as jsxs3 } from \"react/jsx-runtime\";\nfunction MovaComponent({ theme = \"dark\" }) {\n  const previewLoopTrigger = 0;\n  const renderLiveTextEffect = (id) => {\n    switch (id) {\n      case \"scramble-text\":\n        return /* @__PURE__ */ jsx3(\"div\", { className: \"w-full flex items-center justify-center px-4 text-center\", children: /* @__PURE__ */ jsx3(\"div\", { className: `text-base sm:text-lg font-bold font-mono ${theme === \"dark\" ? \"text-indigo-400\" : \"text-indigo-600\"}`, children: /* @__PURE__ */ jsx3(ScrambleHover, { text: \"DECODE_REACT\" }) }) });\n      case \"focus-blur\":\n        return /* @__PURE__ */ jsx3(\"div\", { className: \"w-full flex items-center justify-center\", children: /* @__PURE__ */ jsx3(FocusBlurDemo, { theme }) });\n      case \"wave-reveal\":\n        return /* @__PURE__ */ jsx3(\"div\", { className: \"flex items-center justify-center gap-1 font-bold text-base select-none\", children: \"ELEVATE\".split(\"\").map((char, i) => /* @__PURE__ */ jsx3(\n          motion.span,\n          {\n            animate: { y: [0, -8, 0], color: theme === \"dark\" ? [\"#fff\", \"#818cf8\", \"#fff\"] : [\"#111\", \"#6366f1\", \"#111\"] },\n            transition: { repeat: Infinity, duration: 1.6, delay: i * 0.12 },\n            className: \"cursor-pointer\",\n            children: char\n          },\n          i\n        )) });\n      case \"gradient-shimmer\":\n        return /* @__PURE__ */ jsxs3(\"div\", { className: \"flex items-center justify-center\", children: [\n          /* @__PURE__ */ jsx3(\"style\", { children: `\n              @keyframes text_shimmer {\n                0% { background-position: -200% center; }\n                100% { background-position: 200% center; }\n              }\n              .shimmer-text {\n                background: linear-gradient(90deg, ${theme === \"dark\" ? \"#555 0%, #fff 50%, #555 100%\" : \"#888 0%, #000 50%, #888 100%\"});\n                background-size: 200% auto;\n                color: transparent;\n                -webkit-background-clip: text;\n                background-clip: text;\n                animation: text_shimmer 3s linear infinite;\n              }\n            ` }),\n          /* @__PURE__ */ jsx3(\"span\", { className: \"text-xl sm:text-2xl font-black tracking-widest shimmer-text select-none uppercase\", children: \"SHIMMER_FX\" })\n        ] });\n      case \"typewriter-cursor\":\n        return /* @__PURE__ */ jsxs3(\"div\", { className: \"flex items-center justify-center font-mono font-bold text-sm sm:text-base\", children: [\n          /* @__PURE__ */ jsx3(\"style\", { children: `\n              @keyframes blink_cursor {\n                0%, 100% { opacity: 1; }\n                50% { opacity: 0; }\n              }\n              .blink-bar { animation: blink_cursor 0.9s infinite; }\n            ` }),\n          /* @__PURE__ */ jsx3(\"span\", { className: theme === \"dark\" ? \"text-neutral-200\" : \"text-neutral-900\", children: \"npx @mova-ui/react add\" }),\n          /* @__PURE__ */ jsx3(\"span\", { className: `w-2 h-4 ml-1 blink-bar ${theme === \"dark\" ? \"bg-indigo-400\" : \"bg-indigo-600\"}` })\n        ] });\n      case \"perspective-flip\":\n        return /* @__PURE__ */ jsx3(\"div\", { className: \"flex items-center justify-center h-8 overflow-hidden select-none font-bold text-sm sm:text-base\", children: /* @__PURE__ */ jsxs3(\n          motion.div,\n          {\n            animate: { y: [0, -32, -64, 0] },\n            transition: { repeat: Infinity, duration: 4.5, times: [0, 0.33, 0.66, 1], ease: \"easeInOut\" },\n            className: \"flex flex-col items-center gap-4 text-center\",\n            children: [\n              /* @__PURE__ */ jsx3(\"span\", { className: theme === \"dark\" ? \"text-indigo-400\" : \"text-indigo-600\", children: \"FAST\" }),\n              /* @__PURE__ */ jsx3(\"span\", { className: theme === \"dark\" ? \"text-emerald-400\" : \"text-emerald-600\", children: \"FLUID\" }),\n              /* @__PURE__ */ jsx3(\"span\", { className: theme === \"dark\" ? \"text-rose-400\" : \"text-rose-600\", children: \"PREMIUM\" })\n            ]\n          }\n        ) });\n      default:\n        return null;\n    }\n  };\n  return renderLiveTextEffect(\"gradient-shimmer\");\n}\nexport {\n  MovaComponent as default\n};\n"
+}

package/registry/grid-dots.json

@@ -1,8 +1,17 @@
 {
   "id": "grid-dots",
+  "tier": "free",
+  "version": "0.4.1",
   "file": "grid-dots.tsx",
+  "sourcePath": "ui/loading/grid-dots.tsx",
+  "registryFile": "grid-dots.json",
+  "exports": [
+    "GridDots"
+  ],
   "dependencies": [
     "framer-motion"
   ],
+  "license": "MIT",
+  "previewMode": "client",
   "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const GridDots = () => {\n  return (\n    <div className=\"grid grid-cols-3 gap-1.5\">\n      {[0, 1, 2, 3, 4, 5, 6, 7, 8].map((i) => (\n        <motion.div\n          key={i}\n          className=\"w-2.5 h-2.5 bg-zinc-800 dark:bg-white rounded-full\"\n          animate={{ scale: [1, 0.5, 1], opacity: [1, 0.3, 1] }}\n          transition={{ duration: 1.5, repeat: Infinity, delay: (i % 3) * 0.2 + Math.floor(i / 3) * 0.2, ease: \"easeInOut\" }}\n        />\n      ))}\n    </div>\n  );\n};\n"
 }

package/registry/haptic-ring.json

@@ -1,8 +1,17 @@
 {
   "id": "haptic-ring",
+  "tier": "free",
+  "version": "0.4.1",
   "file": "haptic-ring.tsx",
+  "sourcePath": "ui/loading/haptic-ring.tsx",
+  "registryFile": "haptic-ring.json",
+  "exports": [
+    "HapticRing"
+  ],
   "dependencies": [
     "framer-motion"
   ],
+  "license": "MIT",
+  "previewMode": "client",
   "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const HapticRing = () => (\n  <motion.div\n    className=\"w-10 h-10 border-[3px] border-zinc-200 dark:border-zinc-800 rounded-full border-t-zinc-800 dark:border-t-white\"\n    animate={{ rotate: [0, 90, 180, 270, 360] }}\n    transition={{ duration: 2, repeat: Infinity, type: \"spring\", bounce: 0.4 }}\n  />\n);\n"
 }

package/registry/heartbeat.json

@@ -1,8 +1,17 @@
 {
   "id": "heartbeat",
+  "tier": "free",
+  "version": "0.4.1",
   "file": "heartbeat.tsx",
+  "sourcePath": "ui/loading/heartbeat.tsx",
+  "registryFile": "heartbeat.json",
+  "exports": [
+    "Heartbeat"
+  ],
   "dependencies": [
     "framer-motion"
   ],
+  "license": "MIT",
+  "previewMode": "client",
   "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const Heartbeat = () => {\n  return (\n    <svg className=\"w-16 h-8 overflow-visible\" viewBox=\"0 0 64 32\">\n      <motion.polyline\n        points=\"0,16 16,16 24,4 32,28 40,16 64,16\"\n        className=\"stroke-zinc-800 dark:stroke-white fill-none\"\n        strokeWidth=\"2\"\n        strokeLinejoin=\"round\"\n        strokeLinecap=\"round\"\n        strokeDasharray=\"100\"\n        animate={{ strokeDashoffset: [100, -100] }}\n        transition={{ duration: 2, repeat: Infinity, ease: \"linear\" }}\n      />\n    </svg>\n  );\n};\n"
 }

package/registry/hex-lattice-draw.json

@@ -0,0 +1,15 @@
+{
+  "id": "hex-lattice-draw",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "hex-lattice-draw.tsx",
+  "sourcePath": "components/css-animations/whimsical/RedesignedPhysicsTrios.tsx",
+  "registryFile": "hex-lattice-draw.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [],
+  "license": "MIT",
+  "previewMode": "client",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n\"use client\";\n\n// catalog/components/css-animations/whimsical/RedesignedPhysicsTrios.tsx\nimport { useState as useState2 } from \"react\";\n\n// catalog/hooks/useLoopFlg.ts\nimport { useState, useEffect } from \"react\";\nfunction useLoopFlg(enable = true, interval = 2e3) {\n  const [flag, setFlag] = useState(0);\n  useEffect(() => {\n    if (!enable) return;\n    const timer = setInterval(() => {\n      setFlag((prev) => prev + 1);\n    }, interval);\n    return () => clearInterval(timer);\n  }, [enable, interval]);\n  return flag;\n}\n\n// catalog/components/css-animations/whimsical/RedesignedPhysicsTrios.tsx\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nfunction HexagonLatticeDraw({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 3e3);\n  const [hoverKey, setHoverKey] = useState2(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx(\"style\", { children: `\n        @keyframes hex_draw_loop {\n          0% { stroke-dashoffset: 300; }\n          50% { stroke-dashoffset: 0; }\n          80%, 100% { stroke-dashoffset: -300; }\n        }\n        .hex-path {\n          stroke-dasharray: 300;\n          animation: hex_draw_loop 3s ease-in-out infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"relative w-[75px] h-[75px] flex items-center justify-center\", children: /* @__PURE__ */ jsx(\"svg\", { viewBox: \"0 0 100 100\", className: \"w-full h-full\", fill: \"none\", stroke: theme === \"dark\" ? \"#60a5fa\" : \"#2563eb\", strokeWidth: \"5\", strokeLinecap: \"round\", strokeLinejoin: \"round\", children: /* @__PURE__ */ jsx(\"polygon\", { className: \"hex-path\", points: \"50,10 85,30 85,70 50,90 15,70 15,30\" }) }) }, activeKey)\n      ]\n    }\n  );\n}\n\n// catalog/registry-bindings/hex-lattice-draw.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nvar PRESET_PROPS = { \"loop\": true, \"trigger\": \"hover\", \"theme\": \"dark\" };\nfunction MovaComponentAdapter(props = {}) {\n  return /* @__PURE__ */ jsx2(HexagonLatticeDraw, { ...PRESET_PROPS, ...props });\n}\nexport {\n  MovaComponentAdapter as default\n};\n"
+}

package/registry/hexagon-spinner.json

@@ -1,8 +1,17 @@
 {
   "id": "hexagon-spinner",
+  "tier": "free",
+  "version": "0.4.1",
   "file": "hexagon-spinner.tsx",
+  "sourcePath": "ui/loading/hexagon-spinner.tsx",
+  "registryFile": "hexagon-spinner.json",
+  "exports": [
+    "HexagonSpinner"
+  ],
   "dependencies": [
     "framer-motion"
   ],
+  "license": "MIT",
+  "previewMode": "client",
   "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const HexagonSpinner = () => {\n  return (\n    <svg className=\"w-10 h-10\" viewBox=\"0 0 50 50\">\n      <polygon points=\"25,5 45,15 45,35 25,45 5,35 5,15\" className=\"stroke-zinc-200 dark:stroke-zinc-800 fill-none\" strokeWidth=\"4\" />\n      <motion.polygon\n        points=\"25,5 45,15 45,35 25,45 5,35 5,15\"\n        className=\"stroke-zinc-800 dark:stroke-white fill-none\"\n        strokeWidth=\"4\"\n        strokeLinecap=\"round\"\n        strokeDasharray=\"120\"\n        animate={{ strokeDashoffset: [120, -120] }}\n        transition={{ duration: 2, repeat: Infinity, ease: \"linear\" }}\n      />\n    </svg>\n  );\n};\n"
 }

package/registry/hourglass.json

@@ -1,8 +1,17 @@
 {
   "id": "hourglass",
+  "tier": "free",
+  "version": "0.4.1",
   "file": "hourglass.tsx",
+  "sourcePath": "ui/loading/hourglass.tsx",
+  "registryFile": "hourglass.json",
+  "exports": [
+    "Hourglass"
+  ],
   "dependencies": [
     "framer-motion"
   ],
+  "license": "MIT",
+  "previewMode": "client",
   "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const Hourglass = () => {\n  return (\n    <motion.div\n      className=\"w-8 h-10 flex flex-col items-center justify-between\"\n      animate={{ rotate: [0, 180, 180, 360, 360] }}\n      transition={{ duration: 3, repeat: Infinity, ease: \"easeInOut\" }}\n    >\n      <div className=\"w-8 h-0 border-t-[16px] border-t-zinc-800 dark:border-t-white border-l-[16px] border-l-transparent border-r-[16px] border-r-transparent origin-bottom\" />\n      <div className=\"w-8 h-0 border-b-[16px] border-b-zinc-800 dark:border-b-white border-l-[16px] border-l-transparent border-r-[16px] border-r-transparent origin-top\" />\n    </motion.div>\n  );\n};\n"
 }

package/registry/hover-lift-char.json

@@ -0,0 +1,19 @@
+{
+  "id": "hover-lift-char",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "hover-lift-char.tsx",
+  "registryFile": "hover-lift-char.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion",
+    "lucide-react"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './hover-lift-char';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/text/AnimatedText.tsx\nimport { useState } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { RefreshCw } from \"lucide-react\";\n\n// src/hooks/useWebHaptics.ts\nimport { useCallback } from \"react\";\nfunction useWebHaptics() {\n  const trigger = useCallback((type = \"light\") => {\n    if (typeof window === \"undefined\" || !window.navigator || !window.navigator.vibrate) {\n      return false;\n    }\n    try {\n      switch (type) {\n        case \"light\":\n          return window.navigator.vibrate(10);\n        case \"medium\":\n          return window.navigator.vibrate(25);\n        case \"heavy\":\n          return window.navigator.vibrate(50);\n        case \"success\":\n          return window.navigator.vibrate([15, 60, 15]);\n        case \"warning\":\n          return window.navigator.vibrate([30, 60, 30]);\n        case \"error\":\n          return window.navigator.vibrate([60, 60, 60, 60, 60]);\n        default:\n          return window.navigator.vibrate(type);\n      }\n    } catch (e) {\n      console.warn(\"Vibration API error:\", e);\n      return false;\n    }\n  }, []);\n  return { trigger };\n}\n\n// src/components/text/AnimatedText.tsx\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nvar AnimatedText = ({ config, theme }) => {\n  const [keyIndex, setKeyIndex] = useState(0);\n  const { trigger: triggerHaptic } = useWebHaptics();\n  const isDark = theme === \"dark\";\n  const replay = () => {\n    triggerHaptic(\"light\");\n    setKeyIndex((prev) => prev + 1);\n  };\n  const samplePhrase = \"MOVA UI\";\n  const sampleWords = [\"Design\", \"Motion\", \"Mova\"];\n  return /* @__PURE__ */ jsxs(\n    \"div\",\n    {\n      onClick: replay,\n      className: \"relative flex flex-col items-center justify-center w-full h-full cursor-pointer select-none px-4 group\",\n      title: \"Click to replay animation\",\n      children: [\n        /* @__PURE__ */ jsx(\"div\", { className: \"flex items-center justify-center w-full min-h-[60px] text-center\", children: (() => {\n          switch (config.interactionType) {\n            /* --- FEATURED --- */\n            case \"dia-text-reveal\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"relative overflow-hidden font-black text-2xl tracking-tighter\", children: /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { clipPath: \"polygon(0 0, 0 0, 0 100%, 0% 100%)\", filter: \"blur(8px)\" },\n                  animate: { clipPath: \"polygon(0 0, 100% 0, 100% 100%, 0 100%)\", filter: \"blur(0px)\" },\n                  transition: { duration: 0.85, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: \"DIA REVEAL\"\n                }\n              ) }, keyIndex);\n            /* --- REVEALS --- */\n            case \"blur-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { filter: \"blur(12px)\", opacity: 0, scale: 0.9 },\n                  animate: { filter: \"blur(0px)\", opacity: 1, scale: 1 },\n                  transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"BLUR REVEAL\"\n                },\n                keyIndex\n              );\n            case \"shimmer-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: `font-extrabold text-2xl bg-gradient-to-r ${isDark ? \"from-neutral-400 via-white to-neutral-400\" : \"from-neutral-600 via-black to-neutral-600\"} bg-clip-text text-transparent animate-pulse`, children: \"SHIMMER TEXT\" });\n            case \"typewriter-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex items-center font-mono text-lg font-bold\", children: /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { width: 0 },\n                  animate: { width: \"auto\" },\n                  transition: { duration: 1.2, ease: \"easeInOut\" },\n                  className: `overflow-hidden whitespace-nowrap border-r-2 ${isDark ? \"text-emerald-400 border-emerald-400\" : \"text-emerald-600 border-emerald-600\"}`,\n                  children: \"TYPEWRITER\"\n                }\n              ) }, keyIndex);\n            case \"reveal-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"relative overflow-hidden font-bold text-2xl\", children: /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { clipPath: \"inset(0 100% 0 0)\" },\n                  animate: { clipPath: \"inset(0 0 0 0)\" },\n                  transition: { duration: 0.75, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: \"CINEMATIC\"\n                }\n              ) }, keyIndex);\n            case \"fade-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { opacity: 0 },\n                  animate: { opacity: 1 },\n                  transition: { duration: 0.3, delay: i * 0.05 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"fade-in-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { opacity: 0 },\n                  animate: { opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.15 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"fade-in-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { opacity: 0 },\n                  animate: { opacity: 1 },\n                  transition: { duration: 0.8 },\n                  className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"FADE IN TEXT\"\n                },\n                keyIndex\n              );\n            case \"blur-up-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { opacity: 0, y: 15, filter: \"blur(8px)\" },\n                  animate: { opacity: 1, y: 0, filter: \"blur(0px)\" },\n                  transition: { duration: 0.5, delay: i * 0.12 },\n                  className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"blur-up-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { opacity: 0, y: 15, filter: \"blur(8px)\" },\n                  animate: { opacity: 1, y: 0, filter: \"blur(0px)\" },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            /* --- SLIDE & DROP --- */\n            case \"stagger-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: 20, opacity: 0 },\n                  animate: { y: 0, opacity: 1 },\n                  transition: { duration: 0.5, delay: i * 0.1, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-up-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: \"100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.4, delay: i * 0.04, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-up-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 overflow-hidden font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: \"100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.5, delay: i * 0.1, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-up-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"overflow-hidden\", children: /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { y: \"100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"SLIDE UP TEXT\"\n                }\n              ) }, keyIndex);\n            case \"slide-down-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: \"-100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.4, delay: i * 0.04, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-down-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 overflow-hidden font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: \"-100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.5, delay: i * 0.1, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-left-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { x: 40, opacity: 0 },\n                  animate: { x: 0, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-right-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { x: -40, opacity: 0 },\n                  animate: { x: 0, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"drop-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: -50, opacity: 0 },\n                  animate: { y: 0, opacity: 1 },\n                  transition: { type: \"spring\", stiffness: 500, damping: 25, delay: i * 0.04 },\n                  className: isDark ? \"text-cyan-400\" : \"text-cyan-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"rise-up-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: 30, opacity: 0, scale: 0.8 },\n                  animate: { y: 0, opacity: 1, scale: 1 },\n                  transition: { type: \"spring\", stiffness: 400, damping: 22, delay: i * 0.12 },\n                  className: isDark ? \"text-emerald-400\" : \"text-emerald-600\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"bounce-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scale: 0, opacity: 0 },\n                  animate: { scale: [0, 1.3, 1], opacity: 1 },\n                  transition: { duration: 0.5, delay: i * 0.05 },\n                  className: isDark ? \"text-pink-400\" : \"text-pink-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            /* --- SCALE & ZOOM --- */\n            case \"scale-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scale: 0 },\n                  animate: { scale: 1 },\n                  transition: { type: \"spring\", stiffness: 450, damping: 22, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"scale-in-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scale: 0.4, opacity: 0 },\n                  animate: { scale: 1, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.12 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"scale-in-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { scale: 0.5, opacity: 0 },\n                  animate: { scale: 1, opacity: 1 },\n                  transition: { type: \"spring\", stiffness: 400, damping: 25 },\n                  className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"SCALE IN TEXT\"\n                },\n                keyIndex\n              );\n            case \"zoom-in-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { scale: 0.2, opacity: 0 },\n                  animate: { scale: 1, opacity: 1 },\n                  transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-extrabold text-2xl ${isDark ? \"text-amber-400\" : \"text-amber-600\"}`,\n                  children: \"ZOOM IN\"\n                },\n                keyIndex\n              );\n            case \"zoom-out-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { scale: 1.8, opacity: 0 },\n                  animate: { scale: 1, opacity: 1 },\n                  transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-extrabold text-2xl ${isDark ? \"text-amber-400\" : \"text-amber-600\"}`,\n                  children: \"ZOOM OUT\"\n                },\n                keyIndex\n              );\n            /* --- 3D & ROTATE --- */\n            case \"flip-y-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl [perspective:1000px]\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { rotateY: 90, opacity: 0 },\n                  animate: { rotateY: 0, opacity: 1 },\n                  transition: { duration: 0.5, delay: i * 0.05 },\n                  className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"flip-x-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl [perspective:1000px]\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { rotateX: 90, opacity: 0 },\n                  animate: { rotateX: 0, opacity: 1 },\n                  transition: { duration: 0.5, delay: i * 0.05 },\n                  className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"rotate-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { rotate: -45, opacity: 0, scale: 0.5 },\n                  animate: { rotate: 0, opacity: 1, scale: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"swing-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl [perspective:800px]\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { rotateX: -90, opacity: 0 },\n                  animate: { rotateX: 0, opacity: 1 },\n                  transition: { type: \"spring\", stiffness: 350, damping: 18, delay: i * 0.12 },\n                  className: isDark ? \"text-purple-400\" : \"text-purple-600\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            /* --- DISTORTION & SPACING --- */\n            case \"stretch-x-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scaleX: 2.5, opacity: 0 },\n                  animate: { scaleX: 1, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"stretch-y-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scaleY: 2.5, opacity: 0 },\n                  animate: { scaleY: 1, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"skew-x-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { skewX: -30, opacity: 0 },\n                  animate: { skewX: 0, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"tracking-in-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { letterSpacing: \"0.6em\", opacity: 0 },\n                  animate: { letterSpacing: \"0.05em\", opacity: 1 },\n                  transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-black text-xl uppercase ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"TRACKING IN\"\n                },\n                keyIndex\n              );\n            case \"tracking-out-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { letterSpacing: \"-0.2em\", opacity: 0 },\n                  animate: { letterSpacing: \"0.1em\", opacity: 1 },\n                  transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-black text-xl uppercase ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"TRACKING OUT\"\n                },\n                keyIndex\n              );\n            /* --- HOVER & INTERACTIVE --- */\n            case \"spring-text\":\n            case \"hover-lift-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl cursor-pointer\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  whileHover: { y: -8, scale: 1.2, color: \"#6366f1\" },\n                  transition: { type: \"spring\", stiffness: 500, damping: 15 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) });\n            case \"hover-lift-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl cursor-pointer\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  whileHover: { y: -6, color: \"#3b82f6\" },\n                  transition: { type: \"spring\", stiffness: 400, damping: 18 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) });\n            case \"hover-scale-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl cursor-pointer\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  whileHover: { scale: 1.4 },\n                  transition: { type: \"spring\", stiffness: 500, damping: 18 },\n                  className: isDark ? \"text-pink-400\" : \"text-pink-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) });\n            case \"hover-scale-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl cursor-pointer\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  whileHover: { scale: 1.25 },\n                  transition: { type: \"spring\", stiffness: 400, damping: 20 },\n                  className: isDark ? \"text-pink-400\" : \"text-pink-600\",\n                  children: word\n                },\n                i\n              )) });\n            /* --- CONTINUOUS --- */\n            case \"float-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  animate: { y: [0, -6, 0] },\n                  transition: { duration: 2, repeat: Infinity, delay: i * 0.1, ease: \"easeInOut\" },\n                  className: isDark ? \"text-cyan-400\" : \"text-cyan-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) });\n            case \"float-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  animate: { y: [0, -8, 0] },\n                  transition: { duration: 2.4, repeat: Infinity, delay: i * 0.2, ease: \"easeInOut\" },\n                  className: isDark ? \"text-cyan-400\" : \"text-cyan-600\",\n                  children: word\n                },\n                i\n              )) });\n            case \"pulse-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  animate: { opacity: [0.3, 1, 0.3] },\n                  transition: { duration: 1.5, repeat: Infinity, delay: i * 0.08 },\n                  className: isDark ? \"text-emerald-400\" : \"text-emerald-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) });\n            case \"pulse-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  animate: { opacity: [0.3, 1, 0.3] },\n                  transition: { duration: 1.8, repeat: Infinity, delay: i * 0.25 },\n                  className: isDark ? \"text-emerald-400\" : \"text-emerald-600\",\n                  children: word\n                },\n                i\n              )) });\n            case \"glow-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  animate: { textShadow: isDark ? [\"0 0 10px rgba(99,102,241,0.5)\", \"0 0 25px rgba(99,102,241,0.9)\", \"0 0 10px rgba(99,102,241,0.5)\"] : [\"0 0 10px rgba(79,70,229,0.3)\", \"0 0 20px rgba(79,70,229,0.6)\", \"0 0 10px rgba(79,70,229,0.3)\"] },\n                  transition: { duration: 2, repeat: Infinity },\n                  className: `font-black text-3xl tracking-tight ${isDark ? \"text-indigo-300\" : \"text-indigo-600\"}`,\n                  children: \"GLOW TEXT\"\n                }\n              );\n            default:\n              return /* @__PURE__ */ jsx(\"div\", { className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`, children: config.label });\n          }\n        })() }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity p-1.5 rounded-full bg-black/20 text-white/70\", children: /* @__PURE__ */ jsx(RefreshCw, { className: \"w-3.5 h-3.5\" }) })\n      ]\n    }\n  );\n};\n\n// hover-lift-char.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nfunction MovaComponent({ theme = \"dark\" }) {\n  return /* @__PURE__ */ jsx2(AnimatedText, { theme, config: { \"id\": \"txt-hoverlift-char\", \"label\": \"Hover Lift Char\", \"interactionType\": \"hover-lift-char\", \"description\": \"Characters lift vertically on hover.\", \"cliCommand\": \"npx @mova-ui/react add hover-lift-char\", \"category\": \"Hover & Interactive\" } });\n}\nexport {\n  MovaComponent as default\n};\n"
+}

package/registry/hover-lift-word.json

@@ -0,0 +1,19 @@
+{
+  "id": "hover-lift-word",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "hover-lift-word.tsx",
+  "registryFile": "hover-lift-word.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion",
+    "lucide-react"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './hover-lift-word';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/text/AnimatedText.tsx\nimport { useState } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { RefreshCw } from \"lucide-react\";\n\n// src/hooks/useWebHaptics.ts\nimport { useCallback } from \"react\";\nfunction useWebHaptics() {\n  const trigger = useCallback((type = \"light\") => {\n    if (typeof window === \"undefined\" || !window.navigator || !window.navigator.vibrate) {\n      return false;\n    }\n    try {\n      switch (type) {\n        case \"light\":\n          return window.navigator.vibrate(10);\n        case \"medium\":\n          return window.navigator.vibrate(25);\n        case \"heavy\":\n          return window.navigator.vibrate(50);\n        case \"success\":\n          return window.navigator.vibrate([15, 60, 15]);\n        case \"warning\":\n          return window.navigator.vibrate([30, 60, 30]);\n        case \"error\":\n          return window.navigator.vibrate([60, 60, 60, 60, 60]);\n        default:\n          return window.navigator.vibrate(type);\n      }\n    } catch (e) {\n      console.warn(\"Vibration API error:\", e);\n      return false;\n    }\n  }, []);\n  return { trigger };\n}\n\n// src/components/text/AnimatedText.tsx\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nvar AnimatedText = ({ config, theme }) => {\n  const [keyIndex, setKeyIndex] = useState(0);\n  const { trigger: triggerHaptic } = useWebHaptics();\n  const isDark = theme === \"dark\";\n  const replay = () => {\n    triggerHaptic(\"light\");\n    setKeyIndex((prev) => prev + 1);\n  };\n  const samplePhrase = \"MOVA UI\";\n  const sampleWords = [\"Design\", \"Motion\", \"Mova\"];\n  return /* @__PURE__ */ jsxs(\n    \"div\",\n    {\n      onClick: replay,\n      className: \"relative flex flex-col items-center justify-center w-full h-full cursor-pointer select-none px-4 group\",\n      title: \"Click to replay animation\",\n      children: [\n        /* @__PURE__ */ jsx(\"div\", { className: \"flex items-center justify-center w-full min-h-[60px] text-center\", children: (() => {\n          switch (config.interactionType) {\n            /* --- FEATURED --- */\n            case \"dia-text-reveal\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"relative overflow-hidden font-black text-2xl tracking-tighter\", children: /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { clipPath: \"polygon(0 0, 0 0, 0 100%, 0% 100%)\", filter: \"blur(8px)\" },\n                  animate: { clipPath: \"polygon(0 0, 100% 0, 100% 100%, 0 100%)\", filter: \"blur(0px)\" },\n                  transition: { duration: 0.85, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: \"DIA REVEAL\"\n                }\n              ) }, keyIndex);\n            /* --- REVEALS --- */\n            case \"blur-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { filter: \"blur(12px)\", opacity: 0, scale: 0.9 },\n                  animate: { filter: \"blur(0px)\", opacity: 1, scale: 1 },\n                  transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"BLUR REVEAL\"\n                },\n                keyIndex\n              );\n            case \"shimmer-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: `font-extrabold text-2xl bg-gradient-to-r ${isDark ? \"from-neutral-400 via-white to-neutral-400\" : \"from-neutral-600 via-black to-neutral-600\"} bg-clip-text text-transparent animate-pulse`, children: \"SHIMMER TEXT\" });\n            case \"typewriter-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex items-center font-mono text-lg font-bold\", children: /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { width: 0 },\n                  animate: { width: \"auto\" },\n                  transition: { duration: 1.2, ease: \"easeInOut\" },\n                  className: `overflow-hidden whitespace-nowrap border-r-2 ${isDark ? \"text-emerald-400 border-emerald-400\" : \"text-emerald-600 border-emerald-600\"}`,\n                  children: \"TYPEWRITER\"\n                }\n              ) }, keyIndex);\n            case \"reveal-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"relative overflow-hidden font-bold text-2xl\", children: /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { clipPath: \"inset(0 100% 0 0)\" },\n                  animate: { clipPath: \"inset(0 0 0 0)\" },\n                  transition: { duration: 0.75, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: \"CINEMATIC\"\n                }\n              ) }, keyIndex);\n            case \"fade-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { opacity: 0 },\n                  animate: { opacity: 1 },\n                  transition: { duration: 0.3, delay: i * 0.05 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"fade-in-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { opacity: 0 },\n                  animate: { opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.15 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"fade-in-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { opacity: 0 },\n                  animate: { opacity: 1 },\n                  transition: { duration: 0.8 },\n                  className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"FADE IN TEXT\"\n                },\n                keyIndex\n              );\n            case \"blur-up-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { opacity: 0, y: 15, filter: \"blur(8px)\" },\n                  animate: { opacity: 1, y: 0, filter: \"blur(0px)\" },\n                  transition: { duration: 0.5, delay: i * 0.12 },\n                  className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"blur-up-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { opacity: 0, y: 15, filter: \"blur(8px)\" },\n                  animate: { opacity: 1, y: 0, filter: \"blur(0px)\" },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            /* --- SLIDE & DROP --- */\n            case \"stagger-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: 20, opacity: 0 },\n                  animate: { y: 0, opacity: 1 },\n                  transition: { duration: 0.5, delay: i * 0.1, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-up-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: \"100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.4, delay: i * 0.04, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-up-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 overflow-hidden font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: \"100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.5, delay: i * 0.1, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-up-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"overflow-hidden\", children: /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { y: \"100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"SLIDE UP TEXT\"\n                }\n              ) }, keyIndex);\n            case \"slide-down-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: \"-100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.4, delay: i * 0.04, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-down-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 overflow-hidden font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: \"-100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.5, delay: i * 0.1, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-left-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { x: 40, opacity: 0 },\n                  animate: { x: 0, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-right-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { x: -40, opacity: 0 },\n                  animate: { x: 0, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"drop-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: -50, opacity: 0 },\n                  animate: { y: 0, opacity: 1 },\n                  transition: { type: \"spring\", stiffness: 500, damping: 25, delay: i * 0.04 },\n                  className: isDark ? \"text-cyan-400\" : \"text-cyan-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"rise-up-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: 30, opacity: 0, scale: 0.8 },\n                  animate: { y: 0, opacity: 1, scale: 1 },\n                  transition: { type: \"spring\", stiffness: 400, damping: 22, delay: i * 0.12 },\n                  className: isDark ? \"text-emerald-400\" : \"text-emerald-600\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"bounce-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scale: 0, opacity: 0 },\n                  animate: { scale: [0, 1.3, 1], opacity: 1 },\n                  transition: { duration: 0.5, delay: i * 0.05 },\n                  className: isDark ? \"text-pink-400\" : \"text-pink-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            /* --- SCALE & ZOOM --- */\n            case \"scale-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scale: 0 },\n                  animate: { scale: 1 },\n                  transition: { type: \"spring\", stiffness: 450, damping: 22, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"scale-in-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scale: 0.4, opacity: 0 },\n                  animate: { scale: 1, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.12 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"scale-in-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { scale: 0.5, opacity: 0 },\n                  animate: { scale: 1, opacity: 1 },\n                  transition: { type: \"spring\", stiffness: 400, damping: 25 },\n                  className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"SCALE IN TEXT\"\n                },\n                keyIndex\n              );\n            case \"zoom-in-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { scale: 0.2, opacity: 0 },\n                  animate: { scale: 1, opacity: 1 },\n                  transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-extrabold text-2xl ${isDark ? \"text-amber-400\" : \"text-amber-600\"}`,\n                  children: \"ZOOM IN\"\n                },\n                keyIndex\n              );\n            case \"zoom-out-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { scale: 1.8, opacity: 0 },\n                  animate: { scale: 1, opacity: 1 },\n                  transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-extrabold text-2xl ${isDark ? \"text-amber-400\" : \"text-amber-600\"}`,\n                  children: \"ZOOM OUT\"\n                },\n                keyIndex\n              );\n            /* --- 3D & ROTATE --- */\n            case \"flip-y-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl [perspective:1000px]\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { rotateY: 90, opacity: 0 },\n                  animate: { rotateY: 0, opacity: 1 },\n                  transition: { duration: 0.5, delay: i * 0.05 },\n                  className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"flip-x-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl [perspective:1000px]\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { rotateX: 90, opacity: 0 },\n                  animate: { rotateX: 0, opacity: 1 },\n                  transition: { duration: 0.5, delay: i * 0.05 },\n                  className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"rotate-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { rotate: -45, opacity: 0, scale: 0.5 },\n                  animate: { rotate: 0, opacity: 1, scale: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"swing-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl [perspective:800px]\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { rotateX: -90, opacity: 0 },\n                  animate: { rotateX: 0, opacity: 1 },\n                  transition: { type: \"spring\", stiffness: 350, damping: 18, delay: i * 0.12 },\n                  className: isDark ? \"text-purple-400\" : \"text-purple-600\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            /* --- DISTORTION & SPACING --- */\n            case \"stretch-x-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scaleX: 2.5, opacity: 0 },\n                  animate: { scaleX: 1, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"stretch-y-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scaleY: 2.5, opacity: 0 },\n                  animate: { scaleY: 1, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"skew-x-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { skewX: -30, opacity: 0 },\n                  animate: { skewX: 0, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"tracking-in-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { letterSpacing: \"0.6em\", opacity: 0 },\n                  animate: { letterSpacing: \"0.05em\", opacity: 1 },\n                  transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-black text-xl uppercase ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"TRACKING IN\"\n                },\n                keyIndex\n              );\n            case \"tracking-out-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { letterSpacing: \"-0.2em\", opacity: 0 },\n                  animate: { letterSpacing: \"0.1em\", opacity: 1 },\n                  transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-black text-xl uppercase ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"TRACKING OUT\"\n                },\n                keyIndex\n              );\n            /* --- HOVER & INTERACTIVE --- */\n            case \"spring-text\":\n            case \"hover-lift-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl cursor-pointer\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  whileHover: { y: -8, scale: 1.2, color: \"#6366f1\" },\n                  transition: { type: \"spring\", stiffness: 500, damping: 15 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) });\n            case \"hover-lift-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl cursor-pointer\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  whileHover: { y: -6, color: \"#3b82f6\" },\n                  transition: { type: \"spring\", stiffness: 400, damping: 18 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) });\n            case \"hover-scale-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl cursor-pointer\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  whileHover: { scale: 1.4 },\n                  transition: { type: \"spring\", stiffness: 500, damping: 18 },\n                  className: isDark ? \"text-pink-400\" : \"text-pink-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) });\n            case \"hover-scale-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl cursor-pointer\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  whileHover: { scale: 1.25 },\n                  transition: { type: \"spring\", stiffness: 400, damping: 20 },\n                  className: isDark ? \"text-pink-400\" : \"text-pink-600\",\n                  children: word\n                },\n                i\n              )) });\n            /* --- CONTINUOUS --- */\n            case \"float-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  animate: { y: [0, -6, 0] },\n                  transition: { duration: 2, repeat: Infinity, delay: i * 0.1, ease: \"easeInOut\" },\n                  className: isDark ? \"text-cyan-400\" : \"text-cyan-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) });\n            case \"float-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  animate: { y: [0, -8, 0] },\n                  transition: { duration: 2.4, repeat: Infinity, delay: i * 0.2, ease: \"easeInOut\" },\n                  className: isDark ? \"text-cyan-400\" : \"text-cyan-600\",\n                  children: word\n                },\n                i\n              )) });\n            case \"pulse-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  animate: { opacity: [0.3, 1, 0.3] },\n                  transition: { duration: 1.5, repeat: Infinity, delay: i * 0.08 },\n                  className: isDark ? \"text-emerald-400\" : \"text-emerald-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) });\n            case \"pulse-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  animate: { opacity: [0.3, 1, 0.3] },\n                  transition: { duration: 1.8, repeat: Infinity, delay: i * 0.25 },\n                  className: isDark ? \"text-emerald-400\" : \"text-emerald-600\",\n                  children: word\n                },\n                i\n              )) });\n            case \"glow-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  animate: { textShadow: isDark ? [\"0 0 10px rgba(99,102,241,0.5)\", \"0 0 25px rgba(99,102,241,0.9)\", \"0 0 10px rgba(99,102,241,0.5)\"] : [\"0 0 10px rgba(79,70,229,0.3)\", \"0 0 20px rgba(79,70,229,0.6)\", \"0 0 10px rgba(79,70,229,0.3)\"] },\n                  transition: { duration: 2, repeat: Infinity },\n                  className: `font-black text-3xl tracking-tight ${isDark ? \"text-indigo-300\" : \"text-indigo-600\"}`,\n                  children: \"GLOW TEXT\"\n                }\n              );\n            default:\n              return /* @__PURE__ */ jsx(\"div\", { className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`, children: config.label });\n          }\n        })() }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity p-1.5 rounded-full bg-black/20 text-white/70\", children: /* @__PURE__ */ jsx(RefreshCw, { className: \"w-3.5 h-3.5\" }) })\n      ]\n    }\n  );\n};\n\n// hover-lift-word.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nfunction MovaComponent({ theme = \"dark\" }) {\n  return /* @__PURE__ */ jsx2(AnimatedText, { theme, config: { \"id\": \"txt-hoverlift-word\", \"label\": \"Hover Lift Word\", \"interactionType\": \"hover-lift-word\", \"description\": \"Words lift vertically on hover.\", \"cliCommand\": \"npx @mova-ui/react add hover-lift-word\", \"category\": \"Hover & Interactive\" } });\n}\nexport {\n  MovaComponent as default\n};\n"
+}

package/registry/hover-link-card.json

@@ -0,0 +1,18 @@
+{
+  "id": "hover-link-card",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "hover-link-card.tsx",
+  "sourcePath": "components/css-animations/yui-components/YuiUiKit1.tsx",
+  "registryFile": "hover-link-card.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion",
+    "lucide-react"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n\"use client\";\n\n// catalog/components/css-animations/yui-components/YuiUiKit1.tsx\nimport { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n  ChevronDown,\n  ExternalLink,\n  Plus,\n  Minus,\n  Sun,\n  Moon,\n  X,\n  ChevronLeft,\n  ChevronRight\n} from \"lucide-react\";\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nfunction HoverLinkCard({ theme = \"dark\", href = \"https://example.com\" }) {\n  const [isHovered, setIsHovered] = useState(false);\n  return /* @__PURE__ */ jsxs(\"div\", { className: \"relative flex flex-col items-center justify-center\", children: [\n    /* @__PURE__ */ jsx(AnimatePresence, { children: isHovered && /* @__PURE__ */ jsxs(\n      motion.div,\n      {\n        initial: { opacity: 0, y: 6, scale: 0.9 },\n        animate: { opacity: 1, y: -8, scale: 1 },\n        exit: { opacity: 0, y: 4, scale: 0.9 },\n        transition: { duration: 0.2 },\n        className: \"absolute -top-7 px-2.5 py-1 rounded-lg bg-neutral-900 border border-white/15 text-[10px] font-mono text-indigo-300 shadow-xl whitespace-nowrap z-20 pointer-events-none\",\n        children: [\n          href,\n          /* @__PURE__ */ jsx(\"div\", { className: \"absolute -bottom-1 left-1/2 -translate-x-1/2 w-2 h-2 bg-neutral-900 border-r border-b border-white/15 rotate-45\" })\n        ]\n      }\n    ) }),\n    /* @__PURE__ */ jsxs(\n      motion.a,\n      {\n        href,\n        target: \"_blank\",\n        rel: \"noopener noreferrer\",\n        onMouseEnter: () => setIsHovered(true),\n        onMouseLeave: () => setIsHovered(false),\n        whileHover: { scale: 1.05, y: -2 },\n        whileTap: { scale: 0.96 },\n        className: `flex items-center gap-2 px-5 py-2.5 rounded-full border text-xs font-semibold shadow-md transition-shadow duration-200 no-underline cursor-pointer ${theme === \"dark\" ? \"bg-[#1e1e1e] border-white/10 text-white hover:shadow-indigo-500/10\" : \"bg-white border-neutral-200 text-neutral-900 hover:shadow-neutral-300/60\"}`,\n        children: [\n          /* @__PURE__ */ jsx(\"span\", { children: \"Portfolio\" }),\n          /* @__PURE__ */ jsx(ExternalLink, { className: \"w-3.5 h-3.5 text-neutral-400\" })\n        ]\n      }\n    )\n  ] });\n}\n\n// catalog/registry-bindings/hover-link-card.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nvar PRESET_PROPS = { \"theme\": \"dark\", \"href\": \"https://mova-ui.com\" };\nfunction MovaComponentAdapter(props = {}) {\n  return /* @__PURE__ */ jsx2(HoverLinkCard, { ...PRESET_PROPS, ...props });\n}\nexport {\n  MovaComponentAdapter as default\n};\n"
+}