🐞 Bugs: 5

🐞 PageBugs Demo

Move your cursor around to watch the bugs scurry away! Try scrolling - they stay fixed on screen.

🎮 Controls

Play around with these controls to see how the bugs behave:

⚙️ Configuration

Adjust these settings in real-time:

Detection Radius

Flee Speed

Bug Size

Idle Movement

📋 Quick Start

Add bugs to any page with just a few lines:

                
<script src="page-bugs.js"></script>
<script>
  PageBugs.init({ 
    count: 5,
    speed: 8,
    detectionRadius: 120
  });
</script>
                
            

🎨 Custom Bug SVG

Use your own bug design:

                
PageBugs.init({
  count: 3,
  bugSvg: `<svg viewBox="0 0 32 32">...</svg>`
});

📚 Full API

                
PageBugs.init(options)      // Initialize with options
PageBugs.addBugs(count)     // Add more bugs
PageBugs.removeBugs(count)  // Remove bugs
PageBugs.setOptions(opts)   // Update config
PageBugs.pause()            // Pause animation
PageBugs.resume()           // Resume animation
PageBugs.scatterFrom(x,y,f) // Scatter from point
PageBugs.destroy()          // Clean up everything
PageBugs.getBugCount()      // Get current count
                
            

💡 Tips

Bugs use position: fixed so they stay on screen during scroll
They have pointer-events: none so they won't block clicks
Works great as a fun easter egg on any website!
Lightweight - no dependencies required

↕️ Scroll to see bugs stay fixed on screen