component
Animated Hexagon BG
By Sirrah Space
Details
- Sirrah SpaceAuthor
- componentType
- $4.00Price
- 2026-01-27Published
- 2026-07-26Updated
- 2026-01-16Added
- BackgroundsCategories
Summary
Immerse your users in a digital future with Animated Hexagon BG.
Description
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.
Introduction
Futuristic pulsing honeycomb grid.
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #7533