animate-preloader-pro 1.0.0

package/README.md

@@ -0,0 +1,116 @@
+
+# animatePage.js 🎭
+
+A high-performance, lightweight typography preloader library. **animatePage.js** transforms standard loading screens into cinematic experiences by splitting text into individual characters and applying GPU-accelerated morphing animations.
+
+---
+
+## ✨ Features
+
+* **7 Cinematic Animations:** Choose between `morph`, `wave`, `flip`, `glitch`, `blur`, `reveal`, and `pulse`.
+* **Zero Dependencies:** 100% Vanilla JavaScript.
+* **Staggered Letter Logic:** Automatic character-level DOM manipulation for fluid motion.
+* **Fully Customizable:** Control colors, speeds, fonts, and sizes via a simple API.
+* **High Performance:** Optimized with CSS `will-change` and `transform` for 60FPS smoothness.
+
+---
+
+## 🚀 Installation
+
+### 1. Manual Download
+Download `animatePage.js` and include it in your project directory.
+
+### 2. NPM (If published)
+```bash
+npm install animate-preloader-pro
+
+```
+
+---
+
+## 🛠 Usage
+
+Since this is an ES6 Module, ensure your script tag uses `type="module"`.
+
+### 1. Basic Implementation
+
+```javascript
+import animatePage from './animatePage.js';
+
+// 1. Initialize settings
+animatePage.init({
+    bg: '#0a0a0a',     // Background Color
+    fg: '#00ffcc',     // Text Color
+    size: '5rem',      // Font Size (px, rem, vw)
+    font: 'sans-serif' // Font Family
+});
+
+// 2. Start the animation
+// animatePage.on(text, animationStyle)
+animatePage.on("LOADING", "morph");
+
+// 3. Stop the animation
+setTimeout(() => {
+    animatePage.off();
+}, 3000);
+
+```
+
+---
+
+## 🎨 Animation Styles
+
+| Style | Effect Description |
+| --- | --- |
+| `morph` | **(Default)** Letters scale and skew with an organic focal blur. |
+| `wave` | A vertical ripple effect that moves across the string. |
+| `flip` | 3D Y-axis rotation with perspective depth. |
+| `glitch` | High-frequency digital noise with RGB shadow shifting. |
+| `blur` | Cinematic focal breathing where letters dissolve in/out. |
+| `reveal` | Professional editorial mask-reveal moving upwards. |
+| `pulse` | Soft neon glow breathing with subtle scaling. |
+
+---
+
+## ⚙️ API Reference
+
+### `animatePage.init(options)`
+
+Configures the global styles and behaviors.
+
+| Option | Type | Default | Description |
+| --- | --- | --- | --- |
+| `bg` | `string` | `"#000"` | Background color. |
+| `fg` | `string` | `"#fff"` | Letter color. |
+| `size` | `string` | `"5rem"` | Font size. |
+| `speed` | `number` | `2` | Speed of one animation cycle (seconds). |
+| `fadeTime` | `number` | `600` | Fade-out duration on `off()` (ms). |
+| `font` | `string` | `"sans-serif"` | Font family. |
+
+### `animatePage.on(text, animation)`
+
+Triggers the preloader overlay.
+
+* **text**: The string you want to animate.
+* **animation**: The style key (e.g., `"glitch"`).
+
+### `animatePage.off()`
+
+Fades out and removes the preloader from the DOM.
+
+---
+
+## 🌟 Pro Tip: Dynamic Loading
+
+For real-world apps, trigger `.off()` inside a window load event:
+
+```javascript
+window.addEventListener('load', () => {
+    animatePage.off();
+});
+
+```
+
+## 📄 License
+
+MIT © Itzbandhan

package/animatePage.js

