feat(home): intro + outro animations

app/components/Home/TopScreen/Clock.vue

@@ -2,6 +2,10 @@
 const CENTER_X = 63;
 const CENTER_Y = 95;
 
+const store = useHomeStore();
+
+const clockImage = useTemplateRef("clockImage");
+
 function drawLine(
   ctx: CanvasRenderingContext2D,
   x0: number,
@@ -48,6 +52,16 @@ function drawLine(
 }
 
 useRender((ctx) => {
+  if (!clockImage.value) return;
+
+  ctx.globalAlpha = store.isIntro
+    ? store.intro.stage1Opacity
+    : store.outro.stage1Opacity;
+  ctx.drawImage(clockImage.value, 13, 45);
+
+  ctx.globalAlpha = store.isIntro
+    ? store.intro.stage1Opacity
+    : store.outro.stage2Opacity;
   const now = new Date();
 
   const renderHand = (
@@ -75,8 +89,8 @@ useRender((ctx) => {
   ctx.fillStyle = "#494949";
   ctx.fillRect(CENTER_X - 2, CENTER_Y - 2, 5, 5);
 });
-
-defineOptions({
-  render: () => null,
-});
 </script>
+
+<template>
+  <img ref="clockImage" src="/assets/images/home/top-screen/clock.png" hidden />
+</template>