Hexagon Background

<script setup lang="ts">
import HexagonBackground from '@/components/animate-ui/backgrounds/hexagon/HexagonBackground.vue'
</script>

<template>
  <HexagonBackground class="absolute inset-0" />
</template>

InstallationCopy Anchor Link

npx shadcn-vue@latest add https://animate-ui.com/r/vue/backgrounds-hexagon.json

pnpm dlx shadcn-vue@latest add https://animate-ui.com/r/vue/backgrounds-hexagon.json

yarn dlx shadcn-vue@latest add https://animate-ui.com/r/vue/backgrounds-hexagon.json

bun x shadcn-vue@latest add https://animate-ui.com/r/vue/backgrounds-hexagon.json

UsageCopy Anchor Link

<script setup lang="ts">
import HexagonBackground from '@/components/animate-ui/backgrounds/hexagon/HexagonBackground.vue';
</script>

<template>
  <section class="relative h-[480px] overflow-hidden">
    <HexagonBackground class="absolute inset-0" />
  </section>
</template>

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