Vortex Singularity: Particles Spiral Into Your Logo

What it looks like

1. Particles start far out on a spiral: each one is rotated up to two and a quarter turns away from its final angle and pushed outward by about two thirds of the canvas size.
2. As the cycle plays, the spiral turns and tightens at the same time, pulling the particles toward the center.
3. Each particle blends from its spiral position into its spot on the logo, so the shape locks in at the end of the cycle.
4. Particles fade in from about 30% to full brightness as they arrive.

Good for

• Circular or symmetric logos
• Space, gaming or crypto-style intros that need a dramatic entrance
• Short splash screens where the motion should pull the eye to the center

Default settings

Use it on your site

1. Open the workbench with Vortex Singularity 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="vortex" />

// React (PixelLogoLoader.tsx)
<PixelLogoLoader variant="vortex" />

// HTML (index.html)
const variant = 'vortex';

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