@mova-ui/react 0.1.0

package/registry/bouncing-square.json

@@ -0,0 +1,8 @@
+{
+  "id": "bouncing-square",
+  "file": "bouncing-square.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const BouncingSquare = () => {\n  return (\n    <div className=\"relative w-10 h-12 flex items-end justify-center\">\n      <div className=\"absolute bottom-0 w-8 h-1 bg-zinc-200 dark:bg-zinc-800 rounded-full blur-sm\" />\n      <motion.div\n        className=\"w-6 h-6 bg-zinc-800 dark:bg-white rounded-sm origin-bottom\"\n        animate={{ y: [0, -24, 0], scaleY: [0.8, 1.1, 0.8], scaleX: [1.2, 0.9, 1.2] }}\n        transition={{ duration: 0.6, repeat: Infinity, ease: \"easeInOut\" }}\n      />\n    </div>\n  );\n};\n"
+}

package/registry/breathe-ring.json

@@ -0,0 +1,8 @@
+{
+  "id": "breathe-ring",
+  "file": "breathe-ring.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const BreatheRing = () => (\n  <motion.div\n    className=\"w-10 h-10 rounded-full border-4 border-zinc-800 dark:border-zinc-700\"\n    animate={{ scale: [0.8, 1.1, 0.8], borderWidth: [6, 2, 6] }}\n    transition={{ duration: 3, repeat: Infinity, ease: \"easeInOut\" }}\n  />\n);\n"
+}

package/registry/breathing-glow.json

@@ -0,0 +1,8 @@
+{
+  "id": "breathing-glow",
+  "file": "breathing-glow.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const BreathingGlow = () => {\n  return (\n    <div className=\"relative flex items-center justify-center w-12 h-12\">\n      <motion.div\n        className=\"absolute w-8 h-8 bg-blue-500 rounded-full blur-md\"\n        animate={{ scale: [1, 1.5, 1], opacity: [0.5, 0.8, 0.5] }}\n        transition={{ duration: 2, repeat: Infinity, ease: \"easeInOut\" }}\n      />\n      <div className=\"relative w-6 h-6 bg-white rounded-full shadow-sm\" />\n    </div>\n  );\n};\n"
+}

package/registry/breathing-square.json

@@ -0,0 +1,8 @@
+{
+  "id": "breathing-square",
+  "file": "breathing-square.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const BreathingSquare = () => {\n  return (\n    <motion.div\n      className=\"w-8 h-8 bg-zinc-800 dark:bg-white\"\n      animate={{\n        scale: [1, 1.2, 1],\n        borderRadius: [\"0%\", \"50%\", \"0%\"],\n        rotate: [0, 90, 180]\n      }}\n      transition={{ duration: 2, repeat: Infinity, ease: \"easeInOut\" }}\n    />\n  );\n};\n"
+}

package/registry/card-hover.json

@@ -0,0 +1,8 @@
+{
+  "id": "card-hover",
+  "file": "card-hover.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React, { useState } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\n\ninterface CardHoverProps {\n  items: {\n    id: string;\n    title: string;\n    description: string;\n    link?: string;\n  }[];\n  className?: string;\n  cardClassName?: string;\n}\n\nexport function CardHover({\n  items,\n  className = '',\n  cardClassName = '',\n}: CardHoverProps) {\n  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);\n\n  return (\n    <div className={`grid grid-cols-1 md:grid-cols-3 gap-4 w-full ${className}`}>\n      {items.map((item, idx) => (\n        <a\n          key={item.id}\n          href={item.link || '#'}\n          className=\"relative group block p-2 h-full w-full no-underline\"\n          onMouseEnter={() => setHoveredIndex(idx)}\n          onMouseLeave={() => setHoveredIndex(null)}\n        >\n          <AnimatePresence>\n            {hoveredIndex === idx && (\n              <motion.span\n                className=\"absolute inset-0 h-full w-full bg-neutral-200 dark:bg-zinc-800/[0.8] block rounded-3xl -z-10\"\n                layoutId=\"hoverBackground\"\n                initial={{ opacity: 0 }}\n                animate={{\n                  opacity: 1,\n                  transition: { duration: 0.15 },\n                }}\n                exit={{\n                  opacity: 0,\n                  transition: { duration: 0.15, delay: 0.1 },\n                }}\n              />\n            )}\n          </AnimatePresence>\n          <div\n            className={`rounded-2xl h-full w-full p-5 overflow-hidden bg-white dark:bg-black border border-neutral-200 dark:border-zinc-800 group-hover:border-slate-350 dark:group-hover:border-zinc-700 relative z-20 transition-colors duration-200 ${cardClassName}`}\n          >\n            <div className=\"relative z-50\">\n              <h4 className=\"text-zinc-900 dark:text-zinc-100 font-bold tracking-wide mt-2\">\n                {item.title}\n              </h4>\n              <p className=\"mt-2 text-zinc-500 dark:text-zinc-400 tracking-wide leading-relaxed text-sm\">\n                {item.description}\n              </p>\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  );\n}\n"
+}

package/registry/character-stagger.json

