Add a particle logo animation to any website with one HTML file

What you get

• A single file named index.html with your logo's sampled points (up to 1,600), the animation code and its styles.
• No dependencies and no network requests, so it works offline: double-click it to open it in a browser.
• The animation loops: one cycle takes 3.2 seconds, the finished logo holds for 1.2 seconds, then the particles scatter and play again.
• Hovering pushes particles away from the cursor; clicking sends a shockwave.
• The HTML export is included in the free plan.

1. Export the file

1. Open the workbench.
2. Upload your logo: click to choose a PNG, SVG, JPG or WebP file, drag it onto the page, or paste it with Ctrl+V / ⌘+V. Logos on a transparent or plain background work best; if parts are missing, adjust the sampling density and threshold.
3. Pick one of the 9 effects and adjust particle size, shape (square or round) and speed.
4. Click Export Code, open the HTML5 tab and choose Download File (or copy the code). This format is included in the free plan.

2. Change the effect or the timing

Open index.html. Near the top of the <script> you will find these settings (example values):

const rawPoints = [...];         // your logo's points: [x, y] or [x, y, color]
const defaultColors = [...];     // particle colors, used when a point has no color of its own
const variant = 'condense';      // which effect plays
const baseParticleSize = 1.8;    // base particle size, scaled to the card
const particleShape = 'square';  // 'square' or 'circle'
const speedMultiplier = 1;       // how fast particles move toward their targets
const duration = 3.2;            // seconds per cycle; a 1.2 s hold follows

Set variant to any value from the table below to switch effects. Particle size is scaled to the card: the drawn size is baseParticleSize × the shorter side of the card ÷ 400, and never less than 1 px.

3. Put it on your page

Option A: embed it with an iframe (simplest, styles stay separate)

Upload index.html to your site, for example as /particle-logo/index.html, then add:

<iframe src="/particle-logo/index.html" title="Animated logo"
        width="480" height="520" style="border:0" loading="lazy"></iframe>

The file centers a card of up to 480 × 520 px on a black page and draws the animation inside it.

Option B: paste the code into your page

Copy the .card element, the .card, canvas and .hint styles, and the <script>. Don't copy the body styles: they make the whole page full-height and black and hide scrolling. The script finds its elements by the ids card and canvas, so keep those ids unique on your page.

Framer, Webflow and other site builders

Pro includes a Framer / Webflow embed snippet (framer-webflow-embed.html) that fills its container (at least 420 px tall). Paste it into your builder's embed or custom-code element.

4. Performance and accessibility

• Everything is drawn on one canvas with the 2D API in a single requestAnimationFrame loop. Browsers pause that loop in background tabs.
• When the window is resized, the canvas is set up again at the new size.
• The file does not check the reduced-motion setting. If your audience needs it, test matchMedia('(prefers-reduced-motion: reduce)') first and show a static image of your logo when it matches.

Point data (JSON)

The Point Cloud export (Pro) is an array of every sampled point:

[
  { "x": 132.5, "y": 88, "alpha": 0.8, "color": "rgb(66, 133, 244)" },
  { "x": 136.5, "y": 88, "color": "rgb(66, 133, 244)" }
]

• Coordinates use the 400 × 400 sampling canvas of the workbench.
• Points sampled from an image carry their color; alpha appears when a point is not fully opaque.
• The code exports keep up to 1,600 evenly spaced points; the JSON export keeps all of them.