Interactive Pattern
Transform your Framer projects with a polished, interactive grid background designed to elevate modern interfaces. This component reacts smoothly to cursor movement, creating subtle proximity-based animations that feel responsive, elegant, and professional.
Choose from five distinct grid styles—Dots + Lines, Lines Only, Dots Only, Plus Symbols, or Plus + Lines—giving you full creative flexibility to match any visual identity. Grid elements gently fade in as the cursor approaches, adding depth and motion without overwhelming your content.
Every detail is fully customizable. Adjust grid spacing, element size, thickness, colors, opacity levels, proximity radius, hover darkening, and fade delay to create exactly the interaction you want. You can also toggle the background on or off, making it easy to layer the grid behind text, images, or UI elements.
Built with performance in mind, the component delivers smooth animations even when other layers sit above it. It’s fully responsive and adapts automatically to any container size, supporting both fixed and flexible layouts.
Perfect for hero sections, landing pages, portfolios, presentations, and modern web applications—this interactive grid helps your designs feel dynamic, refined, and alive.*** Feedback -> https://docs.google.com/forms/d/e/1FAIpQLSexopfTprHsvLOJI0daTpvbRVr-KdTrfjEvCXEfr9nDh8ZwcQ/viewform?usp=header ***
Michael Slotta
