• Elastic Grid Pro: Kinetic Fabric

Elastic Grid Pro: Kinetic Fabric

(Hover Interactions are best experienced on desktop with a mouse)

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 :

explore more

Framer Interactive Background

Custom Background

Hover Effect
3D Displacement

HyperGrid Auto-Fill: The Spatial Geometry

$

0

Buy Now

see demo

The ultimate toolkit for agencies that want to dominate the Framer space.

Icon

Unlock the secret to award-winning interactions.

The ultimate toolkit for agencies that dominate the Framer space.

The "Ape Mode"
The "Ape Mode"
All-Access Pass
All-Access Pass
$99
$99

Own everything we’ve ever built. Every gallery, every shader, and every future update.

29 Components

29 Components

Priority Support

Lifetime Updates

Lifetime Updates

The "Ape Mode"
All-Access Pass
$99

Own everything we’ve ever built. Every gallery, every shader, and every future update.

Icon

The ultimate toolkit for agencies that dominate the Framer space.

29 Components

Priority Support

Lifetime Updates

Quick Links

Galleries, 

Shaders, 

Freebies, 

Gumroad Store, 

Agency

Quick Links

Galleries, 

Shaders, 

Freebies

Gumroad Store, 

Agency

X, 

Reddit, 

Discord 

©2026