Particle Pulse

A shell of particles that breathes in and out, spins under the pointer and coasts to a stop.

About this tool

A Canvas 2D orb whose particles are not sampled onto the shell but relaxed into it: a quasi-random pair seeds the sphere and the dots then push each other apart until the spacing evens out, which lands tighter than the spiral everyone reaches for and leaves no poles, no seam and no winding for the eye to lock onto. Depth and timing come from one smooth field over the sphere, so neighbours agree — the orb inhales and exhales as one while a wave crosses its surface, instead of inflating like a balloon or dissolving into static. Spread is shell depth, from a crisp surface to a cloud with a shaded interior. Depth is real — the dots are projected under perspective, sorted back to front and painted with source-over alpha, and discs that fall under a pixel are widened and dimmed by the area they would otherwise have lost, because a browser under-inks them exactly where the depth cue lives. Drag spins the ball rigidly and a flick coasts until damping stops it. Edit the colour, density, dot size, spread, speed, spin, resting orientation and pointer feel, then export one self-contained HTML file with no dependencies.

In collections: Particle Effects & Particle Backgrounds Animated Orbs: AI, Siri & Voice Orb Animations

Guide: Untitled UI Alternatives: Choose by Design-to-Code Workflow

UI/UX · HTML / Canvas All tools

Orb

Dot colour

#ffffff

Density %

Dot size %

Spread %

Orientation

Turn °

Tilt °

Motion

Speed

Spin turns

Pointer

Drag %

Damping