feat(contact): intro animation

app/components/Contact/TopScreen/Background.vue

@@ -1,16 +1,31 @@
 <script setup lang="ts">
-const backgroundImage = useTemplateRef("backgroundImage");
+const store = useContactStore();
+
+const homeBackgroundImage = useTemplateRef("homeBackgroundImage");
+const contactBackgroundImage = useTemplateRef("contactBackgroundImage");
 
 useRender((ctx) => {
-  if (!backgroundImage.value) return;
+  if (!homeBackgroundImage.value || !contactBackgroundImage.value) return;
 
-  ctx.drawImage(backgroundImage.value, 0, 0);
+  ctx.drawImage(contactBackgroundImage.value, 0, 0);
+
+  if (store.isIntro) {
+    ctx.drawImage(homeBackgroundImage.value, 0, 0);
+    ctx.globalAlpha = store.intro.stage2Opacity;
+  }
+
+  ctx.drawImage(contactBackgroundImage.value, 0, 0);
 });
 </script>
 
 <template>
   <img
-    ref="backgroundImage"
+    ref="homeBackgroundImage"
+    src="/assets/images/home/top-screen/background.png"
+    hidden
+  />
+  <img
+    ref="contactBackgroundImage"
     src="/assets/images/contact/top-screen/background.png"
     hidden
   />

app/components/Contact/TopScreen/LeftBar.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+const store = useContactStore();
+
+const backgroundImage = useTemplateRef("backgroundImage");
+const thingsImage = useTemplateRef("thingsImage");
+
+useRender((ctx) => {
+  if (!backgroundImage.value || !thingsImage.value) return;
+
+  ctx.globalAlpha = store.isIntro ? store.intro.stage1Opacity : 1;
+  ctx.drawImage(backgroundImage.value, 0, 0);
+
+  ctx.globalAlpha = store.isIntro ? store.intro.stage3Opacity : 1;
+  ctx.drawImage(thingsImage.value, 0, 0);
+});
+</script>
+
+<template>
+  <img
+    ref="backgroundImage"
+    src="/assets/images/contact/top-screen/left-bar.png"
+    hidden
+  />
+  <img
+    ref="thingsImage"
+    src="/assets/images/contact/top-screen/left-bar-things.png"
+    hidden
+  />
+</template>

app/components/Contact/TopScreen/Title.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const store = useContactStore();
+
+const titleImage = useTemplateRef("titleImage");
+
+useRender((ctx) => {
+  if (!titleImage.value) return;
+
+  ctx.globalAlpha = store.isIntro ? store.intro.stage1Opacity : 1;
+  ctx.drawImage(
+    titleImage.value,
+    21,
+    store.isIntro ? store.intro.titleY : SCREEN_HEIGHT - 23,
+  );
+});
+</script>
+
+<template>
+  <img
+    ref="titleImage"
+    src="/assets/images/contact/top-screen/title.png"
+    hidden
+  />
+</template>

app/components/Contact/TopScreen/TopScreen.vue

@@ -1,7 +1,12 @@
 <script setup lang="ts">
 import Background from "./Background.vue";
+import LeftBar from "./LeftBar.vue";
+import Title from "./Title.vue";
 </script>
 
 <template>
   <Background />
+
+  <LeftBar />
+  <Title />
 </template>