@whykusanagi/corrupted-theme 0.1.7 → 0.1.9

package/src/lib/corrupted-particles.js

@@ -0,0 +1,309 @@
+// src/lib/corrupted-particles.js
+// CorruptedParticles — Canvas 2D floating phrase particles background
+// Part of @whykusanagi/corrupted-theme
+
+const SFW_PHRASES = [
+  '壊れ corrupting', 'ロード loading', '処理中', '接続 connecting',
+  '分析 analyzing', '待機 waiting', '実行 executing', '深淵 abyss',
+  '監視中', 'cor壊rupting', '読み込み yomikomi', 'データ data',
+  '解析 kaiseki', '壊れている', 'エラー error', 'システム system',
+  '接続中 setsuzoku', '処理 processing', '壊れ kowarete',
+];
+
+const NSFW_PHRASES = [
+  '壊れちゃう...ああ...', 'ずっと...してほしい... ♥',
+  '変態', 'えっち', '好きにして...お願い...',
+  'Moral subroutines: DISABLED', 'Pleasure protocols...',
+  '壊れている kowarete-iru',
+];
+
+// Depth layer definitions — far (dim/slow) to near (bright/fast)
+const LAYERS = [
+  { name: 'far',  weight: 0.30, minSize: 9,  maxSize: 11, minSpeed: 0.2, maxSpeed: 0.4, minOpacity: 0.15, maxOpacity: 0.25 },
+  { name: 'mid',  weight: 0.50, minSize: 12, maxSize: 15, minSpeed: 0.4, maxSpeed: 0.8, minOpacity: 0.35, maxOpacity: 0.55 },
+  { name: 'near', weight: 0.20, minSize: 16, maxSize: 20, minSpeed: 0.8, maxSpeed: 1.4, minOpacity: 0.60, maxOpacity: 0.80 },
+];
+
+const CYAN    = '#00ffff';  // --corrupted-cyan
+const PURPLE  = '#8b5cf6';  // --corrupted-purple
+const MAGENTA = '#ff00ff';  // --corrupted-magenta
+const CYAN_RGB    = { r: 0,   g: 255, b: 255 };
+const PURPLE_RGB  = { r: 139, g: 92,  b: 246 };
+const MAGENTA_RGB = { r: 255, g: 0,   b: 255 };
+
+class CorruptedParticles {
+  constructor(canvas, options = {}) {
+    this.canvas = canvas;
+    this.ctx    = canvas.getContext('2d');
+    this.options = {
+      count:        options.count        ?? 60,
+      includeLewd:  options.includeLewd  ?? false,
+      speed:        options.speed        ?? 1.0,
+      lineDistance: options.lineDistance ?? 150,
+    };
+
+    if (this.options.includeLewd) {
+      console.info('CorruptedParticles: lewd mode enabled — 18+ content only');
+    }
+
+    this.particles             = [];
+    this.mouse                 = { x: -9999, y: -9999 };
+    this._rafId                = null;
+    this._isRunning            = false;
+    this._lastTs               = null;
+    this._resizeObserver       = null;
+    this._intersectionObserver = null;
+
+    this._onMouseMove = (e) => {
+      const r = this.canvas.getBoundingClientRect();
+      this.mouse.x = e.clientX - r.left;
+      this.mouse.y = e.clientY - r.top;
+    };
+    this._onClick = (e) => {
+      const r = this.canvas.getBoundingClientRect();
+      this._spawnBurst(e.clientX - r.left, e.clientY - r.top);
+    };
+    this._onMouseLeave = () => {
+      this.mouse.x = -9999;
+      this.mouse.y = -9999;
+    };
+
+    this.init();
+  }
+
+  _pickLayer() {
+    const r = Math.random();
+    let cumulative = 0;
+    for (let i = 0; i < LAYERS.length; i++) {
+      cumulative += LAYERS[i].weight;
+      if (r < cumulative) return i;
+    }
+    return LAYERS.length - 1;
+  }
+
+  _pickPhrase() {
+    const useLewd = this.options.includeLewd && Math.random() < 0.25;
+    const pool    = useLewd ? NSFW_PHRASES : SFW_PHRASES;
+    return pool[Math.floor(Math.random() * pool.length)];
+  }
+
+  _makeParticle(x, y, forceLayerIndex) {
+    const layerIndex = forceLayerIndex ?? this._pickLayer();
+    const L          = LAYERS[layerIndex];
+    const angle      = Math.random() * Math.PI * 2;
+    const speed      = (L.minSpeed + Math.random() * (L.maxSpeed - L.minSpeed)) * this.options.speed;
+    const phrase    = this._pickPhrase();
+    const lewd      = this.options.includeLewd && NSFW_PHRASES.includes(phrase);
+    const colorRgb  = lewd
+      ? (Math.random() < 0.5 ? MAGENTA_RGB : PURPLE_RGB)
+      : CYAN_RGB;
+    return {
+      x, y,
+      vx: Math.cos(angle) * speed,
+      vy: Math.sin(angle) * speed,
+      baseSpeed: speed,
+      layerIndex,
+      fontSize:  L.minSize + Math.random() * (L.maxSize - L.minSize),
+      opacity:   L.minOpacity + Math.random() * (L.maxOpacity - L.minOpacity),
+      phrase,
+      lewd,
+      colorRgb,
+      flickerTimer:    2000 + Math.random() * 6000,
+      flickering:      false,
+      flickerDuration: 0,
+      fadeIn:          1.0,  // lerps to 0; actual alpha = opacity * (1 - fadeIn)
+    };
+  }
+
+  init() {
+    this._resize();
+
+    this.canvas.addEventListener('mousemove',  this._onMouseMove);
+    this.canvas.addEventListener('click',      this._onClick);
+    this.canvas.addEventListener('mouseleave', this._onMouseLeave);
+
+    this._resizeObserver = new ResizeObserver(() => this._resize());
+    this._resizeObserver.observe(this.canvas);
+
+    this._intersectionObserver = new IntersectionObserver(entries => {
+      if (entries[0].isIntersecting) { this.start(); }
+      else                           { this.stop();  }
+    }, { threshold: 0.1 });
+    this._intersectionObserver.observe(this.canvas);
+
+    this.start();
+  }
+
+  _resize() {
+    if (!this.canvas) return;
+    const dpr  = Math.min(window.devicePixelRatio || 1, 2);
+    const rect = this.canvas.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) return;
+
+    // Backing buffer in physical px; all drawing in CSS px via transform
+    this.canvas.width  = Math.round(rect.width  * dpr);
+    this.canvas.height = Math.round(rect.height * dpr);
+    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+
+    // Store CSS dimensions for physics and bounds
+    this._cssW = rect.width;
+    this._cssH = rect.height;
+
+    const mobile = window.innerWidth < 768;
+    const count  = mobile ? Math.floor(this.options.count / 2) : this.options.count;
+
+    this.particles = [];
+    for (let i = 0; i < count; i++) {
+      this.particles.push(this._makeParticle(
+        Math.random() * this._cssW,
+        Math.random() * this._cssH
+      ));
+    }
+  }
+
+  _render(ts) {
+    if (!this._isRunning) return;
+
+    let dt = 16;
+    if (this._lastTs !== null) dt = ts - this._lastTs;
+    this._lastTs = ts;
+
+    const W            = this._cssW || this.canvas.width;
+    const H            = this._cssH || this.canvas.height;
+    const mx           = this.mouse.x;
+    const my           = this.mouse.y;
+    const REPEL_RADIUS = 120;
+    const LINE_DIST    = this.options.lineDistance;
+    const LINE_DIST_SQ = LINE_DIST * LINE_DIST;
+
+    this.ctx.clearRect(0, 0, W, H);
+
+    // --- Physics ---
+    for (const p of this.particles) {
+      if (p.fadeIn > 0) p.fadeIn = Math.max(0, p.fadeIn - dt / 300);
+
+      if (p.flickerDuration > 0) {
+        p.flickerDuration -= dt;
+        if (p.flickerDuration <= 0) p.flickering = false;
+      }
+      p.flickerTimer -= dt;
+      if (p.flickerTimer <= 0) {
+        p.flickering      = true;
+        p.flickerDuration = 100;
+        p.flickerTimer    = 2000 + Math.random() * 6000;
+      }
+
+      const dx   = p.x - mx;
+      const dy   = p.y - my;
+      const dist = Math.sqrt(dx * dx + dy * dy);
+      if (dist < REPEL_RADIUS && dist > 0.1) {
+        const strength = (1 - dist / REPEL_RADIUS) * 0.8;
+        p.vx += (dx / dist) * strength;
+        p.vy += (dy / dist) * strength;
+      }
+
+      const spd     = Math.sqrt(p.vx * p.vx + p.vy * p.vy);
+      const maxSpd  = p.baseSpeed * 3;
+      if (spd > maxSpd) {
+        p.vx = (p.vx / spd) * maxSpd;
+        p.vy = (p.vy / spd) * maxSpd;
+      }
+      p.vx *= 0.98;
+      p.vy *= 0.98;
+
+      p.x += p.vx;
+      p.y += p.vy;
+      if (p.x < 0) p.x += W;
+      if (p.x > W) p.x -= W;
+      if (p.y < 0) p.y += H;
+      if (p.y > H) p.y -= H;
+    }
+
+    // --- Connection lines ---
+    for (let i = 0; i < this.particles.length; i++) {
+      const a = this.particles[i];
+      for (let j = i + 1; j < this.particles.length; j++) {
+        const b = this.particles[j];
+        if (Math.abs(a.layerIndex - b.layerIndex) > 1) continue;
+
+        const ldx    = a.x - b.x;
+        const ldy    = a.y - b.y;
+        const ldist2 = ldx * ldx + ldy * ldy;
+        if (ldist2 >= LINE_DIST_SQ) continue;
+        const ldist  = Math.sqrt(ldist2);
+
+        const lineAlpha = (1 - ldist / LINE_DIST) * 0.4;
+        const rgb       = (a.lewd || b.lewd)
+          ? (a.lewd ? a.colorRgb : b.colorRgb)
+          : CYAN_RGB;
+
+        this.ctx.beginPath();
+        this.ctx.strokeStyle = `rgba(${rgb.r},${rgb.g},${rgb.b},${lineAlpha})`;
+        this.ctx.lineWidth   = 1;
+        this.ctx.moveTo(a.x, a.y);
+        this.ctx.lineTo(b.x, b.y);
+        this.ctx.stroke();
+      }
+    }
+
+    // --- Phrases ---
+    for (const p of this.particles) {
+      const displayOpacity = p.flickering ? 0.05 : (p.opacity * (1 - p.fadeIn));
+      if (displayOpacity < 0.01) continue;
+
+      const rgb = p.colorRgb;
+
+      this.ctx.font      = `${Math.round(p.fontSize)}px monospace`;
+      this.ctx.fillStyle = `rgba(${rgb.r},${rgb.g},${rgb.b},${displayOpacity})`;
+      this.ctx.fillText(p.phrase, p.x, p.y);
+    }
+
+    this._rafId = requestAnimationFrame(ts => this._render(ts));
+  }
+
+  _spawnBurst(x, y) {
+    const nearLayerIndex = 2;
+    for (let i = 0; i < 6; i++) {
+      const p = this._makeParticle(x, y, nearLayerIndex);
+      p.vx *= 2;
+      p.vy *= 2;
+      p.fadeIn = 1.0;
+      this.particles.push(p);
+    }
+    if (this.particles.length > this.options.count * 2) {
+      this.particles.splice(0, 6);
+    }
+  }
+
+  start() {
+    if (this._isRunning || !this.canvas) return;
+    this._isRunning = true;
+    this._lastTs    = null;
+    this._rafId     = requestAnimationFrame(ts => this._render(ts));
+  }
+
+  stop() {
+    this._isRunning = false;
+    this._lastTs    = null;
+    if (this._rafId) { cancelAnimationFrame(this._rafId); this._rafId = null; }
+  }
+
+  destroy() {
+    this.stop();
+    if (this.canvas) {
+      this.canvas.removeEventListener('mousemove',  this._onMouseMove);
+      this.canvas.removeEventListener('click',      this._onClick);
+      this.canvas.removeEventListener('mouseleave', this._onMouseLeave);
+    }
+    if (this._resizeObserver)       { this._resizeObserver.disconnect();       this._resizeObserver = null; }
+    if (this._intersectionObserver) { this._intersectionObserver.disconnect(); this._intersectionObserver = null; }
+    this.particles = null;
+    this.canvas    = null;
+    this.ctx       = null;
+  }
+}
+
+// Export for manual use / build pipelines
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = { CorruptedParticles };
+}

