Interactive Dot Gird
A clean, modern dot-grid component that feels alive. The grid is fully responsive it automatically adjusts to any frame size, keeping perfect spacing and balance across breakpoints
Made with Workshop
Build your own component with AI
About this Component
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.
