@sarthak03dot/romantic-animations 1.2.10 → 1.2.11

package/README.md

@@ -1,4 +1,4 @@
-# 💖 Romantic Animations v1.2.10
+# 💖 Romantic Animations v1.2.11
 
 <p align="center">
   <b>A premium, lightweight, zero-dependency JavaScript canvas particle library for gorgeous romantic & celebratory effects.</b>

package/dist/src/index.d.ts

@@ -0,0 +1,102 @@
+export interface AnimationOptions {
+  count?: number;
+  density?: number;
+  minSize?: number;
+  maxSize?: number;
+  minSpeed?: number;
+  maxSpeed?: number;
+  speed?: number;
+  colors?: string[];
+  glow?: boolean;
+  wobble?: boolean;
+  interval?: number;
+  particleCount?: number;
+  starCount?: number;
+  twinkle?: boolean;
+  connectDist?: number;
+  decay?: number;
+  symbols?: string[];
+  shapes?: string[];
+}
+
+export declare function startFloatingHearts(
+  containerId: string | HTMLElement,
+  options?: AnimationOptions
+): number;
+
+export declare function startHeartTrail(
+  containerId: string | HTMLElement,
+  options?: AnimationOptions
+): number;
+
+export declare function startHeartBurst(
+  containerId: string | HTMLElement,
+  options?: AnimationOptions
+): number;
+
+export declare function startSparkles(
+  containerId: string | HTMLElement,
+  options?: AnimationOptions
+): number;
+
+export declare function startLoveRain(
+  containerId: string | HTMLElement,
+  options?: AnimationOptions
+): number;
+
+export declare function startConfetti(
+  containerId: string | HTMLElement,
+  options?: AnimationOptions
+): number;
+
+export declare function startFireworks(
+  containerId: string | HTMLElement,
+  options?: AnimationOptions
+): number;
+
+export declare function startStarField(
+  containerId: string | HTMLElement,
+  options?: AnimationOptions
+): number;
+
+export declare function startButterflies(
+  containerId: string | HTMLElement,
+  options?: AnimationOptions
+): number;
+
+export declare function startMagicDust(
+  containerId: string | HTMLElement,
+  options?: AnimationOptions
+): number;
+
+export declare function startFloatingOrbs(
+  containerId: string | HTMLElement,
+  options?: AnimationOptions
+): number;
+
+export declare function startShootingStars(
+  containerId: string | HTMLElement,
+  options?: AnimationOptions
+): number;
+
+export declare function stopAnimation(id: number): void;
+export declare function stopAll(): void;
+
+declare const RomanticAnimations: {
+  startFloatingHearts: typeof startFloatingHearts;
+  startHeartTrail: typeof startHeartTrail;
+  startHeartBurst: typeof startHeartBurst;
+  startSparkles: typeof startSparkles;
+  startLoveRain: typeof startLoveRain;
+  startConfetti: typeof startConfetti;
+  startFireworks: typeof startFireworks;
+  startStarField: typeof startStarField;
+  startButterflies: typeof startButterflies;
+  startMagicDust: typeof startMagicDust;
+  startFloatingOrbs: typeof startFloatingOrbs;
+  startShootingStars: typeof startShootingStars;
+  stopAnimation: typeof stopAnimation;
+  stopAll: typeof stopAll;
+};
+
+export default RomanticAnimations;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sarthak03dot/romantic-animations",
-  "version": "1.2.10",
+  "version": "1.2.11",
   "description": "Romantic & celebratory canvas animations — hearts, sparkles, fireworks, confetti, star fields and more. Zero dependencies.",
   "homepage": "https://github.com/sarthak03dot/romantic-animations#readme",
   "bugs": {
@@ -39,13 +39,12 @@
   },
   "files": [
     "dist",
-    "src",
     "README.md"
   ],
   "sideEffects": false,
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "vite build && cpy src/index.d.ts dist",
     "build:demo": "vite build --config vite.demo.config.js",
     "preview": "vite preview",
     "prepublishOnly": "npm run build",
@@ -53,8 +52,8 @@
     "deploy": "gh-pages -d demo-dist"
   },
   "devDependencies": {
+    "cpy-cli": "^7.0.0",
     "gh-pages": "^6.3.0",
-    "vite": "^7.0.2",
-    "vite-plugin-dts": "^5.0.1"
+    "vite": "^7.0.2"
   }
 }

