https://github.com/sharky-2/mouse-dot-effect

A simple interactive visual experiment where a grid of dots reacts to your mouse movement!
https://github.com/sharky-2/mouse-dot-effect

fun-project

Last synced: 6 months ago
JSON representation

A simple interactive visual experiment where a grid of dots reacts to your mouse movement!

• Host: GitHub
• URL: https://github.com/sharky-2/mouse-dot-effect
• Owner: sharky-2
• Created: 2025-04-15T19:58:14.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2025-04-17T19:49:50.000Z (9 months ago)
• Last Synced: 2025-06-09T22:07:52.332Z (7 months ago)
• Topics: fun-project
• Language: JavaScript
• Homepage:
• Size: 3.49 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          




MOUSE-DOT-EFFECT

Interactive Visual Experiment with Dynamic Dot Grid








Built with the tools and technologies:














Table of Contents



Overview

Features

Demo

Getting Started





Overview

Mouse Dot Effect is an interactive visual experiment where a grid of dots dynamically responds to mouse movement. As you move your cursor across the screen, the dots elegantly scatter away and smoothly return to their original positions when the cursor leaves.


Features



🎯 Interactive Dot Grid: A responsive canvas filled with dots that react to mouse movement

🖱️ Real-time Mouse Detection: Precise tracking of cursor position for immediate visual feedback

✨ Smooth Animations: Fluid transitions using JavaScript for a polished user experience

🔄 Dynamic Behavior: Dots repel from the cursor and gracefully reset when the cursor moves away



Demo

Watch the effect in action:

![Mouse Dot Effect](https://raw.githubusercontent.com/sharky-2/mouse-dot-effect/main/video/video.gif)


Getting Started

Getting started with Mouse Dot Effect is simple:






Clone the repository:

❯ git clone https://github.com/sharky-2/mouse-dot-effect.git







Open the project:

❯ open index.html

# or simply double-click index.html in your file explorer







That's it! No build process or dependencies required. Just open the HTML file in your browser and start interacting with the dot grid.