Variable KonfetiPresetsConst

Type Declaration

• ReadonlyBASIC: {}

  Basic. The library defaults: one classic confetti pop, upward from just below the screen center.

• ReadonlyCANNON: {
      angle: 60;
      origin: { x: 0; y: 0.8 };
      particleCount: 100;
      spread: 45;
      startVelocity: readonly [1600, 2400];
  }

  Cannon. A fast, narrow shot from the bottom-left corner towards the upper right.

• ReadonlyCONGRATS: {
      formation: {
          font: "900 120px sans-serif";
          hold: 1200;
          text: "CONGRATS!";
      };
      origin: { x: 0.5; y: 0.42 };
      shapes: readonly [
          { type: "paper"; weight: 4 },
          {
              colors: readonly ["#ffe400", "#ffbd00", "#fdffb8"];
              size: readonly [9, 13];
              type: "star";
          },
      ];
  }

  Congrats. Paper and stars fly in from beyond the edges to spell "CONGRATS!", hold it, then burst apart (shows a text formation).

• ReadonlyEMOJI_RAIN: {
      angle: 270;
      emission: { duration: 3000; mode: "stream" };
      lifetime: readonly [3000, 4000];
      origin: { x: readonly [0, 1]; y: -0.05 };
      particleCount: 60;
      physics: { drag: 1.2; gravity: 400 };
      shapes: readonly [
          {
              emoji: readonly ["🎉", "🥳", "🎊", "✨"];
              size: readonly [22, 34];
              type: "emoji";
          },
      ];
      spread: 20;
      startVelocity: readonly [100, 300];
  }

  Emoji Rain. Party emoji falling from the top edge for three seconds.

• ReadonlyFIREFLIES: {
      emission: { duration: 2500; mode: "stream" };
      lifetime: readonly [4000, 6500];
      origin: { x: readonly [0.1, 0.9]; y: readonly [0.35, 0.9] };
      particleCount: 40;
      physics: {
          drag: 0.8;
          gravity: -8;
          swirl: { frequency: readonly [0.2, 0.5]; strength: readonly [30, 80] };
      };
      shapes: readonly [
          {
              blendMode: "lighter";
              fadeIn: 0.25;
              fadeOut: { easing: "easeInOutQuad"; start: 0.6 };
              flip: false;
              opacity: readonly [0.7, 1];
              rotationSpeed: 0;
              size: readonly [20, 34];
              src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAB6klEQVR42s2XzU7CQBSFz4CAWkX8w7hW2cnaFzAuiBvXPp5rN8aF8QVc4w51bURERVD+a9rcIYdhLNhE2yYnt20C57tnZtqpQsij7B4qvi6qazfM/6iwhpbfumGA1C+Mf6omwFidBqJmMGdDFv+eTVn+vSAINUPXWgmjKgNAa2hUNygNNcWcTZNSWXwMDQ0sMBMQKiB2NpoTgCSdJ4wEtGlfqj5nKDcQwGKuDT2lSAwBw7xH6hOQFUJZzDlybZgGkCHp+wygTTukLt3nIRlBqB+6Z3PPcB7AgmhRrnUSoM7bAD4BfInaAjIBMQZgdJ+kyDNkukTSEAygzZskDdOhIRlwCiqg+7SYO2K6QtIQKQHokfk7ybtuCUTXlgID8IxPSYeeybKYrgJYk5pzUNhxsLcL3+HuvoXKA4A3AK8A6lI9iA+Ba1MK/oS0Aej4ufusGK8D2ACwmUfpKIv9A15BDdzeVHF5BeAZQA3Ai4A0jBRGq8IHsCw9Hnsv6pwA5D05KBS3cXJqe4I+4vyshUoZQFVUl1SaxlwYLUkVMP46/px07gFs5VE6Nrs3UrgA8CQANQHQwzAxD2IH8P9DEPkkjNMyjPxBFN2jOPKXUSxex5FvSGKxJYvFpjTybXksPkxi82kWi4/Tv/48/waZ1dSMi+xwdQAAAABJRU5ErkJggg==";
              type: "image";
              wobble: false;
          },
      ];
      spread: 360;
      startVelocity: readonly [10, 40];
  }

  Fireflies. Glowing dots appear over the lower part of the canvas, drift and wander slowly, then fade (made for dark backgrounds; each firefly is a small glow PNG data URL, so it also works in worker instances).

