Chaos Grid

🎯 About this Component

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.

🎛️ 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.