feat(intro): implement intro screen

2026-01-12 16:13:01 +01:00
parent 5e1b8df381
commit 71a3a61b66
48 changed files with 218 additions and 5 deletions
--- a/app/stores/intro.ts
+++ b/app/stores/intro.ts
@@ -0,0 +1,68 @@
+import gsap from "gsap";
+
+export const useIntroStore = defineStore("intro", {
+  state: () => ({
+    intro: {
+      textOpacity: 0,
+      logoFrameIndex: 0,
+    },
+
+    outro: {
+      textOpacity: 1,
+    },
+
+    isIntro: true,
+    isOutro: false,
+  }),
+
+  actions: {
+    animateIntro() {
+      this.isIntro = true;
+
+      const { assets } = useAssets();
+      const totalFrames = Object.keys(assets.images.intro.logoAnimated).length;
+      const logoDuration = totalFrames / 25;
+
+      gsap
+        .timeline()
+        .to({}, { duration: 2 })
+        .to(
+          this.intro,
+          {
+            textOpacity: 1,
+            duration: 0.1,
+            ease: "none",
+          },
+          3,
+        )
+        .to(
+          this.intro,
+          {
+            logoFrameIndex: totalFrames - 1,
+            duration: logoDuration,
+            ease: "steps(" + (totalFrames - 1) + ")",
+          },
+          3,
+        )
+        .call(() => {
+          this.isIntro = false;
+        });
+    },
+
+    animateOutro() {
+      this.isOutro = true;
+
+      gsap
+        .timeline()
+        .to(this.outro, {
+          textOpacity: 0,
+          duration: 0.25,
+          ease: "none",
+        })
+        .call(() => {
+          const app = useAppStore();
+          app.booted = true;
+        });
+    },
+  },
+});