package/dist/index.d.ts

@@ -1 +0,0 @@
-export {}

package/src/animations/butterfly.js

@@ -1,92 +0,0 @@
-import { mergeOptions } from '../core/engine.js';
-
-const DEFAULTS = {
-  density: 0.05,        // Spawn probability per frame
-  colors: ['#c77dff', '#ff85a1', '#ffc2d1', '#48cae4', '#e7c6ff', '#fbb1bd'],
-  minSize: 10,
-  maxSize: 22,
-  minSpeed: 0.8,
-  maxSpeed: 2.2,
-  glow: true,
-};
-
-export function butterflies(canvas, userOptions = {}) {
-  const opts = mergeOptions(DEFAULTS, userOptions);
-  const ctx = canvas.getContext('2d');
-  const items = [];
-  let running = true;
-  let time = 0;
-
-  function spawn() {
-    const size = opts.minSize + Math.random() * (opts.maxSize - opts.minSize);
-    return {
-      x: -size * 2,
-      y: canvas.height * 0.1 + Math.random() * (canvas.height * 0.8),
-      size,
-      speed: opts.minSpeed + Math.random() * (opts.maxSpeed - opts.minSpeed),
-      color: opts.colors[Math.floor(Math.random() * opts.colors.length)],
-      alpha: 0,
-      flapSpeed: 0.1 + Math.random() * 0.15,
-      flapOffset: Math.random() * Math.PI * 2,
-      wobbleSpeed: 0.01 + Math.random() * 0.02,
-      wobbleOffset: Math.random() * Math.PI * 2,
-    };
-  }
-
-  function animate() {
-    if (!running) return;
-    time++;
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-    if (Math.random() < opts.density) items.push(spawn());
-
-    for (let i = items.length - 1; i >= 0; i--) {
-      const b = items[i];
-      b.x += b.speed;
-      b.y += Math.sin(time * b.wobbleSpeed + b.wobbleOffset) * 1.5;
-      
-      // Fade in smoothly
-      if (b.alpha < 1 && b.x < canvas.width / 2) b.alpha += 0.02;
-      
-      // Flapping wing calculation
-      const wingSpread = Math.abs(Math.sin(time * b.flapSpeed + b.flapOffset));
-
-      ctx.save();
-      ctx.globalAlpha = Math.min(1, b.alpha);
-      ctx.translate(b.x, b.y);
-      // Slight tilt upwards
-      ctx.rotate(-0.1 - (wingSpread * 0.1));
-      
-      if (opts.glow) {
-        ctx.shadowColor = b.color;
-        ctx.shadowBlur = b.size * 1.5;
-      }
-      ctx.fillStyle = b.color;
-      
-      // Draw wings
-      ctx.beginPath();
-      // Left/back wing (narrower based on wingSpread)
-      ctx.ellipse(-b.size * 0.2, 0, b.size * 0.4 * wingSpread, b.size * 0.5, 0.3, 0, Math.PI * 2);
-      ctx.fill();
-      
-      ctx.beginPath();
-      // Right/front wing
-      ctx.ellipse(b.size * 0.3 * wingSpread, -b.size * 0.1, b.size * 0.5 * wingSpread, b.size * 0.6, -0.2, 0, Math.PI * 2);
-      ctx.fill();
-      ctx.restore();
-
-      if (b.x > canvas.width + b.size * 2) {
-        items.splice(i, 1);
-      }
-    }
-
-    requestAnimationFrame(animate);
-  }
-
-  animate();
-
-  return function stop() {
-    running = false;
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-  };
-}

package/src/animations/confetti.js

