带物理的 React 雪花效果

Source: Dev.to

我发布了一个开源库 @hdcodedev/snowfall。它为 React 应用添加了雪花飘落效果，并且雪会与页面内容互动。与普通的覆盖层不同，这个效果使用了物理模拟，使雪花能够落在并堆积在你的 HTML 元素上（标题、卡片、按钮等）。

功能

• 物理模拟 – 风、重力和碰撞检测。
• 堆积 – 雪会在元素上堆积，最终会融化。
• 智能检测 – 使用 data-snowfall 属性或让库自动检测语义标签。

安装

npm install @hdcodedev/snowfall

使用方法

import { Snowfall, SnowfallProvider } from '@hdcodedev/snowfall';

export default function App() {
  return (
    
      

      {/* 雪会在此元素上堆积 */}
      
        
## 冬季模式

      
    
  );
}

源码与演示

• GitHub:
• 在线演示: