npm package: @hll0wrld/blur-gradient
Description: A lightweight, container-aware React component for modern blurred gradient backgrounds (aurora / blobs style).
Latest version: 1.0.0

# Blur Gradient

A lightweight, container-aware React component for modern blurred gradient backgrounds (aurora / blobs style).

Designed to adapt to any parent size: buttons, cards, heroes, badges, sections, etc.
No canvas, no WebGL, no Tailwind required.

---

# ✨ Features

* ✅ Works at any size (fills its parent)

* ✅ Perfect for buttons, cards, sections, backgrounds

* ✅ Fully responsive & container-aware

* ✅ CSS-only (no canvas, no WebGL)

* ✅ SSR-safe (Next.js compatible)

* ✅ Tree-shakeable

* ✅ Written in TypeScript

* ✅ Zero runtime dependencies

---

# 📦 Installation

## pnpm
```bash
pnpm add @hll0wrld/blur-gradient
```

## npm
```bash
npm install @hll0wrld/blur-gradient
```


##### **Peer dependencies**
Make sure you already have:
> * "```react >= 18```"
> * "```react-dom >= 18```" 

---

# 🚀 Basic Usage

The component fills its parent.
Your parent must be ```position```: relative.

```tsx
import { BlurGradient } from "@hll0wrld/blur-gradient";

export function Card() {
  return (
    <div className="relative overflow-hidden rounded-xl p-6">
      <BlurGradient variant="aurora" intensity={0.8} />
      <div className="relative z-10 text-white">
        Hello world
      </div>
    </div>
  );
}
```
---
# 🧩 Usage as a Button Background
```tsx
<button className="relative overflow-hidden rounded-lg px-6 py-3">
  <BlurGradient variant="neon" intensity={0.6} />
  <span className="relative z-10 font-medium">
    Click me
  </span>
</button>
```
---
# 🎨 Variants

Available presets:

* ```aurora``` (default)

* ```neon```

```tsx
<BlurGradient variant="neon" />
```

---
# ⚙️ Props
```tsx
type BlurGradientProps = {
  variant?: "aurora" | "neon" | ;
  blobs?: Blob[];              // fully custom layout
  intensity?: number;          // default: 1 (0 → 3 recommended)
  className?: string;
  style?: CSSProperties;
  disableNoise?: boolean;
  pointerEvents?: boolean;     // default: false
};
```

## Intensity

Controls blur strength and visual impact.
```tsx
<BlurGradient intensity={0.5} /> // subtle
<BlurGradient intensity={1.5} /> // strong
```

---
# 🧠 Custom Blobs (Advanced)

You can fully override the preset system:
```tsx
<BlurGradient
  blobs={[
    {
      x: "10%",
      y: "20%",
      w: "60%",
      h: "60%",
      color: "rgba(99,102,241,.4)",
      blur: 14,
      blendMode: "screen",
    },
  ]}
/>
```

All values are percentage-based, so everything scales with the parent.

---

# 📐 How It Works

* The component is ```position: absolute; inset: 0```

* All blobs use ```%``` + ```vmin``` units

* The parent controls the size

* Blur automatically adapts to container dimensions

This makes it ideal for:

* Buttons

* Cards

* Badges

* Headers

* Sections

* Hero backgrounds

---

# 🛑 Common Pitfalls

❌ Don’t forget ```position: relative``` on the parent

```tsx
// ❌ Won’t work correctly
<div>
  <BlurGradient />
</div>
```
```tsx
// ✅ Correct
<div className="relative">
  <BlurGradient />
</div>
```
---

# 🧪 Framework Compatibility

* ✅ Next.js (App Router & Pages Router)

* ✅ Vite

* ✅ Remix

* ✅ Astro (React)

* ✅ CRA

* ✅ SSR & static builds

---

# 📄 License

MIT © hll0wrld

---

# 🌌 Roadmap (planned)

* Animated gradients (CSS-only)

* Button-safe contrast presets

* More presets

* Playground / demo page