你需要什么
- Pro 套餐。Framer / Webflow 嵌入代码是 Pro 的导出格式，见价格。
- 在工坊里上传 Logo、选好效果，点击导出代码，打开 Framer / Webflow 标签，复制代码（文件名是
framer-webflow-embed.html）。 - 这段代码会铺满它所在的容器，高度至少 420 像素，所以请给嵌入元素留出足够的空间。
放进 Framer
- 在 Framer 的 Insert 菜单里搜索 Embed，把 Embed 组件拖到画布上。
- 在 Embed 组件的 HTML 部分粘贴刚才复制的代码（Framer 官方说明里，脚本放在 Embed 组件的 HTML 部分，见Framer 帮助）。
- 调整组件的大小，然后用预览查看动画。
放进 Webflow
- 在 Designer 里从添加面板拖一个 Code Embed 元素到想显示 Logo 的位置。
- 粘贴代码并保存。
- 发布站点，在线上页面里查看动画。
Webflow 规定 Code Embed 里的自定义代码不能超过 50,000 个字符（见 Webflow 帮助中心和 Webflow 更新说明）。超过的话需要把代码放到别处，见下一节。
代码超过 50,000 个字符怎么办？
嵌入代码里包含 Logo 的全部点，一个带自己颜色的点写成 [120.2,196,"rgb(34, 197, 94)"] 这样，约 31 个字符；代码本身大约 14,000 个字符；点数最多 1,600 个。所以彩色 Logo 的代码最容易超限。我们在 2026 年 11 月 3 日 用默认步长 4 测了三张图（字符数含代码本身）：
- 白色字标（单色）：约 21,414 个字符
- Particle Logo 自己的标志（银灰单色调）：约 34,727 个字符
- 五种颜色的几何图形：约 65,509 个字符，超过了 50,000
采样会给每个点加一个很小的随机偏移，所以同一张图再导出一次，长度最多相差几百个字符。绕开这个限制有两个办法：
办法一：把 HTML 文件放在别处，用 iframe 嵌入（最稳）
导出免费的 HTML5 标签，把 index.html 上传到任意静态托管，再在 Webflow 的 Code Embed 里放下面这段，不到 200 个字符：
<iframe src="https://example.com/particle-logo/index.html" title="Animated logo"
width="480" height="520" style="border:0;max-width:100%" loading="lazy"></iframe>在 Framer 里，把 Embed 组件的类型设为 URL，填上这个页面的地址即可。Framer 官方提醒，有些网站会通过 HTTP 响应头禁止被嵌入（Framer 帮助），所以托管的服务器不要设置禁止 iframe 的响应头。
办法二：减少点数
在工坊里调大点阵步长。注意代码导出最多只保留 1,600 个点，所以工坊里的点数降到这个数以下之前，嵌入代码的长度不会变。下面是五色图形的实测：
| 点阵步长 | 工坊采样点数 | 嵌入代码字符数 | 是否在 50,000 以内 |
|---|---|---|---|
| 4 | 4,139 | 65,332 | 否 |
| 6 | 1,848 | 65,448 | 否 |
| 8 | 1,032 | 47,114 | 是 |
| 10 | 663 | 35,121 | 是 |
这张图要到步长 8、约 1,032 个点时才降到 50,000 以内。点数越少，Logo 的轮廓越稀疏，请在工坊预览里确认效果。
和 Framer 社区里的同名组件有关系吗？
没有。Framer 社区里有一个名为 “Particle Logo” 的免费组件，作者是 Alex Lara，是另一个产品，与 Particle Logo 网站没有关联。
常见问题
免费版能用 Framer / Webflow 嵌入代码吗？
不能。嵌入代码需要 Pro；免费版可以导出 HTML 文件，再按上面的办法一用 iframe 嵌入。
其他建站工具呢？
嵌入代码是一段普通的 HTML 和 JavaScript，任何允许粘贴自定义代码的工具都可以尝试，但我们只验证过上面两个平台的官方说明，没有逐个测试其他平台。