Elastic Grid Pro: Kinetic Fabric
Elastic Grid Pro is not just a background—it’s a premium physics component that transforms empty canvas space into a highly reactive, elastic fabric. Engineered with highly optimized TypedArrays and spring mechanics, this component allows users to push, pull, and send ripples through the grid, giving your site an instant, award-winning feel. Whether you are building a dark-mode hero section, a Web3 platform, or a developer tool site, Elastic Grid Pro delivers buttery-smooth performance, interactive physics, and complete visual control right from the Framer sidebar.
✨ Key Highlights
4-Mode Interaction Engine: Choose exactly how the grid reacts to the cursor: Pull it like a magnet, Push it away, send fluid Waves, or leave it idle.
High-Performance Canvas: Built entirely on native HTML5 Canvas using optimized data arrays to handle thousands of grid points without dropping frames.
Ambient Wave Idle: When untouched, the grid breathes with a customizable, continuous sine-wave animation to keep the page feeling alive.
Mobile-First Engineering: Allows native touch-action scrolling, ensuring users can swipe down the page without getting stuck on the interactive canvas.
Zero-Code Customization: Every visual aspect—from line thickness and glowing cursor tracking to 3D perspective tilt—is an intuitive control directly inside Framer.
⚙️ Complete Design Control
Content & Colors: Define the base line color, toggle intersection dots, and customize the vibrant cursor glow color that illuminates the fabric.
Geometry & Space: Control the exact pixel spacing between cells, dial in line thickness, adjust the size of intersection dots, and tilt the entire canvas on the X-axis for a 3D floor effect.
Physics & Motion: Swap between Hover or Hold trigger modes, adjust the elasticity and friction of the grid lines, and define the exact intensity and radius of the cursor's influence.
💡 Perfect For
Hero Sections: Create a mesmerizing, interactive backdrop that keeps users engaged before they even scroll.
Web3 Platforms: Visually represent blockchain networks, decentralization, or high-tech infrastructure.
Developer Tool Sites: Signal technical superiority with a background that looks like a living wireframe.
Share It On :