@mova-ui/react 0.1.0 → 0.4.1

package/registry/slide-left-char.json

@@ -0,0 +1,19 @@
+{
+  "id": "slide-left-char",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "slide-left-char.tsx",
+  "registryFile": "slide-left-char.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion",
+    "lucide-react"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './slide-left-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// slide-left-char.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nfunction MovaComponent({ theme = \"dark\" }) {\n  return /* @__PURE__ */ jsx2(AnimatedText, { theme, config: { \"id\": \"txt-slideleft-char\", \"label\": \"Slide Left Char\", \"interactionType\": \"slide-left-char\", \"description\": \"Characters slide from the right.\", \"cliCommand\": \"npx @mova-ui/react add slide-left-char\", \"category\": \"Slide & Drop\" } });\n}\nexport {\n  MovaComponent as default\n};\n"
+}

package/registry/slide-left.json

@@ -1,8 +1,17 @@
 {
   "id": "slide-left",
+  "tier": "free",
+  "version": "0.4.1",
   "file": "slide-left.tsx",
+  "sourcePath": "ui/entrance/slide-left.tsx",
+  "registryFile": "slide-left.json",
+  "exports": [
+    "SlideLeft"
+  ],
   "dependencies": [
     "framer-motion"
   ],
+  "license": "MIT",
+  "previewMode": "client",
   "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\ninterface SlideLeftProps {\n  children: React.ReactNode;\n  duration?: number;\n  delay?: number;\n  xOffset?: number;\n  className?: string;\n}\n\nexport function SlideLeft({\n  children,\n  duration = 0.6,\n  delay = 0,\n  xOffset = 40,\n  className = '',\n}: SlideLeftProps) {\n  return (\n    <motion.div\n      initial={{ opacity: 0, x: xOffset }}\n      animate={{ opacity: 1, x: 0 }}\n      transition={{\n        duration,\n        delay,\n        ease: [0.16, 1, 0.3, 1], // easeOutExpo\n      }}\n      className={className}\n    >\n      {children}\n    </motion.div>\n  );\n}\n"
 }

package/registry/slide-right-char.json

@@ -0,0 +1,19 @@
+{
+  "id": "slide-right-char",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "slide-right-char.tsx",
+  "registryFile": "slide-right-char.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion",
+    "lucide-react"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './slide-right-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// slide-right-char.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nfunction MovaComponent({ theme = \"dark\" }) {\n  return /* @__PURE__ */ jsx2(AnimatedText, { theme, config: { \"id\": \"txt-slideright-char\", \"label\": \"Slide Right Char\", \"interactionType\": \"slide-right-char\", \"description\": \"Characters slide from the left.\", \"cliCommand\": \"npx @mova-ui/react add slide-right-char\", \"category\": \"Slide & Drop\" } });\n}\nexport {\n  MovaComponent as default\n};\n"
+}

package/registry/slide-right.json

@@ -1,8 +1,17 @@
 {
   "id": "slide-right",
+  "tier": "free",
+  "version": "0.4.1",
   "file": "slide-right.tsx",
+  "sourcePath": "ui/entrance/slide-right.tsx",
+  "registryFile": "slide-right.json",
+  "exports": [
+    "SlideRight"
+  ],
   "dependencies": [
     "framer-motion"
   ],
+  "license": "MIT",
+  "previewMode": "client",
   "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\ninterface SlideRightProps {\n  children: React.ReactNode;\n  duration?: number;\n  delay?: number;\n  xOffset?: number;\n  className?: string;\n}\n\nexport function SlideRight({\n  children,\n  duration = 0.6,\n  delay = 0,\n  xOffset = -40,\n  className = '',\n}: SlideRightProps) {\n  return (\n    <motion.div\n      initial={{ opacity: 0, x: xOffset }}\n      animate={{ opacity: 1, x: 0 }}\n      transition={{\n        duration,\n        delay,\n        ease: [0.16, 1, 0.3, 1], // easeOutExpo\n      }}\n      className={className}\n    >\n      {children}\n    </motion.div>\n  );\n}\n"
 }

package/registry/slide-up-char.json

@@ -0,0 +1,19 @@
+{
+  "id": "slide-up-char",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "slide-up-char.tsx",
+  "registryFile": "slide-up-char.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion",
+    "lucide-react"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './slide-up-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// slide-up-char.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nfunction MovaComponent({ theme = \"dark\" }) {\n  return /* @__PURE__ */ jsx2(AnimatedText, { theme, config: { \"id\": \"txt-slideup-char\", \"label\": \"Slide Up Char\", \"interactionType\": \"slide-up-char\", \"description\": \"Characters slide up from clipping bottom.\", \"cliCommand\": \"npx @mova-ui/react add slide-up-char\", \"category\": \"Slide & Drop\" } });\n}\nexport {\n  MovaComponent as default\n};\n"
+}

package/registry/slide-up-text.json

@@ -0,0 +1,19 @@
+{
+  "id": "slide-up-text",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "slide-up-text.tsx",
+  "registryFile": "slide-up-text.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion",
+    "lucide-react"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './slide-up-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// slide-up-text.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nfunction MovaComponent({ theme = \"dark\" }) {\n  return /* @__PURE__ */ jsx2(AnimatedText, { theme, config: { \"id\": \"txt-slideup-text\", \"label\": \"Slide Up Text\", \"interactionType\": \"slide-up-text\", \"description\": \"Text block slides up elegantly.\", \"cliCommand\": \"npx @mova-ui/react add slide-up-text\", \"category\": \"Slide & Drop\" } });\n}\nexport {\n  MovaComponent as default\n};\n"
+}

package/registry/slide-up-word.json

