Immerse your users in a digital future with Animated Hexagon BG. This component generates a responsive, auto-scaling honeycomb grid that adapts to any screen size, creating a premium sci-fi or cyberpunk atmosphere perfect for AI dashboards, crypto landing pages, and gaming portfolios.
Built with Framer Motion and optimized SVGs, it features a mesmerizing neon glow effect using Gaussian blur. You can toggle between two distinct motion modes: a chaotic "Random" pulse for a living data look, or a rhythmic "Wave" pattern for a smooth, flowing backdrop. Every detail, from the inner stroke opacity to the grid gap, is fully customizable.
Functions (Key Features):
📱 Auto-Responsive: Automatically calculates rows and columns to fill the viewport or container.
✨ Neon Glow: Uses SVG filters to create a realistic, high-performance lighting effect around each cell.
🎥 Dual Animation Modes: Choose "Random" for twinkling data effects or "Wave" for a directional flow.
🎨 Full Customization: Control hexagon size, spacing (gap), colors, animation speed, and glow intensity.
⚡ Lightweight: Renders using SVG for crisp visuals on retina displays without performance lag.
How to Use:
Insert: Drag the Animated Hexagon BG onto your canvas.
Sizing: Set Width and Height to "Fill" (100%) to use it as a full-page background.
Styling: Adjust the Hexagon Color (base) and Glow Color (pulse) to match your brand (e.g., Cyan for Tech, Purple for Crypto).
Layout: Tweak Hexagon Size and Spacing to determine how dense the grid looks.
Animation: Select your Animation Mode and adjust the Speed. Lower speed values result in faster pulses.
Alpheratz
