ComponentsBadge Background Shine

Badge Background Shine

Badge
BadgeBackgroundShine.tsx
export function BadgeBackgroundShine() {
  return (
    <div className="inline-flex animate-shine items-center justify-center rounded-full text-xs border border-neutral-800 bg-[linear-gradient(110deg,#000103,45%,#1e2631,55%,#000103)] bg-[length:200%_100%] px-3 py-1 font-medium text-neutral-400 transition-colors">
      Badge
    </div>
  );
}
tailwind.config.ts
{
  "animation": {
    "shine": "shine 2s linear infinite"
  },
  "keyframes": {
    "shine": {
      "from": {
        "backgroundPosition": "0 0"
      },
      "to": {
        "backgroundPosition": "-200% 0"
      }
    }
  }
}