So lately I’ve been busy rebuilding my dev portfolio site. Like any good portfolio, I wanted the hero section (that big first impression spot at the top of the page) to have something… well, fancy.
That’s where imageAtomizer.js comes in.
It’s a little JavaScript library I built that takes any image and explodes it into thousands of animated particles—particles that gracefully come together to form the image again. And the fun part? Move your mouse (or your finger if you’re on mobile), and the particles scatter away, then drift back into place. It’s a kind of mesmerizing, pixelated magic show.
Here’s what it looks like:
(Although it doesn’t replay in a loop, over and over like this. Here the .gif image is set to play in a loop .)
How It Works
Using it on your site is super simple. Just add some HTML like this:
<div id="image-atomizer">
<canvas class="atomizer"></canvas>
</div>Then in your JavaScript:
const atomizer = new ImageAtomizer(imgSrc, options);- imgSrc → the path to the image you want to use
- options → an object full of knobs and switches you can tweak
That’s it. Plug it in and watch the particles do their thing!
Options You Can Play With 🎛️
Here are the available options (all totally optional—defaults are set):
| Option | Type | Default | What it does |
|---|---|---|---|
| elementId | string | “image-atomizer” | The ID of your container div. |
| width | number | 0 | Canvas width (auto-sizes if 0). |
| height | number | 0 | Canvas height (auto-sizes if 0). |
| particleGap | number | 0 | Spacing between particles. |
| particleSize | number | 2 | Size of each particle (px). |
| offsetX | number | 0 | X-offset from center. |
| offsetY | number | 0 | Y-offset from center. |
| monochrome | boolean | false | Force all particles to one color. |
| monochromeColor | string | “#fff” | Which color, if monochrome is true. |
| mouseForce | number | 4000 | How strongly particles repel from the mouse. |
| restless | boolean | false | Adds jittery, restless motion when particles are at resting state. |
| onWidthChange | function | null | Callback when width changes. |
| onHeightChange | function | null | Callback when height changes. |
| onSizeChange | function | null | Callback when either dimension changes. |
Tweak these, and you can go from a calm, subtle drift to complete particle chaos.
Why Build This?
Because working with particles in JavaScript is ridiculously fun! 🎇
There’s something about watching thousands of tiny points all follow simple rules and yet come together to make a bigger picture. It feels like programming a digital swarm.
Plus, I wanted my portfolio site to feel alive. Not just another static site, but something that reflects how much I enjoy experimenting and playing with code.
Try It Yourself!
- 👉 GitHub repo (MIT license): elliottprogrammer/image-atomizer-js
- 👉 Live demo: elliottprogrammer.com (work in progress, but you can see it in action at the top)
Final Thoughts
Honestly, this project started as a “wouldn’t it be cool if…” idea and turned into one of those side projects that’s just as fun to build as it is to show off.
If you’re into front-end experiments, give it a spin, fork it, break it, remix it—have fun. And if you build something wild with it, let me know! I’ll probably end up featuring it in a future post.
Particles are weirdly addictive. Don’t say I didn’t warn you. 😅