Hexagon Background
An interactive hexagonal grid background with ripple effects on click.
Installation
Props
The HexagonBackground component accepts the following props:
| Name | Type | Default | Description |
|---|---|---|---|
hexagonSize | number | 75 | The size of each hexagon in pixels. Controls the overall scale of the hexagonal grid. |
hexagonMargin | number | 3 | The margin between hexagons in pixels. Creates spacing between individual hexagon elements. |
interactive | boolean | false | Whether hexagons respond to click interactions with ripple effects. When true, clicking creates animated ripples. |
hexagonProps | React.ComponentProps<'div'> | — | Additional props to pass to individual hexagon elements. Useful for custom styling or event handlers. |
className | string | — | Additional CSS classes to apply to the container element. |
children | React.ReactNode | — | Content to be rendered on top of the hexagon background. Positioned absolutely within the container. |