Particle Assembly turns a sequence of images into thousands of particles. Each image scatters and reforms as the next one, all controlled by the visitor's scroll. It's made for logo reveals, product launches and brand stories.
Five photos, 4,000 particles, Swirl style. Stop scrolling and it holds, scroll back up and it plays in reverse.
Keep scrolling
Add the element, choose your images and publish. The element handles pinning, timing and page height.
Drop the element into any section and pick images from the Media Library. Reorder them to set the sequence.
Pick a scatter style, then set particle count, size and how far visitors scroll for each change. Check it in the builder preview.
On the live page the stage pins in place, and each image breaks into particles and forms the next one as visitors scroll.
Each style moves the particles differently between images. Use Scatter Distance to make the movement smaller or bigger.
Particles spiral out around the centre and spin back in to form the next image. Smooth and eye-catching.
Particles shoot outwards in every direction and then snap back together. The most dramatic of the three.
Particles float up and down in loose columns, like dust or falling snow. A calmer choice for quieter pages.
It looks good with the default settings. Every part of the effect can still be changed if you need to.
Every particle takes its colour from a pixel in your image, so the particles still look like your photo or logo while it breaks apart.
Progress follows the scroll position, not a timer. When the visitor stops, the animation stops at that point.
Particles follow the same fixed paths every time, so scrolling back up plays the animation in reverse with no jumps or reshuffling.
The stage stays on screen while the sequence plays, then scrolls away. The extra scroll space is added for you.
Transparent pixels are skipped, so a PNG or WebP logo becomes particles in the shape of the logo, with no box around it.
Use anywhere from 300 to 12,000 particles, sized 1 to 10px, as circles or squares. Go subtle or dense.
Each image stays whole for a set part of the scroll before it breaks apart, so every one gets its moment.
Below 768px you can use fewer particles, show just the first image, or keep full quality.
If the visitor has reduced motion turned on, they see the first image with no animation. Image descriptions stay in the page for screen readers and search engines.
Uses one canvas and no libraries. It only draws when it is on screen and the scroll position changes.
In the Breakdance editor, show the effect at any point in the sequence, or let it follow the scroll.
If your header is fixed, set an offset so the stage pins below it instead of underneath it.
Use it for one standout moment on a page, somewhere people will remember.
Your logo builds itself out of a cloud of particles as the visitor scrolls. Use one transparent PNG.
Go from packaging to product to hero shot, with each change timed to the scroll.
Renovations, retouching, redesigns. Show the old version break apart and turn into the new one.
Move from founder to workshop to finished product in one pinned section.
Cycle through your best work at the top of a case study or agency homepage.
Seasonal collections, event line-ups and countdowns that people remember.
This is the full list of settings in the Breakdance editor, with their default values.
| Control | What it does | Default |
|---|---|---|
| Images | ||
| Image Sequence | Add images from the Media Library. One image builds itself up from particles. Two or more change into each other in order. | — |
| Description | Alt text for each image. It stays in the page so screen readers and search engines can read it. | — |
| Particle Assembly | ||
| Scatter Style | How particles move between images: Swirl, Explode or Drift. | Swirl |
| Scroll Per Transition | How far visitors scroll for each change, as a % of the stage height. 50–400. | 160% |
| Hold Image | How much of each transition the image stays whole before it breaks apart. 0–60. | 20% |
| Scatter Distance | How far particles spread out mid-transition. 0–150. | 55% |
| Particle Count | How many particles make up each image. 300–12,000. | 4,000 |
| Particle Size | The size of each particle. Sizes vary a little for a natural look. 1–10px. | 2px |
| Particle Shape | Circle or square. | Circle |
| Image Fit | Contain shows the whole image with some space around it. Cover fills the stage. | Contain |
| Fixed Header Offset | Pins the stage this many pixels from the top so a fixed header doesn't cover it. | 0px |
| Mobile Below 768px | Reduced particles (up to 1,200), static first image, or full quality. | Reduced |
| Builder Preview | Show the editor preview at a fixed point, or let it follow the scroll. | Fixed |
| Preview Progress | Which point in the sequence the editor shows when preview is fixed. | 0% |
| Design | ||
| Stage Height | Height of the pinned stage. It is capped at the viewport height minus the header offset. | 85svh |
| Background | Colour behind the particles. Also shows through transparent logos. | #10131b |
Clear images with strong contrast give the sharpest result. For logos, use a transparent PNG or WebP so the particles take the shape of the logo. Three to six images works well. More than that makes a long scroll.
Yes. With one image, particles start scattered and come together into the image as the visitor scrolls. This works well for a logo reveal.
The effect has to read each image's pixels, and browsers only allow that for images on your own site or on a server that allows cross-origin (CORS) access. Images from your Media Library always work.
No libraries are loaded. Each image is sampled once and the result is reused. Drawing only happens while the stage is on screen and the scroll position is changing. On high-density screens the canvas resolution is capped at 2x to save work.
Each change between images adds the Scroll Per Transition distance. Five images at 160% gives four transitions, which is about 6.4 stage heights of scrolling. Lower the value for a quicker sequence.
If reduced motion is turned on in their system settings, the section shows the first image as a normal picture with no pinning and no particles.
Particle Assembly is included with Phox Elements, along with 150+ other premium elements for Breakdance.