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.