npm - @whykusanagi/corrupted-theme - Versions diffs - 0.1.7 → 0.1.9 - Mend

@whykusanagi/corrupted-theme 0.1.7 → 0.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (28) hide show

package/CHANGELOG.md +28 -0
package/README.md +140 -4
package/docs/COMPONENTS_REFERENCE.md +205 -2
package/docs/governance/VERSION_MANAGEMENT.md +2 -2
package/docs/governance/VERSION_REFERENCES.md +65 -202
package/docs/platforms/NPM_PACKAGE.md +8 -6
package/examples/advanced/glsl-vortex.html +297 -0
package/examples/advanced/particles-bg.html +263 -0
package/examples/basic/corrupted-text.html +2 -3
package/examples/basic/typing-animation.html +136 -55
package/examples/button.html +1 -2
package/examples/card.html +1 -2
package/examples/extensions-showcase.html +36 -1
package/examples/form.html +1 -2
package/examples/index.html +28 -4
package/examples/layout.html +1 -2
package/examples/nikke-team-builder.html +1 -2
package/examples/showcase-complete.html +2 -3
package/examples/showcase.html +1 -2
package/package.json +4 -3
package/src/core/typing-animation.js +274 -106
package/src/css/theme.css +0 -15
package/src/lib/corrupted-particles.js +309 -0
package/src/lib/corrupted-text.js +127 -36
package/src/lib/corrupted-vortex.js +329 -0
package/docs/ROADMAP.md +0 -266
package/examples/advanced/nsfw-corruption.html +0 -348
package/src/core/corrupted-text.js +0 -300

package/examples/advanced/nsfw-corruption.html DELETED Viewed

