如何在 React / Next.js 中使用 react-progressive-blur 添加渐进式模糊效果

Source: Dev.to

安装

npm install react-progressive-blur
# or
yarn add react-progressive-blur
# or
bun add react-progressive-blur

react-progressive-blur 是什么？

react-progressive-blur 是一个轻量级的 React 组件，能够为任意元素添加平滑的渐进模糊遮罩。它非常适合用于视频播放器、图片遮罩、UI 面板以及其他需要细腻模糊效果来提升视觉体验的场景。

基本用法

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

function Example() {
  return (
    
      {/* Your content here */}
      
    
  );
}

Props

样式技巧

使用实用类调整高度/宽度：

使用多个模糊层以获得更丰富的效果：

工作原理

该组件利用 CSS 的 mask-image 与 backdrop-filter 相结合，实现模糊层之间的平滑过渡。这种方式完全兼容支持这些 CSS 特性的现代浏览器。

浏览器支持

• Chrome 76+
• Edge 79+
• Firefox 70+（需启用 backdrop-filter）
• Safari 13+
• Opera 63+

贡献

欢迎贡献！如有问题或想提交 Pull Request，请前往 GitHub 仓库。

链接

• NPM 包:
• GitHub 仓库:

最后感想

如果你在 React 或 Next.js 项目中需要一个免繁琐、简洁的渐进模糊解决方案，试试 react-progressive-blur。它轻量、灵活，专为现代 UI 设计而生。