克拉尼声波共振：振动纹理平息成 Logo

效果是什么样的

1. 从第一帧起，粒子一边随机抖动一边朝自己在 Logo 上的位置移动。
2. 抖动强度取决于粒子所在的位置：画布上覆盖着网格状的驻波纹理，处在纹理静止线上的粒子几乎不动。
3. 随着周期推进，纹理变得越来越密，抖动逐渐减到 0。
4. 视觉灵感来自克拉尼板：振动的金属板上，沙子会聚集在不振动的线条上。

适合用在

• 音乐、音频、声音设计类品牌
• 安静、精确的揭幕
• 细节多、适合逐渐清晰的 Logo

默认设置

在你的网站上使用

1. 打开已选中「克拉尼声波共振」的工坊。
2. 上传你的 Logo（PNG、SVG、JPG 或 WebP），也可以直接拖到页面上，或按 Ctrl+V / ⌘+V 粘贴。
3. 调整粒子大小、形状和速度，然后点击导出代码。
4. 选择格式：HTML 文件免费；Vue 和 React 组件需要 Pro。

导出的代码里，用下面的写法选择这个效果：

<!-- Vue 3 (PixelLogoLoader.vue) -->
<PixelLogoLoader variant="cymatics-resonance" />

// React (PixelLogoLoader.tsx)
<PixelLogoLoader variant="cymatics-resonance" />

// HTML (index.html)
const variant = 'cymatics-resonance';

分步教程： HTML · Vue 3 · React