About Animated Hexagon BG
Immerse your users in a digital future with Animated Hexagon BG. This advanced Framer component generates a responsive, auto-scaling honeycomb grid that adapts perfectly to any screen size. It creates a premium sci-fi or cyberpunk atmosphere, making it the ultimate background asset for AI dashboards, crypto landing pages, and gaming portfolios.
Built with Framer Motion and optimized SVGs, it features a mesmerizing neon glow effect using native Gaussian blur filters. You can instantly toggle between two distinct animation modes: a chaotic "Random" pulse for a living data look, or a rhythmic "Wave" pattern for a smooth, flowing backdrop. Every detail, from the neon intensity to the grid spacing, is fully customizable directly from the properties panel.
Functions (Key Features):
📱 Auto-Responsive: Automatically calculates rows and columns to perfectly fill its container using a ResizeObserver.
✨ Neon Glow: Uses native SVG filters (feGaussianBlur) to create a high-performance, realistic lighting effect around each cell.
🎥 Dual Animation Modes: Choose "Random" for twinkling data effects or "Wave" for a satisfying directional flow.
🎨 Full Customization: Control Hexagon Size, Spacing (gap), background/fill colors, and animation speed.
⚡ Lightweight SVG: Renders crisp, retina-ready visuals without the performance lag of heavy video backgrounds.
How to Use:
Copy & Paste: Select the component, press Ctrl + C (or Cmd + C), and paste it directly into your Framer project canvas.
Sizing: Set the container's Width and Height to "Fill" (100%) to use it as a full-page background.
Styling: Adjust the Hexagon Color (base fill) and Glow Color (pulse stroke) to match your brand (e.g., Cyan for Tech, Purple for Crypto).
Layout: Tweak the Hexagon Size and Spacing to determine how dense or spaced out the honeycomb grid looks.
Animation: Select your Animation Mode (Random/Wave) and adjust the Speed and Intensity to achieve the perfect glowing rhythm.
