你会得到什么
- 一个名为
index.html的文件，里面包含 Logo 的采样点阵（最多 1600 个点）、动画代码和样式。 - 没有任何依赖，也不发网络请求，断网也能用：双击文件就能在浏览器里打开。
- 动画循环播放：每轮 3.2 秒，Logo 成形后停留 1.2 秒，然后粒子重新散开再播一遍。
- 鼠标经过会推开粒子，点击会触发冲击波。
- HTML 导出包含在免费版里。
1. 导出文件
- 打开工坊。
- 上传 Logo：点击选择 PNG、SVG、JPG 或 WebP 文件，也可以拖到页面上，或按 Ctrl+V / ⌘+V 粘贴。透明背景或纯色背景的 Logo 效果最好；如果有部分没采到，可以调节点阵密度和提取阈值。
- 从 9 种效果里选一个，调整粒子大小、形状（方块或圆点）和速度。
- 点击导出代码，切到 HTML5 单文件 标签，点下载文件（或复制代码）。这个格式免费版就能用。
2. 换效果或调整节奏
打开 index.html，在 <script> 开头能找到这几项设置（下面是示例值）：
const rawPoints = [...]; // Logo 的点阵：[x, y] 或 [x, y, 颜色]
const defaultColors = [...]; // 粒子颜色，点没有自带颜色时使用
const variant = 'condense'; // 播放哪种效果
const baseParticleSize = 1.8; // 粒子基础大小，会按卡片尺寸缩放
const particleShape = 'square'; // 'square' 方块或 'circle' 圆点
const speedMultiplier = 1; // 粒子移向目标位置的速度倍数
const duration = 3.2; // 每轮秒数，之后停 1.2 秒把 variant 改成下表里的任意一个值就能换效果。粒子大小按卡片尺寸缩放：实际大小 = baseParticleSize × 卡片宽高中较小的一边 ÷ 400，最小 1 像素。
| variant 值 | 效果 |
|---|---|
condense | 量子凝聚态 |
mobius-flow | 莫比乌斯拓扑光流 |
vortex | 星系引力坍缩 |
scan | 全息光栅断层扫描 |
diffusion-denoise | 扩散降噪重构 |
flux-wave | 超导磁通涟漪 |
swarm-assembly | 纳米蜂群智能组装 |
gravitational-slingshot | 引力弹弓时间逆流 |
cymatics-resonance | 克拉尼声波共振 |
3. 放到你的网页里
方法一：用 iframe 嵌入（最简单，样式互不影响）
把 index.html 上传到网站，比如放在 /particle-logo/index.html，然后在页面里加上：
<iframe src="/particle-logo/index.html" title="Logo 动画"
width="480" height="520" style="border:0" loading="lazy"></iframe>文件会在黑色页面中央放一张最大 480 × 520 像素的卡片，动画画在卡片里。
方法二：把代码粘贴进页面
复制 .card 元素、.card、canvas、.hint 这几段样式，以及 <script>。不要复制 body 的样式，它会把整个页面设成满屏黑底并隐藏滚动条。脚本通过 id card 和 canvas 找元素，页面上不要有重复的 id。
Framer、Webflow 等建站工具
Pro 提供 Framer / Webflow 嵌入代码（framer-webflow-embed.html），会铺满所在容器（最低 420 像素高），粘贴到建站工具的嵌入代码组件里即可。
4. 性能与无障碍
- 所有粒子画在一个 Canvas 上，用 2D 接口绘制，只有一个 requestAnimationFrame 循环。页面切到后台时浏览器会暂停这个循环。
- 窗口大小变化时，画布会按新尺寸重新初始化。
- 文件没有检测系统的“减少动态效果”设置。如果你的用户需要，可以先判断
matchMedia('(prefers-reduced-motion: reduce)')，匹配时显示一张静态 Logo 图片，不加载动画。
点阵数据（JSON）
点云 JSON 导出（需要 Pro）是一个数组，包含采样到的全部点：
[
{ "x": 132.5, "y": 88, "alpha": 0.8, "color": "rgb(66, 133, 244)" },
{ "x": 136.5, "y": 88, "color": "rgb(66, 133, 244)" }
]- 坐标基于工坊里 400 × 400 的采样画布。
- 从图片采样的点带有
color；不是完全不透明的点会带alpha。 - 代码导出最多保留 1600 个均匀分布的点，JSON 导出保留全部点。