finds.dev

desandro/breathing-halftone

Images go whoa with lots of floaty dots

View on GitHubHomepage ↗

★ 272JavaScriptupdated Jul 2015

// the take

A canvas-based effect that turns an image into a field of dots that drift and breathe, reacting to mouse hover and clicks. Built by desandro (Masonry, Isotope) for a single portfolio site in 2015 — it's a visual toy for landing pages and hero images, not a general-purpose library.

The option set is genuinely well thought out: separate dot-size, oscillation, and physics (friction, hover/active force) knobs instead of one vague 'intensity' slider. It degrades sanely — no canvas support just shows the original `<img>`, and browsers lacking `darker` compositing (old Firefox/IE) fall back to a luminosity channel instead of breaking. Code is split cleanly into particle.js/vector.js/breathing-halftone.js, so the physics bit is easy to lift out if you only want that part.

Dead for over a decade — last push 2015, built with gulp, shipped as a pre-bundled .pkgd.js rather than an npm module, nothing for ES modules or a bundler-friendly import. Images must be same-origin or the canvas pixel read throws, which rules out most real sites that serve images from a CDN. The README admits the core perf tradeoff (smaller dots = more dots = worse frame rate) but offers no mitigation — no requestAnimationFrame throttling, no dot count cap, no mention of mobile performance at all. It's a single-purpose demo, not something you'd build a product feature on.

We read the README, the directory tree and a key source file in October 2026. Nobody pays to be listed. How we judge →

// at a glance

Stars
272
Forks
32
Language
JavaScript
Last commit
10 Jul 2015

// nearby

If breathing-halftone isn't quite it.

All repos →