Join Join
Join

080Matter cursor swarm

In this effect, thumbnails chase the cursor with different air resistances — some snap tight while others trail lazily behind. A Matter.js physics world keeps the items solid so they bump and shove each other instead of overlapping. Let's begin!

HTML Structure

The structure is straightforward. A viewport-sized container holds a list of media shells, each wrapping one image. We'll spawn a matching physics body for each shell later:

<section class="mwg_effect080">
    <div class="container">
        <div class="medias">
            <div class="media">
                <img src="./assets/medias/1.png" alt="">
            </div>
            <!-- duplicate .media for each extra image -->
        </div>
    </div>
</section>

Become a member to unlock
the full effect today.

Join now Join now

Discover the platform

See how the platform works: try Effect #000 for free.

Try it now Try it now

(No registration or credit card needed)