Dot Background Pro

✦ Bring your background to life.

Create beautiful, interactive dot matrix backgrounds with smooth mouse interactions, dynamic gradients and a clean, modern aesthetic. Perfect for adding subtle motion and visual depth to any website. Fully responsive, easy to customize and ready to use in seconds. Make it completely your own with flexible controls for layout, styling and motion :)

⚙ What you can customize

Easily adapt every part of the component to match your own brand and style.

Background color ✦ Dot color ✦ Dot spacing ✦ Minimum & maximum dot size ✦ Dot shape ✦ Dot opacity ✦ Gradient position ✦ Gradient radius ✦ Gradient softness ✦ Reverse gradient ✦ Clear area ✦ Hover interaction ✦ Interaction radius ✦ Distortion strength ✦ Scale strength ✦ Animation smoothness ✦ Ambient motion ✦ Animation speed ✦ Border radius ✦ Links

🎯 Perfect for

Hero backgrounds ✦ Creative portfolios ✦ Design studios ✦ Agency websites ✦ Landing pages ✦ Product showcases ✦ Interactive sections ✦ Editorial websites ✦ Experimental web design

📱 Responsive by default

Automatically adapts to Desktop, Tablet and Mobile, maintaining a beautiful dot matrix layout across different screen sizes.

🖱 Included interactions

Smooth cursor-based dot distortion with Repel, Attract and Scale modes. Add subtle ambient animations, customize interaction strength and link the entire background to any destination.

⭐ Trusted by creators worldwide

Built with attention to detail, usability and performance. Designed to be easy to use, flexible to customize and ready for real-world Framer projects.

👀 Live Preview

https://dotbackgroundpro.framer.website

Explore the component in action and see how the dots respond to your cursor. Experiment with different styles.

Thanks for checking out my component! :)

I hope it helps you create something great. If you have any questions, feedback or ideas for improvements, feel free to reach out. I'm always happy to help!

Made with love, Felix