Hexagon Background
Hexagon grid with a glowing trail. Pro · Effects › Backgrounds
A honeycomb of hexagons behind content: a cell lights up under the pointer and fades out slowly, leaving a trail. Pure CSS once laid out — no frame loop; the grid is re-laid only when the area resizes, and the cell count is capped (larger cells on very large areas).
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add hexagon-backgroundnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { HexagonBackground } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
hexagonSize | number | 75 | Width of one hexagon, px (default 75); a very large area gets larger cells so the grid stays light. |
hexagonMargin | number | 3 | Gap between hexagons, px (default 3). |
hexagonProps | ComponentPropsWithoutRef<'span'> | Props for every hexagon cell (a class to restyle them, data attributes). |
Related components
- Aurora Background — Slow aurora behind your content
- Gradient Background — Slowly shifting gradient
- Bubble Background — Soft colored bubbles, one follows the cursor
- Stars Background — Starry sky with cursor parallax
- Hole Background — Portal tunnel with rings and particles
- Fireworks Background — Fireworks for wins and achievements, launch on click
- Spotlight — Stage beams and a cursor spotlight
- Meteors — Falling meteors
- Background Pattern — Fading dot, grid and line backgrounds
- Particles — Particle field that reacts to the cursor
- Glass Lens — Glass lens with real refraction
- Morphing Capsule — Capsule that flows between states
Previous: Stars Background · Next: Hole Background · All Effects