@mova-ui/react 0.1.0

package/registry/ios-spinner.json

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

package/registry/line-spinner.json

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

package/registry/liquid-dots.json

@@ -0,0 +1,8 @@
+{
+  "id": "liquid-dots",
+  "file": "liquid-dots.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const LiquidDots = () => {\n  return (\n    <div className=\"relative w-16 h-8 flex items-center justify-center\" style={{ filter: \"url(#goo)\" }}>\n      <svg className=\"absolute w-0 h-0\">\n        <defs>\n          <filter id=\"goo\">\n            <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"4\" result=\"blur\" />\n            <feColorMatrix in=\"blur\" mode=\"matrix\" values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7\" result=\"goo\" />\n            <feBlend in=\"SourceGraphic\" in2=\"goo\" />\n          </filter>\n        </defs>\n      </svg>\n      <motion.div\n        className=\"absolute w-6 h-6 bg-zinc-800 dark:bg-white rounded-full\"\n        animate={{ x: [-16, 16, -16] }}\n        transition={{ duration: 2, repeat: Infinity, ease: \"easeInOut\" }}\n      />\n      <motion.div\n        className=\"absolute w-6 h-6 bg-zinc-800 dark:bg-white rounded-full\"\n        animate={{ x: [16, -16, 16] }}\n        transition={{ duration: 2, repeat: Infinity, ease: \"easeInOut\" }}\n      />\n    </div>\n  );\n};\n"
+}

package/registry/mac-terminal.json

@@ -0,0 +1,8 @@
+{
+  "id": "mac-terminal",
+  "file": "mac-terminal.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const MacTerminal = () => (\n  <div className=\"flex items-center text-zinc-900 dark:text-white font-mono text-sm\">\n    <span>~ %</span>\n    <motion.span\n      className=\"ml-1.5 w-2 h-4 bg-zinc-900 dark:bg-white inline-block\"\n      animate={{ opacity: [1, 0, 1] }}\n      transition={{ duration: 1, repeat: Infinity, ease: \"linear\" }}\n    />\n  </div>\n);\n"
+}

package/registry/magnetic-button.json

@@ -0,0 +1,8 @@
+{
+  "id": "magnetic-button",
+  "file": "magnetic-button.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React, { useRef, useState } from 'react';\nimport { motion, useSpring } from 'framer-motion';\n\ninterface MagneticButtonProps {\n  children: React.ReactNode;\n  range?: number;\n  strength?: number;\n  className?: string;\n  onClick?: () => void;\n}\n\nexport function MagneticButton({\n  children,\n  range = 45,\n  strength = 0.35,\n  className = '',\n  onClick,\n}: MagneticButtonProps) {\n  const ref = useRef<HTMLButtonElement>(null);\n  const [position, setPosition] = useState({ x: 0, y: 0 });\n\n  const springConfig = { stiffness: 150, damping: 15, mass: 0.6 };\n  const x = useSpring(0, springConfig);\n  const y = useSpring(0, springConfig);\n\n  const handleMouseMove = (e: React.MouseEvent) => {\n    if (!ref.current) return;\n    const { clientX, clientY } = e;\n    const { left, top, width, height } = ref.current.getBoundingClientRect();\n    \n    // Center point of the button\n    const centerX = left + width / 2;\n    const centerY = top + height / 2;\n\n    // Calculate distance\n    const dist = Math.hypot(clientX - centerX, clientY - centerY);\n\n    if (dist < range) {\n      // Magnetic pull\n      const targetX = (clientX - centerX) * strength;\n      const targetY = (clientY - centerY) * strength;\n      x.set(targetX);\n      y.set(targetY);\n    } else {\n      // Return to center\n      x.set(0);\n      y.set(0);\n    }\n  };\n\n  const handleMouseLeave = () => {\n    x.set(0);\n    y.set(0);\n  };\n\n  return (\n    <motion.button\n      ref={ref}\n      onMouseMove={handleMouseMove}\n      onMouseLeave={handleMouseLeave}\n      onClick={onClick}\n      style={{ x, y }}\n      className={`relative inline-flex items-center justify-center rounded-full bg-neutral-900 dark:bg-white text-white dark:text-black font-semibold text-sm h-11 px-6 shadow hover:scale-[1.03] transition-all cursor-pointer select-none border-0 ${className}`}\n    >\n      <span className=\"relative z-10 block pointer-events-none\">{children}</span>\n    </motion.button>\n  );\n}\n"
+}

package/registry/magnetic-dots.json

@@ -0,0 +1,8 @@
+{
+  "id": "magnetic-dots",
+  "file": "magnetic-dots.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const MagneticDots = () => (\n  <div className=\"flex space-x-1.5\" style={{ filter: \"url(#goo)\" }}>\n    <svg width=\"0\" height=\"0\" className=\"absolute hidden\">\n      <defs>\n        <filter id=\"goo\">\n          <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"2\" result=\"blur\" />\n          <feColorMatrix in=\"blur\" mode=\"matrix\" values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 15 -7\" result=\"goo\" />\n          <feComposite in=\"SourceGraphic\" in2=\"goo\" operator=\"atop\"/>\n        </filter>\n      </defs>\n    </svg>\n    <motion.div\n      className=\"w-4 h-4 bg-zinc-800 dark:bg-white rounded-full\"\n      animate={{ x: [0, 8, 0] }}\n      transition={{ duration: 1.5, repeat: Infinity, ease: \"easeInOut\" }}\n    />\n    <motion.div\n      className=\"w-4 h-4 bg-zinc-800 dark:bg-white rounded-full\"\n      animate={{ x: [0, -8, 0] }}\n      transition={{ duration: 1.5, repeat: Infinity, ease: \"easeInOut\" }}\n    />\n  </div>\n);\n"
+}

package/registry/minimal-triangle.json

