How To Turn Images Into Living Particle Maps

Most “particle demos” are one-off canvases: pretty for a homepage, useless the next day.

We wanted something different—a small creative tool where a logo, a fern, a chart, or your own photo can become a portable particle map: data you can replay, morph, download, and share.

That tool is MarginTop Particle Lab. Here’s how it works under the hood.

What a Particle Map Actually Is

A particle map is not a video and not a mesh. It’s a compact list of samples that describe a shape:

[nx, ny, r, g, b, edge?]

Where:

• nx, ny — normalized coordinates within the subject’s bounding box (0…1)
• r, g, b — original color at that sample
• edge — 1 if the sample sits on the silhouette boundary; otherwise 0

The portable file is versioned JSON:

{
  "version": 1,
  "type": "particle-playground-map",
  "name": "My cutout",
  "width": 412,
  "height": 580,
  "opaque": 18420,
  "createdAt": "2026-08-11T05:30:00.000Z",
  "map": [
    [0.42, 0.31, 210, 88, 255, 0],
    "..."
  ]
}

That .particle.json format is intentionally boring—and that’s the point. It’s easy to inspect, easy to regenerate, and independent of React or Next.js.

You can also export a standalone HTML player that paints the same particle cloud fullscreen, with no UI chrome.

Pipeline: Photo → Cutout → Map → Module

Uploading an image runs entirely in the browser. There’s no upload to our servers for background removal.

1. Background Removal

We use @imgly/background-removal with ONNX Runtime Web to isolate the subject.

Progress is mapped into monotonic bands so the UI never jumps backward when individual model assets report their own 0 → 100 progress cycles.

2. Bounding Box + Opacity Scan

The cutout is drawn to an offscreen canvas, capped at 720 px on the long side.

We walk the pixels using an alpha threshold, count the opaque area, and crop to the subject’s bounding box with a small amount of padding.

3. Density-Aware Sampling

Sample count scales with opaque area—roughly one sample per ~7 opaque pixels, clamped between 3,500 and 28,000 samples.

Larger subjects get denser maps; smaller ones stay lightweight.

4. Edge Tagging

A sample is marked as an edge if any of its four neighboring pixels falls below the alpha threshold.

Those rim points later drive subtle “fly-out” sparks—one or two particles that break away from the edge—so the silhouette feels alive without requiring a hard outline.

5. Module Build

The map then becomes a particle module.

Positions are aspect-corrected, luminance is remapped into a neon violet → magenta → lilac palette, and the live particle count is scaled again against a portrait reference so tiny stickers don’t unexpectedly spawn 50,000 points.

Rendering Without WebGL

The lab renderer is a 30 FPS ImageData plotter on a 2D canvas—not WebGL.

That choice keeps the dependency surface small while making reduced-motion support and offscreen pausing straightforward.

The core rendering budget looks like this:

• Desktop: ~50,000 points
• Mobile: ~22,000 points
• Morph duration: ~1.4 seconds with ease-in-out cubic
• Glow: neighbor brightening plus a radial aura pass
• Visibility: pauses when the canvas leaves the viewport or the tab is hidden
• DPR: capped at about 1.5 so Retina displays don’t blow the pixel budget

Built-in modules—including the logo, Barnsley fern IFS, spinning pie, and portrait map—share the same contract as uploaded maps:

build(count)
animate(out, time, points, count)

Morphing works because every module fills a fixed-length buffer. Inactive points are simply parked off-canvas, keeping particle indices aligned between shapes.

Why This Matters for Product Engineering

Particle Lab is a small case study in shipping a creative feature the same way we’d ship product UI.

Client-Side ML Where It Belongs

Background removal happens locally, making cutouts privacy-friendly. For the common case, the heavy rembg work never needs a GPU server.

Data Over Demos

The .particle.json format turns a visual effect into an artifact you can version, email, archive, or drop into another page.

Performance Budgets as Design

Sample clamps, area scaling, FPS caps, and ResizeObserver-driven canvases aren’t afterthoughts. They’re part of the aesthetic.

Performance constraints shape how the experience looks and feels.

Progressive Disclosure

The built-in morphing modules make the tool immediately playful.

Upload and export controls appear when someone wants to move from exploring to creating.

You’ll also see a lighter cousin of the same system in our homepage hero: logo → fern → pie, with a “Create your own” path into the full lab.

Try Particle Lab

Open MarginTop Particle Lab, morph between the built-in shapes, or upload a photo with a clear subject:

https://margintopsolutions.com/apps/particle-lab

Download the particle map if you want the underlying data. Download the HTML player if you want a self-contained neon visualization you can run elsewhere.

If you’re building interactive brand moments, data-viz flourishes, or onboarding experiences that should feel crafted rather than templated, particle maps are a surprisingly practical intermediate representation:

compact, remixable, and entirely yours once exported. ;-)