feat(contact): intro animation

app/components/Common/ButtonSelector.vue

@@ -5,15 +5,17 @@ const props = withDefaults(
     y: number;
     width: number;
     height: number;
-    animationSpeed?: number;
+    opacity?: number;
   }>(),
   {
-    animationSpeed: 0.25,
+    opacity: 1,
   },
 );
 
 const cornerImage = useTemplateRef("cornerImage");
 
+const ANIMATION_SPEED = 0.25;
+
 let currentX = props.x;
 let currentY = props.y;
 let currentWidth = props.width;
@@ -38,10 +40,10 @@ useRender((ctx) => {
     currentWidth = props.width;
     currentHeight = props.height;
   } else {
-    currentX += dx * props.animationSpeed;
-    currentY += dy * props.animationSpeed;
-    currentWidth += dw * props.animationSpeed;
-    currentHeight += dh * props.animationSpeed;
+    currentX += dx * ANIMATION_SPEED;
+    currentY += dy * ANIMATION_SPEED;
+    currentWidth += dw * ANIMATION_SPEED;
+    currentHeight += dh * ANIMATION_SPEED;
   }
 
   const x = Math.floor(currentX);
@@ -49,6 +51,8 @@ useRender((ctx) => {
   const w = Math.floor(currentWidth);
   const h = Math.floor(currentHeight);
 
+  ctx.globalAlpha = props.opacity;
+
   ctx.drawImage(cornerImage.value, x, y);
 
   ctx.save();