Animated Hole Grid generates a full-screen animated grid with a radial perspective effect. The grid lines warp naturally toward a glowing center, giving depth and motion. Twinkling particles float across the canvas, while the central glow adds focus and dimension.
This component is highly customizable. You can adjust grid color, glow color, background, zoom level, grid density, perspective depth, glow size and intensity, and particle properties like color, opacity, and twinkle speed. You can even place content above the animation using the children prop.
Built with HTML canvas, it performs smoothly on all screen sizes and scales responsively. Perfect for hero sections, futuristic UI designs, or immersive web experiences.
Key Features
Dynamic perspective grid with depth effect
Center glow with adjustable intensity and size
Floating twinkling particles for extra visual interest
Full control over colors, zoom, and animation speed
Supports overlaying content with children prop
High-performance canvas rendering
Use Cases
Hero or landing page backgrounds
Futuristic or sci-fi themed web apps
Portfolios and interactive showcases
Dashboard or creative web UI backdrops
Best Practices / Tips
Pair subtle background colors with bright grid/glow for strong contrast
Adjust zoom and grid density to control visual complexity
Use moderate particle opacity for elegance without distraction
Overlay interactive content with children while keeping animation subtle
What’s Included
One fully animated hole grid component
Customizable glow, particles, grid, and background
Canvas-based responsive animation
Optional overlay content support
Who It’s For
Designers and developers seeking animated, immersive backgrounds
Framer users building futuristic or tech-inspired pages
Creatives needing dynamic hero sections or interactive backdrops
Plaiter