• ReadonlyFIREWORKS: {
      emission: { every: 350; mode: "interval"; times: 8 };
      lifetime: readonly [1400, 2000];
      origin: { x: readonly [0.15, 0.85]; y: readonly [0.15, 0.45] };
      paper: {
          fadeOut: { easing: "easeInQuad"; start: 0.5 };
          flip: false;
          form: readonly ["circle", "strip"];
          scale: 0.8;
          shine: 0.4;
      };
      particleCount: 50;
      physics: { drag: 2.4; gravity: 400 };
      spread: 360;
      startVelocity: readonly [500, 1100];
  }

  Fireworks. Eight round explosions at random spots in the upper half, one every 350 ms.

• ReadonlyFORCE_FIELD: {
      angle: 270;
      emission: { duration: 5000; mode: "stream" };
      lifetime: readonly [5000, 7000];
      origin: { x: readonly [0, 1]; y: -0.03 };
      paper: {
          colors: readonly ["#00f0ff", "#8ecae6", "#ffffff"];
          scale: 0.9;
          width: readonly [4, 7];
      };
      particleCount: 260;
      physics: {
          attract: {
              falloff: "linear";
              radius: 160;
              strength: -2600;
              target: "pointer";
          };
          drag: 1.2;
          gravity: 220;
      };
      spread: 20;
      startVelocity: readonly [150, 320];
  }

  Force Field. A cool-colored rain falls for five seconds; the pointer pushes the drops away as it moves through them (a negative physics.attract strength).

• ReadonlyGOLDEN: {
      origin: { y: 0.7 };
      paper: {
          colors: readonly [
              "#ffd700",
              "#ffcc33",
              "#f5b700",
              "#e6be8a",
              "#fff1b8",
              "#c9a227",
          ];
          flip: { frequency: readonly [0.8, 1.6] };
          form: readonly ["rect", "strip"];
          shine: 0.9;
      };
      particleCount: 160;
      spread: 80;
      startVelocity: readonly [1200, 1800];
  }

  Golden. Gold paper with strong glints as the pieces flip (the colors of KonfetiPalettes.GOLD).

• ReadonlyHEART_BURST: {
      particleCount: 40;
      physics: { drag: 2; gravity: 200 };
      shapes: readonly [
          {
              colors: readonly ["#ff4d6d", "#ff758f", "#ff8fa3", "#c9184a"];
              flip: { axis: "y" };
              scaleOverLife: { to: 0.6 };
              size: readonly [14, 22];
              type: "heart";
          },
      ];
      spread: 360;
      startVelocity: readonly [400, 900];
  }

  Heart Burst. Pink hearts popping out in every direction and shrinking as they fade.

• ReadonlyJACKPOT: {
      angle: 270;
      emission: { duration: 1500; mode: "stream" };
      lifetime: readonly [4500, 6000];
      origin: { x: readonly [0.1, 0.9]; y: -0.05 };
      paper: {
          aspectRatio: 1;
          colors: readonly ["#ffd700", "#ffcc33", "#f5b700", "#c9a227"];
          fadeOut: { start: 0.85 };
          flip: { axis: "x"; frequency: readonly [1.5, 3] };
          form: "circle";
          shine: 0.9;
          stroke: { color: "#a67c00"; width: 1.2 };
          width: readonly [12, 16];
      };
      particleCount: 120;
      physics: {
          drag: 0.8;
          floor: { bounce: 0.45; friction: 0.5; y: 1 };
          gravity: 1400;
      };
      spread: 25;
      startVelocity: readonly [150, 400];
  }

  Jackpot. Gold coins pour down for one and a half seconds, spin, bounce on the bottom edge and settle there (shows the floor).

