Dots Grid Pattern

DotGrid is a modern Framer component that creates an animated grid of dots which respond dynamically to user interaction.On hover, dots scale smoothly and trigger wave-like animations for a premium, interactive feel.

Perfect for SaaS websites, portfolio backgrounds, or modern landing pages, DotGrid instantly adds depth and motion to your design.

Instructions

• Paste the component into your project.

• Customize dot color, size, and scale factor.

• Adjust proximity range for hover interactions.

• Fine-tune animation physics with stiffness and damping.

• Control amplitude and speed for continuous wave motion.

How It WorksDotGrid includes 8+ property controls:

• Dot Color / Size: Adjust base visuals.

• Hover Scale: Define how much dots enlarge on hover.

• Proximity Radius: Set the interaction distance.

• Amplitude / Speed: Control wave effect dynamics.

• Stiffness / Damping: Physics-based controls for responsiveness and bounce.

Main Features

• Responsive interactive dot grid.

• Smooth hover and wave animations.

• Fully customizable via property controls.

• Works as background, hero, or section filler.

• Plug & play in any Framer project.

Use Cases

• SaaS and tech landing pages needing interactive visuals.

• Portfolio sites showcasing modern motion design.

• Hero sections with subtle interactive depth.

• Background animations for contact or signup forms.

• Editorial layouts with a dynamic twist.

Made with love by Le Lab Framer.