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.
Customizable Particle System:Control particle color, spacing, and order percentage to define the overall structure and visual balance.
Dynamic Chaos Behavior:Adjust chaos strength to transition between structured grid and organic motion.
Connection System:Particles form subtle connections based on distance, adding depth and complexity to the scene.
Mouse Interaction:Enable interactive behavior where particles react to cursor movement with adjustable radius and strength.
Responsive Density:Maintains consistent visual density across all screen sizes by adapting particle count dynamically.
Minimal & High Performance:Canvas-based rendering ensures smooth animation and efficient performance.
Easily customize the component directly from Framer’s properties panel:
Order 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.