• ReadonlyLEVEL_UP: readonly [
      {
          formation: {
              assemble: 800;
              font: "900 110px sans-serif";
              hold: 1000;
              text: "LEVEL UP!";
          };
          origin: { x: 0.5; y: 0.4 };
          paper: { colors: readonly ["#39ff14", "#00f0ff", "#fff01f", "#ff6ec7"] };
          shapes: readonly [
              { type: "paper"; weight: 3 },
              {
                  colors: readonly ["#fff01f", "#ffe400", "#fdffb8"];
                  size: readonly [9, 13];
                  type: "star";
              },
          ];
      },
      {
          lifetime: readonly [900, 1300];
          origin: { x: readonly [0.15, 0.85]; y: 1.02 };
          particleCount: 24;
          physics: { drag: 1; gravity: 900 };
          shapes: readonly [
              {
                  colors: readonly ["#fff01f", "#ffe400", "#fdffb8"];
                  size: readonly [9, 13];
                  trail: { length: 20; opacity: 0.7; width: readonly [2, 3] };
                  type: "star";
              },
          ];
          spread: 30;
          startVelocity: readonly [1500, 2100];
      },
      {
          delay: 1800;
          lifetime: readonly [1400, 2000];
          origin: { x: 0.5; y: 0.4 };
          particleCount: 70;
          physics: { drag: 2.5; gravity: 500 };
          shapes: readonly [
              {
                  colors: readonly ["#fff01f", "#ffe400", "#fdffb8"];
                  shine: 0.6;
                  size: readonly [10, 16];
                  type: "star";
              },
          ];
          spread: 360;
          startVelocity: readonly [600, 1200];
      },
  ]

  Level Up. "LEVEL UP!" assembles while stars with trails shoot up from below, and a star burst follows the moment the letters break apart (a list choreographed with delay).

• ReadonlyLOGO_REVEAL: {
      formation: {
          hold: 1500;
          image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACO0lEQVR42s1Xr08DMRS+P+Uk7mYQJIgFFGJhCgxiFhQCdwEzQ8gEggSzZIaQIBaCQCCWEwuKQKZwMDUE5hJMxwYr+W7tpdfrde8GC9fkJffjvX6v78fX1nHmGL7HXN9jZU1cZ5HD91jV91jL91joe4xnSCh0qn8JXPM91pcgjY0hbx+OeOd8nBB8wz/FGdjUfgOMMAeYrL465LcnYx4OJlwdeDd9gy5shCNB7vT4HivJUF/sjzj7mE7++vBtWmkiMtDBgA1sldSUcoM/3XzFwGdbn9yS+4RAVzqCOchOiLAnwBFOKrAusDU44docCFRwhNQGUF95j8Smgzk0JwJbtUd5o668vXcVCTUSSk3UTA70UbkoHuSPEuK3681IKLqYE3OL7uibSCb2lFJwjfUXzh+XIsEzpTC1yFZVB8BeUQ9TV985Oo0dwDM1CsAQ7y3VgRB9TCk8KeHdWuwAnik2siAFj4Rq6+k/p2Gr9KLV6XJ/XI/BpeCbSRdzqGSlLdJ1xE4W8TlGqoIPmikwqsBWnw8DWOK9nHBAyU9CmttdzrrLZGDowsaYusEkvwOSdNBys8ChYyMnqwOmFKQq+XInExz/ZtmbUpBZhFnkY1u9lTtMRZinDVXyyRIbKRnbMA8RgfdVMNlq6jfb3mAjIhIVPzd341Cr/Y1nmRro5KZi6maE9rLRLv5BJ/dmRNmOkVt11ZmbTqWXqgPSdjzPgSQP/888kBTiSPbvh9JCHMsLcTEpxNWsMJfTRV/PfwCRz6O9nmJS6gAAAABJRU5ErkJggg==";
          mode: "appear";
          spacing: 7;
          width: 260;
      };
      origin: { x: 0.5; y: 0.45 };
      paper: { scale: 0.7 };
  }

  Logo Reveal. A star badge appears made of confetti in its own colors, then bursts apart (shows an image formation; the badge is a small PNG data URL, so it also works in worker instances).

