Swinging Words

Random words swing like they're hanging from the page

  1. // ==UserScript==
  2. // @name Swinging Words
  3. // @namespace http://swing.words/
  4. // @version 1.0
  5. // @description Random words swing like they're hanging from the page
  6. // @match *://*/*
  7. // @grant none
  8. // @run-at document-idle
  9. // @license MIT
  10. // ==/UserScript==
  11.  
  12. (function () {
  13. 'use strict';
  14.  
  15. const CHANCE = 0.1; // 10% of words swing
  16.  
  17. const style = document.createElement("style");
  18. style.textContent = `
  19. @keyframes swing {
  20. 0% { transform: rotate(0deg); }
  21. 25% { transform: rotate(105deg); }
  22. 50% { transform: rotate(0deg); }
  23. 75% { transform: rotate(75deg); }
  24. 100% { transform: rotate(0deg); }
  25. }
  26.  
  27. .swinging-word {
  28. display: inline-block;
  29. transform-origin: bottom left;
  30. animation: swing 2s ease-in-out infinite;
  31. margin: 2px;
  32. }
  33. `;
  34. document.head.appendChild(style);
  35.  
  36. const paragraphs = document.querySelectorAll("p");
  37. paragraphs.forEach(p => {
  38. const text = p.textContent;
  39. const words = text.split(/(\s+)/); // preserve spaces
  40. const frag = document.createDocumentFragment();
  41.  
  42. words.forEach(word => {
  43. if (/\S/.test(word) && Math.random() < CHANCE) {
  44. const span = document.createElement("span");
  45. span.className = "swinging-word";
  46. span.textContent = word;
  47. frag.appendChild(span);
  48. } else {
  49. frag.appendChild(document.createTextNode(word));
  50. }
  51. });
  52.  
  53. p.textContent = ""; // Clear original
  54. p.appendChild(frag);
  55. });
  56.  
  57. console.log("🎯 Swinging words activated.");
  58. })();