From 1b371ff2b7bb749542ea73cb126cf90e92fa8037 Mon Sep 17 00:00:00 2001
From: BOTAlex <zhentao2004@gmail.com>
Date: Thu, 14 Aug 2025 06:38:15 +0200
Subject: [PATCH] chatgpt cookeed an animation

---
 src/pages/shop/comps/ShopItemCard.svelte | 62 ++++++++++++++++++------
 1 file changed, 48 insertions(+), 14 deletions(-)

diff --git a/src/pages/shop/comps/ShopItemCard.svelte b/src/pages/shop/comps/ShopItemCard.svelte
index c2147ae..c23339f 100644
--- a/src/pages/shop/comps/ShopItemCard.svelte
+++ b/src/pages/shop/comps/ShopItemCard.svelte
@@ -7,8 +7,10 @@
 </script>
 
 <div class="">
-  <div class="relative">
-    <div class="relative w-48 h-48 corner-border-container"></div>
+  <div class="relative w-48 h-48">
+    <!-- moved w/h here -->
+    <div class="corner-border-container"></div>
+    <!-- removed 'relative w-48 h-48' -->
     <div
       class="absolute"
       style:top={`${-(selectionScale - 100) / 2}%`}
@@ -29,10 +31,18 @@
 
 <style>
   .corner-border-container {
-    --length: 5px;
-    --width: 1px;
+    /* Controls */
+    --length: 8px;
+    --width: 2px;
     --line-color: #eeeeee;
-    background-color: #0008;
+
+    /* Sit on top of the image */
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    pointer-events: none;
+
+    /* Corner lines (same 8-gradients as before) */
     background-image:
       linear-gradient(var(--line-color), var(--line-color)),
       linear-gradient(var(--line-color), var(--line-color)),
@@ -42,15 +52,6 @@
       linear-gradient(var(--line-color), var(--line-color)),
       linear-gradient(var(--line-color), var(--line-color)),
       linear-gradient(var(--line-color), var(--line-color));
-    background-size:
-      var(--length) var(--width),
-      var(--width) var(--length),
-      var(--length) var(--width),
-      var(--width) var(--length),
-      var(--length) var(--width),
-      var(--width) var(--length),
-      var(--length) var(--width),
-      var(--width) var(--length);
     background-position:
       top left,
       top left,
@@ -61,5 +62,38 @@
       bottom left,
       bottom left;
     background-repeat: no-repeat;
+
+    /* Start: invisible and a bit bigger */
+    opacity: 0;
+    transform: scale(1.06);
+    background-color: transparent;
+
+    /* Draw lines from 0 length */
+    --x: 0;
+    --y: 0;
+    background-size:
+      var(--x) var(--width),
+      var(--width) var(--y),
+      var(--x) var(--width),
+      var(--width) var(--y),
+      var(--x) var(--width),
+      var(--width) var(--y),
+      var(--x) var(--width),
+      var(--width) var(--y);
+
+    transition:
+      opacity 220ms ease,
+      transform 220ms ease,
+      background-size 220ms ease,
+      background-color 220ms ease;
+  }
+
+  /* On hover: normal size + visible + darken backdrop */
+  .relative:hover .corner-border-container {
+    --x: var(--length);
+    --y: var(--length);
+    opacity: 1;
+    transform: scale(1);
+    background-color: #0008;
   }
 </style>