Interactive Node Net

Show Preview
Interactive Node Net
Interactive Node Net

About Interactive Node Net

A lightweight animated network of nodes and connections that reacts to mouse movement. Designed as a flexible background or visual accent, with full control over colours, opacity, size, speed, density, and interaction strength.

Perfect for hero sections, landing pages, or subtle interactive backgrounds.

Controls

  • Node Color – Color of the animated nodes

  • Node Opacity – Transparency of nodes (0 = invisible, 1 = solid)

  • Node Size – Diameter of each node in pixels

  • Node Count – Total number of nodes in the network

  • Connection Color – Color of the lines connecting nodes

  • Connection Opacity – Transparency of connection lines (0 = invisible, 1 = solid)

  • Connection Distance – Maximum distance between nodes to draw a connection

  • Animation Speed – Global speed multiplier for all movement

  • Base Movement Speed – Speed of the nodes’ natural random motion

  • Expansion Speed – Speed at which nodes move outward from the center

  • Damping – Friction applied to node movement (lower = more friction)

  • Mouse Attraction – Strength of node attraction to the mouse cursor

From Martina Gazenova

Motion Patterns
RulerNav
Googly Eyed Button
Neon Text Animation

Related Components

silhouet animated BG
3d Interactive Stars
ASCII Hero
ElasticGridPro