Superconducting Flux Wave: A Ring Ripples Over Your Logo

What it looks like

1. Particles start at random positions and move toward their spots on your logo at a steady pace.
2. At the same time, a circular wavefront expands from the center of the canvas to beyond its corners.
3. Particles within about 60 pixels of the wavefront are pushed in or out by up to 14 pixels and drawn at full brightness, so a glowing ring sweeps across the logo.
4. Once the ring has passed, the particles settle into place.

Good for

• Audio, wireless or energy brands
• Launch announcements that should feel like a pulse
• Round logos and app icons

Default settings

Use it on your site

1. Open the workbench with Superconducting Flux Wave 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="flux-wave" />

// React (PixelLogoLoader.tsx)
<PixelLogoLoader variant="flux-wave" />

// HTML (index.html)
const variant = 'flux-wave';

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