Dynamics.applySwarm()

Creates a natural "flocking" effect where elements buzz randomly around a target without ever stopping.

---

1. Mouse Swarm

The elements will constantly update their paths to swarm around the target.

Move your pointer over the stage to see the flock!

60 FPS

import { Dynamics } from 'animx/dynamics'

Dynamics.applySwarm('.bugs', {
  target: 'pointer', // Follows mouse
  speed: 150,        // Pixel speed
  radius: 80         // Orbit boundary
});

---

2. Cluster Sizing

By adjusting the radius and speed, you can create tight, aggressive swarms or slow, lazy clouds.

• Red: Tight radius (20px), fast speed.
• Blue: Loose radius (150px), slow speed.

60 FPS

---

3. Element Target

You can target another element instead of the mouse. The swarm will follow the element even if it's moving!

60 FPS

---

Properties & Methods

Option	Type	Default	Description
target	string | Element	'pointer'	The point the swarm clusters around. Use 'pointer' to track the mouse, or pass a DOM element to swarm around it (even if it's moving).
speed	number	100	How fast each element moves, in px/s. Higher values = more frantic, energetic swarming. Lower values = a slow, drifting cloud.
radius	number	100	How far each element is allowed to wander from the target center before turning back. 20 = a tight, dense cluster. 150 = a loose, spread-out cloud.
chaos	number	0.5	How erratic and unpredictable the movement is. 0 = very orderly, almost circular orbits. 1 = completely random, jittery paths. 0.5 is the default balance between organic and organized.

Return Instance

Method	Description
kill()	Stops the swarm and cleans up event listeners.