StaggerHoverGrid

About

StaggerHoverGrid brings a sense of fluid motion to your Framer projects by turning static grids into interactive, ripple-like experiences. When a visitor hovers over a cell, the surrounding items react with a timed delay based on their distance, creating a sophisticated wave effect that makes your site feel alive and responsive.

What it does

The component generates a fully customizable grid where every cell is aware of its neighbors. As you move your mouse, the grid calculates the distance to nearby items and triggers animations like lifting, rotating, or scaling in a staggered sequence. It handles everything from simple image galleries to clickable link grids, all powered by smooth spring physics for a high-end feel.

What you can customize

• Grid Layout: Control exactly how many columns and rows you need and adjust the spacing between them with the gap setting.

• Animation Styles: Choose between four distinct hover effects—Scale, Rotate, Color, or Lift—to match your site's personality.

• Motion Physics: Fine-tune the "Stagger Factor" and "Reset Delay" to make the wave effect feel snappy or slow and hypnotic. You can also switch between Spring and Ease Out transitions.

• Visuals & Logic: Pick your base and hover colors, toggle media on or off, and decide if cells should be clickable

Great for

• Creative portfolio galleries

• Meet the team sections

• Interactive product feature grids

• Visual moodboards

• Engaging hero sections for landing pages

Share your build

If you create something awesome with this grid,

I’d love to see it. Post your site on X and tag me @Dulajweb so I can check it out and share your work.

Need help?

Have a question or some feedback? You can reach out to me anytime at dulajdilshan766@gmail.com or send me a DM on X @Dulajweb.