12 Days of Contentful
← Go back

Day 6

Let it snow

A classic winter demo for you today, enjoy! ❄️

Powered by the fantastic canvas-confetti library.

This is the code that makes the snow on the page:

import confetti from 'canvas-confetti'
let skew = 1

frame()

function randomInRange(min, max) {
  return Math.random() * (max - min) + min
}

function frame() {
  skew = Math.max(0.8, skew - 0.001)

  confetti({
    particleCount: 1,
    startVelocity: 0,
    origin: {
      x: Math.random(),
      // since particles fall down, skew start toward the top
      y: Math.random() * skew - 0.2,
    },
    colors: ['#ffffff'],
    shapes: ['circle'],
    gravity: randomInRange(0.4, 0.6),
    scalar: randomInRange(0.4, 1),
    drift: randomInRange(-0.4, 0.4),
  })

  requestAnimationFrame(frame)
}

Happy holidays!