Falling 2D Objects (MatterJS)

Live Preview

Documentation

Webflow

Code

Setup: External Scripts

HTML

Copy

<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>

Step 1: Copy structure to Webflow

Copy to Webflow

Webflow structure is not required for this resource.

Step 1: Add HTML

HTML

Copy

<section class="section-resource">
  <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 1340 257" fill="none" class="resource-name__svg"><path d="M51.3731 251H0.952148V5.7551H66.8082L124.775 175.54H125.461L183.428 5.7551H249.627V251H198.863V84.3021H198.177L144.669 251H105.91L52.0592 84.3021H51.3731V251Z" fill="currentColor"></path><path d="M325.377 256.145C290.734 256.145 268.782 235.908 268.782 205.381C268.782 167.994 298.623 154.617 338.411 146.728C360.363 142.269 383.687 139.182 383.687 122.032C383.687 111.056 376.141 103.167 356.59 103.167C332.923 103.167 323.319 112.085 321.604 131.636H276.328C278.043 98.0221 301.71 69.8961 358.648 69.8961C402.209 69.8961 429.306 87.7321 429.306 138.153V210.869C429.306 221.502 430.678 226.304 436.509 226.304C437.881 226.304 438.91 226.304 440.968 225.961V249.971C431.707 251.686 422.446 252.715 415.586 252.715C395.692 252.715 387.117 245.169 384.716 228.362H384.03C372.025 244.826 351.788 256.145 325.377 256.145ZM342.527 222.531C367.566 222.531 383.687 205.038 383.687 181.028V162.506C377.17 165.936 366.537 168.68 350.759 172.453C326.406 177.598 317.145 186.173 317.145 200.922C317.145 215.328 326.063 222.531 342.527 222.531Z" fill="currentColor"></path><path d="M533.926 217.729C539.414 217.729 542.158 217.386 548.675 216.357V250.657C538.042 253.058 529.81 254.087 520.206 254.087C485.22 254.087 468.413 238.995 468.413 196.806V111.742H443.717V75.7271H468.413V23.9341H515.404V75.7271H546.96V111.742H515.404V196.463C515.404 214.985 521.921 217.729 533.926 217.729Z" fill="currentColor"></path><path d="M645.307 217.729C650.795 217.729 653.539 217.386 660.056 216.357V250.657C649.423 253.058 641.191 254.087 631.587 254.087C596.601 254.087 579.794 238.995 579.794 196.806V111.742H555.098V75.7271H579.794V23.9341H626.785V75.7271H658.341V111.742H626.785V196.463C626.785 214.985 633.302 217.729 645.307 217.729Z" fill="currentColor"></path><path d="M843.213 165.936V175.883H713.902C714.245 201.951 731.395 220.473 757.12 220.473C780.787 220.473 790.391 207.439 793.821 197.492H841.498C831.894 232.478 804.111 256.488 755.748 256.488C699.496 256.488 666.568 217.729 666.568 163.192C666.568 110.37 698.81 69.8961 755.748 69.8961C813.029 69.8961 843.213 105.225 843.213 165.936ZM713.902 144.67H795.536C795.536 120.317 780.101 105.225 755.405 105.225C732.081 105.225 715.96 119.974 713.902 144.67Z" fill="currentColor"></path><path d="M953.806 73.3261C958.951 73.3261 963.41 73.3261 969.241 74.3551V116.544C964.782 115.858 961.695 115.515 957.922 115.515C930.825 115.515 908.53 134.037 908.53 165.936V251H861.539V75.7271H908.53V105.911H909.216C918.134 86.3601 932.883 73.3261 953.806 73.3261Z" fill="currentColor"></path><path d="M1032.5 256.145C968.703 256.145 952.239 216.357 952.239 171.424V154.617H1000.26V171.424C1000.26 196.463 1005.4 212.584 1030.1 212.584C1054.8 212.584 1059.94 196.463 1059.94 171.424V5.7551H1113.11V171.424C1113.11 216.357 1096.3 256.145 1032.5 256.145Z" fill="currentColor"></path><path d="M1244.79 256.145C1181.34 256.145 1134.69 223.903 1133.66 167.994H1187.51C1188.54 197.835 1209.46 212.927 1244.1 212.927C1272.92 212.927 1284.92 200.922 1284.92 184.458C1284.92 159.762 1260.57 154.617 1222.84 143.984C1181.68 131.979 1142.23 116.887 1142.23 72.2971C1142.23 22.9051 1180.65 0.610107 1233.47 0.610107C1290.41 0.610107 1331.91 30.1081 1334.31 79.8431H1280.81C1277.38 56.8621 1261.6 43.8281 1233.47 43.8281C1210.49 43.8281 1196.43 51.7171 1196.43 68.5241C1196.43 89.1041 1214.61 94.5921 1245.82 103.51C1292.81 116.544 1339.12 128.892 1339.12 179.999C1339.12 225.275 1306.19 256.145 1244.79 256.145Z" fill="currentColor"></path></svg>
  <div class="canvas-matter">
    <div class="canvas-matter__before"></div>
    <div id="canvas-target" class="canvas-matter__target"></div>
  </div>
