fix: baffle taglines

Author: surajsharma

baffle.js

@@ -17,10 +17,50 @@
       <img src="ip.png" alt="inversepolarity logo" />
       <div class="header-text">
         <h1>inversepolarity</h1>
-        <p class="tagline">nobody's computer</p>
+        <div id="baffle">
+          <p id="t1" class="tagline">nobody's computer</p>
+        </div>
       </div>
     </header>
 
+    <script type="text/javascript" src="baffle.js"></script>
+   
+
+<script defer>
+  const taglines = [
+    "nobody's computer",
+    "slipstreamed software",
+    "functionally federated products",
+    "intentful solutions",
+    "hyperreal precision tools",
+  ];
+
+  let index = 0;
+
+  const b = baffle("#baffle .tagline", {
+    characters: "█▓▒░<>/[]{}—=+*^!?@#$%&",
+    speed: 75,
+  });
+
+  function changeTagline() {
+    // Start obfuscating current text
+    b.start();
+
+    // After brief obfuscation, swap text and reveal
+    setTimeout(() => {
+      index = (index + 1) % taglines.length;
+      b.text(() => taglines[index]);
+      b.reveal(2000);
+    }, 500);
+  }
+
+  // Initial reveal
+  b.start();
+  b.reveal(2000);
+
+  // Cycle through taglines every 5 seconds
+  setInterval(changeTagline, 5000);
+</script>
     <main class="main-grid">
       <div class="project-card">
         <h2>skiboard</h2>