@@ -0,0 +1,8 @@
+{
+  "id": "minimal-triangle",
+  "file": "minimal-triangle.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const MinimalTriangle = () => (\n  <svg className=\"w-10 h-10 overflow-visible\" viewBox=\"0 0 50 50\">\n    <polygon points=\"25,5 45,40 5,40\" className=\"stroke-zinc-200 dark:stroke-zinc-800 fill-none\" strokeWidth=\"3\" />\n    <motion.polygon\n      points=\"25,5 45,40 5,40\"\n      className=\"stroke-zinc-800 dark:stroke-white fill-none\"\n      strokeWidth=\"3\"\n      strokeDasharray=\"120\"\n      animate={{ strokeDashoffset: [120, 0, -120] }}\n      transition={{ duration: 2, repeat: Infinity, ease: \"easeInOut\" }}\n    />\n  </svg>\n);\n"
+}

package/registry/morph-dot-ring.json

@@ -0,0 +1,8 @@
+{
+  "id": "morph-dot-ring",
+  "file": "morph-dot-ring.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const MorphDotRing = () => (\n  <motion.div\n    className=\"grid grid-cols-2 gap-1 w-6 h-6\"\n    animate={{ rotate: 180, gap: [\"4px\", \"0px\", \"4px\"] }}\n    transition={{ duration: 2, repeat: Infinity, ease: \"easeInOut\" }}\n  >\n    {[0,1,2,3].map(i => <div key={i} className=\"w-full h-full bg-zinc-800 dark:bg-white rounded-full\" />)}\n  </motion.div>\n);\n"
+}

package/registry/morph-loader.json

@@ -0,0 +1,8 @@
+{
+  "id": "morph-loader",
+  "file": "morph-loader.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\ninterface MorphLoaderProps {\n  size?: number;\n  color?: string;\n  className?: string;\n}\n\nexport function MorphLoader({\n  size = 40,\n  color = 'bg-blue-500',\n  className = '',\n}: MorphLoaderProps) {\n  return (\n    <div className={`relative flex items-center justify-center ${className}`} style={{ width: size, height: size }}>\n      <motion.div\n        animate={{\n          borderRadius: ['25%', '50%', '50%', '25%', '25%'],\n          rotate: [0, 90, 180, 270, 360],\n          scale: [1, 0.8, 1.1, 0.8, 1],\n        }}\n        transition={{\n          duration: 2.2,\n          ease: 'easeInOut',\n          repeat: Infinity,\n        }}\n        style={{ width: size, height: size }}\n        className={`rounded-2xl ${color} shadow-lg`}\n      />\n    </div>\n  );\n}\n"
+}

package/registry/morphing-bars.json

@@ -0,0 +1,8 @@
+{
+  "id": "morphing-bars",
+  "file": "morphing-bars.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const MorphingBars = () => (\n  <motion.div\n    className=\"flex space-x-1 h-8 items-center\"\n    animate={{ gap: ['4px', '0px', '4px'] }}\n    transition={{ duration: 2, repeat: Infinity, ease: \"easeInOut\" }}\n  >\n    {[0,1,2].map(i => (\n      <motion.div\n        key={i}\n        className=\"w-2 h-8 bg-zinc-800 dark:bg-white rounded-sm\"\n        animate={{ height: [32, 16, 32] }}\n        transition={{ duration: 2, repeat: Infinity, ease: \"easeInOut\" }}\n      />\n    ))}\n  </motion.div>\n);\n"
+}

package/registry/morphing-infinity.json

@@ -0,0 +1,8 @@
+{
+  "id": "morphing-infinity",
+  "file": "morphing-infinity.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const MorphingInfinity = () => {\n  return (\n    <div className=\"w-12 h-6 flex justify-between items-center relative\">\n      <motion.div\n        className=\"w-6 h-6 border-2 border-zinc-800 dark:border-zinc-700 rounded-full\"\n        animate={{ x: [0, 24, 0], scale: [1, 0.5, 1] }}\n        transition={{ duration: 2, repeat: Infinity, ease: \"easeInOut\" }}\n      />\n      <motion.div\n        className=\"w-6 h-6 border-2 border-zinc-800 dark:border-zinc-700 rounded-full absolute top-0 left-0\"\n        animate={{ x: [24, 0, 24], scale: [0.5, 1, 0.5] }}\n        transition={{ duration: 2, repeat: Infinity, ease: \"easeInOut\" }}\n      />\n    </div>\n  );\n};\n"
+}

package/registry/morphing-ring.json

@@ -0,0 +1,8 @@
+{
+  "id": "morphing-ring",
+  "file": "morphing-ring.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const MorphingRing = () => (\n  <motion.div\n    className=\"w-10 h-10 border-[3px] border-zinc-800 dark:border-zinc-700\"\n    animate={{\n      rotate: 180,\n      borderRadius: [\"10%\", \"50%\", \"10%\"]\n    }}\n    transition={{ duration: 2, repeat: Infinity, ease: \"easeInOut\" }}\n  />\n);\n"
+}

package/registry/morphing-shape.json

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

package/registry/mouse-follow.json

@@ -0,0 +1,8 @@
+{
+  "id": "mouse-follow",
+  "file": "mouse-follow.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React, { useEffect, useState } from 'react';\nimport { motion, useSpring } from 'framer-motion';\n\ninterface MouseFollowProps {\n  children?: React.ReactNode;\n  stiffness?: number;\n  damping?: number;\n  className?: string;\n}\n\nexport function MouseFollow({\n  children,\n  stiffness = 180,\n  damping = 20,\n  className = '',\n}: MouseFollowProps) {\n  const [isVisible, setIsVisible] = useState(false);\n  const x = useSpring(0, { stiffness, damping });\n  const y = useSpring(0, { stiffness, damping });\n\n  useEffect(() => {\n    const handleMouseMove = (e: MouseEvent) => {\n      x.set(e.clientX);\n      y.set(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  }, [x, y, isVisible]);\n\n  if (!isVisible) return null;\n\n  return (\n    <motion.div\n      style={{\n        x,\n        y,\n        translateX: '-50%',\n        translateY: '-50%',\n      }}\n      className={`fixed top-0 left-0 pointer-events-none z-[9998] ${className}`}\n    >\n      {children || (\n        <div className=\"w-6 h-6 rounded-full border border-blue-500/50 bg-blue-500/10\" />\n      )}\n    </motion.div>\n  );\n}\n"
+}