@@ -1,92 +0,0 @@
-import { mergeOptions } from '../core/engine.js';
-
-const DEFAULTS = {
-  density: 0.18,
-  colors: ['#ff6b8a','#ff4d6d','#ffd6ff','#e7c6ff','#c77dff','#48cae4','#ffe66d','#06d6a0'],
-  minSize: 6,
-  maxSize: 14,
-  minSpeed: 1.5,
-  maxSpeed: 4,
-  gravity: 0.06,
-  drag: 0.99,
-  shapes: ['rect', 'circle', 'ribbon'],
-};
-
-export function confetti(canvas, userOptions = {}) {
-  const opts = mergeOptions(DEFAULTS, userOptions);
-  const ctx = canvas.getContext('2d');
-  const pieces = [];
-  let running = true;
-
-  function createPiece() {
-    const size = opts.minSize + Math.random() * (opts.maxSize - opts.minSize);
-    const speed = opts.minSpeed + Math.random() * (opts.maxSpeed - opts.minSpeed);
-    return {
-      x: Math.random() * canvas.width,
-      y: -size * 2,
-      w: size,
-      h: size * (0.4 + Math.random() * 0.8),
-      vx: (Math.random() - 0.5) * 3,
-      vy: speed,
-      angle: Math.random() * Math.PI * 2,
-      spin: (Math.random() - 0.5) * 0.15,
-      color: opts.colors[Math.floor(Math.random() * opts.colors.length)],
-      alpha: 0.8 + Math.random() * 0.2,
-      shape: opts.shapes[Math.floor(Math.random() * opts.shapes.length)],
-    };
-  }
-
-  function drawPiece(p) {
-    ctx.save();
-    ctx.globalAlpha = p.alpha;
-    ctx.fillStyle = p.color;
-    ctx.strokeStyle = p.color;
-    ctx.translate(p.x, p.y);
-    ctx.rotate(p.angle);
-
-    if (p.shape === 'circle') {
-      ctx.beginPath();
-      ctx.ellipse(0, 0, p.w / 2, p.h / 2, 0, 0, Math.PI * 2);
-      ctx.fill();
-    } else if (p.shape === 'ribbon') {
-      ctx.beginPath();
-      ctx.moveTo(-p.w / 2, 0);
-      ctx.quadraticCurveTo(0, -p.h, p.w / 2, 0);
-      ctx.quadraticCurveTo(0, p.h, -p.w / 2, 0);
-      ctx.fill();
-    } else {
-      ctx.fillRect(-p.w / 2, -p.h / 2, p.w, p.h);
-    }
-    ctx.restore();
-  }
-
-  function animate() {
-    if (!running) return;
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-    if (Math.random() < opts.density) pieces.push(createPiece());
-
-    for (let i = pieces.length - 1; i >= 0; i--) {
-      const p = pieces[i];
-      p.vy += opts.gravity;
-      p.vx *= opts.drag;
-      p.vy *= opts.drag;
-      p.x += p.vx;
-      p.y += p.vy;
-      p.angle += p.spin;
-
-      drawPiece(p);
-
-      if (p.y > canvas.height + 20) pieces.splice(i, 1);
-    }
-
-    requestAnimationFrame(animate);
-  }
-
-  animate();
-
-  return function stop() {
-    running = false;
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-  };
-}

package/src/animations/fireworks.js

