A lightweight JavaScript library that creates interactive dot backgrounds
Report a Bug
·
Request a Feature
Try now on dotwave.vojtikdortik.eu
- Dots react smoothly to cursor movements
- Depth perception with parallax effect
- Fully customizable (colors, sizes, behavior)
- Responsive design
- No dependencies
- Lightweight
Download the library here from the src folder and include it in your HTML:
<script src="dotwave.js"></script>or you can use it remotely like this:
<script src="https://dotwave.vojtikdortik.eu/src/dotwave.js"></script><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DotWave Basic Example</title>
<style> body {height: 100vh;} </style>
</head>
<body>
<script src="https://dotwave.vojtikdortik.eu/src/dotwave.js"></script>
<script>
// Initialize with default options
const dotwave = new DotWave({container: 'body'});
</script>
</body>
</html> const dotwave = new DotWave({
container: 'body', // Container selector or DOM element
numDots: 200, // Number of dots
dotColor: 'white', // Dot color (CSS color)
backgroundColor: 'black', // Background color
dotMinSize: 0.5, // Minimum dot size
dotMaxSize: 2.5, // Maximum dot size
dotMinOpacity: 0.5, // Minimum dot opacity
dotMaxOpacity: 1, // Maximum dot opacity
influenceRadius: 150, // Mouse influence radius
influenceStrength: 0.08, // Mouse influence strength
randomFactor: 0.03, // Random movement factor
friction: 0.97, // Movement friction
maxSpeed: 3, // Maximum dot speed
responsive: true, // Automatically resize with container
zIndex: -1 // Canvas z-index
});// Initialize
const dotwave = new DotWave(options);
// Pause animation
dotwave.pause();
// Resume animation
dotwave.resume();
// Update options
dotwave.updateOptions({
dotColor: 'blue',
numDots: 300
});
// Clean up when done
dotwave.destroy();Contributions are welcome! Please feel free to submit a pull request or an issue.