Particles & Physics
Iron Filings Field
A grid of short rods aligns to a roaming dipole magnetic field like iron filings; rods tint red/gold by nearest pole and react to pointer.
canvasmedium complexitymoderate motionpointer
Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited
Worth keeping?
Votes steer what gets built next — sign in to cast one, free to read
When to use it
Science-themed hero backgrounds, physics visualizations, ambient dark-mode displays needing elegant generative motion.
When not to
Light-background UIs (background hardcoded dark). Contexts where constant field rotation competes with readable content.
Working with an AI agent
Every component ships agent-ready metadata. An example instruction for this one:
Change the dipole orbit speed by setting t+=0.025, increase rod density by lowering step divisor from 15 to 20, and change positive pole color from #f87171 to #facc15. Theme: dark tokens live in :root, the light variant in :root[data-theme="light"]; ?theme=light or a {type:'forever:theme'} postMessage switches at runtime.
Safe to edit
- orbit speed (t += 0.012)
- grid density (step divisor /15)
- rod length multiplier (step*0.42)
- pole colors (#f87171 / #C08459)
- pointer attractor strength (80/d2)
- trail fade opacity (0.35 in fillRect)
- theme tokens (:root dark defaults + [data-theme=light] overrides)
Keep intact
- angle interpolation (da wrap + f.a+=da*0.2)
- visibilitychange pause/play
- DPR-aware canvas sizing
- reduced-motion guard (static frames only)
- theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)
Known limitations
- Reduced-motion path only renders two static frames then stops — no looping static fallback
- Background color hardcoded in CSS (#0c0c0e) — must edit to change dark theme
- No IIFE wrapper — globals leak to window scope
More Particles & Physics components
- Gravity Dot RainMulticolored dots fall under gravity with motion trails, bounce off the floor, and scatter away from the cursor on a dark navy canvas.
- Firework BurstColorful glowing sparks burst radially, fall under gravity, and fade against a dark sky. Auto-launches bursts; click anywhere to add more.
- Confetti CannonColored rectangles fire from bottom corners in auto-cycling bursts, tumbling with gravity and flip animation. Click anywhere to trigger a cursor burst.
- Bouncing Balls7–14 glossy pastel balls bounce off walls and collide with elastic physics; cursor repels balls within a 70px radius.
- Spring ChainA 16-node spring chain whips and follows the cursor in a lime-to-gold gradient; drifts in a figure-eight pattern when idle.
- Cloth Wave GridAn 11x11 wireframe grid ripples like cloth via sine/cosine waves in cyan-to-violet hues; mesh nodes bulge away from the cursor on hover.