Elevate your Framer website with the Interactive Blueprint Grid. This premium background component brings a highly technical and architectural aesthetic to life using advanced canvas physics. As users move their cursor across the screen, the grid lines dynamically swing, bend, and react as if they are physical strings. Fast mouse movements even trigger realistic spark effects, creating an incredibly tactile user experience.
Beyond physics, it features a dynamic flashlight effect that illuminates the grid directly beneath the cursor, adding depth and focus. You have complete control over the visual structure: adjust the grid size, line thickness, gap spacing, and corner dots. Fine-tune the physics by tweaking spring tension and friction to make the grid feel heavy or lightweight. Built with performance in mind, it utilizes an Intersection Observer to automatically pause animations when off-screen, saving battery and CPU. Perfect for SaaS, developer tools, and creative agencies.
Functions (Key Features):
🧲 Physics Interaction: Grid lines dynamically swing and bend as the mouse passes through them.
✨ Dynamic Sparks: Fast cursor movements generate realistic spark particle effects upon line impact.
🔦 Flashlight Effect: A customizable radial glow illuminates the grid exactly where the user hovers.
📐 Custom Structure: Fully adjust grid size, line gaps, thickness, and corner dot radius for a unique look.
Elevate your Framer website with the Interactive Blueprint Grid. This premium background component brings a highly technical and architectural aesthetic to life using advanced canvas physics. As users move their cursor across the screen, the grid lines dynamically swing, bend, and react as if they are physical strings. Fast mouse movements even trigger realistic spark effects, creating an incredibly tactile user experience.
Beyond physics, it features a dynamic flashlight effect that illuminates the grid directly beneath the cursor, adding depth and focus. You have complete control over the visual structure: adjust the grid size, line thickness, gap spacing, and corner dots. Fine-tune the physics by tweaking spring tension and friction to make the grid feel heavy or lightweight. Built with performance in mind, it utilizes an Intersection Observer to automatically pause animations when off-screen, saving battery and CPU. Perfect for SaaS, developer tools, and creative agencies.
Functions (Key Features):
🧲 Physics Interaction: Grid lines dynamically swing and bend as the mouse passes through them.
✨ Dynamic Sparks: Fast cursor movements generate realistic spark particle effects upon line impact.
🔦 Flashlight Effect: A customizable radial glow illuminates the grid exactly where the user hovers.
📐 Custom Structure: Fully adjust grid size, line gaps, thickness, and corner dot radius for a unique look.