@@ -1,348 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>NSFW Corruption (18+) - Corrupted Theme</title>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
-  <link rel="stylesheet" href="../../src/css/theme.css">
-  <style>
-    .container {
-      max-width: 1000px;
-      margin: 0 auto;
-      padding: var(--spacing-lg);
-    }
-    .example-group {
-      margin-bottom: var(--spacing-2xl);
-      background: var(--glass);
-      border: 1px solid var(--border);
-      border-radius: var(--radius-lg);
-      padding: var(--spacing-lg);
-    }
-    .example-group h3 {
-      color: var(--accent);
-      margin-bottom: var(--spacing-lg);
-      font-size: 1.25rem;
-    }
-    .warning-box {
-      background: rgba(255, 0, 0, 0.1);
-      border: 3px solid var(--corrupted-red);
-      border-radius: var(--radius-lg);
-      padding: var(--spacing-xl);
-      margin-bottom: var(--spacing-2xl);
-      box-shadow: 0 0 30px rgba(255, 0, 0, 0.3);
-    }
-    .warning-box h2 {
-      color: var(--corrupted-red);
-      margin-top: 0;
-      font-size: 1.75rem;
-      text-align: center;
-    }
-    .warning-box p {
-      color: var(--text);
-      line-height: 1.6;
-    }
-    .warning-box ul {
-      color: var(--text-secondary);
-      line-height: 1.8;
-    }
-    .demo-area {
-      background: var(--bg-secondary);
-      border: 1px solid var(--border);
-      border-radius: var(--radius-md);
-      padding: var(--spacing-xl);
-      margin-bottom: var(--spacing-md);
-      min-height: 100px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .typing-output {
-      font-size: 1.25rem;
-      min-height: 40px;
-      letter-spacing: 1px;
-      font-family: 'Courier New', monospace;
-      text-align: center;
-      width: 100%;
-    }
-    .controls {
-      display: flex;
-      gap: var(--spacing-md);
-      margin-top: var(--spacing-md);
-      flex-wrap: wrap;
-    }
-    .code-block {
-      background: var(--bg);
-      border: 1px solid var(--border);
-      border-radius: var(--radius-md);
-      padding: var(--spacing-md);
-      margin-top: var(--spacing-md);
-      font-family: 'Courier New', monospace;
-      font-size: 0.875rem;
-      color: var(--text-secondary);
-      overflow-x: auto;
-    }
-    .info-badge {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--spacing-sm);
-      background: var(--glass);
-      border: 1px solid var(--border);
-      border-radius: var(--radius-full);
-      padding: var(--spacing-sm) var(--spacing-md);
-      font-size: 0.875rem;
-      color: var(--text-secondary);
-      margin-bottom: var(--spacing-md);
-    }
-    .nsfw-badge {
-      background: rgba(255, 0, 0, 0.2);
-      border-color: var(--corrupted-red);
-      color: var(--corrupted-red);
-    }
-    .comparison-grid {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: var(--spacing-lg);
-      margin-bottom: var(--spacing-md);
-    }
-    .comparison-box {
-      background: var(--bg-secondary);
-      border: 2px solid;
-      border-radius: var(--radius-md);
-      padding: var(--spacing-lg);
-    }
-    .comparison-box.sfw {
-      border-color: var(--corrupted-magenta2);
-    }
-    .comparison-box.nsfw {
-      border-color: var(--corrupted-purple);
-    }
-    .comparison-box h4 {
-      margin-top: 0;
-      font-size: 1rem;
-    }
-    .comparison-box.sfw h4 {
-      color: var(--corrupted-magenta2);
-    }
-    .comparison-box.nsfw h4 {
-      color: var(--corrupted-purple);
-    }
-    @media (max-width: 768px) {
-      .comparison-grid {
-        grid-template-columns: 1fr;
-      }
-    }
-  </style>
-</head>
-<body>
-  <!-- Global Navigation -->
-  <nav class="navbar">
-    <div class="navbar-content">
-      <a href="../index.html" class="navbar-logo"><i class="fas fa-palette"></i> Corrupted Theme</a>
-      <ul class="navbar-links">
-        <li><a href="../index.html"><i class="fas fa-home"></i> Home</a></li>
-        <li><a href="../showcase-complete.html"><i class="fas fa-cube"></i> Components</a></li>
-        <li><a href="../extensions-showcase.html"><i class="fas fa-puzzle-piece"></i> Extensions</a></li>
-        <li class="has-submenu">
-          <a href="#" class="active">
-            <i class="fas fa-flask"></i> Examples
-            <i class="fas fa-chevron-down" style="font-size: 0.7em; margin-left: 4px;"></i>
-          </a>
-          <div class="submenu">
-            <a href="../nikke-team-builder.html"><i class="fas fa-users"></i> Nikke Team Builder</a>
-            <a href="../button.html"><i class="fas fa-hand-pointer"></i> Buttons</a>
-            <a href="../card.html"><i class="fas fa-square"></i> Cards</a>
-            <a href="../form.html"><i class="fas fa-edit"></i> Forms</a>
-            <a href="../layout.html"><i class="fas fa-columns"></i> Layouts</a>
-            <a href="../basic/corrupted-text.html"><i class="fas fa-terminal"></i> Character Corruption</a>
-            <a href="../basic/typing-animation.html"><i class="fas fa-keyboard"></i> Buffer Corruption</a>
-            <a href="nsfw-corruption.html" class="active"><i class="fas fa-exclamation-triangle"></i> NSFW (18+)</a>
-          </div>
-        </li>
-        <li><a href="../showcase-complete.html"><i class="fas fa-book"></i> Docs</a></li>
-      </ul>
-    </div>
-  </nav>
-  <div class="container">
-    <!-- Content Warning -->
-    <div class="warning-box">
-      <h2><i class="fas fa-exclamation-triangle"></i> 18+ Content Warning</h2>
-      <p style="text-align: center;"><strong>This page contains explicit mature content (NSFW mode).</strong></p>
-      <p>This example demonstrates the NSFW mode of TypingAnimation, which includes:</p>
-      <ul>
-        <li>Explicit intimate/sexual phrases</li>
-        <li>Loss of control themes</li>
-        <li>Adult-oriented corruption aesthetics</li>
-      </ul>
-      <p><strong>NOT suitable for:</strong></p>
-      <ul>
-        <li>Professional/corporate projects</li>
-        <li>Public streams without 18+ rating</li>
-        <li>Educational contexts</li>
-        <li>All-ages content</li>
-      </ul>
-      <p style="text-align: center; margin-top: var(--spacing-lg); font-weight: bold;">
-        By continuing, you confirm you are 18+ and accept viewing explicit content.
-      </p>
-    </div>
-    <h1><i class="fas fa-exclamation-triangle"></i> NSFW Buffer Corruption</h1>
-    <p style="color: var(--text-secondary); margin-bottom: var(--spacing-lg);">
-      Pattern 2: Phrase flickering with explicit adult content (18+ only).
-    </p>
-    <div class="info-badge nsfw-badge">
-      <i class="fas fa-exclamation-triangle"></i>
-      <span>18+ ONLY - Explicit Content</span>
-    </div>
-    <!-- SFW vs NSFW Comparison -->
-    <section id="comparison" class="example-group">
-      <h3>SFW vs NSFW Comparison</h3>
-      <p>See the difference between default SFW mode and explicit NSFW mode side-by-side.</p>
-      <div class="comparison-grid">
-        <div class="comparison-box sfw">
-          <h4><i class="fas fa-check-circle"></i> SFW Mode (Default)</h4>
-          <div class="demo-area">
-            <div class="typing-output" id="outputSFW"></div>
-          </div>
-        </div>
-        <div class="comparison-box nsfw">
-          <h4><i class="fas fa-exclamation-triangle"></i> NSFW Mode (Explicit)</h4>
-          <div class="demo-area">
-            <div class="typing-output" id="outputNSFW"></div>
-          </div>
-        </div>
-      </div>
-      <div class="controls">
-        <button class="btn" onclick="startComparison()">
-          <i class="fas fa-play"></i> Start Comparison
-        </button>
-      </div>
-      <div class="code-block">// SFW mode (default - safe for all audiences)
-const typingSFW = new TypingAnimation(element, {
-  nsfw: false  // Default behavior
-});
-// NSFW mode (explicit opt-in required)
-const typingNSFW = new TypingAnimation(element, {
-  nsfw: true   // ⚠️ Enables 18+ explicit content
-});</div>
-    </section>
-    <!-- NSFW-Only Example -->
-    <section id="nsfw-only" class="example-group">
-      <h3>NSFW-Only Example</h3>
-      <p>Pure NSFW buffer corruption with explicit phrases in purple (#8b5cf6).</p>
-      <div class="demo-area">
-        <div class="typing-output" id="outputNSFWOnly"></div>
-      </div>
-      <div class="controls">
-        <button class="btn" onclick="startNSFWOnly()">
-          <i class="fas fa-play"></i> Start NSFW Animation
-        </button>
-        <button class="btn btn-secondary" onclick="stopNSFWOnly()">
-          <i class="fas fa-stop"></i> Stop
-        </button>
-      </div>
-      <div class="code-block">const typing = new TypingAnimation(element, {
-  nsfw: true,           // ⚠️ NSFW mode enabled
-  typingSpeed: 35,
-  glitchChance: 0.12
-});
-typing.start('Neural corruption detected...');</div>
-    </section>
-    <!-- Component Info -->
-    <section class="example-group">
-      <h3><i class="fas fa-info-circle"></i> NSFW Mode Configuration</h3>
-      <ul style="color: var(--text-secondary); line-height: 1.8;">
-        <li><strong>Requires Explicit Opt-in:</strong> <code>{ nsfw: true }</code></li>
-        <li><strong>Phrase Examples:</strong> "壊れちゃう...", "Pleasure protocols loading...", "変態", "えっち"</li>
-        <li><strong>Color:</strong> Deep Purple (#8b5cf6) for NSFW corruption</li>
-        <li><strong>Default Behavior:</strong> SFW mode (safe for all audiences)</li>
-        <li><strong>Content Rating:</strong> 18+ only, explicit intimate content</li>
-      </ul>
-      <div class="alert alert-warning" style="margin-top: var(--spacing-md);">
-        <i class="fas fa-shield-alt"></i>
-        <strong>Important:</strong> NSFW phrases are ONLY shown when <code>nsfw: true</code> is explicitly set.
-        The default behavior is always SFW for safety.
-      </div>
-    </section>
-  </div>
-  <script type="module">
-    import { TypingAnimation } from '../../src/core/typing-animation.js';
-    // SFW vs NSFW Comparison
-    const outputSFW = document.getElementById('outputSFW');
-    const outputNSFW = document.getElementById('outputNSFW');
-    window.startComparison = () => {
-      // SFW instance
-      const typingSFW = new TypingAnimation(outputSFW, {
-        nsfw: false,
-        glitchChance: 0.10
-      });
-      // NSFW instance
-      const typingNSFW = new TypingAnimation(outputNSFW, {
-        nsfw: true,
-        glitchChance: 0.10
-      });
-      // Start both simultaneously
-      typingSFW.start('System Online');
-      typingNSFW.start('System Online');
-    };
-    // NSFW-only example
-    const outputNSFWOnly = document.getElementById('outputNSFWOnly');
-    let typingNSFWOnly = new TypingAnimation(outputNSFWOnly, {
-      nsfw: true,
-      typingSpeed: 35,
-      glitchChance: 0.12
-    });
-    window.startNSFWOnly = () => {
-      typingNSFWOnly.start('Neural corruption detected... Decoding data buffer...');
-    };
-    window.stopNSFWOnly = () => {
-      typingNSFWOnly.stop();
-    };
-    // Auto-start comparison on load
-    setTimeout(() => startComparison(), 1000);
-  </script>
-</body>
-</html>

package/src/core/corrupted-text.js DELETED Viewed

@@ -1,300 +0,0 @@
-/**
- * Corrupted Text Animation
- *
- * 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,
-      cycleDelay: options.cycleDelay || 100,
-      startDelay: options.startDelay || 0,
-      loop: options.loop !== false,
-      finalText: options.finalText || null,
-      ...options
-    };
-    // Get text variants from data attributes
-    this.variants = {
-      english: this.element.dataset.english || this.element.textContent.trim(),
-      romaji: this.element.dataset.romaji || null,
-      hiragana: this.element.dataset.hiragana || null,
-      katakana: this.element.dataset.katakana || null,
-      kanji: this.element.dataset.kanji || null
-    };
-    // 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 for element', element);
-      return;
-    }
-    this.currentVariantIndex = 0;
-    this.isAnimating = false;
-    this.animationFrame = null;
-    this._startDelayId = null;
-    this._animateTimeoutId = null;
-    this._corruptTimeoutId = null;
-    this.init();
-  }
-  /**
-   * Initialize the corruption animation
-   * @private
-   */
-  init() {
-    // Add corrupted class for styling
-    if (!this.element.classList.contains('corrupted-multilang')) {
-      this.element.classList.add('corrupted-multilang');
-    }
-    // Store original text
-    this.originalText = this.element.textContent.trim();
-    // Start animation after configured delay
-    if (this.options.startDelay > 0) {
-      this._startDelayId = setTimeout(() => this.start(), this.options.startDelay);
-    } else {
-      this.start();
-    }
-  }
-  /**
-   * 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);
-    if (this._startDelayId) clearTimeout(this._startDelayId);
-    if (this._animateTimeoutId) clearTimeout(this._animateTimeoutId);
-    if (this._corruptTimeoutId) clearTimeout(this._corruptTimeoutId);
-    this.animationFrame = null;
-    this._startDelayId = null;
-    this._animateTimeoutId = null;
-    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) {
-      delete this.element.corruptedTextInstance;
-    }
-    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 in cycle
-      this.currentVariantIndex = (this.currentVariantIndex + 1) % this.availableVariants.length;
-      // Check if animation should stop
-      if (!this.options.loop && this.currentVariantIndex === 0) {
-        // One full cycle complete - settle on final text
-        const finalText = this.options.finalText || this.variants.english;
-        this.corruptToText(finalText, () => {
-          this.isAnimating = false;
-        });
-        return;
-      }
-      // Continue animation to next variant
-      this._animateTimeoutId = setTimeout(() => {
-        if (this.isAnimating) {
-          this.animate();
-        }
-      }, this.options.duration / this.availableVariants.length);
-    });
-  }
-  /**
-   * 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 animation steps
-    let step = 0;
-    // 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) {
-        // Animation complete - set final text
-        this.element.textContent = targetText;
-        if (callback) callback();
-        return;
-      }
-      // Generate corrupted text with progressive reveal
-      let corrupted = '';
-      for (let i = 0; i < maxLength; i++) {
-        if (i < targetText.length && step > steps * 0.7) {
-          // Last 30% of animation - start revealing target text
-          const revealProgress = (step - steps * 0.7) / (steps * 0.3);
-          if (Math.random() < revealProgress) {
-            corrupted += targetText[i];
-          } else {
-            corrupted += allCorruptChars[Math.floor(Math.random() * allCorruptChars.length)];
-          }
-        } else {
-          // First 70% - full random corruption
-          corrupted += allCorruptChars[Math.floor(Math.random() * allCorruptChars.length)];
-        }
-      }
-      this.element.textContent = corrupted;
-      step++;
-      // Schedule next corruption step
-      this.animationFrame = requestAnimationFrame(() => {
-        this._corruptTimeoutId = setTimeout(corrupt, this.options.cycleDelay);
-      });
-    };
-    corrupt();
-  }
-  /**
-   * Restart the animation from the beginning
-   * @public
-   */
-  restart() {
-    this.stop();
-    this.currentVariantIndex = 0;
-    this.start();
-  }
-  /**
-   * 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, () => {
-      this.isAnimating = false;
-    });
-  }
-}
-/**
- * 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) {
-      element.corruptedTextInstance = new CorruptedText(element);
-    }
-  });
-}
-// Auto-initialize on DOM ready
-if (document.readyState === 'loading') {
-  document.addEventListener('DOMContentLoaded', initCorruptedText);
-} else {
-  initCorruptedText();
-}
-// 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;
-}