BackgroundPattern Component

An animated background pattern component featuring floating circles with smooth animations for creating dynamic visual effects.

Quick Example

Content Over Pattern

The background pattern creates a dynamic backdrop

<div class="relative">
  <BackgroundPattern />
  <div class="absolute inset-0 flex items-center justify-center z-10">
    <h3>Content Over Pattern</h3>
    <p>The background pattern creates a dynamic backdrop</p>
  </div>
</div>

Props

Prop	Type	Default	Description
class	string	''	Additional CSS classes for the container

Note: This component doesn't require any props and works out of the box with default animations.

Features

🎯 Multiple Animated Circles

Features 6 different circles with varying sizes, colors, and animation patterns.

🌊 Smooth Animations

Each circle has its own floating animation with different durations and directions.

🎨 Gradient Colors

Uses beautiful gradient colors including blue, purple, pink, and orange tones.

📱 Responsive Design

Adapts to different screen sizes and maintains visual appeal across devices.

🔧 Easy Integration

Simple to integrate with absolute positioning and z-index management.

⚡ Performance Optimized

Uses CSS transforms and opacity for hardware-accelerated animations.

Animation Details

Circle Specifications

Circle	Size	Color	Duration	Position
Circle 1	300px	Blue gradient	20s	Top-left area
Circle 2	200px	Purple gradient	15s	Top-right area
Circle 3	250px	Pink gradient	25s	Center-right
Circle 4	180px	Orange gradient	18s	Bottom-left
Circle 5	220px	Blue-purple gradient	22s	Bottom-center
Circle 6	160px	Purple-pink gradient	16s	Center area

Animation Properties

• Each circle has a unique floating animation keyframe
• Animations use transform: translate for smooth movement
• Different animation durations create organic, non-repetitive patterns
• Blur effects (blur(1px)) add depth and softness
• Opacity variations create layering effects
• Infinite loop animations for continuous movement

Usage Patterns

As Background Layer

Most common usage - as a background layer behind content.

<div class="relative min-h-screen">
  <BackgroundPattern />
  <div class="relative z-10 p-8">
    <h1>Your Content Here</h1>
    <p>Content appears above the animated background</p>
  </div>
</div>

In Hero Sections

Perfect for creating dynamic hero sections with animated backgrounds.

<section class="relative min-h-screen flex items-center justify-center">
  <BackgroundPattern />
  <div class="relative z-10 text-center">
    <h1 class="text-6xl font-bold text-white mb-4">Welcome</h1>
    <p class="text-xl text-gray-300">Animated background hero section</p>
  </div>
</section>

With Overlay

Add an overlay to reduce the pattern intensity for better text readability.

<div class="relative">
  <BackgroundPattern />
  <div class="absolute inset-0 bg-black/30 z-5"></div>
  <div class="relative z-10 p-8">
    <h2>Content with Overlay</h2>
    <p>Better text readability with overlay</p>
  </div>
</div>

Fixed Background

Create a fixed background effect that doesn't scroll with content.

<div class="fixed inset-0 z-0">
  <BackgroundPattern />
</div>
<div class="relative z-10">
  <!-- Your page content -->
</div>

Customization

Opacity Control

Control the overall opacity of the pattern.

<BackgroundPattern class="opacity-50" />
<BackgroundPattern class="opacity-75" />
<BackgroundPattern class="opacity-25" />

Scale Adjustments

Scale the entire pattern up or down.

<BackgroundPattern class="scale-75" />
<BackgroundPattern class="scale-110" />
<BackgroundPattern class="scale-125" />

Blur Effects

Add additional blur for softer effects.

<BackgroundPattern class="blur-sm" />
<BackgroundPattern class="blur-md" />

Performance Considerations

Optimization Features

• Uses CSS transforms for hardware acceleration
• Minimal DOM elements (6 circles total)
• Efficient keyframe animations
• No JavaScript required for animations
• Respects user's reduced motion preferences

Best Practices

• Use sparingly - one per page section recommended
• Consider adding `will-change: transform` for heavy usage
• Test on lower-end devices for performance
• Use opacity controls to reduce visual complexity when needed

Usage Examples

Basic Usage

<BackgroundPattern />

With Custom Classes

<BackgroundPattern class="opacity-60 scale-110" />

In a Container

<div class="relative overflow-hidden rounded-lg">
  <BackgroundPattern />
  <div class="relative z-10 p-8">
    <h3>Card with Animated Background</h3>
  </div>
</div>

Import

import BackgroundPattern from '../ui/atoms/BackgroundPattern.astro';