Outline Text

Create a React + TypeScript component `OutlineText` rendering a giant outlined headline whose stroke draws itself letter by letter, then fills with a violet gradient on hover.

Implementation (SVG-based so the stroke can truly animate):
- Render an `<svg>` with a `<text>` node using `fill="none"`, `stroke="url(#outlineGrad)"`, `strokeWidth={1.5}`, `fontSize` driven by a `viewBox` so it scales responsively (`preserveAspectRatio="xMidYMid meet"`, `width: 100%`).
- Define a `<linearGradient id="outlineGrad">` from `#a78bfa` to `#f0abfc`.
- Draw animation: use `motion.text` with `strokeDasharray` / `strokeDashoffset` — measure the path length with `getComputedTextLength()` in a `useLayoutEffect`, set `strokeDasharray` to that length and animate `strokeDashoffset` from length to 0 over 2.2s with `ease: 'easeInOut'`, triggered by `useInView({ once: true })`.
- Hover fill: animate `fillOpacity` 0 -> 1 with the same gradient as `fill`, 400ms ease-out, plus a soft `filter: drop-shadow(0 0 24px rgba(167,139,250,0.5))`.
- Background `#07040f`; center the SVG; add a faint violet radial glow behind.
- Props: `text`, `strokeWidth?`, `duration?`, `fillOnHover?: boolean`.
- Provide a Tailwind fallback note: if SVG is unwanted, `WebkitTextStroke` + `text-transparent` gives the static look, but the draw-in requires the SVG path.
- Strict TypeScript, `prefers-reduced-motion` shows the completed outline. React + Tailwind + Framer Motion only.


---

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.