npm package: @msieracki/webgl-background
Description: Beautiful WebGL background components for React with static, ambient, and interactive modes
Author: Your Name
Latest version: 1.0.0

# WebGL Background

Beautiful WebGL background components for React with static, ambient, and interactive modes.

## Features

- 🎨 **Three animation modes**: Static, Ambient, and Interactive
- 🔧 **Customizable themes**: Colors, motion speed, and interaction sensitivity
- ⚡ **Performance optimized**: Uses WebGL for smooth 60fps animations
- 📱 **Responsive**: Automatically adapts to screen size and device pixel ratio
- ♿ **Accessible**: Respects `prefers-reduced-motion` setting
- 🎯 **TypeScript**: Full type safety included

## Installation

```bash
npm install @your-username/webgl-background
# or
yarn add @your-username/webgl-background
# or
pnpm add @your-username/webgl-background
```

## Quick Start

```tsx
import { BackgroundCanvas } from '@your-username/webgl-background';

function App() {
  return (
    <div>
      <BackgroundCanvas mode="ambient" />
      <main>
        <h1>Your content here</h1>
      </main>
    </div>
  );
}
```

## Animation Modes

### Static
```tsx
<BackgroundCanvas mode="static" />
```
A beautiful static gradient with subtle noise texture.

### Ambient
```tsx
<BackgroundCanvas mode="ambient" />
```
Gentle, evolving motion with time-based color shifts.

### Interactive
```tsx
<BackgroundCanvas mode="interactive" />
```
Responds to mouse movement and scroll position.

## Custom Themes

```tsx
import { BackgroundCanvas, vibrantTheme, darkTheme } from '@your-username/webgl-background';

// Use built-in themes
<BackgroundCanvas mode="ambient" options={{ theme: vibrantTheme }} />
<BackgroundCanvas mode="static" options={{ theme: darkTheme }} />

// Create custom theme
const customTheme = {
  colors: ['#ff6b6b', '#4ecdc4', '#45b7d1'],
  noiseIntensity: 0.08,
  motionScale: 0.002,
  interactionGain: 0.1,
};

<BackgroundCanvas mode="interactive" options={{ theme: customTheme }} />
```

## Built-in Themes

- `theme` - Default soft blues/purples
- `vibrantTheme` - Vibrant reds/teals  
- `darkTheme` - Dark grays
- `sunsetTheme` - Warm oranges

## Theme Properties

| Property | Description | Range |
|----------|-------------|-------|
| `colors` | Array of 3 hex colors for the gradient | Any hex colors |
| `noiseIntensity` | Amount of grain texture | 0.0 - 0.2 |
| `motionScale` | Animation speed | 0.0005 - 0.01 |
| `interactionGain` | Mouse/scroll sensitivity | 0.01 - 0.2 |

## Styling

The canvas has a default style of `position: fixed` covering the full viewport with `z-index: -1`. You can customize this:

```tsx
<BackgroundCanvas 
  mode="ambient"
  style={{ 
    position: 'absolute',
    zIndex: 0,
    opacity: 0.8 
  }}
  className="my-background"
/>
```

## Advanced Usage

### Direct Engine Usage

```tsx
import { createBackgroundEngine, theme } from '@your-username/webgl-background';

const canvas = document.getElementById('canvas') as HTMLCanvasElement;
const engine = createBackgroundEngine('ambient');
engine.init(canvas, { theme });

// Animation loop
function loop(t: number) {
  engine.render(t);
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
```

### Custom Input Handling

```tsx
import { InputController } from '@your-username/webgl-background';

const controller = new InputController();
controller.attach(document.body);

// Get current input state
const state = controller.getState();
console.log(state.x, state.y, state.scrollY, state.velocity);
```

## Browser Support

- Chrome/Edge 51+
- Firefox 51+
- Safari 10+
- Any browser with WebGL support

## License

MIT

## Contributing

Issues and pull requests are welcome!