Chaos Grid

Elegant dotted wave surface

🎯 About this Component Interactive Particle Field This 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. 🎛️ Control Panel 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 ⚙️ How to Use: 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.

Elegant dotted wave surface