Hex UI

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

PropTypeDefaultDescription
hexagonSizenumber75Size of individual hexagons in pixels
hexagonMarginnumber3Spacing between hexagons
interactivebooleanfalseEnable ripple effect on click
classNamestring-Additional CSS classes
childrenReactNode-Content to render over the background

Credits to Animate UIAceternity UI for inspiration

On this page