@sarthak03dot/romantic-animations 1.2.0 → 1.2.3

package/src/animations/floatingHearts.js

@@ -1,89 +1,89 @@
-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);
-  };
-}
+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 +1,76 @@
-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);
-  };
-}
+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);
+  };
+}

package/src/animations/heartBurst.js

@@ -1,113 +1,113 @@
-import { mergeOptions } from '../core/engine.js';
-
-const DEFAULTS = {
-  count: 20,          // hearts per burst
-  minSize: 8,
-  maxSize: 20,
-  minSpeed: 2,
-  maxSpeed: 7,
-  gravity: 0.08,
-  decay: 0.018,
-  colors: ['#ff0a54', '#ff477e', '#ff7096', '#ff85a1', '#fbb1bd', '#ff4d6d'],
-  glow: true,
-  symbols: ['heart'], // 'heart' | 'star' | 'sparkle'
-};
-
-function drawSymbol(ctx, type, 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;
-
-  if (type === 'star') {
-    // 5-point star
-    ctx.beginPath();
-    for (let i = 0; i < 5; i++) {
-      const outer = (Math.PI / 2) + (i * 2 * Math.PI) / 5;
-      const inner = outer + Math.PI / 5;
-      if (i === 0) ctx.moveTo(cx + r * Math.cos(outer), cy - r * Math.sin(outer));
-      else ctx.lineTo(cx + r * Math.cos(outer), cy - r * Math.sin(outer));
-      ctx.lineTo(cx + (r * 0.4) * Math.cos(inner), cy - (r * 0.4) * Math.sin(inner));
-    }
-    ctx.closePath();
-    ctx.fill();
-  } else if (type === 'sparkle') {
-    // 4-point sparkle
-    for (let i = 0; i < 4; i++) {
-      const a = (i * Math.PI) / 2;
-      ctx.beginPath();
-      ctx.ellipse(cx + Math.cos(a) * r * 0.5, cy + Math.sin(a) * r * 0.5, r * 0.18, r * 0.7, a, 0, Math.PI * 2);
-      ctx.fill();
-    }
-  } else {
-    // heart
-    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 heartBurst(canvas, userOptions = {}) {
-  const opts = mergeOptions(DEFAULTS, userOptions);
-  const ctx = canvas.getContext('2d');
-  const particles = [];
-  let running = true;
-
-  function spawnBurst(x, y) {
-    for (let i = 0; i < opts.count; i++) {
-      const angle = Math.random() * Math.PI * 2;
-      const speed = opts.minSpeed + Math.random() * (opts.maxSpeed - opts.minSpeed);
-      particles.push({
-        x, y,
-        size: opts.minSize + Math.random() * (opts.maxSize - opts.minSize),
-        vx: Math.cos(angle) * speed,
-        vy: Math.sin(angle) * speed,
-        alpha: 1,
-        decay: opts.decay * (0.8 + Math.random() * 0.4),
-        color: opts.colors[Math.floor(Math.random() * opts.colors.length)],
-        symbol: opts.symbols[Math.floor(Math.random() * opts.symbols.length)],
-      });
-    }
-  }
-
-  const onClick = (e) => {
-    const rect = canvas.getBoundingClientRect();
-    spawnBurst(e.clientX - rect.left, e.clientY - rect.top);
-  };
-  const onTouch = (e) => {
-    const rect = canvas.getBoundingClientRect();
-    Array.from(e.changedTouches).forEach((t) => spawnBurst(t.clientX - rect.left, t.clientY - rect.top));
-  };
-
-  window.addEventListener('click', onClick);
-  window.addEventListener('touchend', onTouch, { passive: true });
-
-  function animate() {
-    if (!running) return;
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-    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;     // gravity
-      p.alpha -= p.decay;
-      drawSymbol(ctx, p.symbol, p.x, p.y, p.size, p.color, p.alpha, opts.glow);
-      if (p.alpha <= 0) particles.splice(i, 1);
-    }
-
-    requestAnimationFrame(animate);
-  }
-
-  animate();
-
-  return function stop() {
-    running = false;
-    window.removeEventListener('click', onClick);
-    window.removeEventListener('touchend', onTouch);
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-  };
-}
+import { mergeOptions } from '../core/engine.js';
+
+const DEFAULTS = {
+  count: 20,          // hearts per burst
+  minSize: 8,
+  maxSize: 20,
+  minSpeed: 2,
+  maxSpeed: 7,
+  gravity: 0.08,
+  decay: 0.018,
+  colors: ['#ff0a54', '#ff477e', '#ff7096', '#ff85a1', '#fbb1bd', '#ff4d6d'],
+  glow: true,
+  symbols: ['heart'], // 'heart' | 'star' | 'sparkle'
+};
+
+function drawSymbol(ctx, type, 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;
+
+  if (type === 'star') {
+    // 5-point star
+    ctx.beginPath();
+    for (let i = 0; i < 5; i++) {
+      const outer = (Math.PI / 2) + (i * 2 * Math.PI) / 5;
+      const inner = outer + Math.PI / 5;
+      if (i === 0) ctx.moveTo(cx + r * Math.cos(outer), cy - r * Math.sin(outer));
+      else ctx.lineTo(cx + r * Math.cos(outer), cy - r * Math.sin(outer));
+      ctx.lineTo(cx + (r * 0.4) * Math.cos(inner), cy - (r * 0.4) * Math.sin(inner));
+    }
+    ctx.closePath();
+    ctx.fill();
+  } else if (type === 'sparkle') {
+    // 4-point sparkle
+    for (let i = 0; i < 4; i++) {
+      const a = (i * Math.PI) / 2;
+      ctx.beginPath();
+      ctx.ellipse(cx + Math.cos(a) * r * 0.5, cy + Math.sin(a) * r * 0.5, r * 0.18, r * 0.7, a, 0, Math.PI * 2);
+      ctx.fill();
+    }
+  } else {
+    // heart
+    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 heartBurst(canvas, userOptions = {}) {
+  const opts = mergeOptions(DEFAULTS, userOptions);
+  const ctx = canvas.getContext('2d');
+  const particles = [];
+  let running = true;
+
+  function spawnBurst(x, y) {
+    for (let i = 0; i < opts.count; i++) {
+      const angle = Math.random() * Math.PI * 2;
+      const speed = opts.minSpeed + Math.random() * (opts.maxSpeed - opts.minSpeed);
+      particles.push({
+        x, y,
+        size: opts.minSize + Math.random() * (opts.maxSize - opts.minSize),
+        vx: Math.cos(angle) * speed,
+        vy: Math.sin(angle) * speed,
+        alpha: 1,
+        decay: opts.decay * (0.8 + Math.random() * 0.4),
+        color: opts.colors[Math.floor(Math.random() * opts.colors.length)],
+        symbol: opts.symbols[Math.floor(Math.random() * opts.symbols.length)],
+      });
+    }
+  }
+
+  const onClick = (e) => {
+    const rect = canvas.getBoundingClientRect();
+    spawnBurst(e.clientX - rect.left, e.clientY - rect.top);
+  };
+  const onTouch = (e) => {
+    const rect = canvas.getBoundingClientRect();
+    Array.from(e.changedTouches).forEach((t) => spawnBurst(t.clientX - rect.left, t.clientY - rect.top));
+  };
+
+  window.addEventListener('click', onClick);
+  window.addEventListener('touchend', onTouch, { passive: true });
+
+  function animate() {
+    if (!running) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    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;     // gravity
+      p.alpha -= p.decay;
+      drawSymbol(ctx, p.symbol, p.x, p.y, p.size, p.color, p.alpha, opts.glow);
+      if (p.alpha <= 0) particles.splice(i, 1);
+    }
+
+    requestAnimationFrame(animate);
+  }
+
+  animate();
+
+  return function stop() {
+    running = false;
+    window.removeEventListener('click', onClick);
+    window.removeEventListener('touchend', onTouch);
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+  };
+}