A honeycomb of faint hexagons that light up under the cursor and fade behind it, with the odd idle pulse.
Move across the hive
Customize
Usage
import { HexGrid } from "@/components/motionkit/hex-grid";
import { WaveText } from "@/components/motionkit/wave-text";
import { GlitchText } from "@/components/motionkit/glitch-text";
import { ConicGlow } from "@/components/motionkit/conic-glow";
import { Bokeh } from "@/components/motionkit/bokeh";
import { InkReveal } from "@/components/motionkit/ink-reveal";
import { ExtrudedText } from "@/components/motionkit/extruded-text";
import { FlowField } from "@/components/motionkit/flow-field";
import { GooeyBlobs } from "@/components/motionkit/gooey-blobs";
<HexGrid
className="h-[32rem] rounded-3xl"
>
<h1>Your hero</h1>
</HexGrid>Motion
The exact curves this component runs, plotted with Motion's own maths.
Glow fade
Pointer passes over a hexagon
Technical heroes for security, infrastructure, gaming and Web3 products, and interactive empty states.
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.
| 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. |
How we audit: the WCAG 2.2 animation checklist and respecting reduced motion in React.
Yes. The file starts with "use client", so you can import it straight into a Server Component page or layout. It works in Vite as is, and in Astro as a React island.
Nothing beyond React and Tailwind CSS v4. There is no MotionKit package and no Tailwind config to add.
Yes, with MotionKit Plus. Add the @motionkit registry and your personal token to components.json (the snippet is on your account page), then run npx shadcn@latest add @motionkit/hex-grid. It saves the file to components/motionkit and installs its dependencies.
Hex Grid is part of MotionKit Plus (£12 a month or £96 a year). The live preview and playground are free to explore; Plus unlocks its source code, every customisation control and commercial use.
With reduced motion on, the honeycomb is drawn once with no pulses or trail. It also stops drawing off screen.
Infinite Perspective Grid
A true 3D floor of glowing lines that recedes forever to a lit horizon, with an optional ceiling for a tunnel.
Dot Glow Background
A quiet dot grid that lights up in teal around the pointer.
Flicker Grid
A field of tiny squares that flicker softly, drawn on a canvas so it stays light.
Move across the hive
Customize
Usage
import { HexGrid } from "@/components/motionkit/hex-grid";
import { WaveText } from "@/components/motionkit/wave-text";
import { GlitchText } from "@/components/motionkit/glitch-text";
import { ConicGlow } from "@/components/motionkit/conic-glow";
import { Bokeh } from "@/components/motionkit/bokeh";
import { InkReveal } from "@/components/motionkit/ink-reveal";
import { ExtrudedText } from "@/components/motionkit/extruded-text";
import { FlowField } from "@/components/motionkit/flow-field";
import { GooeyBlobs } from "@/components/motionkit/gooey-blobs";
<HexGrid
className="h-[32rem] rounded-3xl"
>
<h1>Your hero</h1>
</HexGrid>Motion
The exact curves this component runs, plotted with Motion's own maths.
Glow fade
Pointer passes over a hexagon
The live preview is free to explore. Plus unlocks the source for Hex Grid and every other premium component.