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.
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.
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.
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.
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.
Kevin Hardmeier
