---
title: "Animated Hexagon BG — Framer component · Best of Framer"
description: "$4.00 · Framer component · by Sirrah Space · Backgrounds. Immerse your users in a digital future with Animated Hexagon BG."
canonical: "https://framer.elliotli.dev/component/animated-hexagon-bg"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Animated Hexagon BG

# Animated Hexagon BG

Futuristic pulsing honeycomb grid.

[View on Framer](https://framer.com/marketplace/components/animated-hexagon-bg/?via=elliot-li)

![Animated Hexagon BG preview image 1](https://framer.elliotli.dev/og/component/animated-hexagon-bg/423f2a2038549bd7/1600x1200.jpg)

## 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:**

1.  **Copy & Paste:** Select the component, press **Ctrl + C** (or Cmd + C), and paste it directly into your Framer project canvas.
    
2.  **Sizing:** Set the container's Width and Height to **"Fill" (100%)** to use it as a full-page background.
    
3.  **Styling:** Adjust the **Hexagon Color** (base fill) and **Glow Color** (pulse stroke) to match your brand (e.g., Cyan for Tech, Purple for Crypto).
    
4.  **Layout:** Tweak the **Hexagon Size** and **Spacing** to determine how dense or spaced out the honeycomb grid looks.
    
5.  **Animation:** Select your **Animation Mode** (Random/Wave) and adjust the **Speed** and **Intensity** to achieve the perfect glowing rhythm.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #9390

## Details

- **Author**: Sirrah Space
- **Price**: $4.00
- **Published**: 2026-01-27
- **Updated**: 2026-07-26
- **Added**: 2026-01-16
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background