@sarthak03dot/romantic-animations 1.0.2 → 1.2.0

package/src/animations/heartTrail.js

@@ -1,41 +1,85 @@
-export function heartTrail(canvas) {
-    const ctx = canvas.getContext("2d");
-    const hearts = [];
-  
-    function createHeart(x, y) {
-      return {
-        x,
-        y,
-        size: 8 + Math.random() * 5,
-        alpha: 1,
-        decay: 0.02
-      };
-    }
-  
-    function drawHeart(h) {
-      ctx.fillStyle = `rgba(255, 105, 180, ${h.alpha})`;
-      ctx.beginPath();
-      ctx.moveTo(h.x, h.y);
-      ctx.bezierCurveTo(h.x + h.size / 2, h.y - h.size, h.x + h.size, h.y + h.size / 3, h.x, h.y + h.size);
-      ctx.bezierCurveTo(h.x - h.size, h.y + h.size / 3, h.x - h.size / 2, h.y - h.size, h.x, h.y);
-      ctx.fill();
-    }
-  
-    canvas.addEventListener("mousemove", (e) => {
-      const rect = canvas.getBoundingClientRect();
-      hearts.push(createHeart(e.clientX - rect.left, e.clientY - rect.top));
+import { mergeOptions } from '../core/engine.js';
+
+const DEFAULTS = {
+  minSize: 6,
+  maxSize: 16,
+  decay: 0.025,
+  colors: ['#ff6b8a', '#ff4d6d', '#ff85a1', '#ffc2d1', '#c9184a'],
+  glow: true,
+};
+
+function drawHeart(ctx, cx, cy, r, color, alpha, glow) {
+  ctx.save();
+  ctx.globalAlpha = Math.max(0, alpha);
+  if (glow) {
+    ctx.shadowColor = color;
+    ctx.shadowBlur = r * 2;
+  }
+  ctx.fillStyle = color;
+  ctx.beginPath();
+  ctx.moveTo(cx, cy + r * 0.3);
+  ctx.bezierCurveTo(cx - r * 1.1, cy - r * 0.5, cx - r * 1.6, cy + r * 0.5, cx, cy + r * 1.4);
+  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 heartTrail(canvas, userOptions = {}) {
+  const opts = mergeOptions(DEFAULTS, userOptions);
+  const ctx = canvas.getContext('2d');
+  const hearts = [];
+  let running = true;
+
+  function addHeart(x, y) {
+    hearts.push({
+      x,
+      y,
+      size: opts.minSize + Math.random() * (opts.maxSize - opts.minSize),
+      alpha: 0.9 + Math.random() * 0.1,
+      decay: opts.decay * (0.8 + Math.random() * 0.4),
+      color: opts.colors[Math.floor(Math.random() * opts.colors.length)],
+      vy: -(0.3 + Math.random() * 0.6), // drift upward
+    });
+  }
+
+  // Mouse support
+  const onMouseMove = (e) => {
+    const rect = canvas.getBoundingClientRect();
+    addHeart(e.clientX - rect.left, e.clientY - rect.top);
+  };
+
+  // Touch support
+  const onTouchMove = (e) => {
+    const rect = canvas.getBoundingClientRect();
+    Array.from(e.touches).forEach((t) => {
+      addHeart(t.clientX - rect.left, t.clientY - rect.top);
     });
-  
-    function animate() {
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      for (let i = hearts.length - 1; i >= 0; i--) {
-        drawHeart(hearts[i]);
-        hearts[i].alpha -= hearts[i].decay;
-        if (hearts[i].alpha <= 0) hearts.splice(i, 1);
-      }
-      requestAnimationFrame(animate);
+  };
+
+  window.addEventListener('mousemove', onMouseMove);
+  window.addEventListener('touchmove', onTouchMove, { passive: true });
+
+  function animate() {
+    if (!running) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    for (let i = hearts.length - 1; i >= 0; i--) {
+      const h = hearts[i];
+      h.y += h.vy;
+      drawHeart(ctx, h.x, h.y, h.size, h.color, h.alpha, opts.glow);
+      h.alpha -= h.decay;
+      if (h.alpha <= 0) hearts.splice(i, 1);
     }
-  
-    animate();
+
+    requestAnimationFrame(animate);
   }
-  
+
+  animate();
+
+  return function stop() {
+    running = false;
+    window.removeEventListener('mousemove', onMouseMove);
+    window.removeEventListener('touchmove', onTouchMove);
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+  };
+}

package/src/animations/loveRain.js

@@ -0,0 +1,71 @@
+import { mergeOptions } from '../core/engine.js';
+
+const DEFAULTS = {
+  density: 0.15,       // probability of a new drop per frame
+  symbols: ['❤', '💕', '✨', '💖', '💗', '⭐', '×'],
+  minSize: 12,
+  maxSize: 28,
+  minSpeed: 1,
+  maxSpeed: 3.5,
+  colors: ['#ff6b8a', '#ff4d6d', '#ffc2d1', '#ff85a1', '#ff0a54', '#a2d2ff'],
+  opacity: 0.85,
+  glow: true,
+};
+
+export function loveRain(canvas, userOptions = {}) {
+  const opts = mergeOptions(DEFAULTS, userOptions);
+  const ctx = canvas.getContext('2d');
+  const drops = [];
+  let running = true;
+
+  function createDrop() {
+    const size = opts.minSize + Math.random() * (opts.maxSize - opts.minSize);
+    return {
+      x: Math.random() * canvas.width,
+      y: -size * 2,
+      size,
+      speed: opts.minSpeed + Math.random() * (opts.maxSpeed - opts.minSpeed),
+      symbol: opts.symbols[Math.floor(Math.random() * opts.symbols.length)],
+      color: opts.colors[Math.floor(Math.random() * opts.colors.length)],
+      alpha: 0.4 + Math.random() * 0.6,
+      angle: (Math.random() - 0.5) * 0.4,      // slight tilt
+      wobble: Math.random() * Math.PI * 2,
+      wobbleSpeed: 0.02 + Math.random() * 0.02,
+    };
+  }
+
+  function animate() {
+    if (!running) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    if (Math.random() < opts.density) drops.push(createDrop());
+
+    for (let i = drops.length - 1; i >= 0; i--) {
+      const d = drops[i];
+      d.y += d.speed;
+      d.wobble += d.wobbleSpeed;
+      const xOff = Math.sin(d.wobble) * d.size * 0.3;
+
+      ctx.save();
+      ctx.globalAlpha = d.alpha * opts.opacity;
+      ctx.font = `${d.size}px serif`;
+      ctx.fillStyle = d.color;
+      if (opts.glow) { ctx.shadowColor = d.color; ctx.shadowBlur = d.size * 0.8; }
+      ctx.translate(d.x + xOff, d.y);
+      ctx.rotate(d.angle);
+      ctx.fillText(d.symbol, 0, 0);
+      ctx.restore();
+
+      if (d.y > canvas.height + d.size * 2) drops.splice(i, 1);
+    }
+
+    requestAnimationFrame(animate);
+  }
+
+  animate();
+
+  return function stop() {
+    running = false;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+  };
+}

package/src/animations/magicDust.js

@@ -0,0 +1,87 @@
+import { mergeOptions } from '../core/engine.js';
+
+const DEFAULTS = {
+  particleCount: 150,
+  minSize: 1,
+  maxSize: 4,
+  colors: ['#ffd6ff', '#e7c6ff', '#c77dff', '#ffb3c1', '#ffffff'],
+  speed: 0.8,
+  glow: true,
+};
+
+export function magicDust(canvas, userOptions = {}) {
+  const opts = mergeOptions(DEFAULTS, userOptions);
+  const ctx = canvas.getContext('2d');
+  const dusts = [];
+  let running = true;
+  let time = 0;
+
+  function createDust() {
+    return {
+      x: Math.random() * canvas.width,
+      y: Math.random() * canvas.height,
+      size: opts.minSize + Math.random() * (opts.maxSize - opts.minSize),
+      color: opts.colors[Math.floor(Math.random() * opts.colors.length)],
+      angle: Math.random() * Math.PI * 2,
+      orbitRadius: 20 + Math.random() * 80,
+      orbitSpeed: (0.01 + Math.random() * 0.03) * (Math.random() > 0.5 ? 1 : -1),
+      centerX: Math.random() * canvas.width,
+      centerY: canvas.height + 50, // Start below and move up
+      upwardSpeed: opts.speed + Math.random() * 1.5,
+      alpha: 0,
+    };
+  }
+
+  for (let i = 0; i < opts.particleCount; i++) {
+    dusts.push(createDust());
+    // Scatter initial positions so they aren't all at the bottom
+    dusts[i].centerY = Math.random() * canvas.height;
+    dusts[i].alpha = Math.random();
+  }
+
+  function animate() {
+    if (!running) return;
+    time++;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    for (let i = 0; i < dusts.length; i++) {
+      const d = dusts[i];
+      d.angle += d.orbitSpeed;
+      d.centerY -= d.upwardSpeed;
+
+      // Swirling calculation
+      d.x = d.centerX + Math.cos(d.angle) * d.orbitRadius + Math.sin(time * 0.01 + d.angle) * 30;
+      d.y = d.centerY + Math.sin(d.angle) * (d.orbitRadius * 0.5);
+
+      if (d.alpha < 1 && d.centerY > 0) d.alpha += 0.01;
+
+      // Reset when they reach top
+      if (d.y < -50) {
+        Object.assign(d, createDust());
+        d.centerY = canvas.height + 50;
+        d.centerX = Math.random() * canvas.width;
+      }
+
+      ctx.save();
+      ctx.globalAlpha = d.alpha;
+      if (opts.glow) {
+        ctx.shadowColor = d.color;
+        ctx.shadowBlur = d.size * 3;
+      }
+      ctx.fillStyle = d.color;
+      ctx.beginPath();
+      ctx.arc(d.x, d.y, d.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);
+  };
+}

package/src/animations/shootingStars.js

@@ -0,0 +1,82 @@
+import { mergeOptions } from '../core/engine.js';
+
+const DEFAULTS = {
+  density: 0.02,
+  minSpeed: 10,
+  maxSpeed: 25,
+  colors: ['#ffffff', '#e7c6ff', '#48cae4', '#ffe66d'],
+  glow: true,
+};
+
+export function shootingStars(canvas, userOptions = {}) {
+  const opts = mergeOptions(DEFAULTS, userOptions);
+  const ctx = canvas.getContext('2d');
+  const stars = [];
+  let running = true;
+
+  function createStar() {
+    return {
+      x: Math.random() * canvas.width * 1.5,
+      y: -50,
+      length: 50 + Math.random() * 100,
+      thickness: 1 + Math.random() * 2,
+      speed: opts.minSpeed + Math.random() * (opts.maxSpeed - opts.minSpeed),
+      color: opts.colors[Math.floor(Math.random() * opts.colors.length)],
+      angle: (Math.PI / 4) + (Math.random() * 0.2 - 0.1), // Roughly 45 degrees
+      opacity: 1,
+    };
+  }
+
+  function animate() {
+    if (!running) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    if (Math.random() < opts.density) {
+      stars.push(createStar());
+    }
+
+    for (let i = stars.length - 1; i >= 0; i--) {
+      const s = stars[i];
+      const vx = -Math.cos(s.angle) * s.speed;
+      const vy = Math.sin(s.angle) * s.speed;
+      
+      s.x += vx;
+      s.y += vy;
+      s.opacity -= 0.01;
+
+      ctx.save();
+      ctx.globalAlpha = Math.max(0, s.opacity);
+      if (opts.glow) {
+        ctx.shadowColor = s.color;
+        ctx.shadowBlur = s.thickness * 4;
+      }
+      
+      const grad = ctx.createLinearGradient(s.x, s.y, s.x - vx * (s.length / s.speed), s.y - vy * (s.length / s.speed));
+      grad.addColorStop(0, s.color);
+      grad.addColorStop(1, 'rgba(255,255,255,0)');
+      
+      ctx.strokeStyle = grad;
+      ctx.lineWidth = s.thickness;
+      ctx.lineCap = 'round';
+      
+      ctx.beginPath();
+      ctx.moveTo(s.x, s.y);
+      ctx.lineTo(s.x - vx * (s.length / s.speed), s.y - vy * (s.length / s.speed));
+      ctx.stroke();
+      ctx.restore();
+
+      if (s.opacity <= 0 || s.x < -100 || s.y > canvas.height + 100) {
+        stars.splice(i, 1);
+      }
+    }
+
+    requestAnimationFrame(animate);
+  }
+
+  animate();
+
+  return function stop() {
+    running = false;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+  };
+}

package/src/animations/sparkles.js

@@ -0,0 +1,93 @@
+import { mergeOptions } from '../core/engine.js';
+
+const DEFAULTS = {
+  count: 80,           // number of sparkles alive at once
+  minSize: 2,
+  maxSize: 6,
+  speed: 0.5,
+  twinkleSpeed: 0.04,
+  colors: ['#fff', '#ffe4e8', '#ffb3c1', '#ff85a1', '#ffd6ff', '#e7c6ff'],
+  glow: true,
+};
+
+export function sparkles(canvas, userOptions = {}) {
+  const opts = mergeOptions(DEFAULTS, userOptions);
+  const ctx = canvas.getContext('2d');
+  const stars = [];
+  let running = true;
+
+  function createStar() {
+    return {
+      x: Math.random() * canvas.width,
+      y: Math.random() * canvas.height,
+      size: opts.minSize + Math.random() * (opts.maxSize - opts.minSize),
+      alpha: Math.random(),
+      alphaDir: Math.random() > 0.5 ? 1 : -1,
+      twinkleSpeed: opts.twinkleSpeed * (0.5 + Math.random()),
+      color: opts.colors[Math.floor(Math.random() * opts.colors.length)],
+      vx: (Math.random() - 0.5) * opts.speed,
+      vy: (Math.random() - 0.5) * opts.speed,
+    };
+  }
+
+  // Populate initial stars
+  for (let i = 0; i < opts.count; i++) stars.push(createStar());
+
+  function drawStar(s) {
+    ctx.save();
+    ctx.globalAlpha = Math.max(0, Math.min(1, s.alpha));
+    if (opts.glow) { ctx.shadowColor = s.color; ctx.shadowBlur = s.size * 3; }
+    ctx.fillStyle = s.color;
+
+    // Cross / sparkle shape
+    const r = s.size;
+    ctx.beginPath();
+    for (let i = 0; i < 4; i++) {
+      const a = (i * Math.PI) / 2;
+      ctx.ellipse(
+        s.x + Math.cos(a) * r * 0.35,
+        s.y + Math.sin(a) * r * 0.35,
+        r * 0.15, r * 0.7, a, 0, Math.PI * 2
+      );
+    }
+    ctx.fill();
+
+    // Tiny centre dot
+    ctx.beginPath();
+    ctx.arc(s.x, s.y, r * 0.2, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.restore();
+  }
+
+  function animate() {
+    if (!running) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    for (let i = 0; i < stars.length; i++) {
+      const s = stars[i];
+      s.x += s.vx;
+      s.y += s.vy;
+      s.alpha += s.alphaDir * s.twinkleSpeed;
+
+      if (s.alpha >= 1) { s.alpha = 1; s.alphaDir = -1; }
+      else if (s.alpha <= 0) { s.alpha = 0; s.alphaDir = 1; }
+
+      // Wrap edges
+      if (s.x < -10) s.x = canvas.width + 10;
+      if (s.x > canvas.width + 10) s.x = -10;
+      if (s.y < -10) s.y = canvas.height + 10;
+      if (s.y > canvas.height + 10) s.y = -10;
+
+      drawStar(s);
+    }
+
+    requestAnimationFrame(animate);
+  }
+
+  animate();
+
+  return function stop() {
+    running = false;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+  };
+}

package/src/animations/starField.js

@@ -0,0 +1,100 @@
+import { mergeOptions } from '../core/engine.js';
+
+const DEFAULTS = {
+  starCount: 120,
+  speed: 0.4,
+  colors: ['#ffffff', '#ffe4e8', '#ffc2d1', '#e7c6ff', '#a2d2ff'],
+  minSize: 1,
+  maxSize: 3.5,
+  twinkle: true,
+  connectDist: 100,     // draw faint lines between close stars
+  connectOpacity: 0.08,
+};
+
+export function starField(canvas, userOptions = {}) {
+  const opts = mergeOptions(DEFAULTS, userOptions);
+  const ctx = canvas.getContext('2d');
+  const stars = [];
+  let running = true;
+
+  function createStar(randomY = false) {
+    return {
+      x: Math.random() * canvas.width,
+      y: randomY ? Math.random() * canvas.height : Math.random() * canvas.height,
+      size: opts.minSize + Math.random() * (opts.maxSize - opts.minSize),
+      alpha: 0.3 + Math.random() * 0.7,
+      alphaDir: Math.random() > 0.5 ? 1 : -1,
+      twinkleSpeed: 0.008 + Math.random() * 0.015,
+      vx: (Math.random() - 0.5) * opts.speed,
+      vy: (Math.random() - 0.5) * opts.speed,
+      color: opts.colors[Math.floor(Math.random() * opts.colors.length)],
+    };
+  }
+
+  for (let i = 0; i < opts.starCount; i++) stars.push(createStar(true));
+
+  function animate() {
+    if (!running) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    // Draw connections
+    if (opts.connectDist > 0) {
+      for (let i = 0; i < stars.length; i++) {
+        for (let j = i + 1; j < stars.length; j++) {
+          const dx = stars[i].x - stars[j].x;
+          const dy = stars[i].y - stars[j].y;
+          const dist = Math.sqrt(dx * dx + dy * dy);
+          if (dist < opts.connectDist) {
+            ctx.save();
+            ctx.globalAlpha = opts.connectOpacity * (1 - dist / opts.connectDist);
+            ctx.strokeStyle = '#ffffff';
+            ctx.lineWidth = 0.5;
+            ctx.beginPath();
+            ctx.moveTo(stars[i].x, stars[i].y);
+            ctx.lineTo(stars[j].x, stars[j].y);
+            ctx.stroke();
+            ctx.restore();
+          }
+        }
+      }
+    }
+
+    // Draw stars
+    for (let i = 0; i < stars.length; i++) {
+      const s = stars[i];
+      s.x += s.vx;
+      s.y += s.vy;
+
+      if (opts.twinkle) {
+        s.alpha += s.alphaDir * s.twinkleSpeed;
+        if (s.alpha >= 1) { s.alpha = 1; s.alphaDir = -1; }
+        if (s.alpha <= 0.1) { s.alpha = 0.1; s.alphaDir = 1; }
+      }
+
+      // Wrap
+      if (s.x < -5) s.x = canvas.width + 5;
+      if (s.x > canvas.width + 5) s.x = -5;
+      if (s.y < -5) s.y = canvas.height + 5;
+      if (s.y > canvas.height + 5) s.y = -5;
+
+      ctx.save();
+      ctx.globalAlpha = s.alpha;
+      ctx.shadowColor = s.color;
+      ctx.shadowBlur = s.size * 3;
+      ctx.fillStyle = s.color;
+      ctx.beginPath();
+      ctx.arc(s.x, s.y, s.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);
+  };
+}

package/src/core/engine.js

@@ -1,13 +1,77 @@
-export function initCanvas(containerId) {
-    const container = document.getElementById(containerId);
-    const canvas = document.createElement('canvas');
-    canvas.width = container.offsetWidth;
-    canvas.height = container.offsetHeight;
-    canvas.style.position = 'absolute';
-    canvas.style.top = 0;
-    canvas.style.left = 0;
-    canvas.style.pointerEvents = 'none';
-    container.appendChild(canvas);
-    return canvas;
+/**
+ * romantic-animations — core engine
+ * Handles canvas creation, sizing, resize observation, and cleanup.
+ */
+
+const DEFAULT_OPTIONS = {
+  zIndex: 0,
+};
+
+/**
+ * Initialises a canvas inside the given container element.
+ *
+ * @param {string|HTMLElement} containerIdOrEl  – element id OR element reference
+ * @param {object}             userOptions      – optional overrides
+ * @returns {{ canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D,
+ *             options: object, destroy: Function }}
+ */
+export function initCanvas(containerIdOrEl, userOptions = {}) {
+  const options = Object.assign({}, DEFAULT_OPTIONS, userOptions);
+
+  const container =
+    typeof containerIdOrEl === 'string'
+      ? document.getElementById(containerIdOrEl)
+      : containerIdOrEl;
+
+  if (!container) {
+    throw new Error(
+      `[romantic-animations] Container "${containerIdOrEl}" not found in the DOM.`
+    );
   }
-  
+
+  // Remove any pre-existing canvas we created (clean slate when re-triggering)
+  const old = container.querySelector('canvas[data-ra]');
+  if (old) old.remove();
+
+  const canvas = document.createElement('canvas');
+  canvas.setAttribute('data-ra', '1');
+  canvas.style.cssText = `
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    pointer-events: none;
+    z-index: ${options.zIndex};
+  `;
+
+  const resize = () => {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+  };
+  resize();
+
+  container.style.position = container.style.position || 'relative';
+  container.appendChild(canvas);
+
+  // Keep canvas sized to container
+  const ro = new ResizeObserver(resize);
+  ro.observe(container);
+
+  const ctx = canvas.getContext('2d');
+
+  /** Tear-down helper – call the returned destroy() to stop & clean up */
+  function destroy() {
+    ro.disconnect();
+    canvas.remove();
+  }
+
+  return { canvas, ctx, options, destroy };
+}
+
+/**
+ * Merge user options with animation-specific defaults.
+ */
+export function mergeOptions(defaults, userOptions = {}) {
+  return Object.assign({}, defaults, userOptions);
+}