How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Units: headlines split into letters, paragraphs into words. Each unit remembers its resting centre.
- Push: any unit within 200px of the cursor is pushed straight away from it by (1 - distance / 200)² × 100px. That is up to 100px right under the cursor, falling off smoothly to 0 at the edge of the radius.
- Ease: each frame every unit moves 15% of the way to its target, so it glides out and floats back rather than snapping.
- Rest: the animation loop stops once everything has settled and restarts on the next pointer move.
- Layout (demo): a full-height dark panel with 32px padding, a flex column centered with 64px gaps. Two huge headlines are set at 10vw and a justified 16px paragraph (line-height 1.25) sits between them. Words keep a 0.75em gap to the right and 0.5em below.
- Touch: dragging a finger across the text pushes it the same way.
- Resize: resting positions are re-measured, so the effect stays accurate after the layout changes.
- Fallbacks: reduced motion leaves the text still. Without JavaScript it is ordinary text.