---
title: "Chaos Grid — Free Framer component · Best of Framer"
description: "Free Framer component · by Orxan Qasimov · Backgrounds. Elegant dotted wave surface"
canonical: "https://framer.elliotli.dev/component/chaosgrid"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Chaos Grid

# Chaos Grid

Elegant dotted wave surface

[View on Framer](https://framer.com/marketplace/components/chaosgrid/?via=elliot-li)

![Chaos Grid preview image 1](https://framer.elliotli.dev/og/component/chaosgrid/75d8c0ce0fe917cf/1600x1200.jpg)

## Summary

Elegant dotted wave surface

## Description

## 🎯 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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #1879

## Details

- **Author**: Orxan Qasimov
- **Published**: 2026-04-02
- **Updated**: 2026-05-14
- **Added**: 2026-03-20
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background