Cymatics Resonance: Vibrations Settle Into Your Logo

What it looks like

1. From the first frame, particles head to their spots on your logo while shaking randomly.
2. How hard a particle shakes depends on where it is: the canvas is covered by a grid-like standing-wave pattern, and particles on the still lines of the pattern barely move.
3. The pattern gets finer as the cycle goes on, while the shaking fades to zero.
4. The look is inspired by Chladni plates, where sand on a vibrating plate collects along the lines that do not move.

Good for

• Music, audio and sound-design brands
• Calm, precise reveals
• Detailed logos that should resolve gradually

Default settings

Use it on your site

1. Open the workbench with Cymatics Resonance selected.
2. Upload your logo (PNG, SVG, JPG or WebP). You can also drag it onto the page or paste it with Ctrl+V / ⌘+V.
3. Adjust particle size, shape and speed, then choose Export Code.
4. Pick a format. The HTML file is free; the Vue and React components need Pro.

In the exported code, this effect is selected with:

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

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

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

Step-by-step guides: HTML · Vue 3 · React