feat(home): intro + outro animations

app/stores/home.ts

@@ -0,0 +1,91 @@
+import gsap from "gsap";
+
+export const useHomeStore = defineStore("home", {
+  state: () => ({
+    intro: {
+      statusBarY: -20,
+      stage1Opacity: 0,
+    },
+
+    outro: {
+      buttonOffsetY: 0,
+      stage1Opacity: 1,
+      stage2Opacity: 1,
+    },
+
+    isIntro: false,
+    isOutro: false,
+  }),
+
+  actions: {
+    animateIntro() {
+      this.isIntro = true;
+
+      const start = 0.5;
+      const duration = 0.5;
+      const delay = 0.35;
+
+      gsap.fromTo(
+        this.intro,
+        { stage1Opacity: 0 },
+        {
+          stage1Opacity: 1,
+          duration,
+          delay: start,
+          ease: "none",
+          onComplete: () => {
+            this.isIntro = false;
+          },
+        },
+      );
+
+      gsap.fromTo(
+        this.intro,
+        { statusBarY: -20 },
+        {
+          statusBarY: 0,
+          duration: duration - delay,
+          delay: start + delay,
+          ease: "none",
+        },
+      );
+    },
+
+    animateOutro() {
+      this.isOutro = true;
+
+      const duration = 0.4;
+      const delay = 0.08;
+
+      gsap.fromTo(
+        this.outro,
+        {
+          buttonOffsetY: 0,
+          stage1Opacity: 1,
+        },
+        {
+          buttonOffsetY: -200,
+          stage1Opacity: 0,
+          duration,
+          delay,
+          ease: "none",
+          onComplete: () => {
+            this.isOutro = true;
+          },
+        },
+      );
+
+      gsap.fromTo(
+        this.outro,
+        {
+          stage2Opacity: 1,
+        },
+        {
+          stage2Opacity: 0,
+          ease: "none",
+          duration: duration / 2 - delay,
+        },
+      );
+    },
+  },
+});