@xdy-npm/react-particle-backgrounds 1.0.3 → 1.2.0

package/README.md

@@ -1,6 +1,6 @@
 # react-particle-backgrounds
 
-一个基于 [tsparticles](https://particles.js.org/) 和 [Three.js](https://threejs.org/) 的 React 粒子背景组件库，提供 **7 种精美粒子背景主题**。
+一个基于 [tsparticles](https://particles.js.org/)、Three.js 和 Canvas 2D 的 React 粒子背景组件库，提供 **8 种精美粒子背景主题**。
 
 开发与发布相关说明（Vite 库模式搭建、npm 发布、面试要点）见仓库内 [docs 目录](./docs/README.md)（该目录仅随 Git 维护，**不会**随 `npm install` 的包体发布）。
 
@@ -25,6 +25,7 @@ pnpm demo:dev
 | 🪲 萤火虫 | `firefly` | 温暖的萤火虫光效 |
 | 🔷 几何 | `geometry` | 漂浮的抽象几何图形 |
 | 🌊 粒子海洋 | `wave` | 3D 粒子波浪（Three.js） |
+| 🌊 轻量波浪 | `wave2d` | 轻量级粒子波浪（Canvas 2D） |
 | 🚫 无 | `none` | 关闭粒子效果 |
 
 ## 安装
@@ -35,12 +36,14 @@ npm install @xdy-npm/react-particle-backgrounds
 pnpm add @xdy-npm/react-particle-backgrounds
 ```
 
-如需使用**粒子海洋**（wave）主题，还需要安装 Three.js：
+如需使用 **3D 粒子海洋**（`wave`）主题，还需要安装 Three.js：
 
 ```bash
 npm install three
 ```
 
+**轻量波浪**（`wave2d`）主题使用 Canvas 2D，无需额外依赖。
+
 ## 快速开始
 
 ### 基础用法（Props 方式）

package/dist/index.d.ts

@@ -99,6 +99,19 @@ export declare const particleThemes: ParticleTheme[];
  */
 export declare const ParticleWave: default_2.FC<ParticleWaveProps>;
 
+/**
+ * 使用 Canvas 2D 渲染的粒子海洋波浪效果。
+ * 轻量级实现，无需 Three.js 依赖。
+ */
+export declare const ParticleWave2D: default_2.FC<ParticleWave2DProps>;
+
+declare interface ParticleWave2DProps {
+    /** 波浪背后的 CSS 渐变或纯色背景 */
+    background?: string;
+    className?: string;
+    style?: default_2.CSSProperties;
+}
+
 declare interface ParticleWaveProps {
     /** 波浪背后的 CSS 渐变或纯色背景 */
     background?: string;
@@ -112,7 +125,7 @@ export declare const starlineTheme: ParticleTheme;
 
 export declare const starsTheme: ParticleTheme;
 
-export declare type ThemeId = 'starline' | 'snow' | 'bubble' | 'stars' | 'firefly' | 'geometry' | 'wave' | 'none';
+export declare type ThemeId = 'starline' | 'snow' | 'bubble' | 'stars' | 'firefly' | 'geometry' | 'wave' | 'wave2d' | 'none';
 
 /**
  * 浮动主题选择器按钮 + 抽屉面板。
@@ -137,6 +150,8 @@ export declare interface ThemeSelectorProps {
 /** 访问当前粒子主题上下文。必须在 `<ParticleProvider>` 内使用。 */
 export declare const useParticleTheme: () => ParticleContextValue;
 
+export declare const wave2dTheme: ParticleTheme;
+
 export declare const waveTheme: ParticleTheme;
 
 export { }