@@ -0,0 +1,8 @@
+{
+  "id": "character-stagger",
+  "file": "character-stagger.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion, type Variants } from 'framer-motion';\n\ninterface CharacterStaggerProps {\n  text: string;\n  duration?: number;\n  staggerDelay?: number;\n  yOffset?: number;\n  className?: string;\n}\n\nexport function CharacterStagger({\n  text,\n  duration = 0.4,\n  staggerDelay = 0.015,\n  yOffset = 15,\n  className = '',\n}: CharacterStaggerProps) {\n  const characters = Array.from(text);\n\n  const containerVariants: Variants = {\n    hidden: { opacity: 0 },\n    visible: {\n      opacity: 1,\n      transition: {\n        staggerChildren: staggerDelay,\n      },\n    },\n  };\n\n  const charVariants: Variants = {\n    hidden: { opacity: 0, y: yOffset, scale: 0.8 },\n    visible: {\n      opacity: 1,\n      y: 0,\n      scale: 1,\n      transition: {\n        type: 'spring',\n        stiffness: 300,\n        damping: 18,\n        mass: 0.8,\n        duration,\n      },\n    },\n  };\n\n  return (\n    <motion.div\n      variants={containerVariants}\n      initial=\"hidden\"\n      whileInView=\"visible\"\n      viewport={{ once: true, margin: '-10%' }}\n      className={`inline-block ${className}`}\n    >\n      {characters.map((char, index) => (\n        <motion.span\n          key={index}\n          variants={charVariants}\n          className=\"inline-block whitespace-pre\"\n        >\n          {char}\n        </motion.span>\n      ))}\n    </motion.div>\n  );\n}\n"
+}

package/registry/circular-bars.json

@@ -0,0 +1,8 @@
+{
+  "id": "circular-bars",
+  "file": "circular-bars.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const CircularBars = () => {\n  return (\n    <div className=\"relative w-10 h-10\">\n      {Array.from({ length: 8 }).map((_, i) => (\n        <motion.div\n          key={i}\n          className=\"absolute top-0 left-[18px] w-1 h-3 bg-zinc-800 dark:bg-white rounded-full origin-[2px_20px]\"\n          style={{ rotate: i * 45 }}\n          animate={{ scaleY: [0.5, 1.5, 0.5] }}\n          transition={{ duration: 1.2, repeat: Infinity, delay: i * 0.15, ease: \"easeInOut\" }}\n        />\n      ))}\n    </div>\n  );\n};\n"
+}

package/registry/classic-spinner.json

@@ -0,0 +1,8 @@
+{
+  "id": "classic-spinner",
+  "file": "classic-spinner.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const ClassicSpinner = () => {\n  return (\n    <div className=\"relative w-8 h-8\">\n      {Array.from({ length: 12 }).map((_, i) => (\n        <motion.div\n          key={i}\n          className=\"absolute top-0 left-[14px] w-[4px] h-[8px] bg-zinc-400 dark:bg-zinc-200 rounded-full origin-[2px_16px]\"\n          style={{ rotate: i * 30 }}\n          animate={{ opacity: [1, 0.2] }}\n          transition={{\n            duration: 1,\n            repeat: Infinity,\n            ease: \"linear\",\n            delay: i * (1 / 12),\n          }}\n        />\n      ))}\n    </div>\n  );\n};\n"
+}

package/registry/classic-toggle.json

@@ -0,0 +1,8 @@
+{
+  "id": "classic-toggle",
+  "file": "classic-toggle.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React, { useState } from 'react';\nimport { motion } from 'framer-motion';\n\nexport const ClassicToggle = () => {\n  const [isOn, setIsOn] = useState(false);\n  return (\n    <button\n      onClick={() => setIsOn(!isOn)}\n      className={`relative w-16 h-9 rounded-full p-1 transition-colors duration-300 cursor-pointer border-0 ${isOn ? 'bg-emerald-500' : 'bg-neutral-800'}`}\n    >\n      <motion.div\n        animate={{ x: isOn ? 28 : 0 }}\n        transition={{ type: 'spring', stiffness: 500, damping: 30 }}\n        className=\"w-7 h-7 bg-white rounded-full shadow-md\"\n      />\n    </button>\n  );\n};\n"
+}

package/registry/clock-spinner.json

@@ -0,0 +1,8 @@
+{
+  "id": "clock-spinner",
+  "file": "clock-spinner.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const ClockSpinner = () => {\n  return (\n    <div className=\"relative w-10 h-10 border-2 border-zinc-800 dark:border-zinc-700 rounded-full flex items-center justify-center\">\n      <motion.div\n        className=\"absolute w-0.5 h-3.5 bg-zinc-800 dark:bg-white rounded-full origin-bottom\"\n        style={{ bottom: \"50%\" }}\n        animate={{ rotate: 360 }}\n        transition={{ duration: 2, repeat: Infinity, ease: \"linear\" }}\n      />\n      <motion.div\n        className=\"absolute w-0.5 h-2.5 bg-zinc-800 dark:bg-white rounded-full origin-bottom\"\n        style={{ bottom: \"50%\" }}\n        animate={{ rotate: 360 }}\n        transition={{ duration: 12, repeat: Infinity, ease: \"linear\" }}\n      />\n    </div>\n  );\n};\n"
+}

package/registry/comet-spinner.json

@@ -0,0 +1,8 @@
+{
+  "id": "comet-spinner",
+  "file": "comet-spinner.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const CometSpinner = () => {\n  return (\n    <div className=\"relative w-10 h-10 border border-zinc-200 dark:border-zinc-800 rounded-full flex items-center justify-center\">\n      <motion.div\n        className=\"absolute w-full h-full rounded-full\"\n        style={{\n          background: \"conic-gradient(from 0deg, transparent 0%, rgba(39, 39, 42, 0.1) 60%, rgba(39, 39, 42, 1) 100%)\",\n        }}\n        animate={{ rotate: 360 }}\n        transition={{ duration: 1, repeat: Infinity, ease: \"linear\" }}\n      />\n      <div className=\"absolute bg-white w-8 h-8 rounded-full\" />\n    </div>\n  );\n};\n"
+}

package/registry/concentric-pulse.json

@@ -0,0 +1,8 @@
+{
+  "id": "concentric-pulse",
+  "file": "concentric-pulse.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const ConcentricPulse = () => {\n  return (\n    <div className=\"relative w-12 h-12 flex items-center justify-center\">\n      {[1, 2, 3].map((i) => (\n        <motion.div\n          key={i}\n          className=\"absolute rounded-full border border-zinc-800 dark:border-zinc-700\"\n          initial={{ width: 0, height: 0, opacity: 1 }}\n          animate={{ width: 48, height: 48, opacity: 0 }}\n          transition={{ duration: 2, repeat: Infinity, delay: i * 0.6, ease: \"easeOut\" }}\n        />\n      ))}\n    </div>\n  );\n};\n"
+}

package/registry/concentric-ring.json

@@ -0,0 +1,8 @@
+{
+  "id": "concentric-ring",
+  "file": "concentric-ring.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const ConcentricRing = () => {\n  return (\n    <div className=\"relative w-12 h-12 flex items-center justify-center\">\n      <motion.div\n        className=\"absolute w-12 h-12 border-2 border-zinc-800 dark:border-zinc-700 border-t-transparent rounded-full\"\n        animate={{ rotate: 360 }}\n        transition={{ duration: 2, repeat: Infinity, ease: \"linear\" }}\n      />\n      <motion.div\n        className=\"absolute w-8 h-8 border-2 border-zinc-500 border-b-transparent rounded-full\"\n        animate={{ rotate: -360 }}\n        transition={{ duration: 1.5, repeat: Infinity, ease: \"linear\" }}\n      />\n      <motion.div\n        className=\"absolute w-4 h-4 border-2 border-zinc-300 border-l-transparent rounded-full\"\n        animate={{ rotate: 360 }}\n        transition={{ duration: 1, repeat: Infinity, ease: \"linear\" }}\n      />\n    </div>\n  );\n};\n"
+}

package/registry/concentric-squares.json

@@ -0,0 +1,8 @@
+{
+  "id": "concentric-squares",
+  "file": "concentric-squares.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const ConcentricSquares = () => {\n  return (\n    <div className=\"relative w-12 h-12 flex items-center justify-center\">\n      <motion.div\n        className=\"absolute w-12 h-12 border-2 border-zinc-800 dark:border-zinc-700 rounded-sm\"\n        animate={{ rotate: [0, 90, 90], scale: [1, 1, 0.8, 1] }}\n        transition={{ duration: 2, repeat: Infinity, ease: \"easeInOut\" }}\n      />\n      <motion.div\n        className=\"absolute w-6 h-6 border-2 border-zinc-500 rounded-sm\"\n        animate={{ rotate: [0, -90, -90], scale: [1, 1, 1.2, 1] }}\n        transition={{ duration: 2, repeat: Infinity, ease: \"easeInOut\" }}\n      />\n    </div>\n  );\n};\n"
+}

package/registry/conveyor-loop.json

@@ -0,0 +1,8 @@
+{
+  "id": "conveyor-loop",
+  "file": "conveyor-loop.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const ConveyorLoop = () => {\n  return (\n    <div className=\"w-16 h-3 overflow-hidden relative rounded-full bg-zinc-200 dark:bg-zinc-800\">\n      <motion.div\n        className=\"flex h-full space-x-2 absolute top-0 items-center\"\n        animate={{ x: [0, -32] }}\n        transition={{ duration: 1, repeat: Infinity, ease: \"linear\" }}\n      >\n        {Array.from({ length: 8 }).map((_, i) => (\n          <div key={i} className=\"w-1.5 h-1.5 bg-zinc-800 dark:bg-white rounded-full shrink-0\" />\n        ))}\n      </motion.div>\n    </div>\n  );\n};\n"
+}

package/registry/cross-spinner.json

@@ -0,0 +1,8 @@
+{
+  "id": "cross-spinner",
+  "file": "cross-spinner.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const CrossSpinner = () => {\n  return (\n    <motion.div\n      className=\"relative w-8 h-8 flex items-center justify-center\"\n      animate={{ rotate: [0, 90, 180, 270, 360] }}\n      transition={{ duration: 2, repeat: Infinity, ease: \"easeInOut\" }}\n    >\n      <div className=\"absolute w-full h-1.5 bg-zinc-800 dark:bg-white rounded-full\" />\n      <div className=\"absolute h-full w-1.5 bg-zinc-800 dark:bg-white rounded-full\" />\n    </motion.div>\n  );\n};\n"
+}

package/registry/cube-flip-spring.json

@@ -0,0 +1,8 @@
+{
+  "id": "cube-flip-spring",
+  "file": "cube-flip-spring.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const CubeFlipSpring = () => (\n  <motion.div\n    className=\"w-8 h-8 bg-zinc-800 dark:bg-white rounded-lg\"\n    animate={{ rotateX: [0, 180, 180], rotateY: [0, 0, 180] }}\n    transition={{ duration: 2, repeat: Infinity, type: \"spring\", bounce: 0.2 }}\n  />\n);\n"
+}

package/registry/cursor-trail.json

@@ -0,0 +1,8 @@
+{
+  "id": "cursor-trail",
+  "file": "cursor-trail.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React, { useEffect, useState } from 'react';\nimport { motion, useSpring } from 'framer-motion';\n\ninterface CursorTrailProps {\n  color?: string;\n  size?: number;\n  count?: number;\n}\n\nexport function CursorTrail({\n  color = 'bg-blue-500',\n  size = 8,\n  count = 6,\n}: CursorTrailProps) {\n  const [coords, setCoords] = useState({ x: 0, y: 0 });\n  const [isVisible, setIsVisible] = useState(false);\n\n  useEffect(() => {\n    const handleMouseMove = (e: MouseEvent) => {\n      setCoords({ x: e.clientX, y: e.clientY });\n      if (!isVisible) setIsVisible(true);\n    };\n\n    const handleMouseLeave = () => {\n      setIsVisible(false);\n    };\n\n    window.addEventListener('mousemove', handleMouseMove, { passive: true });\n    document.addEventListener('mouseleave', handleMouseLeave);\n    \n    return () => {\n      window.removeEventListener('mousemove', handleMouseMove);\n      document.removeEventListener('mouseleave', handleMouseLeave);\n    };\n  }, [isVisible]);\n\n  // Create an array of springs, each following the one in front of it\n  return (\n    <>\n      {isVisible && Array.from({ length: count }).map((_, index) => {\n        // Higher index elements have more damping/delay\n        const springConfig = {\n          stiffness: 300 - index * 30,\n          damping: 25 + index * 2,\n          mass: 0.2 + index * 0.1,\n        };\n\n        return (\n          <TrailDot\n            key={index}\n            index={index}\n            coords={coords}\n            springConfig={springConfig}\n            size={size}\n            color={color}\n            count={count}\n          />\n        );\n      })}\n    </>\n  );\n}\n\ninterface TrailDotProps {\n  index: number;\n  coords: { x: number; y: number };\n  springConfig: { stiffness: number; damping: number; mass: number };\n  size: number;\n  color: string;\n  count: number;\n}\n\nfunction TrailDot({\n  index,\n  coords,\n  springConfig,\n  size,\n  color,\n  count,\n}: TrailDotProps) {\n  const x = useSpring(coords.x, springConfig);\n  const y = useSpring(coords.y, springConfig);\n\n  useEffect(() => {\n    x.set(coords.x);\n    y.set(coords.y);\n  }, [coords, x, y]);\n\n  // Calculate size and opacity based on index (shrinking tail)\n  const dotSize = size * (1 - index / count);\n  const opacity = 1 - index / count;\n\n  return (\n    <motion.div\n      style={{\n        x,\n        y,\n        width: dotSize,\n        height: dotSize,\n        translateX: '-50%',\n        translateY: '-50%',\n        opacity,\n      }}\n      className={`fixed top-0 left-0 rounded-full pointer-events-none z-[9999] ${color}`}\n    />\n  );\n}\n"
+}

package/registry/dash-ring.json

@@ -0,0 +1,8 @@
+{
+  "id": "dash-ring",
+  "file": "dash-ring.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const DashRing = () => {\n  return (\n    <svg className=\"w-12 h-12\" viewBox=\"0 0 50 50\">\n      <motion.circle\n        cx=\"25\" cy=\"25\" r=\"20\"\n        className=\"stroke-zinc-800 dark:stroke-white fill-none\"\n        strokeWidth=\"3\"\n        strokeDasharray=\"8 8\"\n        animate={{ rotate: 360 }}\n        style={{ transformOrigin: 'center' }}\n        transition={{ duration: 4, repeat: Infinity, ease: \"linear\" }}\n      />\n    </svg>\n  );\n};\n"
+}

package/registry/dashed-spiral.json

@@ -0,0 +1,8 @@
+{
+  "id": "dashed-spiral",
+  "file": "dashed-spiral.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const DashedSpiral = () => (\n  <motion.div\n    className=\"w-10 h-10 border-[3px] border-zinc-800 dark:border-zinc-700 rounded-full border-dashed\"\n    animate={{ rotate: 360, scale: [1, 1.1, 1] }}\n    transition={{ duration: 4, repeat: Infinity, ease: \"linear\" }}\n  />\n);\n"
+}

package/registry/diamond-grid.json

@@ -0,0 +1,8 @@
+{
+  "id": "diamond-grid",
+  "file": "diamond-grid.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const DiamondGrid = () => {\n  return (\n    <div className=\"grid grid-cols-2 gap-2 rotate-45\">\n      {[0, 1, 2, 3].map((i) => (\n        <motion.div\n          key={i}\n          className=\"w-3 h-3 bg-zinc-800 dark:bg-white rounded-sm\"\n          animate={{ scale: [1, 0.5, 1], opacity: [1, 0.3, 1] }}\n          transition={{ duration: 1.5, repeat: Infinity, delay: i * 0.2, ease: \"easeInOut\" }}\n        />\n      ))}\n    </div>\n  );\n};\n"
+}

