Dynamic Image Grid: Free Interactions Component by Mohd Mehraj

Dynamic Image Grid transforms static layouts into an interactive experience where images respond to cursor movement with smooth scaling and grayscale transitions, creating depth, focus, and a fluid visual hierarchy.

Dynamic Image Grid is an interactive, motion driven layout that transforms a simple grid of images into a responsive visual experience. Instead of static thumbnails, each grid item dynamically reacts to cursor movement, creating a sense of depth, focus, and fluid interaction.

As users move across the grid, nearby items scale up while distant ones fade into grayscale, producing a natural focus effect. This creates a smooth visual hierarchy that guides attention without requiring clicks or navigation.

The component also features a subtle appear animation where grid items fade and scale into view with a staggered timing, adding a polished entrance effect. The animation feels lightweight and responsive, making it suitable for modern, performance focused websites.

Images can be easily added inside Framer, and the grid automatically adapts to container size and density settings. Designers can control spacing, interaction radius, animation speed, grayscale intensity, and scaling behavior to create different visual styles.

Built for Framer, the Dynamic Image Grid delivers smooth performance while turning traditional image layouts into engaging, interactive sections.