</section>

HTML structure is not required for this resource.

Step 2: Add CSS

CSS

Copy

.section-resource {
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 100vh;
  padding: 2vw;
  display: flex;
  overflow: hidden;
}

.resource-name__svg {
  width: 100%;
}

.canvas-matter {
  width: 100%;
  margin-bottom: 0;
  position: absolute;
  bottom: 0%;
  left: 0%;
  overflow: hidden;
}

.canvas-matter__before {
  padding-top: 100%;
}

.canvas-matter__target {
  transform: scale3d(1none, 1none, 1none);
  transform-style: preserve-3d;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

#canvas-target canvas {
  position: relative;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  max-width: unset;
  pointer-events: all;
  max-width: calc(100% + 2px);
  max-height: calc(100% + 2px);
  min-width: calc(100% + 2px);
  min-height: calc(100% + 2px);
}

Step 2: Add custom Javascript

Step 2: Add Javascript

Step 3: Add Javascript

Javascript

Copy

function initFalling2DMatterJS() {

  const canvas = document.querySelector("#canvas-target");

  // Check if canvas is on page
  if (!canvas) {
    return;
  }

  const canvasWidth = canvas.clientWidth + 2;
  const canvasHeight = canvas.clientHeight + 2;
  const canvasWallDepth = canvasWidth / 4;
  const smileyAmount = 15; // Amount of objects added to the canvas
  const smileySize = canvasWidth / 7.5; // Size of objects
  const smileySizeTexture = 256; // Size of object texture in pixels
  const smileySizeScale = smileySize / smileySizeTexture;
  const smileyRestitution = 0.75; // Bounciness
  const worldGravity = 2; // Gravity

  // Modules
  let { Engine, Render, Runner, Bodies, Composite, Mouse, MouseConstraint } = Matter;

  // Create an engine
  let engine = Engine.create();
  engine.world.gravity.y = worldGravity;
  
  // Create a renderer
  let render = Render.create({
    element: canvas,
    engine: engine,
    options: {
      background: "transparent",
      wireframes: false,
      width: canvasWidth,
      height: canvasHeight,
      pixelRatio: 2,
      border: "none",
    }
  });

  // Generate a random number between min (inclusive) and max (exclusive)
  function getRandomNumber(min, max) {
    return Math.random() * (max - min) + min;
  }

  let min = smileySize / 2; // min value
  let max = canvasWidth - (smileySize / 2); // max value

  // Textures
  let textureArray = [
    'https://cdn.prod.website-files.com/67f388c94c43e20cfb7ca732/67f394c931c1e6fc303e12ec_smiley-1.svg',
    'https://cdn.prod.website-files.com/67f388c94c43e20cfb7ca732/67f394c9718ec3640accf3d4_smiley-2.svg',
    'https://cdn.prod.website-files.com/67f388c94c43e20cfb7ca732/67f394c940dfb6d33af4c6d6_smiley-3.svg',
    'https://cdn.prod.website-files.com/67f388c94c43e20cfb7ca732/67f394c9ab4fc0301d56d8c5_smiley-4.svg',
    'https://cdn.prod.website-files.com/67f388c94c43e20cfb7ca732/67f394c9d9ee6112fdb67b89_smiley-5.svg'
  ];
  
  // Function to loop trough all textures
  let textureIndex = 0;
  function getNextTexture() {
    const texture = textureArray[textureIndex];
    textureIndex = (textureIndex + 1) % textureArray.length;
    return texture;
  }

  // Function to get a random texture
  function getRandomTexture() {
    const randomIndex = Math.floor(Math.random() * textureArray.length);
    return textureArray[randomIndex];
  }

  // Create smiley
  const smileyCreate = () => {
    let smiley = Bodies.rectangle(getRandomNumber(min, max), smileySize, smileySize,
      smileySize, {
        chamfer: { 
          radius: smileySize / 2
        },
        restitution: smileyRestitution,
        render: {
          sprite: {
            texture: getNextTexture(), // Replace with "getRandomTexture()" to get random textures
            xScale: smileySizeScale,
            yScale: smileySizeScale
          }
        }
      });
    Composite.add(engine.world, smiley);
  };

  // Create a box with rectangle(x, y, width, height)
  let boxTop = Bodies.rectangle(canvasWidth / 2 + (canvasWallDepth * 2), canvasHeight +
    canvasWallDepth, canvasWidth + (canvasWallDepth * 4), (canvasWallDepth * 2), {
      isStatic: true
    });

  let boxLeft = Bodies.rectangle((canvasWallDepth * -1), canvasHeight / 2, (canvasWallDepth * 2),
    canvasHeight, {
      isStatic: true
    });

  let boxRight = Bodies.rectangle(canvasWidth + canvasWallDepth, canvasHeight / 2, (
    canvasWallDepth * 2), canvasHeight, {
    isStatic: true
  });

  let boxBottom = Bodies.rectangle(canvasWidth / 2 + (canvasWallDepth * 2), (canvasWallDepth * -1),
    canvasWidth + (canvasWallDepth * 4), (canvasWallDepth * 2), {
      isStatic: true
    });

  // Add all of the bodies to the world
  Composite.add(engine.world, [boxTop, boxLeft, boxRight, boxBottom]);

  // Run the renderer
  Render.run(render);

  // Create runner
  let runner = Runner.create();

  // Run the engine
  Matter.Runner.run(runner, engine);

  // Custom Function: 
  // To run the function X amount of times
  function repeatedFunction(count, maxCount) {
    if (count < maxCount) {
      smileyCreate();
      setTimeout(() => {
        repeatedFunction(count + 1, maxCount);
      }, 100); // Delay in milliseconds
    }
  }
  repeatedFunction(0, 15);

  // Create mouse
  let mouse = Mouse.create(render.canvas);
  let mouseConstraint = MouseConstraint.create(engine, {
    mouse: mouse,
    constraint: {
      stiffness: 0.2,
      render: {
        visible: false
      }
    }
  });

  Composite.add(engine.world, mouseConstraint);
}

