@luay_abbas/magic-text 1.0.0

package/README.md

@@ -0,0 +1,101 @@
+# ✨ Magic Text Canvas
+
+**Magic Text Canvas** is a lightweight npm library for rendering animated, interactive particle-based text using the HTML5 canvas.  
+It supports mouse and touch interactions, gradients, multiple animation start modes, and mobile-optimized behavior.
+
+Ideal for landing pages, hero sections, and playful UI elements.
+
+---
+
+## 📦 Installation
+
+Install the package via npm:
+
+```bash
+npm install magic-text-canvas
+````
+```bash
+yarn add magic-text-canvas
+```
+
+## 🚀 Usage
+Import
+import { initializeText } from "magic-text-canvas";
+
+### HTML
+
+Create a container element where the canvas will be injected:
+
+<div class="text-con"></div>
+
+### JS
+initializeText({
+  textContainerClass: "text-con",
+  text: "Magic Text",
+  fontSize: 100,
+  fontSizeMobile: 30,
+  textColor: "#ffffff",
+  bgColor: "#000000",
+  effectColorApplied: true,
+  effectColor: "#ff0000",
+  effectRadius: 85,
+  duration: 0.03,
+  gradient: false,
+  colorOne: "#ff0000",
+  colorTwo: "#00ff00",
+  colorThree: "#0000ff",
+  startMode: "auto",
+});
+
+### ## 🔧 Configuration Options
+
+| Option | Type | Required | Notes |
+|------|------|----------|-------|
+| `textContainerClass` | `string` | ✅ Yes | Must match an existing DOM element |
+| `text` | `string` | ❌ No | Defaults to `"Magic Text"` |
+| `fontSize` | `number` | ✅ Yes | Required for proper font rendering |
+| `fontSizeMobile` | `number` | ✅ Yes | Required for mobile rendering |
+| `textColor` | `string` | ⚠️ Conditional | Defaults to `#000000` |
+| `bgColor` | `string` | ❌ No | Defaults to `#ffffff` |
+| `effectColorApplied` | `boolean` | ⚠️ Recommended | Enables hover color effect |
+| `effectColor` | `string` | ⚠️ Conditional | Required when `effectColorApplied === true` |
+| `effectRadius` | `number` | ❌ No | Defaults to `80` (mobile capped at `100`) |
+| `duration` | `number` | ❌ No | Defaults internally to `0.05` |
+| `gradient` | `boolean` | ⚠️ Recommended | Enables gradient text |
+| `colorOne` | `string` | ⚠️ Conditional | Required when `gradient === true` |
+| `colorTwo` | `string` | ⚠️ Conditional | Required when `gradient === true` |
+| `colorThree` | `string` | ⚠️ Conditional | Required when `gradient === true` |
+| `startMode` | `string` | ❌ No | Defaults to `random` |
+
+
+### 🎬 Start Modes
+
+- random – particles spawn at random positions
+
+- left – particles animate in from the left
+
+- center – particles animate from the center
+
+- bottom – particles animate from below
+
+### 🧹 Cleanup
+
+To remove the canvas, animation loop, and event listeners:
+
+const magicText = initializeText({ ... });
+
+// later
+magicText.destroy();
+
+
+### 📱 Mobile Support
+
+- Touch events supported
+
+- Optimized interaction radius for performance
+
+- Separate mobile font size configuration
+
+### 📄 License
+
+MIT License

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@luay_abbas/magic-text",
+  "version": "1.0.0",
+  "description": "An interactive particle-based text animation library using HTML5 Canvas.",
+  "main": "src/index.js",
+  "files": [
+    "dist/",
+    "src/",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "webpack --mode production",
+    "build:dev": "webpack --mode development"
+  },
+  "keywords": [
+    "magic-text",
+    "canvas",
+    "particle-text",
+    "text-animation",
+    "javascript",
+    "interactive",
+    "hover-effect"
+  ],
+  "author": "Luay Abbas",
+  "license": "MIT",
+  "sideEffects": false
+}

