Background Ripple Effect
Hexagon Shapes background with Ripple effect on click.
Interactive Hexagon Background with Ripple effect
Click anywhere to see the ripple effect
Installation
npx shadcn@latest add https://hex-ui.com/r/background-ripple-effect.json
Props
Prop | Type | Default | Description |
---|---|---|---|
hexagonSize | number | 75 | Size of individual hexagons in pixels |
hexagonMargin | number | 3 | Spacing between hexagons |
interactive | boolean | false | Enable ripple effect on click |
className | string | - | Additional CSS classes |
children | ReactNode | - | Content to render over the background |
Credits to Animate UI • Aceternity UI for inspiration