package/registry/diamond-rotate-spring.json

@@ -0,0 +1,8 @@
+{
+  "id": "diamond-rotate-spring",
+  "file": "diamond-rotate-spring.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const DiamondRotateSpring = () => (\n  <motion.div\n    className=\"w-8 h-8 bg-zinc-800 dark:bg-white rounded-sm origin-center\"\n    style={{ rotate: 45 }}\n    animate={{ rotate: [45, 135, 225, 315] }}\n    transition={{ duration: 2, repeat: Infinity, type: \"spring\", bounce: 0.4 }}\n  />\n);\n"
+}

package/registry/dot-spinner.json

@@ -0,0 +1,8 @@
+{
+  "id": "dot-spinner",
+  "file": "dot-spinner.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const DotSpinner = () => {\n  return (\n    <div className=\"relative w-10 h-10\">\n      {[0, 1, 2, 3, 4, 5, 6, 7].map((i) => (\n        <motion.div\n          key={i}\n          className=\"absolute top-0 left-1/2 w-2 h-2 bg-zinc-800 dark:bg-white rounded-full -ml-1 origin-[4px_20px]\"\n          style={{ rotate: i * 45 }}\n          animate={{ opacity: [1, 0.2] }}\n          transition={{ duration: 1, repeat: Infinity, delay: i * 0.125, ease: \"linear\" }}\n        />\n      ))}\n    </div>\n  );\n};\n"
+}

package/registry/dots-ring.json

@@ -0,0 +1,8 @@
+{
+  "id": "dots-ring",
+  "file": "dots-ring.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const DotsRing = () => {\n  return (\n    <div className=\"relative w-12 h-12\">\n      {[0, 1, 2, 3, 4, 5, 6, 7].map((i) => (\n        <motion.div\n          key={i}\n          className=\"absolute top-0 left-1/2 w-2 h-2 bg-zinc-800 dark:bg-white rounded-full -ml-1 origin-[4px_24px]\"\n          style={{ rotate: i * 45 }}\n          animate={{ scale: [1, 0.5, 1], opacity: [1, 0.3, 1] }}\n          transition={{ duration: 1.5, repeat: Infinity, delay: i * 0.15, ease: \"easeInOut\" }}\n        />\n      ))}\n    </div>\n  );\n};\n"
+}

package/registry/double-ring.json

@@ -0,0 +1,8 @@
+{
+  "id": "double-ring",
+  "file": "double-ring.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const DoubleRing = () => {\n  return (\n    <div className=\"relative w-10 h-10 flex items-center justify-center\">\n      <motion.div\n        className=\"absolute w-10 h-10 border-2 border-zinc-200 dark:border-zinc-800 rounded-full border-t-zinc-800 dark:border-t-white\"\n        animate={{ rotate: 360 }}\n        transition={{ duration: 1.5, repeat: Infinity, ease: \"linear\" }}\n      />\n      <motion.div\n        className=\"absolute w-6 h-6 border-2 border-zinc-200 dark:border-zinc-800 rounded-full border-b-zinc-800 dark:border-b-white\"\n        animate={{ rotate: -360 }}\n        transition={{ duration: 1, repeat: Infinity, ease: \"linear\" }}\n      />\n    </div>\n  );\n};\n"
+}

package/registry/drop-dot.json

@@ -0,0 +1,8 @@
+{
+  "id": "drop-dot",
+  "file": "drop-dot.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const DropDot = () => (\n  <div className=\"relative w-6 h-12 flex flex-col items-center\">\n    <motion.div\n      className=\"w-2.5 h-2.5 bg-zinc-800 dark:bg-white rounded-full absolute top-0 z-10\"\n      animate={{ y: [0, 24, 0], scaleY: [1, 1.2, 1], scaleX: [1, 0.8, 1] }}\n      transition={{ duration: 1, repeat: Infinity, ease: \"circIn\" }}\n    />\n    <div className=\"w-4 h-1 bg-zinc-300 dark:bg-zinc-700 rounded-full absolute bottom-2 blur-[1px]\" />\n  </div>\n);\n"
+}

package/registry/dual-arc.json

@@ -0,0 +1,8 @@
+{
+  "id": "dual-arc",
+  "file": "dual-arc.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const DualArc = () => {\n  return (\n    <div className=\"relative w-8 h-8 flex items-center justify-center\">\n      <motion.div\n        className=\"absolute inset-0 border-2 border-t-zinc-800 dark:border-t-white border-b-zinc-800 dark:border-b-white border-l-transparent border-r-transparent rounded-full\"\n        animate={{ rotate: 360, scale: [1, 0.82, 1] }}\n        transition={{\n          rotate: { duration: 1.2, repeat: Infinity, ease: \"linear\" },\n          scale: { duration: 1.2, repeat: Infinity, ease: \"easeInOut\" }\n        }}\n      />\n    </div>\n  );\n};\n"
+}

package/registry/dynamic-island.json

