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.
- Entrance: letters split on characters, each `motion.span` fading in with `y: 24 -> 0`, stagger 0.04s, `ease: [0.22,1,0.36,1]`, triggered by `whileInView` with `viewport={{ once: true }}`.
- Respect `prefers-reduced-motion`: when reduced, render the static gradient with no loop and no stagger.
- Dark background (#050508) demo page centering the component, with copy-ready export default.

Do not use canvas, WebGL, or any library other than React, Tailwind and Framer Motion. The component must compile in strict TypeScript with no `any`.


---

TECHNICAL SPEC (must be respected)

Stack:
- React 18 + TypeScript (strict), Tailwind CSS, Framer Motion
- No extra animation library, no canvas unless explicitly required

Design tokens:
- Base background #0a0a0f, surfaces rgba(255,255,255,0.04)
- Borders rgba(255,255,255,0.08), primary violet #8b5cf6, secondary #a855f7
- Radius 20-28px, backdrop-blur(24px), inner highlight inset 0 1px 0 rgba(255,255,255,0.12)
- Typography: tight tracking on headings (-0.02em), 15-16px body, muted text at 60% opacity

Motion rules:
- Entrance: opacity 0 -> 1, y 24 -> 0, duration 0.7s, ease [0.16, 1, 0.3, 1]
- Stagger children by 0.06s, trigger with useInView({ once: true, margin: "-80px" })
- Hover: translateY(-6px) + soft violet glow, 250ms
- Animate only transform, opacity and filter. 60fps, will-change on animated layers
- Respect prefers-reduced-motion: disable loops, keep final states

Quality bar:
- Fully responsive (mobile-first, no horizontal scroll)
- Accessible: semantic HTML, focus-visible rings, contrast AA
- No layout shift, no dummy lorem ipsum, realistic copy
- Clean, reusable, production-ready components with typed props

Deliver the complete code, ready to paste, with no placeholder comments.