Hexagon Background

import { HexagonBackground } from "@/components/animate-ui/backgrounds/hexagon"

export default function HexagonBackgroundDemo() {
  return <HexagonBackground className="absolute inset-0" />
}

InstallationCopy Anchor Link

npx shadcn@latest add @animate-ui/backgrounds-hexagon

pnpm dlx shadcn@latest add @animate-ui/backgrounds-hexagon

yarn dlx shadcn@latest add @animate-ui/backgrounds-hexagon

bun x shadcn@latest add @animate-ui/backgrounds-hexagon

UsageCopy Anchor Link

import { HexagonBackground } from '@/components/animate-ui/backgrounds/hexagon';

export function Hero() {
  return (
    <section className="relative h-[480px] overflow-hidden">
      <HexagonBackground className="absolute inset-0" />
    </section>
  );
}

AnimationCopy Anchor Link

• A grid of hexagons that fills its container and recounts its cells when the container resizes.
• A hovered hexagon lights up instantly, and fades back over 1s when the pointer leaves, leaving a trail. Hover only applies to devices that can hover, so a tap doesn't leave a cell lit.
• Nothing loops, so there is nothing to pause.
• Reduced motion keeps the fade: it's a color change, not movement.

API ReferenceCopy Anchor Link

HexagonBackgroundCopy Anchor Link

CreditsCopy Anchor Link

• Credits to Denis Klak for the inspiration