@sarthak03dot/romantic-animations 1.0.2

package/README.md

@@ -0,0 +1,40 @@
+# romantic-animations 💖
+
+A beautiful JavaScript library for romantic particle effects such as floating hearts, heart trails, love bursts, and more. Perfect for Valentine's Day, wedding websites, or any love-themed project.
+
+## ✨ Features
+- ❤️ Floating hearts animation
+- 💘 Easy to integrate
+- 📦 Zero dependencies
+- ⚙️ Fully customizable (soon)
+
+## 📦 Installation
+```bash
+npm install romantic-animations
+```
+
+## 🚀 Usage
+```html
+<div id="animation-container"></div>
+<script type="module">
+  import { startFloatingHearts } from 'romantic-animations';
+  startFloatingHearts("animation-container");
+</script>
+```
+
+## 📁 File Structure
+- `src/` – core engine and animation modules
+- `demo/` – live preview setup using Vite
+- `package.json` – npm config
+
+## 🔮 Upcoming
+- 💫 Cursor heart trails
+- 🎉 Love confetti bursts
+- 🌈 Color customization
+- 🎨 Preset themes
+
+## 🧑‍💻 Author
+Made with ❤️ by **Sarthak Singh**
+
+## 📄 License
+MIT

package/gitignore

@@ -0,0 +1,23 @@
+# Ignore build output
+dist/
+node_modules/
+demo
+
+# Ignore Vite preview folder
+.vite/
+
+# Ignore logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Ignore environment files
+.env
+.env.*
+
+# Ignore IDE/editor files
+.vscode/
+.idea/
+
+# Ignore demo files (optional for npm publish)
+demo/

package/package.json

@@ -0,0 +1,30 @@
+{
+"name": "@sarthak03dot/romantic-animations",
+  "version": "1.0.2",
+  "description": "Romantic animations like hearts, sparkles, trails",
+  "homepage": "https://github.com/sarthak03dot/romantic-animations#readme",
+  "bugs": {
+    "url": "https://github.com/sarthak03dot/romantic-animations/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sarthak03dot/romantic-animations.git"
+  },
+  "license": "ISC",
+  "keywords": [
+    "romantic",
+    "heart",
+    "animation",
+    "canvas"
+  ],
+  "author": "Sarthak Singh",
+  "type": "commonjs",
+  "main": "vite.config.js",
+  "scripts": {
+    "start": "vite",
+    "build": "vite build"
+  },
+  "devDependencies": {
+    "vite": "^7.0.2"
+  }
+}

package/src/animations/floatingHearts.js

@@ -0,0 +1,35 @@
+export function floatingHearts(canvas) {
+    const ctx = canvas.getContext("2d");
+    const hearts = [];
+  
+    function createHeart() {
+      return {
+        x: Math.random() * canvas.width,
+        y: canvas.height + 20,
+        size: 20 + Math.random() * 10,
+        speed: 1 + Math.random() * 2,
+      };
+    }
+  
+    function drawHeart(h) {
+      ctx.fillStyle = "pink";
+      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();
+    }
+  
+    function animate() {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      if (Math.random() < 0.1) hearts.push(createHeart());
+      for (let i = 0; i < hearts.length; i++) {
+        hearts[i].y -= hearts[i].speed;
+        drawHeart(hearts[i]);
+      }
+      requestAnimationFrame(animate);
+    }
+  
+    animate();
+  }
+  

package/src/animations/heartBurst.js

@@ -0,0 +1,56 @@
+export function heartBurst(canvas) {
+    const ctx = canvas.getContext("2d");
+    const bursts = [];
+  
+    function createHeart(x, y) {
+      const angle = Math.random() * Math.PI * 2;
+      const speed = 2 + Math.random() * 3;
+      return {
+        x,
+        y,
+        size: 10 + Math.random() * 5,
+        vx: Math.cos(angle) * speed,
+        vy: Math.sin(angle) * speed,
+        alpha: 1,
+        decay: 0.02
+      };
+    }
+  
+    function drawHeart(h) {
+      ctx.fillStyle = `rgba(255, 20, 147, ${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("click", (e) => {
+      const rect = canvas.getBoundingClientRect();
+      const burst = [];
+      for (let i = 0; i < 20; i++) {
+        burst.push(createHeart(e.clientX - rect.left, e.clientY - rect.top));
+      }
+      bursts.push(burst);
+    });
+  
+    function animate() {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      for (let b = bursts.length - 1; b >= 0; b--) {
+        const burst = bursts[b];
+        for (let i = burst.length - 1; i >= 0; i--) {
+          const h = burst[i];
+          h.x += h.vx;
+          h.y += h.vy;
+          h.alpha -= h.decay;
+          drawHeart(h);
+          if (h.alpha <= 0) burst.splice(i, 1);
+        }
+        if (burst.length === 0) bursts.splice(b, 1);
+      }
+      requestAnimationFrame(animate);
+    }
+  
+    animate();
+  }
+  

package/src/animations/heartTrail.js

@@ -0,0 +1,41 @@
+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));
+    });
+  
+    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);
+    }
+  
+    animate();
+  }
+  

package/src/core/engine.js

@@ -0,0 +1,13 @@
+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;
+  }
+  

package/src/index.js

@@ -0,0 +1,19 @@
+import { initCanvas } from "./core/engine.js";
+import { floatingHearts } from "./animations/floatingHearts.js";
+import { heartTrail } from "./animations/heartTrail.js";
+import { heartBurst } from "./animations/heartBurst.js";
+
+export function startFloatingHearts(containerId = 'body') {
+  const canvas = initCanvas(containerId);
+  floatingHearts(canvas);
+}
+
+export function startHeartTrail(containerId = 'body') {
+  const canvas = initCanvas(containerId);
+  heartTrail(canvas);
+}
+
+export function startHeartBurst(containerId = 'body') {
+  const canvas = initCanvas(containerId);
+  heartBurst(canvas);
+}

package/vite.config.js

@@ -0,0 +1,13 @@
+// vite.config.js
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  root: 'demo',              // 👈 sets 'demo' as root
+  build: {
+    outDir: '../dist',
+    emptyOutDir: true,
+  },
+  server: {
+    open: true
+  }
+});