Hole Background

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

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

InstallationCopy Anchor Link

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

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

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

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

UsageCopy Anchor Link

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

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

AnimationCopy Anchor Link

• Rings slide down into a tunnel drawn on a canvas while particles rise out of it, under a glowing aurora that scrolls through its colors every 5s.
• The canvas is sized to its container at the device pixel ratio. The rings and particles advance one step per displayed frame, so they move faster on 120Hz screens.
• It pauses off screen and while the tab is hidden.
• Under reduced motion, the tunnel, the particles and the aurora hold still.

API ReferenceCopy Anchor Link

HoleBackgroundCopy Anchor Link

CreditsCopy Anchor Link

• Credits to Antoine Wodniack for the inspiration