Animated Border Beam & Shaders

// 1. Add to your globals.css or tailwind.config:
@keyframes border-beam {
  100% {
    offset-distance: 100%;
  }
}

// 2. Wrap your component with this relative container:
<div className="relative overflow-hidden rounded-2xl border border-white/10 bg-[#090b12] p-8">
  {/* The Animated Border Beam */}
  <div
    style={{
      animation: 'border-beam 8s infinite linear',
      background: 'linear-gradient(to right, #06b6d4, #6366f1)',
    }}
    className="pointer-events-none absolute inset-0 -z-10 h-full w-full [mask-clip:padding-box,border-box] [mask-composite:intersect] [mask-image:linear-gradient(transparent,transparent),linear-gradient(#000,#000)]"
  />
  
  <div className="relative z-10">
    <h3 className="text-xl font-bold text-white">NexKit Obsidian Beam</h3>
    <p className="mt-2 text-sm text-slate-400">Next-gen cyber UI aesthetic.</p>
  </div>
</div>