# Background

A comprehensive collection of background effects, including animated particles, gradients, images, and videos.

### **Import**
```tsx
import { Background } from '@app-studio/web';
```

### **Aurora**
A smooth, flowing gradient animation resembling the northern lights.

**Props:**
- `showRadialGradient` (boolean): Adds a radial gradient overlay.

```tsx
<Background.Aurora height="300px" showRadialGradient>
  <Center height="100%">
    <Title color="white">Aurora Effect</Title>
  </Center>
</Background.Aurora>
```

### **Meteors**
Falling meteor effects, perfect for dark themes.

**Props:**
- `number` (number): Number of meteors to render.

```tsx
<Background.Meteors number={20}>
  <Center height="300px" backgroundColor="color-black">
    <Title color="white">Meteor Shower</Title>
  </Center>
</Background.Meteors>
```

### **Particles**
Interactive floating particles.

**Props:**
- `count` (number): Number of particles.
- `speed` ('slow' | 'medium' | 'fast'): Movement speed.
- `shapes` (Array): Shapes to use ('circle', 'square', 'triangle').
- `colors` (string[]): Array of colors for particles.

```tsx
<Background.Particles 
  count={50} 
  speed="slow" 
  shapes={['circle']}
  colors={['#6366f1', '#a855f7']} 
/>
```

### **Wall**
A grid of squares that can animate.

**Props:**
- `rows` (number): Number of rows.
- `cols` (number): Number of columns.
- `squareSize` (number): Size of each square.

```tsx
<Background.Wall rows={10} cols={10} squareSize={50} />
```

### **Grid**
A retro-style perspective grid.

**Props:**
- `gridSize` (number): Size of grid cells.
- `animationSpeed` ('slow' | 'medium' | 'fast').
- `lineColor` (string).
- `pulseColor` (string).

```tsx
<Background.Grid gridSize={40} animationSpeed="medium" lineColor="rgba(255,255,255,0.1)" />
```

### **Ripples**
Concentric ripple animations.

**Props:**
- `rippleCount` (number).
- `maxSize` (number).
- `frequency` (number).

```tsx
<Background.Ripples rippleCount={3} maxSize={300} />
```

### **Image**
Background image with optional overlay and blend modes.

**Props:**
- `src` (string): Image URL.
- `backgroundSize`, `backgroundPosition`, `backgroundRepeat`.
- `overlay` (ReactNode): Content to overlay (like `<Background.Overlay />`).
- `blendMode` (BlendMode): CSS blend mode.

```tsx
<Background.Image 
  src="https://example.com/bg.jpg" 
  height="400px"
  overlay={<Background.Overlay contentPosition="center" backgroundColor="rgba(0,0,0,0.6)" />}
>
  <Title color="white">Hero Section</Title>
</Background.Image>
```

### **Video**
Background video with auto-play support.

**Props:**
- `src` (string): Video URL.
- `autoPlay`, `loop`, `muted`, `playsInline` (boolean).
- `overlay` (ReactNode).
- `blendMode` (BlendMode).

```tsx
<Background.Video 
  src="/assets/background.mp4" 
  height="100vh"
  overlay={<Background.Overlay backgroundColor="rgba(0,0,0,0.4)" />}
>
  <Title>Cinematic Experience</Title>
</Background.Video>
```

### **Gradient**
Advanced gradient backgrounds.

**Props:**
- Inherits `GradientProps`.

```tsx
<Background.Gradient 
  from="color-blue-600" 
  to="color-purple-600" 
  direction="45deg" 
  height="300px" 
/>
```