Mobius Contour Flow: Light Pulses Flow Around Your Logo

What it looks like

1. Particles start at random positions and move toward their spots on your logo at a steady pace for the whole cycle.
2. The points are ordered by their angle around the center, and a pulse runs through that order, so bright waves travel around the logo.
3. Each pulse pushes particles slightly in and out from the center. The ripple shrinks to about a third of its size as the logo completes, so the outline keeps a light shimmer.
4. Particles inside a pulse are drawn brighter than the rest.

Good for

• Logos with strong outlines or rings
• Looping background animations where the logo should keep moving
• Tech, energy or audio brands that want a pulsing feel

Default settings

Use it on your site

1. Open the workbench with Mobius Contour Flow 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="mobius-flow" />

// React (PixelLogoLoader.tsx)
<PixelLogoLoader variant="mobius-flow" />

// HTML (index.html)
const variant = 'mobius-flow';

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