@@ -0,0 +1,8 @@
+{
+  "id": "dynamic-island",
+  "file": "dynamic-island.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const DynamicIsland = () => {\n  return (\n    <motion.div\n      className=\"bg-zinc-950 dark:bg-zinc-900 border border-black/10 dark:border-white/10 rounded-full flex items-center justify-center px-4 py-2 gap-3 h-8 shadow-sm\"\n      animate={{\n        width: [80, 110, 80],\n      }}\n      transition={{\n        duration: 2.2,\n        repeat: Infinity,\n        ease: \"easeInOut\",\n      }}\n    >\n      {/* Green indicator dot */}\n      <motion.div\n        className=\"w-1.5 h-1.5 rounded-full bg-emerald-500\"\n        animate={{ opacity: [0.4, 1, 0.4] }}\n        transition={{ duration: 1.1, repeat: Infinity, ease: \"easeInOut\" }}\n      />\n      {/* Waveform line */}\n      <div className=\"flex gap-1 items-center h-2\">\n        {[0, 1, 2].map((i) => (\n          <motion.div\n            key={i}\n            className=\"w-0.5 bg-zinc-300 dark:bg-zinc-500 rounded-full\"\n            animate={{ height: [3, 8, 3] }}\n            transition={{\n              duration: 0.8,\n              repeat: Infinity,\n              ease: \"easeInOut\",\n              delay: i * 0.15,\n            }}\n          />\n        ))}\n      </div>\n    </motion.div>\n  );\n};\n"
+}

package/registry/elastic-bars.json

@@ -0,0 +1,8 @@
+{
+  "id": "elastic-bars",
+  "file": "elastic-bars.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const ElasticBars = () => (\n  <div className=\"flex space-x-2 h-10 items-center justify-center\">\n    {[0, 1, 2].map((i) => (\n      <motion.div\n        key={i}\n        className=\"w-2 bg-zinc-800 dark:bg-white rounded-full\"\n        animate={{ height: [8, 36, 8] }}\n        transition={{\n          duration: 1.1,\n          repeat: Infinity,\n          ease: \"easeInOut\",\n          delay: i * 0.15,\n        }}\n      />\n    ))}\n  </div>\n);\n"
+}

package/registry/elastic-square.json

@@ -0,0 +1,8 @@
+{
+  "id": "elastic-square",
+  "file": "elastic-square.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const ElasticSquare = () => (\n  <div className=\"h-12 flex items-end border-b-2 border-zinc-200 dark:border-zinc-800 w-12 justify-center\">\n    <motion.div\n      className=\"w-6 h-6 bg-zinc-800 dark:bg-white rounded-sm origin-bottom\"\n      animate={{ y: [0, -20, 0], scaleY: [0.7, 1.2, 0.7], scaleX: [1.3, 0.8, 1.3] }}\n      transition={{ duration: 0.8, repeat: Infinity, ease: \"easeInOut\" }}\n    />\n  </div>\n);\n"
+}

package/registry/expanding-cross.json

@@ -0,0 +1,8 @@
+{
+  "id": "expanding-cross",
+  "file": "expanding-cross.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const ExpandingCross = () => {\n  return (\n    <div className=\"relative w-8 h-8\">\n      <motion.div\n        className=\"absolute top-1/2 left-0 w-full h-1 bg-zinc-800 dark:bg-white -mt-0.5 rounded-full\"\n        animate={{ scaleX: [0.2, 1, 0.2] }}\n        transition={{ duration: 1.5, repeat: Infinity, ease: \"easeInOut\" }}\n      />\n      <motion.div\n        className=\"absolute left-1/2 top-0 h-full w-1 bg-zinc-800 dark:bg-white -ml-0.5 rounded-full\"\n        animate={{ scaleY: [0.2, 1, 0.2] }}\n        transition={{ duration: 1.5, repeat: Infinity, ease: \"easeInOut\", delay: 0.75 }}\n      />\n    </div>\n  );\n};\n"
+}

package/registry/face-id-scan.json

@@ -0,0 +1,8 @@
+{
+  "id": "face-id-scan",
+  "file": "face-id-scan.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const FaceIDScan = () => (\n  <div className=\"w-12 h-12 border-2 border-zinc-300 rounded-xl relative overflow-hidden flex items-center justify-center\">\n    <svg viewBox=\"0 0 24 24\" className=\"w-6 h-6 fill-zinc-300 dark:fill-zinc-700\">\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z\"/>\n    </svg>\n    <motion.div\n      className=\"absolute left-0 w-full h-8 bg-gradient-to-b from-transparent to-green-400/30 border-b border-green-500\"\n      animate={{ top: [\"-100%\", \"100%\", \"-100%\"] }}\n      transition={{ duration: 2.5, repeat: Infinity, ease: \"linear\" }}\n    />\n  </div>\n);\n"
+}

package/registry/fade-arc.json

@@ -0,0 +1,6 @@
+{
+  "id": "fade-arc",
+  "file": "fade-arc.tsx",
+  "dependencies": [],
+  "content": "\"use client\";\nimport React from 'react';\n\nexport const FadeArc = () => {\n  return (\n    <div className=\"relative w-9 h-9\">\n      <svg className=\"w-full h-full animate-spin\" viewBox=\"0 0 50 50\">\n        <circle\n          className=\"stroke-zinc-200 dark:stroke-zinc-800\"\n          cx=\"25\"\n          cy=\"25\"\n          r=\"20\"\n          fill=\"none\"\n          strokeWidth=\"3.5\"\n        />\n        <circle\n          className=\"stroke-zinc-800 dark:stroke-white\"\n          cx=\"25\"\n          cy=\"25\"\n          r=\"20\"\n          fill=\"none\"\n          strokeWidth=\"3.5\"\n          strokeDasharray=\"80\"\n          strokeDashoffset=\"28\"\n          strokeLinecap=\"round\"\n        />\n      </svg>\n    </div>\n  );\n};\n"
+}

