Chaos Grid — Elegant dotted wave surface
Interactive Particle FieldThis component creates a dynamic dotted surface that blends order and chaos into a smooth, flowing visual. Particles move organically, forming a calm, ocean-like motion while reacting to interaction in real time.
Easily customize the component directly from Framer’s properties panel:
Grid Percentage – Balance between structured grid and chaotic motion
Particle Color & Background – Match your design system
Particle Spacing – Control density and visual rhythm
Chaos Strength – Define how dynamic or calm the motion feels
Connection Distance – Adjust linking between particles
Show Divider – Toggle center divider line
Mouse Interaction – Enable/disable interactivity
Mouse Radius & Strength – Fine-tune interaction behavior
Add the Component:Place the ChaosGrid component into your layout or hero section.
Adjust the Look:Use the control panel to tweak particle spacing, colors, and connection distance.
Control Behavior:Modify chaos strength and order percentage to achieve the desired motion style.
Enable Interaction:Turn on mouse interaction and fine-tune its radius and strength.
Fit Your Design:Customize background and visual settings to match your project’s aesthetic.
