Interactive particle background.

Build an interactive particle accelerator background for this website on one canvas, in plain JavaScript.

Behaviour
- Rings of particles orbit a collider, seen at an angle, with a few fast beam particles leaving streaks.
- The pointer is a magnet: nearby particles leave their orbit to swarm it, then spring back.
- Press and hold to charge, with a ring tightening round the pointer. Let go to fire a shockwave as strong as the charge, with a readout at the impact. A press that becomes a drag or a scroll fires nothing.
- Scrolling spins the rings up, and the machine tilts as it moves through the viewport.

Build
- Give each particle a ring, an angle, a speed and an offset, and project it onto a tilted, rotated ellipse.
- Add a displacement with its own velocity: spring it back to the orbit, add the magnet force within about 190px, and damp it each frame.
- Scale the count to the area, at one particle per 900 square pixels, up to 900.

Must hold
- Stop drawing when the canvas is off screen or the tab is hidden.
- Start after the page has loaded and fade it in. On touch screens, use fewer particles at half the frame rate, moving at the same speed.
- Presses on links and buttons must not charge it.
- Take colours from CSS custom properties. Additive blending works on dark grounds, and source-over on light ones.
- With prefers-reduced-motion, draw one still frame.

Done when it holds 60fps on a laptop, sleeps off screen, and a scroll on a phone never fires a collision.