Turn a photo into a living Three.js particle portrait and export it as one drop-in JavaScript file.
Kenapa
(01)Animated particle portraits make a striking hero section, but building one means writing WebGL shaders, sampling images, removing backgrounds and tuning motion by hand. Most developers who want one end up with a static photo instead.
Particle Portrait does all of it in the browser. Upload a photo, the background is removed on your device, tune the look live, and export a single self-contained file that works in plain HTML, React, Next.js, Vue or Svelte.
Detail
(02)Particle Portrait grew out of the hero on my own site: a face made of thousands of particles that gather from dust, drift away from the cursor and scatter on scroll. I turned that effect into a tool anyone can use with their own photo.
Everything runs client-side. Background removal uses MediaPipe running locally in the browser, so the photo never leaves the device. There is no server, no account and no upload.
The export is the real product: one JavaScript file with the engine, your photo and your settings built in. Particles are generated at runtime in the visitor's browser, all animation runs on the GPU in a vertex shader, and rendering pauses when the portrait is off-screen. It respects reduced motion, follows light and dark mode, and falls back to a still image when WebGL is unavailable.
Fitur
(03)- 01
Background removal in the browser — your photo never leaves the device
- 02
Gather-from-dust intro, cursor repel, tilt and scroll scatter
- 03
Morph between up to three photos
- 04
Live settings panel with Subtle, Bold, Ghost and Ink presets
- 05
Light and dark mode, with custom colors per theme
- 06
Export as .js, .d.ts or a single .ts file
- 07
Copy-paste snippets for HTML, React, Next.js, Vue and Svelte
- 08
Mobile-aware: fewer particles on phones, respects reduced motion
Tertarik dengan Particle Portrait?
Tanya cara pakai, kolaborasi, atau kebutuhan serupa untuk tim Anda.