@sarthak03dot/romantic-animations 1.2.0 → 1.2.3

package/src/animations/sparkles.js

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

@@ -1,100 +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);
-  };
-}
+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,77 +1,77 @@
-/**
- * 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);
-}
+/**
+ * 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);
+}