Particle Text

Create a React + TypeScript component `ParticleText` where a headline is composed of thousands of violet particles that assemble into the word, drift subtly, and dissolve away from the cursor.

This one requires a canvas — implement it properly:
- Render a `<canvas>` sized to its container with devicePixelRatio scaling, resized via a `ResizeObserver`.
- Sampling: draw the word once on an offscreen canvas (`font: 900 {size}px Inter, sans-serif`, centered), read `getImageData`, and for every Nth pixel (`step = 4`) with alpha > 128 push a particle `{ homeX, homeY, x, y, vx, vy, size, hue }`. Start each particle at a random position on the canvas.
- Animation loop with `requestAnimationFrame`: each frame, apply a spring toward home (`ax = (homeX - x) * 0.012`), damping `v *= 0.86`, plus a tiny sine drift so the word never looks frozen.
- Cursor repulsion: track pointer on the canvas; particles within 90px receive a force away from the pointer scaled by `(1 - dist/90)`, producing the dissolve/scatter effect; they spring back when the cursor leaves.
- Rendering: clear with a translucent `rgba(5,3,12,0.25)` fill for a trail, draw each particle as a 1.6px rounded rect / arc with colors sampled from a violet ramp (`#7c3aed`, `#a855f7`, `#d8b4fe`) and `globalCompositeOperation = 'lighter'` for bloom.
- Cleanup: cancel the RAF and disconnect observers on unmount; pause the loop when the canvas is off-screen (IntersectionObserver) for performance.
- Props: `text`, `density?`, `repelRadius?`, `colors?`.
- Cap the particle count (~6000) and skip the effect entirely for `prefers-reduced-motion`, rendering plain gradient text instead.
- Strict TypeScript, no `any`, no external particle library.


---

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.