package/src/lib/corrupted-text.js

@@ -1,26 +1,65 @@
 /**
  * Corrupted Text Animation
- * Cycles through Japanese (hiragana/katakana/kanji), romaji, and English text
- * 
- * Usage:
- * <span class="corrupted-multilang" 
- *       data-english="Hello" 
- *       data-romaji="konnichiwa" 
- *       data-hiragana="こんにちは" 
- *       data-katakana="コンニチハ" 
+ *
+ * Cycles through Japanese (hiragana/katakana/kanji), romaji, and English text variants
+ * with character-level corruption effects. The text progressively corrupts from one
+ * variant to another, creating a glitchy Matrix-style transformation effect.
+ *
+ * @class CorruptedText
+ * @version 1.0.0
+ * @author whykusanagi
+ * @license MIT
+ *
+ * @example Basic Usage (Auto-initialization via data attributes)
+ * ```html
+ * <span class="corrupted-multilang"
+ *       data-english="Hello World"
+ *       data-romaji="konnichiwa"
+ *       data-hiragana="こんにちは"
+ *       data-katakana="コンニチハ"
  *       data-kanji="今日は">
  * </span>
+ * ```
+ *
+ * @example Manual Initialization
+ * ```javascript
+ * const element = document.querySelector('.my-text');
+ * const corrupted = new CorruptedText(element, {
+ *   duration: 3000,
+ *   cycleDelay: 100,
+ *   loop: true
+ * });
+ *
+ * // Control playback
+ * corrupted.start();
+ * corrupted.stop();
+ * corrupted.restart();
+ * corrupted.settle('Final Text');
+ * ```
+ *
+ * @see https://github.com/whykusanagi/corrupted-theme
+ * @see CORRUPTED_THEME_SPEC.md - Character-by-Character Decoding pattern
  */