package/src/index.js

@@ -0,0 +1,250 @@
+// Initialize Magic Text
+function initializeText({
+  textContainerClass,
+  text,
+  fontSize,
+  fontSizeMobile,
+  textColor,
+  bgColor,
+  effectColorApplied,
+  effectColor,
+  effectRadius,
+  duration,
+  gradient,
+  colorOne,
+  colorTwo,
+  colorThree,
+  startMode,
+}) {
+  // App values
+  const gap = 1;
+  let animationId;
+  let destroyed = false;
+  const particles = [];
+  const mouse = {
+    x: null,
+    y: null,
+    radius: effectRadius,
+  };
+  // Check device
+  if (typeof window === "undefined") return;
+  const isMobile =
+    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+      navigator.userAgent,
+    );
+
+  const textContainer = document.querySelector(`.${textContainerClass}`);
+  if (!textContainer) {
+    console.error(`No element found with class name "${textContainerClass}".`);
+    return;
+  }
+  textContainer.classList.add("magic-text-container");
+  const canvas = document.createElement("canvas");
+  canvas.classList.add("magic-text-canvas");
+  textContainer.appendChild(canvas);
+  const ctx = canvas.getContext("2d");
+  canvas.width = textContainer.clientWidth;
+  canvas.height = textContainer.clientHeight;
+  const canvasWidth = canvas.width;
+  const canvasHeight = canvas.height;
+  canvas.style.backgroundColor = bgColor || "#ffffff";
+
+  // Create particles from text
+  class Particle {
+    constructor(ctx, x, y, color, startMode) {
+      this.ctx = ctx;
+      this.originX = x;
+      this.originY = y;
+      const start = getStartPosition(startMode, x, y);
+      this.x = start.x;
+      this.y = start.y;
+
+      this.color = color;
+      this.baseColor = color;
+      this.secondColor = effectColor || "#0088ff";
+      this.size = gap;
+      this.ease = Math.random() * 0.1 + (duration || 0.05);
+      this.pushX = 0;
+      this.pushY = 0;
+      this.friction = 0.9;
+    }
+
+    update() {
+      let isHovering = false;
+      if (mouse.x !== null) {
+        const dx = this.x - mouse.x;
+        const dy = this.y - mouse.y;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        if (distance < mouse.radius) {
+          isHovering = true;
+          const force = (mouse.radius - distance) / mouse.radius;
+          const angle = Math.atan2(dy, dx);
+          this.pushX += Math.cos(angle) * force * 7 * this.ease * 5;
+          this.pushY += Math.sin(angle) * force * 7 * this.ease * 5;
+          if (
+            effectColorApplied &&
+            effectColor &&
+            this.originX > mouse.x &&
+            this.originY > mouse.y
+          ) {
+            this.color = this.secondColor;
+          }
+        }
+      }
+
+      if (!isHovering) {
+        this.color = this.baseColor;
+      }
+      // Apply push force
+      this.pushX *= this.friction;
+      this.pushY *= this.friction;
+
+      this.x += this.pushX;
+      this.y += this.pushY;
+
+      // Ease back to original text position
+      this.x += (this.originX - this.x) * this.ease;
+      this.y += (this.originY - this.y) * this.ease;
+    }
+
+    draw() {
+      this.ctx.fillStyle = this.color;
+      this.ctx.fillRect(this.x, this.y, this.size, this.size);
+    }
+  }
+  // Draw Text on Canvas
+  function drawText() {
+    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+    const fontFamily = "Arial Black, sans-serif";
+    const activeFontSize = isMobile ? fontSizeMobile : fontSize;
+    ctx.font = `italic bold ${activeFontSize}px ${fontFamily}`;
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    if (gradient && colorOne && colorTwo && colorThree) {
+      const grad = ctx.createLinearGradient(0, 0, canvasWidth, canvasHeight);
+      grad.addColorStop(0.3, colorOne);
+      grad.addColorStop(0.5, colorTwo);
+      grad.addColorStop(0.8, colorThree);
+      ctx.fillStyle = grad;
+    } else {
+      ctx.fillStyle = textColor || "#000000";
+    }
+    ctx.fillText(text || "Magic Text", canvasWidth / 2, canvasHeight / 2);
+  }
+  function createParticlesFromText() {
+    mouse.radius = effectRadius || 80;
+    if (isMobile && mouse.radius > 100) {
+      mouse.radius = 100;
+    }
+    particles.length = 0;
+    startMode = startMode || "random";
+    drawText();
+    const imageData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
+    const pixels = imageData.data;
+    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+    for (let y = 0; y < canvasHeight; y += gap) {
+      for (let x = 0; x < canvasWidth; x += gap) {
+        const index = (y * canvasWidth + x) * 4;
+        const alpha = pixels[index + 3];
+        if (alpha > 0) {
+          const r = pixels[index];
+          const g = pixels[index + 1];
+          const b = pixels[index + 2];
+          const color = `rgb(${r}, ${g}, ${b})`;
+          particles.push(new Particle(ctx, x, y, color, startMode));
+        }
+      }
+    }
+  }
+  // Animate
+  function animate() {
+    if (destroyed) return;
+    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+    particles.forEach((particle) => {
+      particle.update();
+      particle.draw();
+    });
+
+    animationId = requestAnimationFrame(animate);
+  }
+  // Modes
+  function getStartPosition(mode, originX, originY) {
+    switch (mode) {
+      case "center":
+        return {
+          x: canvasWidth / 2,
+          y: canvasHeight / 2,
+        };
+      case "bottom":
+        return {
+          x: originX,
+          y: canvasHeight + 20,
+        };
+
+      case "left":
+        return {
+          x: -20,
+          y: originY,
+        };
+
+      case "random":
+      default:
+        return {
+          x: Math.random() * canvasWidth,
+          y: Math.random() * canvasHeight,
+        };
+    }
+  }
+  // Mouse events
+  function onMouseMove(e) {
+    const rect = canvas.getBoundingClientRect();
+    mouse.x = e.clientX - rect.left;
+    mouse.y = e.clientY - rect.top;
+  }
+  function onMouseLeave() {
+    mouse.x = null;
+    mouse.y = null;
+  }
+  function onTouchStart(e) {
+    const rect = canvas.getBoundingClientRect();
+    const touch = e.touches[0];
+    mouse.x = touch.clientX - rect.left;
+    mouse.y = touch.clientY - rect.top;
+  }
+  function onTouchMove(e) {
+    const rect = canvas.getBoundingClientRect();
+    const touch = e.touches[0];
+    mouse.x = touch.clientX - rect.left;
+    mouse.y = touch.clientY - rect.top;
+  }
+  function onTouchEnd() {
+    mouse.x = null;
+    mouse.y = null;
+  }
+
+  canvas.addEventListener("mousemove", onMouseMove);
+  canvas.addEventListener("mouseleave", onMouseLeave);
+  canvas.addEventListener("touchstart", onTouchStart, { passive: true });
+  canvas.addEventListener("touchmove", onTouchMove, { passive: true });
+  canvas.addEventListener("touchend", onTouchEnd);
+  // Cleanup function
+  function destroy() {
+    if (destroyed) return;
+    destroyed = true;
+    cancelAnimationFrame(animationId);
+
+    canvas.removeEventListener("mousemove", onMouseMove);
+    canvas.removeEventListener("mouseleave", onMouseLeave);
+    canvas.removeEventListener("touchstart", onTouchStart);
+    canvas.removeEventListener("touchmove", onTouchMove);
+    canvas.removeEventListener("touchend", onTouchEnd);
+
+    canvas.remove();
+    particles.length = 0;
+  }
+  // Initial Setup
+  createParticlesFromText();
+  animate();
+  return { destroy };
+}
+export { initializeText };