feat: Added incremental text generation to ChatGPT response

Author: jbriones1

public/static/js/SplitText.min.js

@@ -8,6 +8,7 @@
     <script defer src="main.js"></script>
     <link rel="icon" type="image/png" href="/static/icons/favicon_colourful.svg" />
     <script defer src="/static/js/gsap.min.js"></script>
+    <script defer src="/static/js/SplitText.min.js"></script>
     <script defer src="/static/js/ScrollTrigger.min.js"></script>
     <!-- ScrollSmoother requires ScrollTrigger -->
     <script defer src="/static/js/ScrollSmoother.min.js"></script>
@@ -94,7 +95,7 @@ <h2>What is Tech Fair?</h2>
             </div>
             <div class="chat-section">
               <h2 class="chat section-content right">ChatGPT, summarize this section</h2>
-              <div class="chat section-content left">
+              <div class="chat section-content response left">
                 <ul>
                   <li>
                     When: <strong>Wednesday, October 15, 2025</strong> from

public/tech_fair/2025/index.html

@@ -70,11 +70,28 @@ function setScrolledEffect() {
   });
 }
 
+function setIncrementalText() {
+  let split = SplitText.create('.response', {
+    type: 'words'
+  });
+
+  gsap.from(split.words, {
+    scrollTrigger: {
+      trigger: '.response',
+      start: 'top bottom',
+      once: true
+    },
+    autoAlpha: 0,
+    stagger: 0.05
+  });
+}
+
 document.addEventListener('DOMContentLoaded', () => {
-  gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
+  gsap.registerPlugin(ScrollTrigger, SplitText, ScrollSmoother);
   photos = document.querySelectorAll('.gallery-content');
   document.body.style.display = 'block';
 
   setPopInEffect();
   setScrolledEffect();
+  setIncrementalText();
 });