Quantum Condense: Particles Fly In and Form Your Logo

What it looks like

Particles start at random positions across the canvas.
Each particle travels in a straight line to its own spot on your logo, and they all arrive together at about 80% of the cycle.
In the last 20% the shape overshoots very slightly and settles, which gives the reveal a soft, springy finish.
Particles brighten as they get closer and keep a gentle size shimmer once the logo is complete.

Good for

Logo reveals at the start of a product video
Loading screens that end on your logo
Hero sections where the logo should form quickly and cleanly

Default settings

Setting	Value
Suggested color palette	Titanium Chrome. Colorful logos can keep their original colors instead.
Particle size	1.8 px
Cycle length	8 s in the workbench (3, 8, 15 or 40 s); 3.2 s plus a 1.2 s pause in exported code
Interaction	Hover pushes particles away; a click sends a shockwave

Use it on your site

Open the workbench with Quantum Condense selected.
Upload your logo (PNG, SVG, JPG or WebP). You can also drag it onto the page or paste it with Ctrl+V / ⌘+V.
Adjust particle size, shape and speed, then choose Export Code.
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="condense" />

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

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

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

What it looks like

Good for

Default settings

Use it on your site

Other effects