Hole Background

import { HoleBackground } from "@/components/animate-ui/backgrounds/hole"

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

InstallationCopy Anchor Link

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

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

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

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

UsageCopy Anchor Link

import { HoleBackground } from '@/components/animate-ui/backgrounds/hole';

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

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