@@ -0,0 +1,150 @@
+/**
+ * animatePage.js v1.0.0
+ * A high-performance typography preloader library.
+ * Features: Morph, Wave, Flip, Glitch, Blur, Reveal, Pulse.
+ */
+
+const animatePage = (() => {
+  let el = null;
+  let config = {
+    text: "LOADING",
+    bg: "#000000",
+    fg: "#ffffff",
+    size: "5rem",
+    weight: "900",
+    speed: 2,
+    fadeTime: 600,
+    animation: "morph",
+    font: "sans-serif"
+  };
+
+  const injectStyles = () => {
+    if (document.getElementById("ap-core-styles")) return;
+    const s = document.createElement("style");
+    s.id = "ap-core-styles";
+    s.innerHTML = `
+      :root {
+        --ap-bg: ${config.bg};
+        --ap-fg: ${config.fg};
+        --ap-size: ${config.size};
+        --ap-speed: ${config.speed}s;
+        --ap-fade: ${config.fadeTime}ms;
+        --ap-font: ${config.font};
+      }
+      #ap-overlay {
+        position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
+        background: var(--ap-bg); color: var(--ap-fg);
+        display: flex; align-items: center; justify-content: center;
+        z-index: 99999; transition: opacity var(--ap-fade) cubic-bezier(0.4, 0, 0.2, 1);
+        font-family: var(--ap-font); overflow: hidden;
+      }
+      .ap-letter {
+        display: inline-block;
+        font-size: var(--ap-size);
+        font-weight: 900;
+        text-transform: uppercase;
+        will-change: transform, opacity, filter;
+        backface-visibility: hidden;
+      }
+
+      /* 1. MORPH - Organic stretching and blurring */
+      .anim-morph { animation: ap-morph var(--ap-speed) infinite ease-in-out; }
+      @keyframes ap-morph {
+        0%, 100% { transform: scale(1) rotate(0deg); filter: blur(0); }
+        50% { transform: scale(1.4, 0.7) rotate(5deg); filter: blur(4px); opacity: 0.5; }
+      }
+
+      /* 2. WAVE - Staggered vertical ripple */
+      .anim-wave { animation: ap-wave var(--ap-speed) infinite ease-in-out; }
+      @keyframes ap-wave {
+        0%, 100% { transform: translateY(0); }
+        50% { transform: translateY(-40px); opacity: 0.6; }
+      }
+
+      /* 3. FLIP - Smooth 3D Y-axis rotation */
+      .anim-flip { animation: ap-flip var(--ap-speed) infinite ease-in-out; perspective: 1000px; }
+      @keyframes ap-flip {
+        0% { transform: rotateY(0deg); }
+        50% { transform: rotateY(180deg); opacity: 0.4; }
+        100% { transform: rotateY(360deg); }
+      }
+
+      /* 4. GLITCH - High-frequency digital noise */
+      .anim-glitch { animation: ap-glitch 0.2s infinite; }
+      @keyframes ap-glitch {
+        0% { transform: translate(0); text-shadow: 2px 0 var(--ap-fg); }
+        25% { transform: translate(-3px, 1px); text-shadow: -2px 0 #ff00c1; }
+        50% { transform: translate(3px, -1px); text-shadow: 2px 0 #00fff9; }
+        100% { transform: translate(0); }
+      }
+
+      /* 5. BLUR - Soft focal breathing */
+      .anim-blur { animation: ap-blur var(--ap-speed) infinite ease-in-out; }
+      @keyframes ap-blur {
+        0%, 100% { filter: blur(25px); opacity: 0; transform: scale(0.7); }
+        50% { filter: blur(0); opacity: 1; transform: scale(1.1); }
+      }
+
+      /* 6. REVEAL - Modern upward mask slide */
+      .anim-reveal { animation: ap-reveal var(--ap-speed) infinite ease-in-out; }
+      @keyframes ap-reveal {
+        0%, 100% { clip-path: inset(0 0 100% 0); transform: translateY(30px); }
+        50% { clip-path: inset(0 0 0% 0); transform: translateY(0); }
+      }
+
+      /* 7. PULSE - Neon glow and scale breathing */
+      .anim-pulse { animation: ap-pulse var(--ap-speed) infinite ease-in-out; }
+      @keyframes ap-pulse {
+        0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0px var(--ap-fg)); opacity: 1; }
+        50% { transform: scale(0.85); filter: drop-shadow(0 0 25px var(--ap-fg)); opacity: 0.3; }
+      }
+
+      .ap-hide { opacity: 0; pointer-events: none; }
+    `;
+    document.head.appendChild(s);
+  };
+
+  const syncVars = () => {
+    const root = document.documentElement;
+    root.style.setProperty('--ap-bg', config.bg);
+    root.style.setProperty('--ap-fg', config.fg);
+    root.style.setProperty('--ap-size', config.size);
+    root.style.setProperty('--ap-speed', config.speed + 's');
+    root.style.setProperty('--ap-fade', config.fadeTime + 'ms');
+    root.style.setProperty('--ap-font', config.font);
+  };
+
+  return {
+    init(options = {}) {
+      config = { ...config, ...options };
+      injectStyles();
+      syncVars();
+      return this;
+    },
+
+    on(text = config.text, animation = config.animation) {
+      if (el) return;
+      injectStyles();
+      syncVars();
+
+      el = document.createElement("div");
+      el.id = "ap-overlay";
+      
+      const charArray = text.split("");
+      el.innerHTML = charArray.map((char, i) => {
+        const delay = (i * 0.1).toFixed(2);
+        return `<span class="ap-letter anim-${animation}" style="animation-delay: ${delay}s">${char === " " ? "&nbsp;" : char}</span>`;
+      }).join("");
+
+      document.body.appendChild(el);
+    },
+
+    off() {
+      if (!el) return;
+      el.classList.add("ap-hide");
+      setTimeout(() => { if (el) { el.remove(); el = null; } }, config.fadeTime);
+    }
+  };
+})();
+
+export default animatePage;