• ReadonlyMAGNET: {
      lifetime: readonly [6000, 8000];
      origin: { x: 0.5; y: 0.5 };
      paper: { fadeOut: { start: 0.8 }; scale: 0.8 };
      particleCount: 150;
      physics: {
          attract: {
              falloff: "linear";
              radius: 500;
              strength: 1600;
              target: "pointer";
          };
          drag: 1.6;
          gravity: 60;
          swirl: { frequency: readonly [0.3, 0.8]; strength: readonly [120, 280] };
      };
      spread: 360;
      startVelocity: readonly [200, 700];
  }

  Magnet. A slow, floating cloud that follows the pointer while it moves over the page (shows physics.attract).

• ReadonlyREALISTIC: readonly [
      {
          origin: { y: 0.7 };
          particleCount: 50;
          physics: { drag: 3.5 };
          spread: 26;
          startVelocity: readonly [1700, 2300];
      },
      {
          origin: { y: 0.7 };
          particleCount: 40;
          physics: { drag: 3.5 };
          spread: 60;
          startVelocity: readonly [1360, 1840];
      },
      {
          origin: { y: 0.7 };
          paper: { scale: 0.8 };
          particleCount: 70;
          physics: { drag: 5.5 };
          spread: 100;
          startVelocity: readonly [1360, 1840];
      },
      {
          origin: { y: 0.7 };
          paper: { scale: 1.2 };
          particleCount: 20;
          physics: { drag: 5 };
          spread: 120;
          startVelocity: readonly [765, 1035];
      },
      {
          origin: { y: 0.7 };
          particleCount: 20;
          physics: { drag: 3.5 };
          spread: 120;
          startVelocity: readonly [1360, 1840];
      },
  ]

  Realistic. Five overlapping bursts with different spreads, speeds and sizes (200 particles in total) for a natural, layered pop.

• ReadonlySCHOOL_PRIDE: readonly [
      {
          angle: 60;
          emission: { duration: 3000; mode: "stream" };
          origin: { x: 0; y: 0.65 };
          paper: { colors: readonly ["#bb0000", "#ffffff"] };
          particleCount: 160;
          spread: 55;
          startVelocity: readonly [1300, 1900];
      },
      {
          angle: 120;
          emission: { duration: 3000; mode: "stream" };
          origin: { x: 1; y: 0.65 };
          paper: { colors: readonly ["#bb0000", "#ffffff"] };
          particleCount: 160;
          spread: 55;
          startVelocity: readonly [1300, 1900];
      },
  ]

  School Pride. Red and white streams from both sides for three seconds.

• ReadonlySHOOTING_STARS: {
      angle: readonly [-35, -20];
      emission: { every: 220; mode: "interval"; times: 6 };
      lifetime: readonly [900, 1300];
      origin: { x: readonly [0.05, 0.6]; y: readonly [0.05, 0.3] };
      particleCount: 5;
      physics: { drag: 0.6; gravity: 120 };
      shapes: readonly [
          {
              colors: readonly ["#fffbe6", "#ffe38a", "#ffd23f"];
              shine: 0.6;
              size: readonly [8, 12];
              trail: { length: 24; opacity: 0.75; width: readonly [2, 3] };
              type: "star";
          },
      ];
      spread: 8;
      startVelocity: readonly [900, 1400];
  }

  Shooting Stars. Pale golden stars streaking down across the upper sky with long, fading trails, in six quick volleys (shows the trail style option).

• ReadonlySIDE_SHOTS: readonly [
      {
          angle: 60;
          origin: { x: 0; y: 0.75 };
          particleCount: 70;
          spread: 55;
          startVelocity: readonly [1400, 2200];
      },
      {
          angle: 120;
          origin: { x: 1; y: 0.75 };
          particleCount: 70;
          spread: 55;
          startVelocity: readonly [1400, 2200];
      },
  ]

  Side Shots. Two bursts at once, from the left and right edges, aimed towards the center.

