I’m working a bit with Framer Motion and I have the following problem:

 <div className="space-y-3">
    <div>
      <H1 className="text-nowrap text-center md:text-start">
        {text.split("").map((letter, index) => (
          <motion.span
            className="bg-gradient-to-r from-red-600 to-yellow-300 bg-clip-text text-transparent"
            key={index}
            initial={{ opacity: 1 }}
            animate={{ opacity: 0 }}
            transition={{
              duration: 3,
              repeat: Infinity,
              delay: index * 0.1,
            }}
          >
            {letter}
          </motion.span>
        ))}
        ????
      </H1>
    </div>

I know that the Text is splittet and that is the reason why the gradient effect is shown on each letter and not over the whole text – my problem ist: I don’t know how to solve it… Unfortunaltey I don’t find any solution by looking into the docs from Framer Motion and Maybe anybody can give me the nudge in the right direction? Thank you!