package/registry/newtons-cradle.json

@@ -0,0 +1,8 @@
+{
+  "id": "newtons-cradle",
+  "file": "newtons-cradle.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const NewtonsCradle = () => {\n  return (\n    <div className=\"flex items-center justify-center space-x-0.5\">\n      <motion.div\n        className=\"w-3 h-3 bg-zinc-800 dark:bg-white rounded-full origin-top\"\n        animate={{ rotate: [25, 0, 0, 0, 0, 25] }}\n        transition={{ duration: 1.5, repeat: Infinity, ease: \"easeInOut\" }}\n      />\n      <div className=\"w-3 h-3 bg-zinc-800 dark:bg-white rounded-full\" />\n      <div className=\"w-3 h-3 bg-zinc-800 dark:bg-white rounded-full\" />\n      <motion.div\n        className=\"w-3 h-3 bg-zinc-800 dark:bg-white rounded-full origin-top\"\n        animate={{ rotate: [0, 0, 0, -25, 0, 0] }}\n        transition={{ duration: 1.5, repeat: Infinity, ease: \"easeInOut\" }}\n      />\n    </div>\n  );\n};\n"
+}

package/registry/offset-rings.json

@@ -0,0 +1,8 @@
+{
+  "id": "offset-rings",
+  "file": "offset-rings.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const OffsetRings = () => (\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-x-transparent rounded-full\"\n      animate={{ rotate: [0, 180, 360] }}\n      transition={{ duration: 2, repeat: Infinity, ease: \"easeInOut\" }}\n    />\n    <motion.div\n      className=\"absolute w-8 h-8 border-2 border-zinc-500 border-y-transparent rounded-full\"\n      animate={{ rotate: [0, -180, -360] }}\n      transition={{ duration: 2, repeat: Infinity, ease: \"easeInOut\", delay: 0.2 }}\n    />\n  </div>\n);\n"
+}

package/registry/orbiting-circles.json

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

package/registry/orbiting-dot.json

@@ -0,0 +1,8 @@
+{
+  "id": "orbiting-dot",
+  "file": "orbiting-dot.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const OrbitingDot = () => {\n  return (\n    <div className=\"relative w-10 h-10 flex items-center justify-center\">\n      <div className=\"w-2 h-2 bg-zinc-300 dark:bg-zinc-700 rounded-full\" />\n      <motion.div\n        className=\"absolute w-full h-full border border-zinc-200 dark:border-zinc-800 rounded-full\"\n        animate={{ rotate: 360 }}\n        transition={{ duration: 2, repeat: Infinity, ease: \"linear\" }}\n      >\n        <div className=\"absolute top-0 left-1/2 -ml-1.5 -mt-1.5 w-3 h-3 bg-zinc-800 dark:bg-white rounded-full shadow-sm\" />\n      </motion.div>\n    </div>\n  );\n};\n"
+}

package/registry/origami-shape.json

@@ -0,0 +1,8 @@
+{
+  "id": "origami-shape",
+  "file": "origami-shape.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const OrigamiShape = () => (\n  <div className=\"relative w-10 h-10\">\n    <motion.div\n      className=\"absolute top-0 left-0 w-5 h-5 bg-zinc-800 dark:bg-white rounded-tl-md\"\n      animate={{ rotateY: [0, 180, 0] }}\n      style={{ transformOrigin: \"right\" }}\n      transition={{ duration: 2, repeat: Infinity, ease: \"easeInOut\" }}\n    />\n    <motion.div\n      className=\"absolute bottom-0 right-0 w-5 h-5 bg-zinc-500 dark:bg-zinc-350 rounded-br-md\"\n      animate={{ rotateY: [0, 180, 0] }}\n      style={{ transformOrigin: \"left\" }}\n      transition={{ duration: 2, repeat: Infinity, ease: \"easeInOut\" }}\n    />\n  </div>\n);\n"
+}

package/registry/page-transition.json

@@ -0,0 +1,8 @@
+{
+  "id": "page-transition",
+  "file": "page-transition.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React, { useEffect, useRef } from 'react';\nimport { motion, Variants } from 'framer-motion';\n\nexport type TransitionType =\n  | 'double-stairs'\n  | 'shutter-stairs'\n  | 'split-stairs'\n  | 'horizontal-split'\n  | 'vertical-split'\n  | 'slash'\n  | 'lattice'\n  | 'curtain-shred'\n  | 'pixel'\n  | 'pixel-wave'\n  | 'pixel-spiral'\n  | 'vortex'\n  | 'cross-fade'\n  | 'expand-grow'\n  | 'push-slide'\n  | 'pop-over'\n  | 'depth-forward'\n  | 'liquid-wave';\n\nexport interface PageTransitionProps {\n  type?: TransitionType;\n  isVisible: boolean;\n  onComplete?: () => void;\n  className?: string;\n}\n\nexport const PageTransition: React.FC<PageTransitionProps> = ({\n  type = 'double-stairs',\n  isVisible,\n  onComplete,\n  className = '',\n}) => {\n  const pathRefs = useRef<(SVGPathElement | null)[]>([]);\n\n  useEffect(() => {\n    if (type !== 'liquid-wave' || !isVisible) return;\n    let animId: number;\n    const numPoints = 12;\n    const numPaths = 3;\n    const startTime = performance.now();\n\n    const delays = Array.from({ length: numPaths }, (_, i) =>\n      Array.from({ length: numPoints }, () => i * 0.08 + Math.random() * 0.15)\n    );\n\n    const animateFrame = (now: number) => {\n      const elapsedSec = (now - startTime) / 1000;\n      pathRefs.current.forEach((path, i) => {\n        if (!path) return;\n        const stepX = 100 / (numPoints - 1);\n        const pointsY = delays[i].map((delay) => {\n          const rawProgress = Math.max(0, Math.min(1, (elapsedSec - delay) / 0.65));\n          const easeProgress =\n            rawProgress < 0.5\n              ? 2 * rawProgress * rawProgress\n              : 1 - Math.pow(-2 * rawProgress + 2, 2) / 2;\n          return 100 - easeProgress * 110;\n        });\n\n        let d = `M 0 100 V ${pointsY[0]}`;\n        for (let j = 0; j < numPoints - 1; j++) {\n          const currentX = j * stepX;\n          const nextX = (j + 1) * stepX;\n          const cpX = currentX + stepX * 0.5;\n          d += ` C ${cpX} ${pointsY[j]} ${cpX} ${pointsY[j + 1]} ${nextX} ${pointsY[j + 1]}`;\n        }\n        d += ` V 100 H 0 Z`;\n        path.setAttribute('d', d);\n      });\n\n      if (now - startTime < 1300) {\n        animId = requestAnimationFrame(animateFrame);\n      } else if (onComplete) {\n        onComplete();\n      }\n    };\n\n    animId = requestAnimationFrame(animateFrame);\n    return () => cancelAnimationFrame(animId);\n  }, [isVisible, type, onComplete]);\n\n  if (!isVisible && type !== 'liquid-wave') return null;\n\n  if (type === 'double-stairs') {\n    const COLUMNS = 5;\n    const variants: Variants = {\n      initial: (i: number) => ({ y: i % 2 === 0 ? '-100%' : '100%' }),\n      enter: (i: number) => ({\n        y: '0%',\n        transition: { duration: 0.8, ease: [0.76, 0, 0.24, 1], delay: i * 0.05 },\n      }),\n      exit: (i: number) => ({\n        y: i % 2 === 0 ? '100%' : '-100%',\n        transition: { duration: 0.8, ease: [0.76, 0, 0.24, 1], delay: i * 0.05 },\n      }),\n    };\n\n    return (\n      <motion.div\n        className={`fixed inset-0 z-50 flex h-screen w-screen pointer-events-none ${className}`}\n        initial=\"initial\"\n        animate={isVisible ? 'enter' : 'exit'}\n        onAnimationComplete={() => {\n          if (onComplete) onComplete();\n        }}\n      >\n        {[...Array(COLUMNS)].map((_, i) => (\n          <motion.div\n            key={i}\n            variants={variants}\n            custom={i}\n            className=\"relative h-full flex-1 bg-neutral-900 border-r border-neutral-800 last:border-r-0\"\n          />\n        ))}\n      </motion.div>\n    );\n  }\n\n  if (type === 'liquid-wave') {\n    return (\n      <svg\n        className={`fixed inset-0 w-full h-full pointer-events-none z-50 ${className}`}\n        viewBox=\"0 0 100 100\"\n        preserveAspectRatio=\"none\"\n      >\n        <path ref={(el) => { pathRefs.current[0] = el; }} fill=\"#3f3f46\" style={{ opacity: 0.4 }} />\n        <path ref={(el) => { pathRefs.current[1] = el; }} fill=\"#27272a\" style={{ opacity: 0.75 }} />\n        <path ref={(el) => { pathRefs.current[2] = el; }} fill=\"#09090b\" />\n      </svg>\n    );\n  }\n\n  return (\n    <motion.div\n      className={`fixed inset-0 z-50 bg-neutral-900 pointer-events-none ${className}`}\n      initial={{ opacity: 0 }}\n      animate={isVisible ? { opacity: 1 } : { opacity: 0 }}\n      transition={{ duration: 0.4 }}\n    />\n  );\n};\n"
+}

package/registry/pendulum.json

@@ -0,0 +1,8 @@
+{
+  "id": "pendulum",
+  "file": "pendulum.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const Pendulum = () => {\n  return (\n    <div className=\"relative w-16 h-12 flex items-start justify-center\">\n      <div className=\"w-full h-1 bg-zinc-200 dark:bg-zinc-800 rounded-full rounded-b-none absolute top-0\" />\n      <motion.div\n        className=\"absolute top-0 w-1 bg-zinc-800 dark:bg-white origin-top flex flex-col items-center\"\n        animate={{ rotate: [-45, 45, -45] }}\n        transition={{ duration: 1.5, repeat: Infinity, ease: \"easeInOut\" }}\n      >\n        <div className=\"w-1 h-8 bg-zinc-800 dark:bg-white\" />\n        <div className=\"w-4 h-4 bg-zinc-800 dark:bg-white rounded-full\" />\n      </motion.div>\n    </div>\n  );\n};\n"
+}

package/registry/presets.json

@@ -0,0 +1,6 @@
+{
+  "id": "presets",
+  "file": "presets.ts",
+  "dependencies": [],
+  "content": "\"use client\";\n// Motion spring configuration presets for premium micro-interactions\nexport const presets = {\n  // Ultra-responsive, crisp snappy feel\n  snappy: {\n    type: \"spring\",\n    stiffness: 400,\n    damping: 28,\n    mass: 0.8\n  },\n  // Bouncy, playful bounce transition\n  bouncy: {\n    type: \"spring\",\n    stiffness: 300,\n    damping: 15,\n    mass: 1\n  },\n  // Smooth, elegant default easing transition\n  smooth: {\n    type: \"spring\",\n    stiffness: 220,\n    damping: 24,\n    mass: 1\n  },\n  // Gentle, low-speed movement\n  gentle: {\n    type: \"spring\",\n    stiffness: 120,\n    damping: 14,\n    mass: 1\n  },\n  // Stiff, high tension movement\n  stiff: {\n    type: \"spring\",\n    stiffness: 500,\n    damping: 40,\n    mass: 0.5\n  }\n} as const;\n"
+}

