Slingshot Time Reversal: Your Logo Snaps Into Place

What it looks like

1. In the first 38% of the cycle, particles fly to an enlarged copy of your logo: each one aims for its own spot, pushed up to 85 pixels further out from the center.
2. Then the shape snaps inward to the real logo size.
3. The snap overshoots and wobbles: particles swing back and forth around their spots about four times, and the swing shrinks to zero.
4. Particles start at half brightness and reach full brightness during the snap.

Good for

• Bold, energetic brands
• Sports, gaming or action-oriented products
• Moments that should feel like an impact, such as a launch or a reveal

Default settings

Use it on your site

1. Open the workbench with Slingshot Time Reversal 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="gravitational-slingshot" />

// React (PixelLogoLoader.tsx)
<PixelLogoLoader variant="gravitational-slingshot" />

// HTML (index.html)
const variant = 'gravitational-slingshot';

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