@@ -1,112 +0,0 @@
-import { mergeOptions } from '../core/engine.js';
-
-const DEFAULTS = {
-  interval: 1200,       // ms between auto-launches
-  trailLength: 28,
-  particleCount: 80,
-  colors: ['#ff6b8a','#ff4d6d','#ffd6ff','#e7c6ff','#ffe66d','#06d6a0','#48cae4','#ffffff'],
-  gravity: 0.09,
-  decay: 0.014,
-  glow: true,
-};
-
-export function fireworks(canvas, userOptions = {}) {
-  const opts = mergeOptions(DEFAULTS, userOptions);
-  const ctx = canvas.getContext('2d');
-  let running = true;
-
-  const rockets = [];    // { x, y, vx, vy, trail[], color }
-  const particles = [];  // burst particles
-
-  function launchRocket() {
-    const x = canvas.width * (0.2 + Math.random() * 0.6);
-    const targetY = canvas.height * (0.1 + Math.random() * 0.4);
-    const dy = targetY - canvas.height;
-    const speed = 8 + Math.random() * 5;
-    const color = opts.colors[Math.floor(Math.random() * opts.colors.length)];
-    rockets.push({ x, y: canvas.height, vy: -Math.abs(speed), targetY, trail: [], color });
-  }
-
-  function burst(x, y, color) {
-    for (let i = 0; i < opts.particleCount; i++) {
-      const angle = Math.random() * Math.PI * 2;
-      const speed = 1 + Math.random() * 5;
-      particles.push({
-        x, y,
-        vx: Math.cos(angle) * speed,
-        vy: Math.sin(angle) * speed,
-        alpha: 1,
-        decay: opts.decay * (0.7 + Math.random() * 0.6),
-        size: 2 + Math.random() * 3,
-        color,
-      });
-    }
-  }
-
-  // Auto-launch interval
-  const iv = setInterval(() => { if (running) launchRocket(); }, opts.interval);
-  launchRocket(); // fire one immediately
-
-  function animate() {
-    if (!running) return;
-
-    // Clear canvas instead of using a solid fill to keep background transparent
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-    // Draw rockets
-    for (let i = rockets.length - 1; i >= 0; i--) {
-      const r = rockets[i];
-      r.y += r.vy;
-      r.trail.push({ x: r.x, y: r.y });
-      if (r.trail.length > opts.trailLength) r.trail.shift();
-
-      // Draw trail
-      for (let t = 0; t < r.trail.length; t++) {
-        const alpha = (t / r.trail.length) * 0.8;
-        ctx.save();
-        ctx.globalAlpha = alpha;
-        if (opts.glow) { ctx.shadowColor = r.color; ctx.shadowBlur = 6; }
-        ctx.fillStyle = r.color;
-        ctx.beginPath();
-        ctx.arc(r.trail[t].x, r.trail[t].y, 2.5 * (t / r.trail.length), 0, Math.PI * 2);
-        ctx.fill();
-        ctx.restore();
-      }
-
-      if (r.y <= r.targetY) {
-        burst(r.x, r.y, r.color);
-        rockets.splice(i, 1);
-      }
-    }
-
-    // Draw burst particles
-    for (let i = particles.length - 1; i >= 0; i--) {
-      const p = particles[i];
-      p.x += p.vx;
-      p.y += p.vy;
-      p.vy += opts.gravity;
-      p.alpha -= p.decay;
-
-      ctx.save();
-      ctx.globalAlpha = Math.max(0, p.alpha);
-      if (opts.glow) { ctx.shadowColor = p.color; ctx.shadowBlur = p.size * 2; }
-      ctx.fillStyle = p.color;
-      ctx.beginPath();
-      ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
-      ctx.fill();
-      ctx.restore();
-
-      if (p.alpha <= 0) particles.splice(i, 1);
-    }
-
-    requestAnimationFrame(animate);
-  }
-
-  animate();
-
-  return function stop() {
-    running = false;
-    clearInterval(iv);
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-  };
-}

package/src/animations/floatingHearts.js

@@ -1,89 +0,0 @@
-import { mergeOptions } from '../core/engine.js';
-
-const DEFAULTS = {
-  count: 0.12,       // hearts spawned per frame (probability)
-  minSize: 14,
-  maxSize: 32,
-  minSpeed: 0.8,
-  maxSpeed: 2.4,
-  colors: ['#ff6b8a', '#ff4d6d', '#ff85a1', '#ffc2d1', '#ff0a54', '#ff477e'],
-  wobble: true,      // horizontal sine drift
-  glow: true,
-};
-
-/**
- * Draw a proper heart shape centred at (cx, cy) with given radius.
- */
-function drawHeartShape(ctx, cx, cy, r, color, alpha = 1, glow = false) {
-  ctx.save();
-  ctx.globalAlpha = alpha;
-  if (glow) {
-    ctx.shadowColor = color;
-    ctx.shadowBlur = r * 1.2;
-  }
-  ctx.fillStyle = color;
-  ctx.beginPath();
-  ctx.moveTo(cx, cy + r * 0.3);
-  // left lobe
-  ctx.bezierCurveTo(cx - r * 1.1, cy - r * 0.5, cx - r * 1.6, cy + r * 0.5, cx, cy + r * 1.4);
-  // right lobe
-  ctx.bezierCurveTo(cx + r * 1.6, cy + r * 0.5, cx + r * 1.1, cy - r * 0.5, cx, cy + r * 0.3);
-  ctx.fill();
-  ctx.restore();
-}
-
-export function floatingHearts(canvas, userOptions = {}) {
-  const opts = mergeOptions(DEFAULTS, userOptions);
-  const ctx = canvas.getContext('2d');
-  const hearts = [];
-  let running = true;
-  let frame = 0;
-
-  function createHeart() {
-    const size = opts.minSize + Math.random() * (opts.maxSize - opts.minSize);
-    return {
-      x: Math.random() * canvas.width,
-      y: canvas.height + size * 2,
-      size,
-      speed: opts.minSpeed + Math.random() * (opts.maxSpeed - opts.minSpeed),
-      color: opts.colors[Math.floor(Math.random() * opts.colors.length)],
-      alpha: 0.7 + Math.random() * 0.3,
-      wobbleOffset: Math.random() * Math.PI * 2,
-      wobbleSpeed: 0.02 + Math.random() * 0.03,
-      wobbleAmount: 0.5 + Math.random() * 1.5,
-    };
-  }
-
-  function animate() {
-    if (!running) return;
-    frame++;
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-    if (Math.random() < opts.count) hearts.push(createHeart());
-
-    for (let i = hearts.length - 1; i >= 0; i--) {
-      const h = hearts[i];
-      h.y -= h.speed;
-      h.wobbleOffset += h.wobbleSpeed;
-      const xOffset = opts.wobble ? Math.sin(h.wobbleOffset) * h.wobbleAmount * h.size * 0.5 : 0;
-
-      // Fade out near top
-      const fadeAlpha = Math.min(h.alpha, h.y / (canvas.height * 0.2));
-      if (fadeAlpha <= 0 || h.y < -h.size * 3) {
-        hearts.splice(i, 1);
-        continue;
-      }
-
-      drawHeartShape(ctx, h.x + xOffset, h.y, h.size, h.color, Math.max(0, fadeAlpha), opts.glow);
-    }
-
-    requestAnimationFrame(animate);
-  }
-
-  animate();
-
-  return function stop() {
-    running = false;
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-  };
-}

