Elastic Grid Pro is not just another background pattern; it is a sophisticated Kinetic Fabric Engine built for Framer designers who demand performance and polish. This component reimagines the traditional grid as a reactive, physical entity that bends, ripples, and glows in direct response to user behavior.
Unlike standard SVG or DOM-based grids that lag under heavy interaction, Elastic Grid Pro utilizes low-level TypedArrays (Float32Array) and the HTML5 Canvas API. This ensures that even with hundreds of interactive points, your site remains locked at a buttery-smooth 60FPS, providing a premium feel that won't compromise your SEO or page load speeds.
Choose between three distinct interaction profiles:
- Magnetic Pull: Attracts grid lines toward the cursor, creating a deep sense of focus.
- Repulsive Push: Displaces the grid away from the cursor for a tactile, physical barrier effect.
- Fluid Wave: Generates rippling dynamics that simulate a surface made of liquid energy.
Take full control of the aesthetic with comprehensive property controls. Adjust the Perspective Tilt to create a 3D floor or ceiling effect, customize the Ambient Wave Engine to keep the site alive during idle states, and fine-tune the Glow & Speculars to match your brand's unique lighting profile.
- Variable Cell Density: Define the exact scale of your grid system.
- Elasticity & Damping: Control the 'snap-back' intensity and movement friction.
- 3D Perspective Control: Rotate the grid on the X-axis for panoramic depth.
- Radial Glow Tracking: Interactive light source that follows the cursor through the mesh.
Elastic Grid Pro is not just another background pattern; it is a sophisticated Kinetic Fabric Engine built for Framer designers who demand performance and polish. This component reimagines the traditional grid as a reactive, physical entity that bends, ripples, and glows in direct response to user behavior.
Unlike standard SVG or DOM-based grids that lag under heavy interaction, Elastic Grid Pro utilizes low-level TypedArrays (Float32Array) and the HTML5 Canvas API. This ensures that even with hundreds of interactive points, your site remains locked at a buttery-smooth 60FPS, providing a premium feel that won't compromise your SEO or page load speeds.
Choose between three distinct interaction profiles:
- Magnetic Pull: Attracts grid lines toward the cursor, creating a deep sense of focus.
- Repulsive Push: Displaces the grid away from the cursor for a tactile, physical barrier effect.
- Fluid Wave: Generates rippling dynamics that simulate a surface made of liquid energy.
Take full control of the aesthetic with comprehensive property controls. Adjust the Perspective Tilt to create a 3D floor or ceiling effect, customize the Ambient Wave Engine to keep the site alive during idle states, and fine-tune the Glow & Speculars to match your brand's unique lighting profile.
- Variable Cell Density: Define the exact scale of your grid system.
- Elasticity & Damping: Control the 'snap-back' intensity and movement friction.
- 3D Perspective Control: Rotate the grid on the X-axis for panoramic depth.
- Radial Glow Tracking: Interactive light source that follows the cursor through the mesh.
Studio Apes