// Initialize Falling 2D Elements (Matter.js)
document.addEventListener('DOMContentLoaded', function() {
  initFalling2DMatterJS();
});

Step 3: Add custom CSS

Step 2: Add custom CSS

CSS

Copy

#canvas-target canvas {
  position: relative;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  max-width: unset;
  pointer-events: all;
  max-width: calc(100% + 2px);
  max-height: calc(100% + 2px);
  min-width: calc(100% + 2px);
  min-height: calc(100% + 2px);
}

Implementation

Canvas

The script looks for #canvas-target and injects a <canvas> into it, so make sure that element exists on your page. We also use a .canvas-matter__before element to maintain a consistent 1:1 aspect ratio for the canvas.

Textures

We used a set of 5 different smileys, but you can replace them with any visuals you like. This resource is designed for images with a 1:1 aspect ratio.

You have the ability to choose between a random texture or select the next in line. Use one of the two below:

Random texture: getRandomTexture()
Loop trough array: getNextTexture()

Customization options

smileyAmount Amount of objects added to the canvas
smileySize Size of objects
smileySizeTexture Size of object texture in pixels
smileyRestitution Set Bounciness of the falling objects
worldGravity Set world gravity

Changing the size, aspect ratio, or roundness of the objects is more advanced. To keep this resource simple, we recommend checking the official Matter.js Documentation for all available options.

Live Preview

Resource Details

Last updated
April 7, 2025
Type
The Vault
Category
Gimmicks
Need help?
Join Slack

MatterJS

Falling

Smiley

Advanced

Canvas

Physics

Gravity

Original source

Dennis Snellenberg

Falling 2D Objects (MatterJS)

Documentation

External Scripts in Webflow

Copy structure to Webflow

Custom Javascript in Webflow

Custom CSS in Webflow

Implementation

Canvas

Textures

Customization options

Creator Credits

Welcome to the Vault 👋

GSAP Discount Code

Osmo Slack Community

Need help?

Falling 2D Objects (MatterJS)

Documentation

External Scripts in Webflow

Copy structure to Webflow

Custom Javascript in Webflow

Custom CSS in Webflow

Implementation

Canvas

Textures

Customization options

Creator Credits