# Hex Grid

> A honeycomb of faint hexagons that light up under the cursor and fade behind it, with the odd idle pulse.

Category: Backgrounds · MotionKit Plus · Updated 2026-10-22 · Live demo: https://motionkitui.com/components/hex-grid

## When to use it

Technical heroes for security, infrastructure, gaming and Web3 products, and interactive empty states.

## How it works

The canvas is tiled with pointy-top hexagons: columns are √3 times the radius apart, rows one and a half radii, and odd rows shift half a column so they interlock. Each cell keeps a glow value. Moving the pointer lights the cell beneath it fully and its neighbours partly, and every frame each glow fades over the fade time, which leaves a trail. Now and then a random cell pulses on its own.

## Installation

Part of MotionKit Plus (https://motionkitui.com/pricing). Subscribers install it with `npx shadcn@latest add @motionkit/hex-grid` after adding their registry token from https://motionkitui.com/account.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `color` | `string` | `"#5FAEB4"` | Glow colour as a hex value. |
| `size` | `number` | `26` | Hexagon radius in pixels. |
| `fade` | `number` | `1.4` | Seconds a lit hexagon takes to fade. |
| `interactive` | `boolean` | `true` | Light hexagons under the pointer. |
| `children` | `ReactNode` |  | Your content, layered above. |

## Accessibility

- **Keyboard: Not applicable.** Decorative, nothing to focus.
- **Screen readers: Pass.** The canvas and vignette are hidden from assistive tech.
- **Reduced motion: Pass.** With reduced motion on, the honeycomb is drawn once with no pulses or trail. It also stops drawing off screen.
- **Colour contrast: Pass.** Resting outlines sit at 7% opacity, and lit cells fill to at most 22%, so text over them keeps its contrast.