Interactive Dots
Engaging interactive dots with physics-based repulsion, smooth animations, and optional colorful connecting lines. Fully customizable for modern UIs and backgrounds.
Made with Workshop
Build your own component with AI
The Interactive Dots component brings your designs to life with a dynamic, physics-driven grid of dots that respond to mouse movement. Each dot reacts with smooth repulsion, creating a playful, interactive effect. You can display it as simple dots or connect them with animated lines that change colors based on position, adding depth and visual interest.
Key Features:
Two modes: Dots or Dot Lines with dynamic color effects
Physics-based mouse repulsion with adjustable distance and strength
Smooth motion using smoothing and damping parameters
Fully customizable grid: dot size, spacing, and colors
Optional toggle buttons to switch between modes
Responsive to window resizing for consistent layouts
Lightweight SVG-based rendering for crisp visuals
Animated connecting lines with color gradients and dashed strokes
Where to Use:
Interactive backgrounds for landing pages or apps
Portfolio showcases or hero sections
Dynamic hover effects for UI elements
Creative data visualization grids
Event-driven visuals for presentations or demos
Engaging interactive web components for storytelling
