Modern Dot Grid

Show Preview
Modern Dot Grid

About Modern Dot Grid

InteractiveDotGrid Feature Overview

  • Dot Size – Adjust the size of each dot to create either a subtle texture or a bold, stylized pattern.

  • Dot Spacing – Control the distance between dots to make the grid tighter or more open.

  • Dot Color – Customize the color of the dots to match your design or brand palette.

  • Background – Set the background color for the grid, ensuring the right contrast and overall look.

  • Distortion Radius – Defines how far the interaction effect reaches when the cursor moves nearby.

  • Distortion Strength – Controls how strongly the dots react or distort around the cursor.

  • Animation Speed – Adjusts how fast the distortion and movement animations play.

  • Show Mouse Cursor – Toggle the cursor visibility for a cleaner, more minimal interactive effect.

Perfect as an interactive background element for websites, hero sections, or modern UI builds.