package/index.html

@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>animatePage Pro - Test Suite</title>
+    <style>
+        /* Modern Dark UI Dashboard */
+        body { 
+            background: #0a0a0a; 
+            color: #fff; 
+            font-family: 'Inter', -apple-system, sans-serif; 
+            height: 100vh; 
+            display: flex; 
+            flex-direction: column; 
+            align-items: center; 
+            justify-content: center; 
+            margin: 0; 
+        }
+        
+        .dashboard { 
+            background: #151515; 
+            padding: 35px; 
+            border-radius: 20px; 
+            display: grid; 
+            grid-template-columns: 1fr 1fr; 
+            gap: 20px; 
+            box-shadow: 0 20px 50px rgba(0,0,0,0.6); 
+            border: 1px solid #222;
+            width: 450px;
+        }
+
+        .full-span { grid-column: span 2; }
+
+        h1 { 
+            margin-top: 0; 
+            font-size: 1rem; 
+            color: #555; 
+            text-transform: uppercase; 
+            letter-spacing: 3px; 
+            text-align: center;
+        }
+
+        .control-group { display: flex; flex-direction: column; gap: 8px; }
+
+        label { 
+            font-size: 0.7rem; 
+            color: #888; 
+            font-weight: bold; 
+            text-transform: uppercase; 
+        }
+
+        button { 
+            padding: 15px; 
+            cursor: pointer; 
+            border: none; 
+            border-radius: 8px; 
+            font-weight: 800; 
+            transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+
+        .trigger { 
+            background: #fff; 
+            color: #000; 
+            margin-top: 10px;
+        }
+
+        .trigger:hover { 
+            background: #00ffcc; 
+            transform: translateY(-3px); 
+            box-shadow: 0 10px 20px rgba(0, 255, 204, 0.2);
+        }
+
+        select, input { 
+            padding: 12px; 
+            background: #222; 
+            border: 1px solid #333; 
+            color: white; 
+            border-radius: 8px; 
+            outline: none;
+            font-size: 0.9rem;
+        }
+
+        input[type="color"] {
+            height: 45px;
+            padding: 5px;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body>
+
+    <div class="dashboard">
+        <h1 class="full-span">animatePage.js Config</h1>
+        
+        <div class="control-group full-span">
+            <label>Animation Style</label>
+            <select id="animSelect">
+                <option value="morph">Morphing (Cinematic)</option>
+                <option value="wave">Wave (Ripple)</option>
+                <option value="flip">3D Flip (Vertical)</option>
+                <option value="glitch">Glitch (Digital)</option>
+                <option value="blur">Blur (Focal)</option>
+                <option value="reveal">Reveal (Editorial)</option>
+                <option value="pulse">Pulse (Neon)</option>
+            </select>
+        </div>
+
+        <div class="control-group full-span">
+            <label>Text Content</label>
+            <input type="text" id="loaderText" value="ANIMATE">
+        </div>
+
+        <div class="control-group">
+            <label>Text Color</label>
+            <input type="color" id="fgColor" value="#00ffcc">
+        </div>
+
+        <div class="control-group">
+            <label>Background</label>
+            <input type="color" id="bgColor" value="#0a0a0a">
+        </div>
+
+        <button class="full-span trigger" onclick="testLoader()">Run Preloader ▶</button>
+    </div>
+
+    <script type="module">
+        import animatePage from './animatePage.js';
+
+        window.testLoader = function() {
+            // 1. Capture Current UI Values
+            const text = document.getElementById('loaderText').value;
+            const anim = document.getElementById('animSelect').value;
+            const fg = document.getElementById('fgColor').value;
+            const bg = document.getElementById('bgColor').value;
+
+            // 2. Initialize the engine with new styles
+            animatePage.init({
+                bg: bg,
+                fg: fg,
+                size: "6vw",
+                speed: (anim === 'glitch') ? 0.25 : 2,
+                fadeTime: 600
+            });
+
+            // 3. Trigger the animation
+            animatePage.on(text, anim);
+
+            // 4. Auto-hide after 4 seconds
+            setTimeout(() => {
+                animatePage.off();
+            }, 4000);
+        }
+    </script>
+</body>
+</html>

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "animate-preloader-pro",
+  "version": "1.0.0",
+  "description": "A lightweight, modular, typography-based preloader library with cinematic morphing animations.",
+  "main": "animatePage.js",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "preloader",
+    "animation",
+    "typography",
+    "morph",
+    "javascript",
+    "ui",
+    "frontend"
+  ],
+  "author": "Itzbandhan",
+  "license": "MIT",
+  "repository": {
+    "type": "git"
+  }
+}

package/style.css

@@ -0,0 +1,40 @@
+:root {
+  --ib-bg: #000;
+  --ib-fg: #fff;
+  --ib-t: 0.6s; /* Fade out speed */
+}
+
+#ib-wrap {
+  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
+  background: var(--ib-bg); color: var(--ib-fg);
+  display: flex; align-items: center; justify-content: center;
+  z-index: 9999; transition: opacity var(--ib-t) ease-in;
+  font-family: 'Inter', sans-serif; overflow: hidden;
+}
+
+/* Individual Letter Container */
+.ib-letter {
+  display: inline-block;
+  font-size: 4rem;
+  font-weight: 900;
+  letter-spacing: 5px;
+  text-transform: uppercase;
+  animation: ib-morph 2s infinite ease-in-out;
+  filter: blur(0px);
+}
+
+@keyframes ib-morph {
+  0%, 100% {
+    transform: scale(1) skewX(0deg);
+    filter: blur(0px);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.2) skewX(-10deg);
+    filter: blur(2px);
+    opacity: 0.7;
+    letter-spacing: 15px;
+  }
+}
+
+.ib-hide { opacity: 0; pointer-events: none; }