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.
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.
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 or open in new tabs.
Creative portfolio galleries
Meet the team sections
Interactive product feature grids
Visual moodboards
Engaging hero sections for landing pages
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.
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.
Dulaj dilshan
