how to add Progressive Blur Effects in React / Next.js with react-progressive-blur

Installation: npm install react-progressive-blur or yarn add react-progressive-blur or bun add react-progressive-blur When building modern web apps, subtle UI enhancements like smooth blur overlays can make your design feel polished and professional. Whether you're creating video players, image overlays, or elegant UI panels, blur effects can elevate the experience. But adding these effects progressively - with smooth transitions between intensities - can be tricky. That's why I built react-progressive-blur: a lightweight React component for progressive blur layers, with built-in TypeScript support! In this post, I'll show you how to install it, set it up in React / Next.js (with TypeScript), and customize it for your app. 🚀 What is react-progressive-blur? react-progressive-blur lets you add multi-layered blur effects with smooth transitions. It's perfect for: ✅ Modern UI overlays ✅ Video controls ✅ Aesthetic blur gradients ✅ Tailwind CSS compatible layouts ✨ Features: Progressive blur