Text Shine

TextShine.tsx

export function TextShine() {
  return (
    <h1 className="text-3xl font-medium inline-flex animate-shine bg-[linear-gradient(110deg,#939393,45%,#1e2631,55%,#939393)] bg-[length:200%_100%] text-transparent bg-clip-text">
      Text Shine
    </h1>
  );
}

tailwind.config.ts

{
  "animation": {
    "shine": "shine 2s linear infinite"
  },
  "keyframes": {
    "shine": {
      "from": {
        "backgroundPosition": "0 0"
      },
      "to": {
        "backgroundPosition": "-200% 0"
      }
    }
  }
}