Hexagon Background
betaA honeycomb of hexagon tiles that light up under the pointer and fade behind it in a trail, with an optional idle ripple that washes across from a random point.
- Effects & motion
- 1 file
- 1 npm package
- Accessibility notes
- See it in Backgrounds
Loading the example…
pnpm dlx @dowel-ui/cli add hexagon-backgroundnpm packages installed: class-variance-authority.
import { HEXAGON } from "@/components/ui/hexagon-background";Default
Sizes
Idle Ripple
Panel
<HexagonBackground>
| Prop | Type | Default |
|---|---|---|
gapSpace between tiles in px. | number | 4 |
idleSend a soft ripple across the tiles from a random point every few seconds. | boolean | false |
idleIntervalMilliseconds between idle ripples. | number | 3600 |
interactiveLight tiles under the pointer, leaving a fading trail. On by default. | boolean | true |
layerClassNameClasses for the decorative layer. | string | — |
size | "sm" | "md" | "lg" | "md" |
Plus every attribute of <div>.
The honeycomb is decorative: one aria-hidden layer with pointer-events none that adds no role or tab stop. Children render above it in their own layer and stay fully interactive — the pointer is read from the root as events bubble and mapped to a tile by geometry, never captured. Lighting is never the only signal for anything. Under reduced motion the hover trail and idle ripples are off and the honeycomb is a still pattern; ripples also pause off-screen, in hidden tabs and while the pointer is over the box. Rendered tiles are capped at 720, growing past the cap rather than adding nodes.
8/8
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes