From 8bbc61bc67d4d0ea0ea1c23c5b70e1008687b813 Mon Sep 17 00:00:00 2001
From: Starboy <samskywalker001@gmail.com>
Date: Sat, 8 Aug 2026 13:08:56 +0530
Subject: [PATCH] bubbles animated

---
 pnpm-workspace.yaml                          |  3 +++
 src/app/about/_components/animated-intro.tsx | 19 ++++++++++++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 pnpm-workspace.yaml

diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
new file mode 100644
index 0000000..c2da90e
--- /dev/null
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,3 @@
+allowBuilds:
+  sharp: false
+  unrs-resolver: false
diff --git a/src/app/about/_components/animated-intro.tsx b/src/app/about/_components/animated-intro.tsx
index b72ef23..28848a5 100644
--- a/src/app/about/_components/animated-intro.tsx
+++ b/src/app/about/_components/animated-intro.tsx
@@ -22,6 +22,20 @@ export default function AnimatedIntro() {
     );
   }, []);
 
+  useGSAP(() => {
+    gsap.to(".things-bubbles", {
+      repeat: -1,
+      duration: 1.9,
+      autoAlpha: 0,
+      stagger: 0.7,
+      repeatDelay: 0.3,
+      // ease: "power4.out",
+      // ease: "back.out(1)",
+      ease: "slow(0.7,0.7,true)",
+      // yoyo: true
+    });
+  });
+
   return (
     <div className="flex min-h-screen items-center justify-center px-3">
       <div className="hero-text">
@@ -61,7 +75,10 @@ export default function AnimatedIntro() {
           </span>
         </h2>
         <h2>
-          Things<span className="text-sky-500">.</span>
+          Things
+          <div className="things-bubbles ml-1.5 inline-block h-4 w-4 rounded-sm bg-sky-500"></div>
+          <div className="things-bubbles ml-1.5 inline-block h-4 w-4 rounded-sm bg-sky-500"></div>
+          <div className="things-bubbles ml-1.5 inline-block h-4 w-4 rounded-sm bg-sky-500"></div>
         </h2>
       </div>
     </div>