The Animated Grid component generates a responsive grid of shapes or images that animate with noise-driven flow and smooth hover reactions. Whether you’re building a hero section, a dynamic background, a creative footer, or an interactive portfolio, Animated Grid adds a layer of depth and energy that feels modern and polished.
Organic noise animation: Add flowing, natural movement with fully adjustable amplitude, scale, and speed.
Hover effects: Shapes smoothly grow and react to cursor proximity with customizable boost, radius, and easing.
Dynamic control: Enable or disable noise for either a lively animated look or a clean, static grid.
Animated Grid includes property controls so you can easily match your design style:
Grid layout: Adjust cell size and base shape size for density and scale.
Shapes or custom images: Choose from preset shapes (circle, square, triangle, diamond) or upload your own.
Colors & styling: Define shape colors, opacity, and cursor visibility.
Performance-friendly: Preview toggle ensures smooth editing inside Framer while running full animation on live sites.
Use Animated Grid to:
Create subtle animated backgrounds for hero sections.
Add interactive texture to landing pages and SaaS websites.
Enhance portfolio showcases with reactive visuals.
Design creative footers with engaging motion.
Brice Deguigne
