Hex Pulse
NewPro
A honeycomb grid where rings of light travel outward from the pointer, from clicks and from random cells.
Send a pulse
Move or click over the grid
Customize
26px
1
1.4s
React to pointer
#ff784f
When to use it
- HUDs and menus for sci-fi or strategy games
- Landing pages for security, network or energy products
- Hero sections that should answer every move of the cursor
Good to know
- Plan
- Pro
- Dependencies
- motion
- Rendering
- 2D canvas
- Reduced motion
- Respected
- Lines of code
- 301
Installation
Hex Pulse is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy hex-pulse.tsx into components/ui and run npm install motion.
Usage
import { HexPulse } from "@/components/ui/hex-pulse";
<section className="relative h-[600px] bg-ink-950">
<HexPulse size={26} interval={1.4} />
</section>Props
7 properties| Property | Type | Default | Description |
|---|---|---|---|
| color | string | "#ff784f" | Light color as a hex value. |
| baseColor | string | "#2d2824" | Outline color of the cells at rest, as a hex value. |
| size | number | 26 | Cell radius in pixels. |
| speed | number | 1 | How fast the pulses travel. |
| interval | number | 1.4 | Seconds between pulses from random cells. 0 turns them off. |
| interactive | boolean | true | Send pulses from the pointer and from clicks. |
| className | string | — | Extra classes for the canvas. It fills its nearest positioned parent. |
Dependencies: motion