{
  "name": "border-trail-card-2",
  "type": "registry:ui",
  "componentName": "border-trail-card-2",
  "description": "Enhanced card component with custom border trail animations.",
  "files": [
    {
      "path": "border-trail-card-2.tsx",
      "content": "'use client';\nimport { cn } from '@/lib/utils';\nimport { BorderTrail } from '@/components/core/border-trail';\nimport { useState } from 'react';\n\nexport function BorderTrailCard2() {\n  const [isLoading, setIsLoading] = useState(false);\n  const [isVisible, setIsVisible] = useState(true);\n\n  const handleAnimationComplete = () => {\n    setIsLoading(false);\n    setTimeout(() => setIsVisible(false), 300);\n  };\n\n  const handleLoad = () => {\n    setIsLoading(true);\n    setIsVisible(true);\n  };\n\n  return (\n    <div className='relative h-[200px] w-[300px] rounded-md border border-zinc-300/40 bg-zinc-100 px-4 py-3 dark:border-zinc-700/40 dark:bg-zinc-900'>\n      {isVisible && (\n        <BorderTrail\n          className={cn(\n            'bg-linear-to-l from-green-300 via-green-500 to-green-300 transition-opacity duration-300 dark:from-green-700/30 dark:via-green-500 dark:to-green-700/30',\n            isLoading ? 'opacity-100' : 'opacity-0'\n          )}\n          size={120}\n          transition={{\n            ease: [0, 0.5, 0.8, 0.5],\n            duration: 4,\n            repeat: 2,\n          }}\n          onAnimationComplete={handleAnimationComplete}\n        />\n      )}\n      <div className='flex h-full flex-col items-end justify-end'>\n        <button\n          className='relative ml-1 flex h-8 scale-100 select-none appearance-none items-center justify-center rounded-lg border border-zinc-950/10 bg-white px-2 text-sm text-zinc-500 focus-visible:ring-2 active:scale-[0.96] dark:border-zinc-50/10'\n          type='button'\n          aria-label='Load'\n          onClick={handleLoad}\n        >\n          Submit\n        </button>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "components/core/border-trail.tsx",
      "content": "'use client';\nimport { cn } from '@/lib/utils';\nimport { motion, Transition } from 'motion/react';\n\nexport type BorderTrailProps = {\n  className?: string;\n  size?: number;\n  transition?: Transition;\n  onAnimationComplete?: () => void;\n  style?: React.CSSProperties;\n};\n\nexport function BorderTrail({\n  className,\n  size = 60,\n  transition,\n  onAnimationComplete,\n  style,\n}: BorderTrailProps) {\n  const defaultTransition: Transition = {\n    repeat: Infinity,\n    duration: 5,\n    ease: 'linear',\n  };\n\n  return (\n    <div className='pointer-events-none absolute inset-0 rounded-[inherit] border border-transparent [mask-clip:padding-box,border-box] [mask-composite:intersect] [mask-image:linear-gradient(transparent,transparent),linear-gradient(#000,#000)]'>\n      <motion.div\n        className={cn('absolute aspect-square bg-zinc-500', className)}\n        style={{\n          width: size,\n          offsetPath: `rect(0 auto auto 0 round ${size}px)`,\n          ...style,\n        }}\n        animate={{\n          offsetDistance: ['0%', '100%'],\n        }}\n        transition={transition || defaultTransition}\n        onAnimationComplete={onAnimationComplete}\n      />\n    </div>\n  );\n}\n",
      "type": "registry:ui"
    }
  ]
}