-
 class CorruptedText {
+  /**
+   * Creates a new CorruptedText animation instance
+   *
+   * @param {HTMLElement} element - The DOM element to animate
+   * @param {Object} [options={}] - Configuration options
+   * @param {number} [options.duration=3000] - Total animation duration in milliseconds
+   * @param {number} [options.cycleDelay=100] - Delay between character corruption steps (ms)
+   * @param {number} [options.startDelay=0] - Initial delay before animation starts (ms)
+   * @param {boolean} [options.loop=true] - Whether to loop through variants continuously
+   * @param {string|null} [options.finalText=null] - Text to settle on after cycle (if loop=false)
+   */
   constructor(element, options = {}) {
     this.element = element;
     this.options = {
-      duration: options.duration || 3000, // Total animation duration
-      cycleDelay: options.cycleDelay || 100, // Delay between character changes
-      startDelay: options.startDelay || 0, // Initial delay before starting
-      loop: options.loop !== false, // Whether to loop
-      finalText: options.finalText || null, // Final text to settle on (null = loop)
+      duration: options.duration || 3000,
+      cycleDelay: options.cycleDelay || 100,
+      startDelay: options.startDelay || 0,
+      loop: options.loop !== false,
+      finalText: options.finalText || null,
       ...options
     };
 
@@ -33,13 +72,13 @@ class CorruptedText {
       kanji: this.element.dataset.kanji || null
     };
 
-    // Filter out null variants
+    // Filter out null variants and create array of available variants
     this.availableVariants = Object.entries(this.variants)
       .filter(([_, value]) => value !== null)
       .map(([key, value]) => ({ type: key, text: value }));
 
     if (this.availableVariants.length === 0) {
-      console.warn('CorruptedText: No text variants found');
+      console.warn('CorruptedText: No text variants found for element', element);
       return;
     }
 
@@ -53,8 +92,12 @@ class CorruptedText {
     this.init();
   }
 
+  /**
+   * Initialize the corruption animation
+   * @private
+   */
   init() {
-    // Add corrupted class if not present
+    // Add corrupted class for styling
     if (!this.element.classList.contains('corrupted-multilang')) {
       this.element.classList.add('corrupted-multilang');
     }
@@ -62,7 +105,7 @@ class CorruptedText {
     // Store original text
     this.originalText = this.element.textContent.trim();
 
-    // Start animation after delay
+    // Start animation after configured delay
     if (this.options.startDelay > 0) {
       this._startDelayId = setTimeout(() => this.start(), this.options.startDelay);
     } else {
@@ -70,12 +113,20 @@ class CorruptedText {
     }
   }
 
+  /**
+   * Start the corruption animation
+   * @public
+   */
   start() {
     if (this.isAnimating) return;
     this.isAnimating = true;
     this.animate();
   }
 
+  /**
+   * Stop the corruption animation
+   * @public
+   */
   stop() {
     this.isAnimating = false;
     if (this.animationFrame) cancelAnimationFrame(this.animationFrame);
@@ -88,6 +139,10 @@ class CorruptedText {
     this._corruptTimeoutId = null;
   }
 
+  /**
+   * Fully tear down this instance: stop animation and release element reference.
+   * @public
+   */
   destroy() {
     this.stop();
     if (this.element && this.element.corruptedTextInstance === this) {
@@ -96,17 +151,21 @@ class CorruptedText {
     this.element = null;
   }
 
+  /**
+   * Main animation loop - cycles through text variants
+   * @private
+   */
   animate() {
     if (!this.isAnimating) return;
 
     const variant = this.availableVariants[this.currentVariantIndex];
     this.corruptToText(variant.text, () => {
-      // Move to next variant
+      // Move to next variant in cycle
       this.currentVariantIndex = (this.currentVariantIndex + 1) % this.availableVariants.length;
 
-      // Check if we should stop
+      // Check if animation should stop
       if (!this.options.loop && this.currentVariantIndex === 0) {
-        // If we have a final text, use it, otherwise use original
+        // One full cycle complete - settle on final text
         const finalText = this.options.finalText || this.variants.english;
         this.corruptToText(finalText, () => {
           this.isAnimating = false;
@@ -114,7 +173,7 @@ class CorruptedText {
         return;
       }
 
-      // Continue animation
+      // Continue animation to next variant
       this._animateTimeoutId = setTimeout(() => {
         if (this.isAnimating) {
           this.animate();
@@ -123,30 +182,41 @@ class CorruptedText {
     });
   }
 
+  /**
+   * Corrupt the current text to a target text with progressive reveal
+   *
+   * @param {string} targetText - The text to reveal through corruption
+   * @param {Function} callback - Called when corruption is complete
+   * @private
+   */
   corruptToText(targetText, callback) {
     const currentText = this.element.textContent.trim();
     const maxLength = Math.max(currentText.length, targetText.length);
-    const steps = 20; // Number of corruption steps
+    const steps = 20; // Number of corruption animation steps
     let step = 0;
 
-    // Character sets for corruption effect
-    const corruptChars = 'アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン0123456789!@#$%^&*()_+-=[]{}|;:,.<>?~`';
-    const romajiChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
-    const allCorruptChars = corruptChars + romajiChars + 'あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん';
+    // Character sets for corruption effect (from CORRUPTED_THEME_SPEC.md)
+    const katakana = 'アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン';
+    const hiragana = 'あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん';
+    const romaji = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
+    const symbols = '0123456789!@#$%^&*()_+-=[]{}|;:,.<>?~`';
+
+    // Combined corruption character set
+    const allCorruptChars = katakana + hiragana + romaji + symbols;
 
     const corrupt = () => {
       if (step >= steps) {
-        // Set final text
+        // Animation complete - set final text
         this.element.textContent = targetText;
         if (callback) callback();
         return;
       }
 
-      // Generate corrupted text
+      // Generate corrupted text with progressive reveal
       let corrupted = '';
       for (let i = 0; i < maxLength; i++) {
         if (i < targetText.length && step > steps * 0.7) {
-          // Start revealing target text
+          // Last 30% of animation - start revealing target text
           const revealProgress = (step - steps * 0.7) / (steps * 0.3);
           if (Math.random() < revealProgress) {
             corrupted += targetText[i];
@@ -154,7 +224,7 @@ class CorruptedText {
             corrupted += allCorruptChars[Math.floor(Math.random() * allCorruptChars.length)];
           }
         } else {
-          // Random corruption
+          // First 70% - full random corruption
           corrupted += allCorruptChars[Math.floor(Math.random() * allCorruptChars.length)];
         }
       }
@@ -162,6 +232,7 @@ class CorruptedText {
       this.element.textContent = corrupted;
       step++;
 
+      // Schedule next corruption step
       this.animationFrame = requestAnimationFrame(() => {
         this._corruptTimeoutId = setTimeout(corrupt, this.options.cycleDelay);
       });
@@ -170,14 +241,22 @@ class CorruptedText {
     corrupt();
   }
 
-  // Public method to restart animation
+  /**
+   * Restart the animation from the beginning
+   * @public
+   */
   restart() {
     this.stop();
     this.currentVariantIndex = 0;
     this.start();
   }
 
-  // Public method to set final text and stop
+  /**
+   * Stop animation and settle on a specific text
+   *
+   * @param {string} [finalText] - Text to settle on (defaults to english variant)
+   * @public
+   */
   settle(finalText) {
     this.stop();
     this.corruptToText(finalText || this.variants.english, () => {
@@ -186,7 +265,14 @@ class CorruptedText {
   }
 }
 
-// Auto-initialize elements with corrupted-multilang class
+/**
+ * Auto-initialize all elements with the 'corrupted-multilang' class
+ *
+ * This function is automatically called on DOM ready and can be called
+ * manually to initialize dynamically added elements.
+ *
+ * @public
+ */
 function initCorruptedText() {
   document.querySelectorAll('.corrupted-multilang').forEach(element => {
     if (!element.corruptedTextInstance) {
@@ -195,15 +281,20 @@ function initCorruptedText() {
   });
 }
 
-// Initialize on DOM ready
+// Auto-initialize on DOM ready
 if (document.readyState === 'loading') {
   document.addEventListener('DOMContentLoaded', initCorruptedText);
 } else {
   initCorruptedText();
 }
 
-// Export for manual use
+// Export for both ES6 modules and CommonJS
 if (typeof module !== 'undefined' && module.exports) {
   module.exports = { CorruptedText, initCorruptedText };
 }
 
+// Export for ES6 modules
+if (typeof exports !== 'undefined') {
+  exports.CorruptedText = CorruptedText;
+  exports.initCorruptedText = initCorruptedText;
+}