Confetti Animation Playground 🎉

Using the amazing canvas-confetti library

$npm install canvas-confetti

Animation Party! 🎉

Love Confetti 💕
Click for animation
❤️💝
Config
Copied!
confetti({
  "particleCount": 100,
  "spread": 160,
  "colors": [
    "#ff0000",
    "#ff69b4"
  ],
  "origin": {
    "x": 0.5,
    "y": 0.3
  }
})
Rain Confetti 🌧️
Click for animation
🌧️
Config
Copied!
confetti({
  "particleCount": 150,
  "spread": 180,
  "origin": {
    "x": 0.5,
    "y": 0.3
  }
})
Side Confetti 👉
Click for animation
Config
Copied!
confetti({
  "particleCount": 80,
  "angle": 60,
  "spread": 55,
  "origin": {
    "x": 0,
    "y": 0.3
  }
})
Burst Confetti 💥
Click for animation
💥
Config
Copied!
confetti({
  "particleCount": 100,
  "spread": 360,
  "origin": {
    "x": 0.5,
    "y": 0.3
  }
})
Gold Confetti ✨
Click for animation
Config
Copied!
confetti({
  "particleCount": 60,
  "spread": 70,
  "colors": [
    "#FFD700",
    "#FFA500"
  ],
  "origin": {
    "x": 0.5,
    "y": 0.3
  }
})
Fast Confetti 🚀
Click for animation
🚀
Config
Copied!
confetti({
  "particleCount": 120,
  "startVelocity": 45,
  "spread": 45,
  "origin": {
    "x": 0.5,
    "y": 0.3
  }
})
Long Confetti 🌈
Click for animation
🌈
Config
Copied!
confetti({
  "particleCount": 200,
  "spread": 70,
  "ticks": 200,
  "origin": {
    "x": 0.5,
    "y": 0.3
  }
})
Big Confetti 🎪
Click for animation
🎪
Config
Copied!
confetti({
  "particleCount": 50,
  "spread": 90,
  "scalar": 2,
  "origin": {
    "x": 0.5,
    "y": 0.3
  }
})
Circle Confetti ⭕
Click for animation
Config
Copied!
confetti({
  "particleCount": 150,
  "spread": 70,
  "shapes": [
    "circle"
  ],
  "origin": {
    "x": 0.5,
    "y": 0.3
  }
})
Heavy Confetti 🪨
Click for animation
🪨
Config
Copied!
confetti({
  "particleCount": 100,
  "spread": 70,
  "gravity": 3,
  "origin": {
    "x": 0.5,
    "y": 0.3
  }
})
Snow Confetti ❄️
Click for animation
❄️
Config
Copied!
confetti({
  "particleCount": 100,
  "spread": 360,
  "startVelocity": 20,
  "gravity": 0.5,
  "drift": 2,
  "ticks": 300,
  "origin": {
    "x": 0.5,
    "y": 0.3
  }
})
Shooting Stars ⭐
Click for animation
Config
Copied!
confetti({
  "particleCount": 80,
  "spread": 45,
  "startVelocity": 45,
  "gravity": 0.8,
  "shapes": [
    "star"
  ],
  "colors": [
    "#FFD700",
    "#FFA500",
    "#FF4500"
  ],
  "origin": {
    "x": 0.5,
    "y": 0.3
  }
})
Floating Bubbles 🫧
Click for animation
🫧
Config
Copied!
confetti({
  "particleCount": 120,
  "spread": 100,
  "startVelocity": 15,
  "decay": 0.9,
  "gravity": -0.5,
  "drift": 1,
  "origin": {
    "x": 0.5,
    "y": 0.7
  }
})
Neon Party 🎪
Click for animation
🎪
Config
Copied!
confetti({
  "particleCount": 150,
  "spread": 180,
  "startVelocity": 30,
  "decay": 0.95,
  "gravity": 0.3,
  "ticks": 200,
  "shapes": [
    "circle"
  ],
  "colors": [
    "#FF3366",
    "#36D1DC",
    "#5B86E5",
    "#00FF87"
  ],
  "origin": {
    "x": 0.5,
    "y": 0.3
  }
})
Pixel Burst 👾
Click for animation
💥
👾
Config
Copied!
confetti({
  "particleCount": 100,
  "spread": 120,
  "startVelocity": 25,
  "gravity": 0.7,
  "drift": 1.5,
  "shapes": [
    "square"
  ],
  "colors": [
    "#FF6B6B",
    "#4ECDC4",
    "#45B7D1",
    "#96E6A1"
  ],
  "origin": {
    "x": 0.5,
    "y": 0.3
  }
})
Cotton Candy 🍭
Click for animation
🍭
Config
Copied!
confetti({
  "particleCount": 80,
  "spread": 150,
  "startVelocity": 35,
  "decay": 0.92,
  "gravity": -0.2,
  "drift": 2,
  "shapes": [
    "circle"
  ],
  "colors": [
    "#FF61D2",
    "#FE9090",
    "#FFB8D1",
    "#FF9A9E"
  ],
  "origin": {
    "x": 0.5,
    "y": 0.5
  }
})
Galaxy Splash 🌌
Click for animation
🌌
Config
Copied!
confetti({
  "particleCount": 130,
  "spread": 160,
  "startVelocity": 40,
  "decay": 0.94,
  "gravity": 0.4,
  "ticks": 250,
  "shapes": [
    "star",
    "circle"
  ],
  "colors": [
    "#845EC2",
    "#D65DB1",
    "#FF6F91",
    "#FF9671",
    "#FFC75F"
  ],
  "origin": {
    "x": 0.5,
    "y": 0.3
  }
})
Golden Shower ✨
Click for animation
Config
Copied!
confetti({
  "particleCount": 120,
  "spread": 140,
  "startVelocity": 30,
  "decay": 0.95,
  "gravity": 1,
  "ticks": 200,
  "shapes": [
    "square"
  ],
  "scalar": 0.8,
  "colors": [
    "#FFD700",
    "#FFA500",
    "#FF8C00",
    "#FF7F50"
  ],
  "origin": {
    "x": 0.5,
    "y": 0.3
  }
})
Spring Burst 🌱
Click for animation
💥
Config
Copied!
confetti({
  "particleCount": 150,
  "spread": 180,
  "startVelocity": 45,
  "decay": 0.91,
  "gravity": 0.8,
  "drift": -1,
  "shapes": [
    "circle"
  ],
  "colors": [
    "#50C878",
    "#98FB98",
    "#90EE90",
    "#3CB371"
  ],
  "origin": {
    "x": 0.5,
    "y": 0.4
  }
})
Winter Magic ❄️
Click for animation
Config
Copied!
confetti({
  "particleCount": 100,
  "spread": 360,
  "startVelocity": 20,
  "decay": 0.93,
  "gravity": 0.5,
  "ticks": 300,
  "shapes": [
    "star"
  ],
  "angle": 45,
  "colors": [
    "#87CEEB",
    "#B0E0E6",
    "#ADD8E6",
    "#E0FFFF"
  ],
  "origin": {
    "x": 0.5,
    "y": 0.5
  }
})
Graduation Day 🎓
Click for animation
Config
Copied!
confetti({
  "particleCount": 130,
  "spread": 160,
  "startVelocity": 35,
  "decay": 0.94,
  "gravity": 1,
  "ticks": 200,
  "shapes": [
    "square"
  ],
  "colors": [
    "#4169E1",
    "#1E90FF",
    "#00BFFF",
    "#87CEEB"
  ],
  "origin": {
    "x": 0.5,
    "y": 0.3
  }
})
School Spirit 📚
Click for animation
Config
Copied!
confetti({
  "particleCount": 140,
  "spread": 180,
  "startVelocity": 40,
  "decay": 0.92,
  "gravity": 0.8,
  "shapes": [
    "circle"
  ],
  "colors": [
    "#FFD700",
    "#FF69B4",
    "#98FB98",
    "#DDA0DD"
  ],
  "origin": {
    "x": 0.5,
    "y": 0.4
  }
})
Code Launch 💻
Click for animation
Config
Copied!
confetti({
  "particleCount": 120,
  "spread": 150,
  "startVelocity": 30,
  "decay": 0.95,
  "gravity": 0.7,
  "ticks": 250,
  "shapes": [
    "square"
  ],
  "colors": [
    "#32CD32",
    "#00FF00",
    "#7CFC00",
    "#90EE90"
  ],
  "origin": {
    "x": 0.5,
    "y": 0.3
  }
})
Digital Victory 🚀
Click for animation
Config
Copied!
confetti({
  "particleCount": 110,
  "spread": 170,
  "startVelocity": 35,
  "decay": 0.93,
  "gravity": 0.9,
  "shapes": [
    "circle"
  ],
  "colors": [
    "#FF1493",
    "#00CED1",
    "#FFD700",
    "#32CD32"
  ],
  "origin": {
    "x": 0.5,
    "y": 0.4
  }
})
Neon Dreams 🌈
Click for animation
🎪
Config
Copied!
confetti({
  "particleCount": 160,
  "spread": 140,
  "startVelocity": 45,
  "decay": 0.91,
  "gravity": 0.65,
  "drift": 2,
  "scalar": 0.8,
  "shapes": [
    "star"
  ],
  "colors": [
    "#FF6B6B",
    "#4ECDC4",
    "#45B7D1",
    "#96CEB4"
  ],
  "origin": {
    "x": 0.5,
    "y": 0.3
  }
})
Galaxy Burst ✨
Click for animation
💥
🌌
Config
Copied!
confetti({
  "particleCount": 90,
  "spread": 120,
  "startVelocity": 25,
  "decay": 0.94,
  "gravity": 1.2,
  "ticks": 300,
  "angle": 90,
  "shapes": [
    "circle"
  ],
  "colors": [
    "#845EC2",
    "#D65DB1",
    "#FF6F91",
    "#FF9671",
    "#FFC75F"
  ],
  "origin": {
    "x": 0.5,
    "y": 0.3
  }
})
Pixel Storm 🎮
Click for animation
👾
Config
Copied!
confetti({
  "particleCount": 130,
  "spread": 160,
  "startVelocity": 50,
  "decay": 0.89,
  "gravity": 0.75,
  "drift": -1,
  "ticks": 400,
  "shapes": [
    "square"
  ],
  "colors": [
    "#2D3436",
    "#636E72",
    "#B2BEC3",
    "#DFE6E9"
  ],
  "origin": {
    "x": 0.5,
    "y": 0.4
  }
})
Upward Burst 🚀
Click for animation
💥
🚀
Config
Copied!
confetti({
  "particleCount": 120,
  "spread": 70,
  "startVelocity": 55,
  "decay": 0.91,
  "gravity": -1,
  "ticks": 300,
  "angle": 270,
  "shapes": [
    "circle",
    "square"
  ],
  "colors": [
    "#FFD700",
    "#FFA500",
    "#FF6347",
    "#FF69B4",
    "#BA55D3"
  ],
  "origin": {
    "x": 0.5,
    "y": 0.9
  }
})
Left Stream 👈
Click for animation
👈
Config
Copied!
confetti({
  "particleCount": 80,
  "spread": 55,
  "angle": 60,
  "startVelocity": 45,
  "decay": 0.92,
  "gravity": 1,
  "ticks": 300,
  "shapes": [
    "square"
  ],
  "colors": [
    "#FF9671",
    "#FFC75F",
    "#F9F871"
  ],
  "origin": {
    "x": 0,
    "y": 0.5
  }
})
Right Stream 👉
Click for animation
👉
Config
Copied!
confetti({
  "particleCount": 80,
  "spread": 55,
  "angle": 120,
  "startVelocity": 45,
  "decay": 0.92,
  "gravity": 1,
  "ticks": 300,
  "shapes": [
    "square"
  ],
  "colors": [
    "#FF9671",
    "#FFC75F",
    "#F9F871"
  ],
  "origin": {
    "x": 1,
    "y": 0.5
  }
})
Dual Stream 🎯
Click for animation
👉👈
Config
Copied!
confetti({
  "particleCount": 80,
  "spread": 55,
  "angle": 90,
  "startVelocity": 45,
  "decay": 0.92,
  "gravity": 1,
  "ticks": 300,
  "shapes": [
    "square"
  ],
  "colors": [
    "#FF9671",
    "#FFC75F",
    "#F9F871"
  ],
  "origin": {
    "x": 0.5,
    "y": 0.5
  }
})