☰

RGB Text Animation

Adds RGB animation to text while typing

  1. // ==UserScript==
  2. // @name         RGB Text Animation
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0
  5. // @description  Adds RGB animation to text while typing
  6. // @author       Jyomama28
  7. // @match        *://*/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     // Create style element for the animation
  15.     const style = document.createElement('style');
  16.     style.innerHTML = `
  17.         @keyframes rgbText {
  18.             0% { color: rgb(255, 0, 0); }
  19.             33% { color: rgb(0, 255, 0); }
  20.             66% { color: rgb(0, 0, 255); }
  21.             100% { color: rgb(255, 0, 0); }
  22.         }
  23.         .rgb-animated {
  24.             animation: rgbText 3s linear infinite;
  25.         }
  26.     `;
  27.     document.head.appendChild(style);
  28.  
  29.     // Function to handle input events
  30.     function handleInput(event) {
  31.         const element = event.target;
  32.  
  33.         // Check if the element is a text input or contenteditable
  34.         if (
  35.             element.tagName === 'INPUT' ||
  36.             element.tagName === 'TEXTAREA' ||
  37.             element.getAttribute('contenteditable') === 'true'
  38.         ) {
  39.             // Add the RGB animation class
  40.             element.classList.add('rgb-animated');
  41.  
  42.             // Also animate the text content
  43.             if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
  44.                 element.style.animation = 'rgbText 3s linear infinite';
  45.             }
  46.         }
  47.     }
  48.  
  49.     // Monitor for new elements being added to the page
  50.     const observer = new MutationObserver((mutations) => {
  51.         mutations.forEach((mutation) => {
  52.             mutation.addedNodes.forEach((node) => {
  53.                 if (node.nodeType === 1) { // Element node
  54.                     const inputs = node.querySelectorAll('input, textarea, [contenteditable="true"]');
  55.                     inputs.forEach(input => {
  56.                         input.addEventListener('input', handleInput);
  57.                     });
  58.                 }
  59.             });
  60.         });
  61.     });
  62.  
  63.     // Start observing the document
  64.     observer.observe(document.body, {
  65.         childList: true,
  66.         subtree: true
  67.     });
  68.  
  69.     // Add event listeners to existing input elements
  70.     document.querySelectorAll('input, textarea, [contenteditable="true"]').forEach(input => {
  71.         input.addEventListener('input', handleInput);
  72.     });
  73. })();