More Demos

Inverse Gravity

emojiBlast with inverted gravity.

emojiBlast({
  physics: {
    gravity: -0.35,
    initialVelocities: {
      y: { max: 14, min: 11.7 }
    }
  }
});

Title Explosion

emojiBlast that only happens on the element with an id of 'title' (which is the title of the site).

const element = document.getElementById("title");
emojiBlast({
  position() {
    return {
      x: element.offsetLeft + element.clientWidth / 2,
      y: element.offsetTop + element.clientHeight / 2
    };
  }
});

Spinnin

emojiBlast with very quickly spinning spiral emojis.

emojiBlast({
  emojis: ["🌀"],
  physics: {
    fontSize: { max: 48, min: 20 },
    gravity: 0.1,
    initialVelocities: {
      rotation: { max: -14, min: -14 }
    },
    rotationDeceleration: 1.01
  }
});

Tour de France

emojiBlast with three biker emojis racing across the page. Only the x value for the initialVelocity property is set.

emojiBlast({
  emojiCount: 3,
  emojis: ["🚴‍♀️", "🚴", "🚴‍♂️"],
  physics: {
    fontSize: 68,
    gravity: 0,
    initialVelocities: {
      rotation: 0,
      x: { max: -35, min: -20 },
      y: 0
    },
    rotation: 0,
    rotationDeceleration: 0
  },
  position: {
    x: innerWidth,
    y: Math.floor(innerHeight / 2) + 100
  }
});

Everything Everywhere All At Once

emojiBlasts occurring randomly across the page every 40 milliseconds for 3 seconds.

const { cancel } = emojiBlasts({
  interval: 40
});
setTimeout(cancel, 3e3);