Text Animated Gradient

const TextAnimatedGradient = () => {
  return (
    <span className='inline-flex animate-text-gradient bg-gradient-to-r from-[#b2a8fd] via-[#8678f9] to-[#c7d2fe] bg-[200%_auto] bg-clip-text text-xl text-transparent'>
      Sample Text
    </span>
  );
};

export default TextAnimatedGradient;

{
  "animation": {
    "text-gradient": "text-gradient 1.5s linear infinite"
  },
  "keyframes": {
    "text-gradient": {
      "to": {
        "backgroundPosition": "200% center"
      }
    }
  }
}