package/registry/progress-indicator.json

@@ -0,0 +1,8 @@
+{
+  "id": "progress-indicator",
+  "file": "progress-indicator.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion, useScroll, useSpring } from 'framer-motion';\n\ninterface ProgressIndicatorProps {\n  color?: string;\n  height?: number;\n  className?: string;\n}\n\nexport function ProgressIndicator({\n  color = 'bg-blue-500',\n  height = 4,\n  className = '',\n}: ProgressIndicatorProps) {\n  const { scrollYProgress } = useScroll();\n  const scaleX = useSpring(scrollYProgress, {\n    stiffness: 100,\n    damping: 30,\n    restDelta: 0.001,\n  });\n\n  return (\n    <motion.div\n      className={`fixed top-0 left-0 right-0 origin-left z-[9999] ${color} ${className}`}\n      style={{\n        scaleX,\n        height,\n        position: 'fixed',\n        top: 0,\n        left: 0,\n        right: 0,\n        originX: 0,\n        zIndex: 9999,\n      }}\n    />\n  );\n}\n"
+}

package/registry/pulsating-dots.json

@@ -0,0 +1,8 @@
+{
+  "id": "pulsating-dots",
+  "file": "pulsating-dots.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const PulsatingDots = () => {\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-full\"\n          animate={{ scale: [1, 1.5, 1], opacity: [0.5, 1, 0.5] }}\n          transition={{ duration: 1.2, repeat: Infinity, delay: i * 0.2, ease: \"easeInOut\" }}\n        />\n      ))}\n    </div>\n  );\n};\n"
+}

package/registry/pulse-dot.json

@@ -0,0 +1,8 @@
+{
+  "id": "pulse-dot",
+  "file": "pulse-dot.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const PulseDot = () => {\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 bg-zinc-800 dark:bg-white rounded-full\"\n        animate={{ scale: [0, 1], opacity: [0.8, 0] }}\n        transition={{ duration: 1.5, repeat: Infinity, ease: \"easeOut\" }}\n      />\n      <div className=\"w-3 h-3 bg-zinc-800 dark:bg-white rounded-full relative z-10\" />\n    </div>\n  );\n};\n"
+}

package/registry/pulse-dots.json

@@ -0,0 +1,8 @@
+{
+  "id": "pulse-dots",
+  "file": "pulse-dots.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const PulseDots = () => {\n  return (\n    <div className=\"flex space-x-1.5\">\n      {[0, 1, 2].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.2, 1, 0.2] }}\n          transition={{ duration: 1.4, repeat: Infinity, delay: i * 0.2 }}\n        />\n      ))}\n    </div>\n  );\n};\n"
+}

package/registry/pulse-square.json

@@ -0,0 +1,8 @@
+{
+  "id": "pulse-square",
+  "file": "pulse-square.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const PulseSquare = () => {\n  return (\n    <motion.div\n      className=\"w-8 h-8 border-4 border-zinc-800 dark:border-zinc-700 rounded-md\"\n      animate={{ scale: [1, 1.2, 1], opacity: [1, 0.3, 1], borderRadius: [\"20%\", \"50%\", \"20%\"] }}\n      transition={{ duration: 1.5, repeat: Infinity, ease: \"easeInOut\" }}\n    />\n  );\n};\n"
+}

package/registry/pulse.json

@@ -0,0 +1,8 @@
+{
+  "id": "pulse",
+  "file": "pulse.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\ninterface PulseProps {\n  size?: number;\n  color?: string;\n  className?: string;\n}\n\nexport function Pulse({\n  size = 12,\n  color = 'bg-blue-500',\n  className = '',\n}: PulseProps) {\n  return (\n    <div className={`relative flex items-center justify-center ${className}`} style={{ width: size, height: size }}>\n      {/* Center Solid Point */}\n      <span className={`absolute w-full h-full rounded-full ${color}`} />\n      \n      {/* Pulsing ring 1 */}\n      <motion.span\n        initial={{ scale: 1, opacity: 0.5 }}\n        animate={{ scale: 2.8, opacity: 0 }}\n        transition={{\n          repeat: Infinity,\n          duration: 1.8,\n          ease: 'easeOut',\n        }}\n        className={`absolute w-full h-full rounded-full ${color} opacity-40`}\n      />\n\n      {/* Pulsing ring 2 */}\n      <motion.span\n        initial={{ scale: 1, opacity: 0.5 }}\n        animate={{ scale: 2.8, opacity: 0 }}\n        transition={{\n          repeat: Infinity,\n          duration: 1.8,\n          delay: 0.6,\n          ease: 'easeOut',\n        }}\n        className={`absolute w-full h-full rounded-full ${color} opacity-40`}\n      />\n    </div>\n  );\n}\n"
+}

package/registry/pumping-heart.json

@@ -0,0 +1,8 @@
+{
+  "id": "pumping-heart",
+  "file": "pumping-heart.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const PumpingHeart = () => {\n  return (\n    <motion.div\n      className=\"w-8 h-8\"\n      animate={{ scale: [1, 1.25, 1, 1.25, 1] }}\n      transition={{ duration: 1.5, repeat: Infinity, ease: \"easeInOut\" }}\n    >\n      <svg viewBox=\"0 0 24 24\" className=\"fill-zinc-800 dark:fill-white\">\n        <path d=\"M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z\"/>\n      </svg>\n    </motion.div>\n  );\n};\n"
+}

