Flickering Grid is a Framer component for creating animated, flickering grid backgrounds with a modern and atmospheric feel. It renders a dynamic grid using canvas, where elements subtly fade in and out to create motion without distraction.
You can switch between multiple grid styles including squares, circles, characters, lines, dots, and plus signs. The component is fully responsive, highly customizable, and supports optional masking effects, making it ideal for backgrounds, hero sections, and immersive layouts.
Animated flickering grid background
Multiple grid styles including shapes, lines, dots, and characters
Adjustable cell size, spacing, and flicker intensity
Customizable colors and opacity
Optional mask effects including radial and directional fades
Supports overlaying content on top of the grid
Responsive and performance-friendly
Hero section backgrounds
Tech and digital-themed websites
Landing pages and marketing sites
Ambient UI backgrounds
Creative portfolios and studios
Use lower opacity values for subtle background motion
Increase grid spacing for larger sections to improve performance
Pair with minimal foreground content for best visual balance
One Flickering Grid component
Multiple grid style options
Mask and animation controls
Support for overlaying custom content
Framer designers and builders
Creative agencies and studios
Product and UI designers
No-code creators building immersive layouts
Plaiter
