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.
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
