Magnetic Field
A hundred particles move in a straight line toward a central core that follows the mouse: when a particle reaches it (< 30 px), it respawns at a random position and resumes its path. A field in permanent motion, with no pause or rest state.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Hover has 48 effects, including 5 free. Explore the category →
3 usage examples
How it works
The core (div.mf383-core) is absolutely positioned inside .mf383-field. Its target position is updated on each mousemove (or touchmove) event; on each frame it advances 8% of the remaining gap (lerp with factor 0.08 × f), giving it smooth inertial motion.
The 100 particles (div.mf383-particle) are created at load with random positions and velocities. On every frame, each particle is attracted to the core: vx += (cx − px) × 0.03 × f; vy += (cy − py) × 0.03 × f. Velocities are damped (vx *= 0.95^f). When a particle is within 20 px of the core, it respawns at a random position in the zone. Under reduced motion, particles are arranged in a fixed ring around the centre and do not move.
Accessibility
- Touch:
touchmovemoves the core toward the finger. The interaction is identical to the mouse. - Keyboard: the effect is purely decorative and does not respond to the keyboard. No information is reserved for the mouse.
- Reduced motion: under
prefers-reduced-motion: reduce, particles are placed in a fixed ring around the centre, visible and readable, with no animation. - No ARIA role:
.mf383-fieldhas no role. If it illustrates a concept (a logo, a title), add the textual content next to it andaria-hidden="true"on the zone.
Browser compatibility
Pure DOM and CSS, no dependency. IntersectionObserver available since Chrome 51, Firefox 55, Safari 12.1. Physics via requestAnimationFrame normalised to elapsed time. 100 animated divs: measured cost < 1 ms/frame in Chromium on a desktop machine. Not verified on real Safari; expected full.
Without JavaScript, the zone shows only the fixed central core; no particles are created.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0383-root">
<div class="mf383-field">
<div class="mf383-core"></div>
</div>
</div>One-time payment, no subscription — the code is yours forever
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
Particle count (JS — COUNT constant) |
100 | 50 gives a more airy effect; 200 a dense cloud. Beyond 150, check performance on mobile. |
Attraction force (JS — vx += ... * 0.03 * f) |
0.03 | 0.06 pulls particles to the core very fast; 0.01 gives long, elliptical trajectories. |
Damping (JS — vx *= Math.pow(0.95, f)) |
0.95 | 0.98 gives higher speeds and a more chaotic orbit; 0.8 makes particles nearly stop and plunge straight back down. |
Core size (CSS — .mf383-core { width, height }) |
60 px | Also adjust the respawn threshold (dist < 20) to half the new radius. |
Particle colour (CSS — .mf383-particle { background }) |
#6366f1 |
To colour particles individually, assign the colour from JS at creation time. |
FAQ
div with border-radius: 50%. Remove it for a square, or add an SVG, an image or text inside it. Positioning and motion are handled by JavaScript through left and top properties.
