Free · Runs in your browser

Turn any image into particles.

Upload a picture, watch it break into thousands of animated 3D particles, then export the code for your own site. No sign-up, no upload.

Upload an imageSee examples

Examples

From pixels to particles.

Every example below is a plain image converted live in your browser. Move your cursor over the Rings to push the particles around.

Image
Particles

Heart

Assemble
Image
Particles

Star

Wave
Image
Particles

Rings

Repel
Image
Particles

Wordmark

Float

How it works

Three steps, one file.

  1. 1

    Upload an image

    Drop in a PNG, JPG, WebP, GIF or SVG. Transparent or plain backgrounds give the cleanest shapes. Nothing leaves your device.

  2. 2

    Pick an animation

    Choose from ten animations, from Assemble to Sparkle, then tune the particle count, size and color while you watch it live.

  3. 3

    Export the code

    Copy or download a single HTML file or a React component. The particle data is baked in, and only three.js is needed to run it.

Hero.jsxReact
import MoteParticles from "./MoteParticles";

export default function Hero() {
  return (
    <section style={{ height: 480 }}>
      <MoteParticles />
    </section>
  );
}

Drop the exported component into any React or Next.js project.

FAQ

Questions, answered.

What is Mote?

Mote is a free web tool that converts any image into animated 3D particles. You upload a picture, choose an animation, and export ready-to-run three.js code as a standalone HTML file or a React component.

Is my image uploaded to a server?

No. Mote runs entirely in your browser. Your image is read on a hidden canvas on your device, turned into particle coordinates, and never sent anywhere.

How does Mote turn an image into particles?

Mote draws your image to a canvas, reads its pixels, ignores the transparent or background ones, and randomly samples the rest. Each sampled pixel becomes one particle that keeps its position and color.

What can I export?

You can export a single self-contained HTML file or a React component. Both embed the particle coordinates and colors, the shader, and the animation, and need only three.js to run.

Which image formats work?

PNG, JPG, WebP, GIF (first frame) and SVG. Images with a transparent background or a plain solid background give the cleanest shapes.

Which animations are included?

Assemble (particles scatter and fly back into the shape), Float, Wave, Swirl, Swing (a 3D sway), Pulse, Ripple and Sparkle, plus two cursor-reactive ones: Repel (particles nudge away) and Magnet (particles lean toward it).

Make your first one in a minute.

Upload an image and get code you can paste straight into your site.

Open the studio