celebrate-js 0.1.0

package/dist/index.js

@@ -0,0 +1,599 @@
+// src/effects/confetti.ts
+function confetti(options = {}) {
+  if (options.respectReducedMotion && window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+    return;
+  }
+  const duration = options.duration ?? 2e3;
+  const particleCount = options.particleCount ?? 150;
+  const colors = options.colors && options.colors.length > 0 ? options.colors : ["#FFC700", "#FF0000", "#2E3191", "#46c741ff"];
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  canvas.style.position = "fixed";
+  canvas.style.top = "0";
+  canvas.style.left = "0";
+  canvas.style.pointerEvents = "none";
+  canvas.style.zIndex = "9999";
+  document.body.appendChild(canvas);
+  const resize = () => {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+  };
+  resize();
+  window.addEventListener("resize", resize);
+  const particles = Array.from({ length: particleCount }).map(() => ({
+    x: Math.random() * canvas.width,
+    y: Math.random() * canvas.height - canvas.height,
+    size: Math.random() * 6 + 4,
+    color: colors[Math.floor(Math.random() * colors.length)],
+    velocityX: Math.random() * 4 - 2,
+    velocityY: Math.random() * 6 + 4,
+    rotation: Math.random() * 360
+  }));
+  const start = performance.now();
+  function draw(now) {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    for (const p of particles) {
+      p.x += p.velocityX;
+      p.y += p.velocityY;
+      p.rotation += 5;
+      ctx.save();
+      ctx.translate(p.x, p.y);
+      ctx.rotate(p.rotation * Math.PI / 180);
+      ctx.fillStyle = p.color;
+      ctx.fillRect(-p.size / 2, -p.size / 2, p.size, p.size);
+      ctx.restore();
+    }
+    if (now - start < duration) {
+      requestAnimationFrame(draw);
+    } else {
+      cleanup();
+    }
+  }
+  function cleanup() {
+    window.removeEventListener("resize", resize);
+    canvas.remove();
+  }
+  requestAnimationFrame(draw);
+}
+
+// src/effects/balloons.ts
+function balloons(options = {}) {
+  if (options.respectReducedMotion && window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+    return;
+  }
+  const duration = options.duration ?? 3e3;
+  const count = options.particleCount ?? 20;
+  const colors = options.colors && options.colors.length > 0 ? options.colors : ["#ff6b6b", "#ffd93d", "#6bcb77", "#4d96ff", "#c77dff"];
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  canvas.style.position = "fixed";
+  canvas.style.top = "0";
+  canvas.style.left = "0";
+  canvas.style.pointerEvents = "none";
+  canvas.style.zIndex = "9999";
+  document.body.appendChild(canvas);
+  const resize = () => {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+  };
+  resize();
+  window.addEventListener("resize", resize);
+  const balloons2 = Array.from({ length: count }).map(() => ({
+    x: Math.random() * canvas.width,
+    y: canvas.height + Math.random() * canvas.height,
+    radius: Math.random() * 20 + 20,
+    color: colors[Math.floor(Math.random() * colors.length)],
+    speed: Math.random() * 2 + 1.2,
+    sway: Math.random() * 2 + 1
+  }));
+  const start = performance.now();
+  function draw(now) {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    balloons2.forEach((b, i) => {
+      b.y -= b.speed;
+      b.x += Math.sin(now / 300 + i) * b.sway;
+      const gradient = ctx.createRadialGradient(
+        b.x - b.radius * 0.3,
+        b.y - b.radius * 0.3,
+        b.radius * 0.2,
+        b.x,
+        b.y,
+        b.radius
+      );
+      gradient.addColorStop(0, "#ffffffaa");
+      gradient.addColorStop(0.3, b.color);
+      gradient.addColorStop(1, "#00000022");
+      ctx.beginPath();
+      ctx.ellipse(b.x, b.y, b.radius * 0.8, b.radius, 0, 0, Math.PI * 2);
+      ctx.fillStyle = gradient;
+      ctx.fill();
+      const stringLength = 35;
+      const swayOffset = Math.sin(now / 150 + i) * b.sway * 4;
+      ctx.beginPath();
+      ctx.moveTo(b.x, b.y + b.radius);
+      ctx.quadraticCurveTo(
+        b.x + swayOffset,
+        b.y + b.radius + stringLength / 2,
+        b.x,
+        b.y + b.radius + stringLength
+      );
+      ctx.strokeStyle = "#555";
+      ctx.lineWidth = 1;
+      ctx.stroke();
+    });
+    if (now - start < duration) {
+      requestAnimationFrame(draw);
+    } else {
+      cleanup();
+    }
+  }
+  function cleanup() {
+    window.removeEventListener("resize", resize);
+    canvas.remove();
+  }
+  requestAnimationFrame(draw);
+}
+
+// src/effects/popper.ts
+function popper(options = {}) {
+  if (options.respectReducedMotion && window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+    return;
+  }
+  const duration = options.duration ?? 1800;
+  const particleCount = options.particleCount ?? 120;
+  const colors = options.colors && options.colors.length > 0 ? options.colors : ["#FFC700", "#FF0000", "#2E3191", "#41BBC7", "#7CFFCB"];
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  canvas.style.position = "fixed";
+  canvas.style.top = "0";
+  canvas.style.left = "0";
+  canvas.style.pointerEvents = "none";
+  canvas.style.zIndex = "9999";
+  document.body.appendChild(canvas);
+  const resize = () => {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+  };
+  resize();
+  window.addEventListener("resize", resize);
+  const particles = [];
+  const createSide = (side) => {
+    for (let i = 0; i < particleCount / 2; i++) {
+      particles.push({
+        x: side === "left" ? 0 : canvas.width,
+        y: canvas.height * 0.6,
+        size: Math.random() * 6 + 4,
+        color: colors[Math.floor(Math.random() * colors.length)],
+        vx: side === "left" ? Math.random() * 4 + 2 : -(Math.random() * 4 + 2),
+        vy: Math.random() * -14 - 10,
+        rotation: Math.random() * 360,
+        rotationSpeed: Math.random() * 10 - 5
+      });
+    }
+  };
+  createSide("left");
+  createSide("right");
+  const gravity = 0.45;
+  const start = performance.now();
+  function draw(now) {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    particles.forEach((p) => {
+      p.vy += gravity;
+      p.vx *= 0.99;
+      p.vy *= 0.99;
+      p.x += p.vx;
+      p.y += p.vy;
+      p.rotation += p.rotationSpeed;
+      ctx.save();
+      ctx.translate(p.x, p.y);
+      ctx.rotate(p.rotation * Math.PI / 180);
+      ctx.fillStyle = p.color;
+      ctx.fillRect(-p.size / 2, -p.size / 2, p.size, p.size);
+      ctx.fillStyle = "#ffffff55";
+      ctx.fillRect(
+        -p.size / 2,
+        -p.size / 2,
+        p.size * 0.4,
+        p.size * 0.4
+      );
+      ctx.restore();
+    });
+    if (now - start < duration) {
+      requestAnimationFrame(draw);
+    } else {
+      cleanup();
+    }
+  }
+  function cleanup() {
+    window.removeEventListener("resize", resize);
+    canvas.remove();
+  }
+  requestAnimationFrame(draw);
+}
+
+// src/effects/fireworks.ts
+function fireworks(options = {}) {
+  if (options.respectReducedMotion && window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+    return;
+  }
+  const duration = options.duration ?? 4e3;
+  const burstCount = options.count ?? 5;
+  const interval = options.interval ?? 500;
+  const colors = options.colors && options.colors.length > 0 ? options.colors : ["#ff5252", "#ffd740", "#40c4ff", "#69f0ae", "#e040fb"];
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  canvas.style.position = "fixed";
+  canvas.style.top = "0";
+  canvas.style.left = "0";
+  canvas.style.pointerEvents = "none";
+  canvas.style.zIndex = "9999";
+  document.body.appendChild(canvas);
+  const resize = () => {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+  };
+  resize();
+  window.addEventListener("resize", resize);
+  let particles = [];
+  let bursts = 0;
+  function createBurst() {
+    const x = Math.random() * canvas.width;
+    const y = Math.random() * canvas.height * 0.5;
+    const color = colors[Math.floor(Math.random() * colors.length)];
+    const count = 60;
+    for (let i = 0; i < count; i++) {
+      const angle = Math.PI * 2 * i / count;
+      const speed = Math.random() * 4 + 2;
+      particles.push({
+        x,
+        y,
+        vx: Math.cos(angle) * speed,
+        vy: Math.sin(angle) * speed,
+        alpha: 1,
+        color
+      });
+    }
+  }
+  const start = performance.now();
+  let lastBurst = 0;
+  function draw(now) {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    if (bursts < burstCount && now - lastBurst > interval) {
+      createBurst();
+      bursts++;
+      lastBurst = now;
+    }
+    particles.forEach((p) => {
+      p.x += p.vx;
+      p.y += p.vy;
+      p.vy += 0.04;
+      p.alpha -= 0.015;
+      ctx.beginPath();
+      ctx.arc(p.x, p.y, 2, 0, Math.PI * 2);
+      ctx.fillStyle = p.color.replace(")", `, ${p.alpha})`).startsWith("rgb") ? p.color : p.color;
+      ctx.globalAlpha = Math.max(p.alpha, 0);
+      ctx.fill();
+    });
+    ctx.globalAlpha = 1;
+    particles = particles.filter((p) => p.alpha > 0);
+    if (now - start < duration || particles.length > 0) {
+      requestAnimationFrame(draw);
+    } else {
+      cleanup();
+    }
+  }
+  function cleanup() {
+    window.removeEventListener("resize", resize);
+    canvas.remove();
+  }
+  requestAnimationFrame(draw);
+}
+
+// src/effects/bubbles.ts
+function bubbles(options) {
+  if (options.respectReducedMotion && window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+    return;
+  }
+  const duration = options.duration ?? 3e3;
+  const count = options.particleCount ?? 25;
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  canvas.style.position = "fixed";
+  canvas.style.top = "0";
+  canvas.style.left = "0";
+  canvas.style.pointerEvents = "none";
+  canvas.style.zIndex = "9999";
+  document.body.appendChild(canvas);
+  const resize = () => {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+  };
+  resize();
+  window.addEventListener("resize", resize);
+  const bubbles2 = Array.from({ length: count }).map(() => ({
+    x: Math.random() * canvas.width,
+    y: canvas.height + Math.random() * 100,
+    radius: Math.random() * 15 + 10,
+    speed: Math.random() * 2.1 + 1.4,
+    drift: Math.random() * 1.5 - 0.75,
+    alpha: Math.random() * 0.4 + 0.4
+  }));
+  const start = performance.now();
+  function draw(now) {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    bubbles2.forEach((b) => {
+      b.y -= b.speed;
+      b.x += Math.sin(now / 500) * b.drift;
+      if (b.y < canvas.height * 0.3) {
+        b.alpha = Math.max(0, b.alpha - 0.01);
+      }
+      ctx.beginPath();
+      ctx.arc(b.x, b.y, b.radius, 0, Math.PI * 2);
+      ctx.fillStyle = `rgba(180, 220, 255, ${b.alpha * 0.4})`;
+      ctx.fill();
+      ctx.strokeStyle = `rgba(255,255,255,${b.alpha})`;
+      ctx.lineWidth = 2;
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.arc(
+        b.x - b.radius / 3,
+        b.y - b.radius / 3,
+        b.radius / 4,
+        0,
+        Math.PI * 2
+      );
+      ctx.strokeStyle = `rgba(255,255,255,${b.alpha * 0.6})`;
+      ctx.stroke();
+    });
+    if (now - start < duration) {
+      requestAnimationFrame(draw);
+    } else {
+      cleanup();
+    }
+  }
+  function cleanup() {
+    window.removeEventListener("resize", resize);
+    canvas.remove();
+  }
+  requestAnimationFrame(draw);
+}
+
+// src/effects/emojis.ts
+function emojis(options) {
+  if (options.respectReducedMotion && window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+    return;
+  }
+  const duration = options.duration ?? 3e3;
+  const count = options.particleCount ?? 30;
+  const emojiSet = options.emojis ?? ["\u{1F389}", "\u2728", "\u{1F525}", "\u{1F4AF}", "\u{1F60D}"];
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  canvas.style.position = "fixed";
+  canvas.style.top = "0";
+  canvas.style.left = "0";
+  canvas.style.pointerEvents = "none";
+  canvas.style.zIndex = "9999";
+  document.body.appendChild(canvas);
+  const resize = () => {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+  };
+  resize();
+  window.addEventListener("resize", resize);
+  const emojis2 = Array.from({ length: count }).map(() => ({
+    x: Math.random() * canvas.width,
+    y: Math.random() * -canvas.height,
+    char: emojiSet[Math.floor(Math.random() * emojiSet.length)],
+    size: Math.random() * 20 + 20,
+    speed: Math.random() * 2.5 + 1.5,
+    drift: Math.random() * 1.5 - 0.75,
+    rotation: Math.random() * 360,
+    rotationSpeed: Math.random() * 4 - 2,
+    alpha: 1
+  }));
+  const start = performance.now();
+  function draw(now) {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    emojis2.forEach((e) => {
+      e.y += e.speed;
+      e.x += Math.sin(now / 400) * e.drift;
+      e.rotation += e.rotationSpeed;
+      if (e.y > canvas.height * 0.8) {
+        e.alpha = Math.max(0, e.alpha - 0.02);
+      }
+      ctx.save();
+      ctx.translate(e.x, e.y);
+      ctx.rotate(e.rotation * Math.PI / 180);
+      ctx.globalAlpha = e.alpha;
+      ctx.font = `${e.size}px serif`;
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillText(e.char, 0, 0);
+      ctx.restore();
+    });
+    if (now - start < duration) {
+      requestAnimationFrame(draw);
+    } else {
+      cleanup();
+    }
+  }
+  function cleanup() {
+    window.removeEventListener("resize", resize);
+    canvas.remove();
+  }
+  requestAnimationFrame(draw);
+}
+
+// src/effects/stars.ts
+function stars(options) {
+  if (options.respectReducedMotion && window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+    return;
+  }
+  const duration = options.duration ?? 3e3;
+  const count = options.count ?? 5;
+  const interval = options.interval ?? 500;
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  canvas.style.position = "fixed";
+  canvas.style.top = "0";
+  canvas.style.left = "0";
+  canvas.style.pointerEvents = "none";
+  canvas.style.zIndex = "9999";
+  document.body.appendChild(canvas);
+  const resize = () => {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+  };
+  resize();
+  window.addEventListener("resize", resize);
+  const stars2 = [];
+  const start = performance.now();
+  let spawned = 0;
+  let lastSpawn = 0;
+  function spawnStar() {
+    const fromLeft = Math.random() > 0.5;
+    stars2.push({
+      x: fromLeft ? -100 : canvas.width + 100,
+      y: Math.random() * canvas.height * 0.4,
+      vx: fromLeft ? Math.random() * 12 + 8 : -(Math.random() * 12 + 8),
+      vy: Math.random() * 6 + 4,
+      length: Math.random() * 80 + 60,
+      alpha: 1
+    });
+  }
+  function draw(now) {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    if (spawned < count && now - lastSpawn > interval) {
+      spawnStar();
+      spawned++;
+      lastSpawn = now;
+    }
+    stars2.forEach((s, i) => {
+      s.x += s.vx;
+      s.y += s.vy;
+      s.alpha -= 0.015;
+      ctx.beginPath();
+      ctx.moveTo(s.x, s.y);
+      ctx.lineTo(
+        s.x - s.vx * 4,
+        s.y - s.vy * 4
+      );
+      ctx.strokeStyle = `rgba(255,255,120,${s.alpha})`;
+      ctx.lineWidth = 2;
+      ctx.lineCap = "round";
+      ctx.stroke();
+      if (s.alpha <= 0) {
+        stars2.splice(i, 1);
+      }
+    });
+    if (now - start < duration || stars2.length > 0) {
+      requestAnimationFrame(draw);
+    } else {
+      cleanup();
+    }
+  }
+  function cleanup() {
+    window.removeEventListener("resize", resize);
+    canvas.remove();
+  }
+  requestAnimationFrame(draw);
+}
+
+// src/effects/snowfall.ts
+function snowfall(options) {
+  if (options.respectReducedMotion && window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+    return;
+  }
+  const duration = options.duration ?? 5e3;
+  const count = options.particleCount ?? 60;
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  canvas.style.position = "fixed";
+  canvas.style.top = "0";
+  canvas.style.left = "0";
+  canvas.style.pointerEvents = "none";
+  canvas.style.zIndex = "9999";
+  document.body.appendChild(canvas);
+  const resize = () => {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+  };
+  resize();
+  window.addEventListener("resize", resize);
+  const flakes = Array.from({ length: count }).map(() => ({
+    x: Math.random() * canvas.width,
+    y: Math.random() * -canvas.height,
+    radius: Math.random() * 2.5 + 1,
+    speed: Math.random() * 0.6 + 0.3,
+    drift: Math.random() * 0.6 - 0.3,
+    alpha: Math.random() * 0.5 + 0.4
+  }));
+  const start = performance.now();
+  function draw(now) {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    flakes.forEach((f) => {
+      f.y += f.speed;
+      f.x += Math.sin(now / 800) * f.drift;
+      if (f.y > canvas.height) {
+        f.y = -10;
+        f.x = Math.random() * canvas.width;
+      }
+      ctx.beginPath();
+      ctx.arc(f.x, f.y, f.radius, 0, Math.PI * 2);
+      ctx.fillStyle = `rgba(255,255,255,${f.alpha})`;
+      ctx.fill();
+    });
+    if (now - start < duration) {
+      requestAnimationFrame(draw);
+    } else {
+      cleanup();
+    }
+  }
+  function cleanup() {
+    window.removeEventListener("resize", resize);
+    canvas.remove();
+  }
+  requestAnimationFrame(draw);
+}
+
+// src/index.ts
+function celebrate(options = {}) {
+  const effect = options.effect ?? "confetti";
+  switch (effect) {
+    case "confetti":
+      confetti(options);
+      break;
+    case "balloons":
+      balloons(options);
+      break;
+    case "popper":
+      popper(options);
+      break;
+    case "fireworks":
+      fireworks(options);
+      break;
+    case "bubbles":
+      bubbles(options);
+      break;
+    case "emojis":
+      emojis(options);
+      break;
+    case "stars":
+      stars(options);
+      break;
+    case "snowfall":
+      snowfall(options);
+      break;
+  }
+}
+celebrate.confetti = (o) => celebrate({ ...o, effect: "confetti" });
+celebrate.balloons = (o) => celebrate({ ...o, effect: "balloons" });
+celebrate.popper = (o) => celebrate({ ...o, effect: "popper" });
+celebrate.fireworks = (o) => celebrate({ ...o, effect: "fireworks" });
+celebrate.bubbles = (o) => celebrate({ ...o, effect: "bubbles" });
+celebrate.emojis = (o) => celebrate({ ...o, effect: "emojis" });
+celebrate.stars = (o) => celebrate({ ...o, effect: "stars" });
+celebrate.snowfall = (o) => celebrate({ ...o, effect: "snowfall" });
+export {
+  celebrate
+};

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "celebrate-js",
+  "version": "0.1.0",
+  "description": "Delightful UI celebration effects (confetti, balloons, fireworks, and more)",
+  "keywords": [
+    "celebration",
+    "confetti",
+    "balloons",
+    "animations",
+    "effects",
+    "ui",
+    "canvas",
+    "frontend",
+    "micro-interactions"
+  ],
+  "homepage": "https://github.com/akshaywritescode/celebrate-js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/akshaywritescode/celebrate-js.git"
+  },
+  "bugs": {
+    "url": "https://github.com/akshaywritescode/celebrate-js/issues"
+  },
+  "license": "MIT",
+  "author": "Akshay <debugwithakshay@gmail.com>",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "dev": "vite",
+    "build": "tsup src/index.ts --format esm,cjs --dts --clean",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "eslint": "^8.56.0",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.0",
+    "vitest": "^1.2.0"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}