The Autonomous AI Cursor Engine for the Modern Web.
Watch colorful AI agents collaboratively construct your webpage live—then seamlessly transition into an organic mouse-following swarm that swirls and orbits around your cursor as you explore.
Engineered for High-Impact Experience
Two distinct modes engineered with mathematical precision, fluid acceleration, and organic swarm algorithms.
Auto Mouse Flocking
Cursors simulate Boids flocking rules—separation, alignment, and cohesion. Move your mouse anywhere, and the agents swirl, orbit, and accelerate behind your cursor organically.
Live Webpage Reconstruction
Scans the actual DOM nodes of your website, creates a blueprint overlay, and lets colorful multiplayer cursors draw cards, type text, connect snap guides, and dissolve seamlessly back into the live site.
Generative Pentatonic Audio
Procedural Web Audio synthesizer plays pleasant pentatonic glass-piano clicks and chords as elements are drawn or typed. No audio files or network requests needed.
Zero External Dependencies
Pure vanilla JavaScript. Single file (`cursor-swarm.js`), no React, Vue, Three.js or external CSS required. Runs at a silky-smooth 60fps across modern browsers.
Full Customization
Easily customize cursor count (5 to 80), agent names, color palette, speed multiplier, auto-reveal timeouts, and custom lifecycle callbacks.
Private & Self-Hosted
Self-contained with zero analytics, tracking, or external telemetry. Run anywhere with 100% privacy and full control.
Integration & Framework Usage
Pick your preferred stack and drop in `CursorSwarm` in less than two minutes.
<!-- 1. Include the script -->
<script src="https://cursorswarm.pages.dev/cursor-swarm.js"></script>
<script>
// Auto-start on page load: Rebuilds page then transitions to mouse flocking!
window.addEventListener('DOMContentLoaded', () => {
CursorSwarm.start({
cursorCount: 10,
speed: 1.5,
flockAfterRebuild: true, // Automatically switches to mouse flocking when done!
names: ["Designer", "Dev", "Architect", "AI Bot"]
});
});
</script>
API Configuration Reference
Pass any of the options below to `CursorSwarm.start(options)`, `CursorSwarm.flock(options)`, or `CursorSwarm.update(options)`.
| Property | Type | Default | Description |
|---|---|---|---|
| flockAfterRebuild | boolean | true | New! Automatically transitions into continuous mouse-flocking swarm after rebuild completes. |
| mode | 'flock' | 'rebuild' | 'rebuild' | Swarm mode. `'rebuild'` reconstructs DOM; `'flock'` immediately orbits user's mouse pointer. |
| cursorCount | number | 18 | Total number of animated AI agent cursors (range: 5 to 80). |
| names | string[] | ['Ada', ...] | Custom labels/names displayed above each agent cursor. |
| colors | string[] | ['#3B82F6', ...] | Custom hex/rgb colors for cursor shapes and name badges. |
| speed | number | 1 | Movement speed multiplier (`0.5` = slow, `1.5` = brisk, `2.5` = hyper). |
| sound | boolean | true | Procedural Web Audio clicks and pentatonic chords synthesizer. |
| autoReveal | boolean | true | Automatically dissolves overlay back to live page. |
| revealDelay | number | 500 | Delay in milliseconds before dissolving blueprint into live page. |
| onStart | function | null | Callback triggered when the swarm animation begins. |
| onComplete | function | null | Callback triggered when all layers finish reconstructing. |