# Particle Logo

> Particle Logo (particlelogo.com) is a browser-based tool that turns a logo or image into a particle animation. You upload a PNG, SVG, JPG or WebP file, pick one of 9 effects, and export a video, a GIF, a standalone HTML file, a Vue 3 or React component, a Framer/Webflow embed snippet, or the sampled points as JSON.

- Images are sampled and animated in the browser; they are not uploaded to the server.
- Exported components draw on one HTML canvas with the 2D API and have no runtime dependencies. Up to 1,600 points are embedded in the file.
- Free plan: preview all 9 effects, export video and GIF with a watermark, export the HTML file. Pro: $6.99 per month or $34.99 once for lifetime access; adds watermark-free 4K video, transparent backgrounds, the Vue, React, embed and JSON exports, and a commercial license.
- Languages: English (https://particlelogo.com/) and Simplified Chinese (https://particlelogo.com/zh).
- Contact: support@particlelogo.com

## Product

- [Home](https://particlelogo.com/): overview, effects and FAQ
- [Workbench](https://particlelogo.com/workbench): upload a logo and create the animation
- [Particle text](https://particlelogo.com/typography): turn typed text into a particle animation
- [Pricing](https://particlelogo.com/pricing): plans and what each includes

## Effects

- [All 9 effects](https://particlelogo.com/effects): comparison table and live demos
- [Quantum Condense](https://particlelogo.com/effects/quantum-condense): Scattered particles fly straight into your logo and settle with a slight springy bounce.
- [Mobius Contour Flow](https://particlelogo.com/effects/mobius-contour-flow): Particles gather into your logo while bright pulses travel around it, so the outline ripples as it forms.
- [Vortex Singularity](https://particlelogo.com/effects/vortex-singularity): Particles start on a wide spinning spiral and wind inward until they lock into your logo.
- [Hologram Raster Scan](https://particlelogo.com/effects/hologram-raster-scan): A light bar sweeps down the canvas and builds your logo row by row.
- [Diffusion Denoise](https://particlelogo.com/effects/diffusion-denoise): Your logo starts as a shaking cloud of noise that calms down into a sharp shape, like an AI image being denoised.
- [Superconducting Flux Wave](https://particlelogo.com/effects/superconducting-flux-wave): Particles gather into your logo while a bright ring ripples outward from the center.
- [Autonomous Swarm Assembly](https://particlelogo.com/effects/swarm-assembly): Particles bunch into four clusters that circle the center, then stream out of them into your logo.
- [Slingshot Time Reversal](https://particlelogo.com/effects/slingshot-time-reversal): Particles first form an oversized, spread-out version of your logo, then snap inward into place with a quick wobble.
- [Cymatics Resonance](https://particlelogo.com/effects/cymatics-resonance): Particles shake in a grid-like vibration pattern that fades until they rest on your logo.

## Guides

- [Add a particle logo animation to any website with one HTML file](https://particlelogo.com/guides/html-particle-logo-animation): Export your logo as a standalone HTML particle animation, change the effect in one line and embed it in any page. The HTML export is part of the free plan.
- [How to add a particle logo animation to a Vue 3 app](https://particlelogo.com/guides/vue-particle-logo-animation): Export your logo as a dependency-free Vue 3 component, add it to your app and control the particle animation with props, including a progress prop for loading screens.
- [How to add a particle logo animation to a React or Next.js app](https://particlelogo.com/guides/react-particle-logo-animation): Export your logo as a dependency-free React component in TypeScript, add it to a React or Next.js app and drive the particle animation with props.

## About

- [About Particle Logo](https://particlelogo.com/about): who runs it and how files are handled
- [Terms of Service](https://particlelogo.com/terms)
- [Privacy Policy](https://particlelogo.com/privacy)

## 中文

- [中文首页](https://particlelogo.com/zh)
- [9 种效果](https://particlelogo.com/zh/effects)
- [接入教程](https://particlelogo.com/zh/guides)