Parallax Grid Motion adds a dynamic 4×7 parallax grid that moves with cursor/touch. Perfect for hero sections, galleries, and interactive showcases—fully customizable in Framer.
Made with Workshop
Build your own component with AI
Parallax Grid Motion is a premium interactive 4×7 motion grid designed to bring depth, energy, and visual engagement to your Framer sites. Powered entirely by framer-motion (no GSAP), each row shifts horizontally with mouse or touch movement, creating a smooth multi-layer parallax effect.
Images or text can be auto-distributed across the grid, and every card includes built-in press animations, gradients, noise overlays, and fully adjustable styling. Perfect for modern hero sections, product showcases, portfolio headers, and motion-driven brand experiences.
4×7 interactive parallax grid using framer-motion
Alternating row directions for true layered depth
Cursor & touch-responsive movement
Smart item distribution (repeat, alternate, or cycle)
Supports text + images in each cell
Built-in press animation (spring-like scale + glow)
Radial gradient background + optional noise overlay
Customizable card size, radius, colors, font, and speed
Event handler support (onClick for actions & linking)
Fully Framer-compatible with property controls
Modern hero headers
Product or portfolio showcases
Landing pages that need interactive motion
Brand sections with kinetic energy
Image grids with subtle depth animation
Creative gallery layouts or highlight sections
Adds premium motion design without GSAP
Visually engaging but still lightweight & performant
Makes any static grid feel alive and interactive
Easy to customize—no coding required
