Autonomous Swarm Assembly: Four Swarms Assemble Your Logo

What it looks like

1. The particles are split into four groups, and each group gathers around a point that circles the center of the canvas.
2. The four groups orbit a quarter turn apart, and their orbit shrinks as the cycle goes on.
3. Particles leave their group for their spots on your logo on an ease-in-out curve: slowly at first, quickly in the middle and gently at the end.
4. Particles brighten as they settle.

Good for

• Playful or friendly brands
• Team, community or collaboration products, where many parts form one shape
• Longer intros where the motion should feel organic

Default settings

Use it on your site

1. Open the workbench with Autonomous Swarm Assembly 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="swarm-assembly" />

// React (PixelLogoLoader.tsx)
<PixelLogoLoader variant="swarm-assembly" />

// HTML (index.html)
const variant = 'swarm-assembly';

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