Typing Effect

Create a React + TypeScript hook + component pair: `useTypewriter` and `TypingText`, implementing a genuinely working typewriter that types, pauses, deletes and cycles through an array of words with a blinking caret.

`useTypewriter(words: string[], opts?)` must:
- Accept `typeSpeed = 70`, `deleteSpeed = 40`, `pauseMs = 1600`, `loop = true`.
- Keep state `{ text, wordIndex, isDeleting }` and drive it with a single `useEffect` + `setTimeout` scheduled from the current phase; ALWAYS clear the timeout in the cleanup to avoid double-speed typing in React 18 StrictMode.
- When the word is fully typed, wait `pauseMs`, then delete; when empty, move to `(wordIndex + 1) % words.length`.
- Return `{ text, isDeleting }`.

`TypingText` must:
- Render `text` in `font-mono uppercase tracking-[0.3em] text-2xl md:text-5xl text-white` on a `#050505` background.
- Render a caret: a 2px-wide `motion.span` of the text's line height, `animate={{ opacity: [1,1,0,0] }}`, `transition={{ duration: 1, repeat: Infinity, times: [0,0.5,0.5,1] }}`.
- Reserve layout width using an invisible span containing the longest word so the caret does not jitter the layout.
- Expose `aria-live="polite"` on a visually hidden node with the full current word for screen readers.
- Respect `prefers-reduced-motion` by showing `words[0]` statically.
Strict TypeScript, no `any`, no external typing library. 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.