Package Exports

react-progressive-blur
react-progressive-blur/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-progressive-blur) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Progressive Blur

A lightweight React component that creates smooth, progressive blur effects with customizable intensity and positioning. Perfect for creating modern UI overlays, video controls, and aesthetic blur gradients.

Basic Example

Features

🎯 Progressive blur layers - Creates smooth transitions with multiple blur intensities
📍 Flexible positioning - Apply blur effects to any edge (top, bottom, left, right)
⚡ Customizable intensity - Control the blur strength with a simple prop
🎨 Tailwind CSS compatible - Seamlessly integrate with your existing styles
📱 Cross-browser support - Works with both backdrop-filter and -webkit-backdrop-filter

Installation

npm install react-progressive-blur

Usage

import React from "react";
import BlurEffect from "react-progressive-blur";

export default function MyComponent() {
  return (
    <div className="relative">
      {/* Your content */}
      <img src="/your-image.jpg" alt="Background" />
      
      {/* Add blur effect */}
      <BlurEffect position="top" intensity={50} />
    </div>
  );
}

Video Overlay Example

"use client";
import React from "react";
import BlurEffect from "react-progressive-blur";

export default function VideoPage() {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-black">
      <div className="max-w-[80rem] mx-auto my-8">
        <div className="relative rounded-[4rem] overflow-hidden">
          {/* Video with border radius */}
          <video
            src="/demo.webm"
            className="w-full rounded-xl"
            controls
            autoPlay
            muted
            loop
          />
          
          {/* Top blur overlay */}
          <BlurEffect
            className="h-32 bg-gradient-to-b from-black/20 to-transparent"
            intensity={100}
            position="top"
          />
          
          {/* Bottom blur overlay */}
          <BlurEffect
            className="h-72 bg-gradient-to-t from-black/20 to-transparent"
            intensity={200}
            position="bottom"
          />
        </div>
      </div>
    </div>
  );
}

Props

Prop	Type	Default	Description
`className`	`string`	`''`	Additional CSS classes to apply to the blur container
`intensity`	`number`	`50`	Blur intensity (higher values = more blur)
`position`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`	Edge where the blur effect should be applied

How It Works

The component creates three progressive blur layers with increasing intensity:

Light blur (1x intensity factor) - Covers 0-25% of the specified edge
Medium blur (3x intensity factor) - Covers 25-75% of the specified edge
Heavy blur (6x intensity factor) - Covers 75-100% of the specified edge

Each layer uses CSS mask-image with linear gradients to create smooth transitions between blur levels.

Styling Tips

Combining with Gradients

<BlurEffect
  className="bg-gradient-to-b from-black/30 to-transparent"
  position="top"
  intensity={75}
/>

Custom Height/Width

{/* For horizontal positions (top/bottom) */}
<BlurEffect
  className="h-40"
  position="top"
  intensity={100}
/>

{/* For vertical positions (left/right) */}
<BlurEffect
  className="w-32"
  position="left"
  intensity={100}
/>

Multiple Blur Effects

<div className="relative">
  <img src="/background.jpg" alt="Background" />
  
  {/* Top blur */}
  <BlurEffect position="top" intensity={80} className="h-24" />
  
  {/* Bottom blur */}
  <BlurEffect position="bottom" intensity={120} className="h-32" />
  
  {/* Left side blur */}
  <BlurEffect position="left" intensity={60} className="w-16" />
</div>

Browser Support

This component uses modern CSS features:

backdrop-filter (with -webkit-backdrop-filter fallback)
mask-image (with -webkit-mask-image fallback)

Supported in all modern browsers. For older browser compatibility, consider adding appropriate polyfills.

License

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.