package/registry/radar-sweep.json

@@ -0,0 +1,8 @@
+{
+  "id": "radar-sweep",
+  "file": "radar-sweep.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const RadarSweep = ({ theme = 'light' }: { theme?: 'light' | 'dark' }) => {\n  const isDark = theme === 'dark';\n  return (\n    <div className=\"relative w-12 h-12 rounded-full border border-zinc-800/10 dark:border-white/10 flex items-center justify-center overflow-hidden\">\n      {/* Concentric rings */}\n      <div className=\"absolute w-8 h-8 rounded-full border border-zinc-800/5 dark:border-white/5\" />\n      <div className=\"absolute w-4 h-4 rounded-full border border-zinc-800/5 dark:border-white/5\" />\n      \n      {/* Center dot */}\n      <div className=\"absolute w-1.5 h-1.5 rounded-full bg-zinc-800/80 dark:bg-white/80\" />\n\n      {/* Sweep hand */}\n      <motion.div\n        className=\"absolute inset-0 origin-center\"\n        style={{\n          background: isDark\n            ? \"conic-gradient(from 0deg, transparent 50%, rgba(255,255,255,0.02) 65%, rgba(255,255,255,0.15) 85%, rgba(255,255,255,0.55) 100%)\"\n            : \"conic-gradient(from 0deg, transparent 50%, rgba(39,39,42,0.02) 65%, rgba(39,39,42,0.1) 85%, rgba(39,39,42,0.45) 100%)\",\n        }}\n        animate={{ rotate: 360 }}\n        transition={{ duration: 1.8, repeat: Infinity, ease: \"linear\" }}\n      />\n    </div>\n  );\n};\n"
+}

package/registry/ring-sweep.json

@@ -0,0 +1,8 @@
+{
+  "id": "ring-sweep",
+  "file": "ring-sweep.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const RingSweep = () => {\n  return (\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: 360 }}\n      transition={{ duration: 1, repeat: Infinity, ease: \"linear\" }}\n    />\n  );\n};\n"
+}

package/registry/ripple-effect.json

@@ -0,0 +1,8 @@
+{
+  "id": "ripple-effect",
+  "file": "ripple-effect.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const RippleEffect = () => {\n  return (\n    <div className=\"relative w-12 h-12 flex items-center justify-center\">\n      {/* Center dot */}\n      <div className=\"absolute w-2.5 h-2.5 bg-zinc-800 dark:bg-white rounded-full\" />\n      {[0, 1, 2].map((i) => (\n        <motion.div\n          key={i}\n          className=\"absolute w-8 h-8 border border-zinc-850 dark:border-white rounded-full\"\n          initial={{ scale: 0.3, opacity: 0.8 }}\n          animate={{ scale: 1.6, opacity: 0 }}\n          transition={{\n            duration: 2.2,\n            repeat: Infinity,\n            ease: \"easeOut\",\n            delay: i * 0.7,\n          }}\n        />\n      ))}\n    </div>\n  );\n};\n"
+}

package/registry/rotating-cross.json

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

package/registry/rotating-triangle.json

@@ -0,0 +1,8 @@
+{
+  "id": "rotating-triangle",
+  "file": "rotating-triangle.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const RotatingTriangle = () => {\n  return (\n    <svg className=\"w-10 h-10 overflow-visible\" viewBox=\"0 0 50 50\">\n      <motion.polygon\n        points=\"25,5 45,40 5,40\"\n        className=\"stroke-zinc-800 dark:stroke-white fill-none origin-center\"\n        strokeWidth=\"4\"\n        strokeLinejoin=\"round\"\n        animate={{ rotate: 360 }}\n        transition={{ duration: 2, repeat: Infinity, ease: \"linear\" }}\n      />\n    </svg>\n  );\n};\n"
+}

package/registry/scale-in.json

@@ -0,0 +1,8 @@
+{
+  "id": "scale-in",
+  "file": "scale-in.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\ninterface ScaleInProps {\n  children: React.ReactNode;\n  duration?: number;\n  delay?: number;\n  initialScale?: number;\n  className?: string;\n}\n\nexport function ScaleIn({\n  children,\n  duration = 0.5,\n  delay = 0,\n  initialScale = 0.92,\n  className = '',\n}: ScaleInProps) {\n  return (\n    <motion.div\n      initial={{ opacity: 0, scale: initialScale }}\n      animate={{ opacity: 1, scale: 1 }}\n      transition={{\n        duration,\n        delay,\n        ease: [0.34, 1.56, 0.64, 1], // Custom springy cubic bezier\n      }}\n      className={className}\n    >\n      {children}\n    </motion.div>\n  );\n}\n"
+}

package/registry/scroll-reveal.json

@@ -0,0 +1,8 @@
+{
+  "id": "scroll-reveal",
+  "file": "scroll-reveal.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\ninterface ScrollRevealProps {\n  children: React.ReactNode;\n  duration?: number;\n  yOffset?: number;\n  xOffset?: number;\n  scale?: number;\n  className?: string;\n}\n\nexport function ScrollReveal({\n  children,\n  duration = 0.6,\n  yOffset = 30,\n  xOffset = 0,\n  scale = 0.95,\n  className = '',\n}: ScrollRevealProps) {\n  return (\n    <motion.div\n      initial={{ opacity: 0, y: yOffset, x: xOffset, scale }}\n      whileInView={{ opacity: 1, y: 0, x: 0, scale: 1 }}\n      viewport={{ once: true, margin: '-15%' }}\n      transition={{\n        duration,\n        ease: [0.16, 1, 0.3, 1], // easeOutExpo\n      }}\n      className={className}\n    >\n      {children}\n    </motion.div>\n  );\n}\n"
+}

