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.