Animated Gradient Text

Create a reusable React + TypeScript component `GradientText` that renders a huge headline word filled with a continuously animated violet-to-pink gradient, exactly like a premium SaaS hero.

Implementation (must be functional, not decorative pseudo-code):
- Props: `text: string`, `className?: string`, `from/via/to` gradient colors with sensible defaults (#8b5cf6, #d946ef, #ec4899).
- Render a single `<span>` with Tailwind: `bg-clip-text text-transparent` and an inline `backgroundImage: linear-gradient(110deg, from, via, to, via, from)` plus `backgroundSize: '300% 100%'`.
- Animate with Framer Motion: `animate={{ backgroundPosition: ['0% 50%','300% 50%'] }}` and `transition={{ duration: 8, repeat: Infinity, ease: 'linear' }}`. The gradient MUST loop seamlessly (first and last color stop identical).
- Typography: font-black, tracking-tight, `text-6xl md:text-8xl lg:text-9xl`, uppercase, `leading-[0.9]`.
- Add a soft glow behind the text: an absolutely positioned duplicate of the same span with `blur-2xl opacity-40 select-none` and `aria-hidden`, sitting under the crisp copy inside a `relative inline-block` wrapper.