@@ -0,0 +1,19 @@
+{
+  "id": "slide-up-word",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "slide-up-word.tsx",
+  "registryFile": "slide-up-word.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion",
+    "lucide-react"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './slide-up-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// slide-up-word.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nfunction MovaComponent({ theme = \"dark\" }) {\n  return /* @__PURE__ */ jsx2(AnimatedText, { theme, config: { \"id\": \"txt-slideup-word\", \"label\": \"Slide Up Word\", \"interactionType\": \"slide-up-word\", \"description\": \"Words slide up into view.\", \"cliCommand\": \"npx @mova-ui/react add slide-up-word\", \"category\": \"Slide & Drop\" } });\n}\nexport {\n  MovaComponent as default\n};\n"
+}

package/registry/sliding-bars.json

@@ -1,8 +1,17 @@
 {
   "id": "sliding-bars",
+  "tier": "free",
+  "version": "0.4.1",
   "file": "sliding-bars.tsx",
+  "sourcePath": "ui/loading/sliding-bars.tsx",
+  "registryFile": "sliding-bars.json",
+  "exports": [
+    "SlidingBars"
+  ],
   "dependencies": [
     "framer-motion"
   ],
+  "license": "MIT",
+  "previewMode": "client",
   "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const SlidingBars = () => (\n  <div className=\"relative w-8 h-8\">\n    <motion.div\n      className=\"absolute top-0 left-0 w-8 h-1.5 bg-zinc-800 dark:bg-white rounded-full\"\n      animate={{ y: [0, 24, 0] }}\n      transition={{ duration: 1.5, repeat: Infinity, ease: \"easeInOut\" }}\n    />\n    <motion.div\n      className=\"absolute bottom-0 left-0 w-8 h-1.5 bg-zinc-400 dark:bg-zinc-200 rounded-full\"\n      animate={{ y: [0, -24, 0] }}\n      transition={{ duration: 1.5, repeat: Infinity, ease: \"easeInOut\" }}\n    />\n  </div>\n);\n"
 }

package/registry/slinky-coil.json

@@ -0,0 +1,15 @@
+{
+  "id": "slinky-coil",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "slinky-coil.tsx",
+  "sourcePath": "components/css-animations/whimsical/ConceptTrios3.tsx",
+  "registryFile": "slinky-coil.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/ConceptTrios3.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/ConceptTrios3.tsx\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nfunction SlinkyCoil({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 2400);\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 slinky_expand {\n          0%, 100% { transform: scaleY(0.4); }\n          45%, 70% { transform: scaleY(1.3); }\n        }\n        .slinky-stack {\n          transform-origin: center bottom;\n          animation: slinky_expand 2.4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"relative flex flex-col items-center gap-1.5 slinky-stack\", children: [\n          /* @__PURE__ */ jsx(\"div\", { className: \"w-12 h-2 rounded-full bg-blue-300\" }),\n          /* @__PURE__ */ jsx(\"div\", { className: \"w-12 h-2 rounded-full bg-blue-400\" }),\n          /* @__PURE__ */ jsx(\"div\", { className: \"w-12 h-2 rounded-full bg-blue-500\" }),\n          /* @__PURE__ */ jsx(\"div\", { className: \"w-12 h-2 rounded-full bg-blue-600\" }),\n          /* @__PURE__ */ jsx(\"div\", { className: \"w-12 h-2 rounded-full bg-blue-700\" })\n        ] }, activeKey)\n      ]\n    }\n  );\n}\n\n// catalog/registry-bindings/slinky-coil.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(SlinkyCoil, { ...PRESET_PROPS, ...props });\n}\nexport {\n  MovaComponentAdapter as default\n};\n"
+}

package/registry/smart-card-dispenser.json

@@ -0,0 +1,15 @@
+{
+  "id": "smart-card-dispenser",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "smart-card-dispenser.tsx",
+  "sourcePath": "components/css-animations/whimsical/RedesignedPhysicsTrios.tsx",
+  "registryFile": "smart-card-dispenser.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 SmartCardDispenser({\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 card_eject_push {\n          0%, 100% { transform: translateY(0); }\n          40%, 75% { transform: translateY(-38px); }\n        }\n        .dispenser-card {\n          animation: card_eject_push 3s cubic-bezier(0.34, 1.56, 0.64, 1) infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"relative w-[110px] h-[85px] flex flex-col items-center justify-end pb-1\", children: [\n          /* @__PURE__ */ jsxs(\"div\", { className: \"w-[70px] h-[45px] rounded-xl bg-blue-500 dispenser-card shadow-md flex items-center justify-between px-3\", children: [\n            /* @__PURE__ */ jsx(\"div\", { className: \"w-3 h-3 rounded-full bg-white/80\" }),\n            /* @__PURE__ */ jsx(\"div\", { className: \"w-8 h-1.5 rounded-full bg-white/60\" })\n          ] }),\n          /* @__PURE__ */ jsx(\"div\", { className: `w-[95px] h-[34px] -mt-4 rounded-xl z-20 flex items-center justify-center border ${theme === \"dark\" ? \"bg-[#1c1c1e] border-[#2c2c2e]\" : \"bg-[#e5e5ea] border-[#d1d1d6]\"}`, children: /* @__PURE__ */ jsx(\"div\", { className: \"w-[75px] h-[3px] rounded-full bg-neutral-600\" }) })\n        ] }, activeKey)\n      ]\n    }\n  );\n}\n\n// catalog/registry-bindings/smart-card-dispenser.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(SmartCardDispenser, { ...PRESET_PROPS, ...props });\n}\nexport {\n  MovaComponentAdapter as default\n};\n"
+}