[+] Hearts

src/App.svelte

@@ -16,6 +16,7 @@
   let state = 0
 
   // Reference to the image element
+  let mainEl: HTMLElement
   let divEl: HTMLDivElement
   let imgEl: HTMLImageElement
 
@@ -92,11 +93,23 @@
     imgEl.style.cssText = Object.keys(obj).map(key => `${key}: ${obj[key]}`).join('; ')
   }
 
-  onMount(() => setTimeout(divStyles, 100)
+  onMount(() => setTimeout(divStyles, 100))
-)
+
+  // This function creates a heart at the click position.
+  function createHeart(event: MouseEvent) {
+    console.log("Creating heart")
+    const heart = document.createElement('div');
+    heart.className = 'heart';
+    // Position the heart at the cursor's location.
+    heart.style.left = `${event.clientX + Math.random() * 20 - 10}px`;
+    heart.style.top = `${event.clientY + Math.random() * 20 - 10}px`;
+    mainEl.appendChild(heart);
+    // Remove the heart element after the animation duration (e.g., 2s)
+    setTimeout(() => heart.remove(), 2000);
+  }
 </script>
 
-<main>
+<main bind:this={mainEl}>
   <div class="info">
     <h1>半熟迷子工作室</h1>
     <div>
@@ -106,7 +119,8 @@
     </div>
   </div>
   <div class="img" bind:this={divEl}>
-    <img bind:this={imgEl} src={rana} alt="rana" on:mouseenter={onHover}/>
+    <img bind:this={imgEl} src={rana} alt="rana" on:mouseenter={onHover}
+      on:click={createHeart} role="none" />
   </div>
 </main>
 

src/app.sass

@@ -11,6 +11,7 @@
 html
   width: 100%
   height: 100%
+  user-select: none
 
 body
   margin: 0
@@ -26,3 +27,38 @@ a
 
 *
   cursor: url("./matcha_cursor.png") 16 16, auto
+
+.heart 
+  position: fixed
+  width: 20px
+  height: 20px
+  background: red
+  transform: rotate(-45deg)
+  animation: float 2s ease-out forwards
+  pointer-events: none /* so it doesn’t block further clicks */
+
+/* Create the two circular parts of the heart using pseudo-elements */
+.heart::before, .heart::after 
+  content: ""
+  position: absolute
+  background: red
+  border-radius: 50%
+  width: 20px
+  height: 20px
+
+.heart::before
+  top: -10px
+  left: 0
+
+.heart::after
+  left: 10px
+  top: 0
+
+@keyframes float 
+  0% 
+    opacity: 1
+    transform: translateY(0) scale(1) rotate(-45deg)
+  
+  100% 
+    opacity: 0
+    transform: translateY(-100px) scale(1.5) rotate(-45deg)