package/registry/shape-shift-grid.json

@@ -0,0 +1,8 @@
+{
+  "id": "shape-shift-grid",
+  "file": "shape-shift-grid.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const ShapeShiftGrid = () => (\n  <div className=\"grid grid-cols-2 gap-1 w-8 h-8\">\n    {[0,1,2,3].map(i => (\n      <motion.div\n        key={i}\n        className=\"w-full h-full bg-zinc-800 dark:bg-white\"\n        animate={{ borderRadius: [\"10%\", \"50%\", \"10%\"], scale: [1, 0.8, 1] }}\n        transition={{ duration: 1.5, repeat: Infinity, delay: i * 0.1, ease: \"easeInOut\" }}\n      />\n    ))}\n  </div>\n);\n"
+}

package/registry/shimmer-line.json

@@ -0,0 +1,8 @@
+{
+  "id": "shimmer-line",
+  "file": "shimmer-line.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const ShimmerLine = () => {\n  return (\n    <div className=\"w-24 h-1 bg-zinc-200 dark:bg-zinc-800 rounded-full overflow-hidden relative\">\n      <motion.div\n        className=\"absolute top-0 left-0 bottom-0 w-1/3 bg-zinc-800 dark:bg-white rounded-full\"\n        animate={{ x: [\"-100%\", \"300%\"] }}\n        transition={{ duration: 1.5, repeat: Infinity, ease: \"easeInOut\" }}\n      />\n    </div>\n  );\n};\n"
+}

package/registry/siri-wave.json

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

package/registry/skeleton-loader.json

@@ -0,0 +1,8 @@
+{
+  "id": "skeleton-loader",
+  "file": "skeleton-loader.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const SkeletonLoader = () => {\n  return (\n    <div className=\"w-full max-w-[120px] space-y-2\">\n      <div className=\"flex items-center space-x-2\">\n        <motion.div\n          className=\"w-8 h-8 bg-zinc-200 dark:bg-zinc-800 rounded-full shrink-0\"\n          animate={{ opacity: [0.5, 1, 0.5] }}\n          transition={{ duration: 1.5, repeat: Infinity, ease: \"easeInOut\" }}\n        />\n        <motion.div\n          className=\"h-3 bg-zinc-200 dark:bg-zinc-800 rounded-full w-full\"\n          animate={{ opacity: [0.5, 1, 0.5] }}\n          transition={{ duration: 1.5, repeat: Infinity, ease: \"easeInOut\", delay: 0.2 }}\n        />\n      </div>\n      <motion.div\n        className=\"h-2 bg-zinc-200 dark:bg-zinc-800 rounded-full w-full\"\n        animate={{ opacity: [0.5, 1, 0.5] }}\n        transition={{ duration: 1.5, repeat: Infinity, ease: \"easeInOut\", delay: 0.4 }}\n      />\n      <motion.div\n        className=\"h-2 bg-zinc-200 dark:bg-zinc-800 rounded-full w-4/5\"\n        animate={{ opacity: [0.5, 1, 0.5] }}\n        transition={{ duration: 1.5, repeat: Infinity, ease: \"easeInOut\", delay: 0.6 }}\n      />\n    </div>\n  );\n};\n"
+}

package/registry/skeleton.json

@@ -0,0 +1,8 @@
+{
+  "id": "skeleton",
+  "file": "skeleton.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\ninterface SkeletonProps {\n  className?: string;\n  shimmerColor?: 'light' | 'dark';\n}\n\nexport function Skeleton({\n  className = '',\n  shimmerColor = 'dark',\n}: SkeletonProps) {\n  const isDark = shimmerColor === 'dark';\n  \n  const shimmerGradient = isDark\n    ? 'linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0) 100%)'\n    : 'linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.04) 50%, rgba(0,0,0,0) 100%)';\n\n  return (\n    <div\n      className={`relative overflow-hidden rounded-md bg-neutral-200/50 dark:bg-neutral-800/40 ${className}`}\n    >\n      {/* Premium Shimmer Sweep Animation */}\n      <motion.div\n        initial={{ x: '-150%' }}\n        animate={{ x: '150%' }}\n        transition={{\n          repeat: Infinity,\n          duration: 1.6,\n          ease: 'easeInOut',\n        }}\n        style={{\n          background: shimmerGradient,\n        }}\n        className=\"absolute inset-0 w-[80%] h-full\"\n      />\n    </div>\n  );\n}\n"
+}

package/registry/slide-left.json

