paradise-runner/background-clouds 来源：https://github.com/paradise-runner/background-clouds

background-clouds

background-clouds 为网站添加了一个轻量级、动态的低多边形云层背景。它只使用一个 canvas，无运行时依赖，当用户偏好减少动效时暂停运动，并为单页应用暴露生命周期方法。

动态低多边形云背景

安装

npm install background-clouds

使用

import { createCloudBackground } from "background-clouds";

const clouds = createCloudBackground({
  canvas: document.querySelector("#background-clouds"),
  seed: "my-site",
  speed: 0.8,
  opacity: 0.9
});

// 后续，例如在卸载路由时：
clouds.destroy();

<canvas id="background-clouds"></canvas>

#background-clouds {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

调用 createCloudBackground 前需确保 canvas 已就绪。返回的控制器包含 start()、stop()、resize()、setSeed(seed) 和 destroy() 方法。

seed 可以是字符串或数字；使用相同的种子会得到相同的云层布局。speed 和 opacity 默认值为 1，接受非负数。

选项

该包仅拥有 canvas 的像素。请在你的网站 CSS 中设置 canvas 的层叠顺序、背景颜色和定位。