Animated Background Presets

A collection of ready-to-use animated background components. These are drop-in components that provide immediate visual flair.

Animated Grid Pattern

A classic grid with randomly appearing highlighted squares. Perfect for tech, data, or dashboard interfaces.

Grid Flow

Usage


import { AnimatedGridPattern } from '@/components/tools/animated-grid-pattern';
export function Hero() {
  return (
    <div className='bg-background relative flex h-[500px] w-full items-center justify-center overflow-hidden rounded-lg border p-20'>
      <p className='z-10 text-5xl font-medium tracking-tighter text-black dark:text-white'>
        Hero Section
      </p>
      <AnimatedGridPattern
        numSquares={30}
        maxOpacity={0.5}
        duration={3}
        repeatDelay={1}
        className={cn(
          '[mask-image:radial-gradient(500px_circle_at_center,white,transparent)]',
          'inset-x-0 inset-y-[-30%] h-[200%] skew-y-12'
        )}
      />
    </div>
  );
}

Props

Prop	Type	Default	Description
`width`	`number`	`40`	Width of each grid cell
`height`	`number`	`40`	Height of each grid cell
`numSquares`	`number`	`50`	Number of concurrent moving squares
`maxOpacity`	`number`	`0.5`	Max opacity of the highlighted square
`duration`	`number`	`4`	Animation duration in seconds
`className`	`string`	-	Additional CSS classes (useful for masks/skewing)

Aurora Background

A soft, moving gradient background that resembles the aurora borealis. Uses high-performance CSS gradients and mix-blend-modes.

Aurora Effect

Beautiful, performant, and lightweight.

Usage

Requirement: Add the aurora animation to your tailwind.config.ts or globals.css (see below).


import { AuroraBackground } from '@/components/tools/aurora-background';
export function Hero() {
  return (
    <AuroraBackground>
      <div className='z-10 text-center'>
        <h1 className='text-4xl font-bold text-black dark:text-white'>
          Welcome to my site
        </h1>
      </div>
    </AuroraBackground>
  );
}

Configuration (globals.css)


@theme inline {
  --animate-aurora: aurora 60s linear infinite;
  @keyframes aurora {
    from {
      background-position:
        50% 50%,
        50% 50%;
    }
    to {
      background-position:
        350% 50%,
        350% 50%;
    }
  }
}