feat(home): intro + outro animations

app/components/Home/TopScreen/StatusBar.vue

@@ -1,14 +1,30 @@
 <script setup lang="ts">
+const store = useHomeStore();
+
+const statusBarImage = useTemplateRef("statusBarImage");
 const gbaDisplayImage = useTemplateRef("gbaDisplayImage");
 const startupModeImage = useTemplateRef("startupModeImage");
 const batteryImage = useTemplateRef("batteryImage");
 
+// TODO: don't call it here
+callOnce("intro", () => store.animateIntro());
+
 useRender((ctx) => {
-  if (!gbaDisplayImage.value || !startupModeImage.value || !batteryImage.value)
+  if (
+    !statusBarImage.value ||
+    !gbaDisplayImage.value ||
+    !startupModeImage.value ||
+    !batteryImage.value
+  )
     return;
 
   const TEXT_Y = 11;
 
+  ctx.translate(0, store.intro.statusBarY);
+
+  ctx.globalAlpha = store.outro.stage2Opacity;
+  ctx.drawImage(statusBarImage.value, 0, 0);
+
   ctx.fillStyle = "#ffffff";
   ctx.font = "7px NDS7";
 
@@ -44,6 +60,11 @@ useRender((ctx) => {
 </script>
 
 <template>
+  <img
+    ref="statusBarImage"
+    src="/assets/images/home/top-screen/status-bar/status-bar.png"
+    hidden
+  />
   <img
     ref="gbaDisplayImage"
     src="/assets/images/home/top-screen/status-bar/gba-display.png"