@@ -0,0 +1,8 @@
+{
+  "id": "slide-left",
+  "file": "slide-left.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "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.json

@@ -0,0 +1,8 @@
+{
+  "id": "slide-right",
+  "file": "slide-right.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "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/sliding-bars.json

@@ -0,0 +1,8 @@
+{
+  "id": "sliding-bars",
+  "file": "sliding-bars.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "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/smooth-dot-shift.json

@@ -0,0 +1,8 @@
+{
+  "id": "smooth-dot-shift",
+  "file": "smooth-dot-shift.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const SmoothDotShift = () => (\n  <div className=\"relative w-12 h-3 flex items-center\">\n    <motion.div\n      className=\"absolute w-3 h-3 bg-zinc-800 dark:bg-white rounded-full z-10\"\n      animate={{ x: [0, 18, 36, 18, 0] }}\n      transition={{ duration: 2, repeat: Infinity, ease: \"easeInOut\" }}\n    />\n    <div className=\"w-3 h-3 bg-zinc-300 dark:bg-zinc-700 rounded-full absolute left-0\" />\n    <div className=\"w-3 h-3 bg-zinc-300 dark:bg-zinc-700 rounded-full absolute left-[18px]\" />\n    <div className=\"w-3 h-3 bg-zinc-300 dark:bg-zinc-700 rounded-full absolute left-[36px]\" />\n  </div>\n);\n"
+}

package/registry/smooth-ring.json

@@ -0,0 +1,6 @@
+{
+  "id": "smooth-ring",
+  "file": "smooth-ring.tsx",
+  "dependencies": [],
+  "content": "\"use client\";\nimport React from 'react';\n\nexport const SmoothRing = () => (\n  <div className=\"w-9 h-9\">\n    <svg className=\"w-full h-full animate-spin\" viewBox=\"0 0 32 32\">\n      <circle\n        cx=\"16\"\n        cy=\"16\"\n        r=\"14\"\n        fill=\"none\"\n        strokeWidth=\"3\"\n        className=\"stroke-zinc-200 dark:stroke-zinc-800\"\n      />\n      <circle\n        cx=\"16\"\n        cy=\"16\"\n        r=\"14\"\n        fill=\"none\"\n        strokeWidth=\"3\"\n        className=\"stroke-zinc-800 dark:stroke-white\"\n        strokeDasharray=\"38 80\"\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  </div>\n);\n"
+}

package/registry/smooth-rounded-square.json

@@ -0,0 +1,8 @@
+{
+  "id": "smooth-rounded-square",
+  "file": "smooth-rounded-square.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const SmoothRoundedSquare = () => (\n  <motion.div\n    className=\"w-10 h-10 border-[3px] border-zinc-800 dark:border-zinc-700\"\n    animate={{ borderRadius: [\"10%\", \"50%\", \"10%\"] }}\n    transition={{ duration: 2, repeat: Infinity, ease: \"easeInOut\" }}\n  />\n);\n"
+}

package/registry/spinning-squares.json

@@ -0,0 +1,8 @@
+{
+  "id": "spinning-squares",
+  "file": "spinning-squares.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const SpinningSquares = () => {\n  return (\n    <div className=\"relative w-10 h-10\">\n      <motion.div\n        className=\"absolute top-0 left-0 w-4 h-4 bg-zinc-800 dark:bg-white rounded-sm\"\n        animate={{ x: [0, 24, 24, 0, 0], y: [0, 0, 24, 24, 0] }}\n        transition={{ duration: 2, repeat: Infinity, ease: \"easeInOut\" }}\n      />\n      <motion.div\n        className=\"absolute bottom-0 right-0 w-4 h-4 bg-zinc-300 dark:bg-zinc-700 rounded-sm\"\n        animate={{ x: [0, -24, -24, 0, 0], y: [0, 0, -24, -24, 0] }}\n        transition={{ duration: 2, repeat: Infinity, ease: \"easeInOut\" }}\n      />\n    </div>\n  );\n};\n"
+}

package/registry/spiral-spinner.json

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

package/registry/spotlight.json

@@ -0,0 +1,8 @@
+{
+  "id": "spotlight",
+  "file": "spotlight.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React, { useRef, useState } from 'react';\nimport { motion } from 'framer-motion';\n\ninterface SpotlightProps {\n  children: React.ReactNode;\n  className?: string;\n  glowColor?: string;\n  glowSize?: number;\n}\n\nexport function Spotlight({\n  children,\n  className = '',\n  glowColor = 'rgba(255, 255, 255, 0.08)',\n  glowSize = 250,\n}: SpotlightProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [coords, setCoords] = useState({ x: 0, y: 0 });\n  const [opacity, setOpacity] = useState(0);\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\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    <div\n      ref={containerRef}\n      onMouseMove={handleMouseMove}\n      onMouseEnter={() => setOpacity(1)}\n      onMouseLeave={() => setOpacity(0)}\n      className={`relative overflow-hidden bg-neutral-950 border border-neutral-900 rounded-2xl p-6 ${className}`}\n    >\n      {/* Dynamic Cursor Spotlight Layer */}\n      <motion.div\n        className=\"pointer-events-none absolute -inset-px opacity-0 transition-opacity duration-300\"\n        style={{\n          opacity,\n          background: `radial-gradient(${glowSize}px circle at ${coords.x}px ${coords.y}px, ${glowColor}, transparent 80%)`,\n        }}\n      />\n      \n      {/* Content wrapper */}\n      <div className=\"relative z-10\">{children}</div>\n    </div>\n  );\n}\n"
+}

package/registry/spring-bars.json

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

package/registry/spring-dot-matrix.json

@@ -0,0 +1,8 @@
+{
+  "id": "spring-dot-matrix",
+  "file": "spring-dot-matrix.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const SpringDotMatrix = () => {\n  return (\n    <div className=\"grid grid-cols-3 gap-2.5\">\n      {Array.from({ length: 9 }).map((_, i) => (\n        <motion.div\n          key={i}\n          className=\"w-2 h-2 bg-zinc-800 dark:bg-white rounded-full\"\n          animate={{ scale: [1, 0.4, 1] }}\n          transition={{\n            duration: 1.5,\n            repeat: Infinity,\n            ease: \"easeInOut\",\n            delay: (Math.floor(i / 3) + (i % 3)) * 0.15\n          }}\n        />\n      ))}\n    </div>\n  );\n};\n"
+}

package/registry/spring-hexagon.json

@@ -0,0 +1,8 @@
+{
+  "id": "spring-hexagon",
+  "file": "spring-hexagon.tsx",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const SpringHexagon = () => (\n  <motion.svg className=\"w-10 h-10\" viewBox=\"0 0 50 50\"\n    animate={{ scale: [1, 1.15, 1], rotate: [0, 60, 60] }}\n    transition={{ duration: 2, repeat: Infinity, type: \"spring\", bounce: 0.3 }}\n  >\n    <polygon points=\"25,5 45,15 45,35 25,45 5,35 5,15\" className=\"fill-zinc-800 dark:fill-white\" />\n  </motion.svg>\n);\n"
+}