package/registry/fade-dots.json

@@ -0,0 +1,8 @@
+{
+  "id": "fade-dots",
+  "file": "fade-dots.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const FadeDots = () => {\n  return (\n    <div className=\"flex space-x-2\">\n      {[0, 1, 2, 3].map((i) => (\n        <motion.div\n          key={i}\n          className=\"w-2.5 h-2.5 bg-zinc-800 dark:bg-white rounded-full\"\n          animate={{ opacity: [0, 1, 0] }}\n          transition={{ duration: 1.5, repeat: Infinity, delay: i * 0.2, ease: \"linear\" }}\n        />\n      ))}\n    </div>\n  );\n};\n"
+}

package/registry/fade-down.json

@@ -0,0 +1,8 @@
+{
+  "id": "fade-down",
+  "file": "fade-down.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\ninterface FadeDownProps {\n  children: React.ReactNode;\n  duration?: number;\n  delay?: number;\n  yOffset?: number;\n  className?: string;\n}\n\nexport function FadeDown({\n  children,\n  duration = 0.6,\n  delay = 0,\n  yOffset = -20,\n  className = '',\n}: FadeDownProps) {\n  return (\n    <motion.div\n      initial={{ opacity: 0, y: yOffset }}\n      animate={{ opacity: 1, y: 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/fade-in.json

@@ -0,0 +1,8 @@
+{
+  "id": "fade-in",
+  "file": "fade-in.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\ninterface FadeInProps {\n  children: React.ReactNode;\n  duration?: number;\n  delay?: number;\n  className?: string;\n}\n\nexport function FadeIn({\n  children,\n  duration = 0.5,\n  delay = 0,\n  className = '',\n}: FadeInProps) {\n  return (\n    <motion.div\n      initial={{ opacity: 0 }}\n      animate={{ opacity: 1 }}\n      transition={{\n        duration,\n        delay,\n        ease: [0.215, 0.61, 0.355, 1], // easeOutCubic\n      }}\n      className={className}\n    >\n      {children}\n    </motion.div>\n  );\n}\n"
+}

package/registry/fade-up.json

@@ -0,0 +1,8 @@
+{
+  "id": "fade-up",
+  "file": "fade-up.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\ninterface FadeUpProps {\n  children: React.ReactNode;\n  duration?: number;\n  delay?: number;\n  yOffset?: number;\n  className?: string;\n}\n\nexport function FadeUp({\n  children,\n  duration = 0.6,\n  delay = 0,\n  yOffset = 20,\n  className = '',\n}: FadeUpProps) {\n  return (\n    <motion.div\n      initial={{ opacity: 0, y: yOffset }}\n      animate={{ opacity: 1, y: 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/flip-square.json

@@ -0,0 +1,8 @@
+{
+  "id": "flip-square",
+  "file": "flip-square.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const FlipSquare = () => {\n  return (\n    <motion.div\n      className=\"w-8 h-8 bg-zinc-800 dark:bg-white rounded-md shadow-sm\"\n      animate={{ rotateX: [0, 180, 180, 0], rotateY: [0, 0, 180, 180] }}\n      transition={{ duration: 2, repeat: Infinity, ease: \"easeInOut\" }}\n    />\n  );\n};\n"
+}

package/registry/floating-diamonds.json

@@ -0,0 +1,8 @@
+{
+  "id": "floating-diamonds",
+  "file": "floating-diamonds.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const FloatingDiamonds = () => {\n  return (\n    <div className=\"flex space-x-2\">\n      {[0, 1, 2].map((i) => (\n        <motion.div\n          key={i}\n          className=\"w-3 h-3 bg-zinc-800 dark:bg-white rounded-sm rotate-45\"\n          animate={{ y: [0, -10, 0] }}\n          transition={{ duration: 1, repeat: Infinity, delay: i * 0.2, ease: \"easeInOut\" }}\n        />\n      ))}\n    </div>\n  );\n};\n"
+}

package/registry/fluid-bars.json

@@ -0,0 +1,8 @@
+{
+  "id": "fluid-bars",
+  "file": "fluid-bars.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const FluidBars = () => (\n  <div className=\"flex space-x-1\">\n    {[0,1,2,3].map(i => (\n      <motion.div\n        key={i}\n        className=\"w-1.5 h-8 bg-zinc-800 dark:bg-white rounded-full origin-bottom\"\n        animate={{ rotate: [-15, 15, -15], scaleY: [0.8, 1, 0.8] }}\n        transition={{ duration: 1.5, repeat: Infinity, delay: i * 0.1, ease: \"easeInOut\" }}\n      />\n    ))}\n  </div>\n);\n"
+}

package/registry/fluid-diamond.json

@@ -0,0 +1,8 @@
+{
+  "id": "fluid-diamond",
+  "file": "fluid-diamond.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const FluidDiamond = () => (\n  <motion.div\n    className=\"w-6 h-6 bg-zinc-800 dark:bg-white rounded-sm\"\n    style={{ rotate: 45 }}\n    animate={{ scaleX: [1, 1.5, 1], scaleY: [1, 0.5, 1] }}\n    transition={{ duration: 1.5, repeat: Infinity, ease: \"easeInOut\" }}\n  />\n);\n"
+}

package/registry/fluid-dot-orbit.json

@@ -0,0 +1,8 @@
+{
+  "id": "fluid-dot-orbit",
+  "file": "fluid-dot-orbit.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const FluidDotOrbit = () => (\n  <div className=\"relative w-10 h-10 flex items-center justify-center\">\n    <div className=\"w-2.5 h-2.5 bg-zinc-800 dark:bg-white rounded-full\" />\n    <motion.div\n      className=\"absolute inset-0\"\n      animate={{ rotate: 360 }}\n      transition={{ duration: 2, repeat: Infinity, ease: \"linear\" }}\n    >\n      <div className=\"w-2 h-2 bg-zinc-500 dark:bg-zinc-350 rounded-full absolute top-1 left-1/2 -ml-1\" />\n    </motion.div>\n  </div>\n);\n"
+}

package/registry/fluid-skeleton.json

@@ -0,0 +1,8 @@
+{
+  "id": "fluid-skeleton",
+  "file": "fluid-skeleton.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const FluidSkeleton = () => (\n  <div className=\"w-24 h-10 bg-zinc-200 dark:bg-zinc-800 rounded-xl overflow-hidden relative\">\n    <motion.div\n      className=\"absolute inset-0 bg-gradient-to-r from-transparent via-white/60 to-transparent\"\n      animate={{ x: [\"-100%\", \"200%\"] }}\n      transition={{ duration: 1.5, repeat: Infinity, ease: \"linear\" }}\n    />\n  </div>\n);\n"
+}

package/registry/gears.json

@@ -0,0 +1,8 @@
+{
+  "id": "gears",
+  "file": "gears.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const Gears = () => {\n  return (\n    <div className=\"flex space-x-[-4px]\">\n      <motion.div\n        className=\"w-8 h-8 border-4 border-dashed border-zinc-800 dark:border-zinc-700 rounded-full\"\n        animate={{ rotate: 360 }}\n        transition={{ duration: 4, repeat: Infinity, ease: \"linear\" }}\n      />\n      <motion.div\n        className=\"w-6 h-6 border-[3px] border-dashed border-zinc-500 rounded-full mt-3\"\n        animate={{ rotate: -360 }}\n        transition={{ duration: 3, repeat: Infinity, ease: \"linear\" }}\n      />\n    </div>\n  );\n};\n"
+}

package/registry/glassmorphic-card.json

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

package/registry/glow-button.json

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

package/registry/gradient-arc.json

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

package/registry/grid-dots.json

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

package/registry/haptic-ring.json

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

package/registry/heartbeat.json

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

package/registry/hexagon-spinner.json

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

package/registry/hourglass.json

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

package/registry/infinity-path.json

@@ -0,0 +1,8 @@
+{
+  "id": "infinity-path",
+  "file": "infinity-path.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const InfinityPath = () => {\n  return (\n    <svg className=\"w-12 h-6 overflow-visible\" viewBox=\"0 0 60 30\">\n      <path\n        d=\"M 15 15 C 15 5, 25 5, 30 15 C 35 25, 45 25, 45 15 C 45 5, 35 5, 30 15 C 25 25, 15 25, 15 15\"\n        className=\"stroke-zinc-200 dark:stroke-zinc-800 fill-none\"\n        strokeWidth=\"4\"\n        strokeLinecap=\"round\"\n      />\n      <motion.path\n        d=\"M 15 15 C 15 5, 25 5, 30 15 C 35 25, 45 25, 45 15 C 45 5, 35 5, 30 15 C 25 25, 15 25, 15 15\"\n        className=\"stroke-zinc-800 dark:stroke-white fill-none\"\n        strokeWidth=\"4\"\n        strokeLinecap=\"round\"\n        strokeDasharray=\"100\"\n        animate={{ strokeDashoffset: [100, -100] }}\n        transition={{ duration: 2, repeat: Infinity, ease: \"linear\" }}\n      />\n    </svg>\n  );\n};\n"
+}

package/registry/intersecting-rings.json

@@ -0,0 +1,8 @@
+{
+  "id": "intersecting-rings",
+  "file": "intersecting-rings.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const IntersectingRings = () => {\n  return (\n    <div className=\"relative w-12 h-12 flex items-center justify-center [perspective:800px]\">\n      <motion.div\n        className=\"absolute w-10 h-10 border-2 border-t-zinc-800 dark:border-t-white border-r-zinc-800/30 dark:border-r-white/30 border-b-zinc-800/10 dark:border-b-white/10 border-l-transparent rounded-full\"\n        style={{ transformStyle: \"preserve-3d\" }}\n        animate={{ rotateX: 360, rotateY: 180 }}\n        transition={{ duration: 2.2, repeat: Infinity, ease: \"linear\" }}\n      />\n      <motion.div\n        className=\"absolute w-10 h-10 border-2 border-b-zinc-800 dark:border-b-white border-t-zinc-800/30 dark:border-t-white/30 border-l-zinc-800/10 dark:border-l-white/10 border-r-transparent rounded-full\"\n        style={{ transformStyle: \"preserve-3d\" }}\n        animate={{ rotateX: 180, rotateY: 360 }}\n        transition={{ duration: 2.2, repeat: Infinity, ease: \"linear\" }}\n      />\n    </div>\n  );\n};\n"
+}