Shine Border

@theme inline {
  --animate-shine: shine var(--duration) infinite linear;

  @keyframes shine {
    0% {
      background-position: 0% 0%;
    }
    50% {
      background-position: 100% 100%;
    }
    to {
      background-position: 0% 0%;
    }
  }
}

import { ShineBorder } from "@/components/ui/shine-border"

export default function Example() {
  return (
    <div className="relative h-[500px] w-full overflow-hidden rounded-xl">
      <ShineBorder shineColor="#FF6900" />
      {/* Your content here */}
    </div>
  )
}

<ShineBorder shineColor="#8B5CF6" />

<ShineBorder shineColor={["#8B5CF6", "#EC4899", "#EF4444"]} />

<ShineBorder duration={8} shineColor="#3B82F6" />