Matter JS drops circles or your own images into a section and lets real physics take over. They fall, stack, float or bounce, and visitors can grab and throw them with the mouse. The effect starts when the section scrolls into view.
Stack, Float and Bounce, plus Reverse Spawn and Manual Spawn. Each effect starts when half of its box is on screen. On a computer, click and drag the shapes to throw them. In the orchard demo, press Pick an apple.
Behaviour: Stack. 140 plain circles, gravity 0.6, bounciness 0.5. The headline box has the class obstacle, so the circles pile up on top of it. Grab and throw them with the mouse.
Behaviour: Float. There is no gravity, so 40 circles from 12 to 42 pixels drift and nudge each other inside the box.
Breathe in. Breathe out.
Behaviour: Stack with Reverse Spawn on. Gravity pulls upwards, so 90 small circles rise from the bottom and gather under the top edge.
Cloudy lemonade
Made with real lemons
Behaviour: Bounce with Reverse Spawn, so 24 balls launch from the bottom. Every wall is solid and nothing loses energy, so they keep bouncing. Throw one and watch it go.
Manual Spawn is on and the button has the class spawnButton, so each click drops one apple image. The crate is an obstacle, so apples land on it and roll off.
The element sets up the effect. The section you choose is where it plays.
Give a section or div a class name, such as matter, in its Advanced settings.
Drop Matter JS inside it and enter the same class name, without the dot.
Add images if you want them, then set the number of items, sizes, gravity and behaviour.
Built on the Matter.js physics engine, loaded only on pages that use the element.
Add logos, icons or any images and each item picks one at random. With no images, plain circles are used.
Stack piles items on the floor. Float lets them drift with no gravity. Bounce keeps them bouncing off every wall.
Set how hard items fall and how much they bounce when they land.
Flip gravity so items rise from the bottom and gather at the top.
Visitors can pick up items and throw them with the mouse. Turn it on for touch screens too if you want.
Give any button the class spawnButton and each click drops one item, as in the orchard demo.
Set a minimum and maximum size and each item gets a random size between them.
Control how quickly items appear, from 0 to 3.
Give an element inside the section the class obstacle and items will land on it and roll off it.
The effect waits until half the section is visible, so visitors see it from the start.
Items stay inside the section's walls and the canvas resizes with the window.
Set the number of items to drop. The confetti demo above uses 140.
Anywhere a bit of play makes a visitor stop and look.
Drop your logo or product icons into the first screen of a landing page.
Let a pile of logos fall into place instead of a static grid.
Use themed images, like apples, sweets or snowflakes, for a seasonal page.
Use manual spawn so each click of a button adds another item.
End a page with something visitors want to play with.
Show off interactive work with a section people can touch.
This is the full list of settings in the Breakdance editor, with their default values.
| Control | What it does | Default |
|---|---|---|
| Content | ||
| Section Class Name | Class of the section or div where the effect plays, without the dot. | matter |
| Images | Repeater of images used for the items. Leave empty for plain circles. | — |
| Number of Items | How many items drop in total. | 50 |
| Gravity | How strongly items are pulled down, or up with Reverse Spawn. | 0.3 |
| Bounciness | How much items bounce in Stack mode. | 0.8 |
| Behaviour | Stack, Float or Bounce. | Stack |
| Min Size | Smallest item radius. | 5 |
| Max Size | Largest item radius. | 25 |
| Spawn Rate | Delay factor between items, 0 to 3. | 0.5 |
| Interactive | Let visitors drag and throw items with the mouse. | On |
| Interactive on Mobile | Also allow dragging on touch devices. | Off |
| Reverse Spawn | Items start at the bottom and rise. | Off |
| Manual Spawn | Drop one item per click of a button with the class spawnButton. | Off |
In every section or div that has the class you enter in Section Class Name. Add the class in that element's Advanced settings.
Check that the class name matches exactly and is entered without the dot. The section also needs a height, and the effect only starts once half of it is on screen.
Yes. Add one or more images in the Images repeater. Transparent PNGs look best.
Only if you turn on Interactive on Mobile. It is off by default so the section does not get in the way of scrolling.
Turn on Manual Spawn and give your button the class spawnButton. Each click drops one item until the Number of Items is reached.
Yes. Give an element inside the section the class obstacle and it becomes a solid shape the items collide with.
Matter JS is included with Phox Elements, along with 140+ other premium elements for Breakdance.