package/src/animations/floatingOrbs.js

@@ -1,76 +0,0 @@
-import { mergeOptions } from '../core/engine.js';
-
-const DEFAULTS = {
-  orbCount: 15,
-  minSize: 50,
-  maxSize: 150,
-  colors: ['#ff4d6d', '#c77dff', '#48cae4', '#ffe66d'],
-  speed: 0.5,
-  glow: true,
-};
-
-export function floatingOrbs(canvas, userOptions = {}) {
-  const opts = mergeOptions(DEFAULTS, userOptions);
-  const ctx = canvas.getContext('2d');
-  const orbs = [];
-  let running = true;
-
-  function createOrb() {
-    const size = opts.minSize + Math.random() * (opts.maxSize - opts.minSize);
-    return {
-      x: Math.random() * canvas.width,
-      y: Math.random() * canvas.height,
-      size,
-      vx: (Math.random() - 0.5) * opts.speed,
-      vy: (Math.random() - 0.5) * opts.speed,
-      color: opts.colors[Math.floor(Math.random() * opts.colors.length)],
-      alpha: 0,
-    };
-  }
-
-  for (let i = 0; i < opts.orbCount; i++) {
-    const orb = createOrb();
-    orb.alpha = Math.random() * 0.5 + 0.1;
-    orbs.push(orb);
-  }
-
-  function animate() {
-    if (!running) return;
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-    for (let i = 0; i < orbs.length; i++) {
-      const b = orbs[i];
-      b.x += b.vx;
-      b.y += b.vy;
-
-      // Bounce off walls
-      if (b.x < -b.size) b.x = canvas.width + b.size;
-      if (b.x > canvas.width + b.size) b.x = -b.size;
-      if (b.y < -b.size) b.y = canvas.height + b.size;
-      if (b.y > canvas.height + b.size) b.y = -b.size;
-
-      ctx.save();
-      ctx.globalAlpha = b.alpha;
-      ctx.globalCompositeOperation = 'screen';
-      
-      const gradient = ctx.createRadialGradient(b.x, b.y, 0, b.x, b.y, b.size);
-      gradient.addColorStop(0, b.color);
-      gradient.addColorStop(1, 'rgba(0,0,0,0)');
-      
-      ctx.fillStyle = gradient;
-      ctx.beginPath();
-      ctx.arc(b.x, b.y, b.size, 0, Math.PI * 2);
-      ctx.fill();
-      ctx.restore();
-    }
-
-    requestAnimationFrame(animate);
-  }
-
-  animate();
-
-  return function stop() {
-    running = false;
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-  };
-}