• ReadonlySNOW: {
      angle: 270;
      emission: { duration: 6000; mode: "stream" };
      lifetime: readonly [6000, 9000];
      origin: { x: readonly [0, 1]; y: -0.03 };
      paper: {
          aspectRatio: 1;
          colors: readonly ["#ffffff", "#e8f4ff"];
          fadeIn: 0.05;
          flip: false;
          form: "circle";
          opacity: readonly [0.6, 1];
          rotationSpeed: 0;
          width: readonly [3, 7];
          wobble: { amplitude: readonly [4, 12]; frequency: readonly [0.2, 0.5] };
      };
      particleCount: 180;
      physics: {
          drag: 0.4;
          gravity: 30;
          swirl: { frequency: readonly [0.1, 0.3]; strength: readonly [10, 30] };
          wind: readonly [-10, 10];
      };
      shapes: readonly [
          { type: "paper"; weight: 3 },
          {
              path: "M12 1.5L12 22.5M21.1 6.8L2.9 17.3M2.9 6.8L21.1 17.3M9.6 3.4L12 5.8L14.4 3.4M3.3 9.8L6.6 8.9L5.7 5.6M5.7 18.4L6.6 15.1L3.3 14.2M14.4 20.6L12 18.2L9.6 20.6M20.7 14.2L17.4 15.1L18.3 18.4M18.3 5.6L17.4 8.9L20.7 9.8";
              rotationSpeed: readonly [-40, 40];
              size: readonly [10, 17];
              stroke: { color: "#ffffff"; width: readonly [1, 1.5] };
              type: "path";
              weight: 1;
          },
      ];
      spread: 30;
      startVelocity: readonly [20, 80];
  }

  Snow. Soft round flakes and six-armed snow crystals drifting down from the top edge for six seconds.

• ReadonlySPARKLER: {
      emission: { duration: 1500; mode: "stream" };
      lifetime: readonly [500, 900];
      origin: { x: 0.5; y: 0.5 };
      paper: {
          aspectRatio: 1;
          blendMode: "lighter";
          colors: readonly ["#fff6d5", "#ffd98a", "#ffb347"];
          fadeOut: { easing: "easeInQuad"; start: 0.3 };
          flip: false;
          form: "circle";
          trail: { length: 10; opacity: 0.8; width: readonly [1.5, 2.5] };
          width: readonly [2, 3.5];
          wobble: false;
      };
      particleCount: 220;
      physics: { drag: 2; gravity: 500 };
      spread: 360;
      startVelocity: readonly [400, 1100];
  }

  Sparkler. Hot, glowing sparks with short trails spray from the center for one and a half seconds (additive lighter blending: brightest on dark backgrounds).

• ReadonlySTARS: {
      lifetime: readonly [1800, 2600];
      origin: { x: 0.5; y: 0.45 };
      particleCount: 60;
      physics: { drag: 2.5; gravity: 250 };
      shapes: readonly [
          {
              colors: readonly [
                  "#ffe400",
                  "#ffbd00",
                  "#e89400",
                  "#ffca6c",
                  "#fdffb8",
              ];
              shine: 0.6;
              size: readonly [12, 20];
              type: "star";
          },
      ];
      spread: 360;
      startVelocity: readonly [500, 1100];
  }

  Stars. A golden, shiny star burst in every direction from the center.

• ReadonlySUCCESS: {
      formation: {
          font: "900 220px sans-serif";
          hold: 900;
          mode: "appear";
          spacing: 7;
          text: "✔";
      };
      origin: { x: 0.5; y: 0.45 };
      paper: {
          colors: readonly ["#2dc653", "#25a244", "#6ede8a", "#b7efc5"];
          scale: 0.8;
      };
  }

  Success. A green check mark appears made of confetti, then bursts apart (for "saved", "sent", "done" moments).