feat: Update hero animation to abyss effect

Author: @M-Yuu23586

docs/pages/css/style.css

@@ -181,6 +181,7 @@ section h3 {
     pointer-events: none; /* Allow clicks to pass through */
     opacity: 0;
     z-index: 11; /* Add z-index, higher than indicator */
+    white-space: nowrap; /* Prevent line breaks */
 }
 
 

docs/pages/index.html

@@ -25,32 +25,48 @@ <h1>TrackWeight</h1>
                 <div id="weight-indicator"></div>
                 <div id="weight-display">0.00 g</div>
                 <!-- Inlined SVG to ensure animation plays correctly -->
-                <svg viewBox="0 0 240 150" fill="none" xmlns="http://www.w3.org/2000/svg" class="trackpad-svg" aria-label="MacBook Trackpad with click and hold animation">
-                  <defs>
-                    <linearGradient id="trackpad-gradient" x1="120" y1="0" x2="120" y2="150" gradientUnits="userSpaceOnUse">
-                      <stop stop-color="#EAEAEA"/>
-                      <stop offset="1" stop-color="#D7D7D7"/>
-                    </linearGradient>
-                  </defs>
-                  <rect x="1" y="1" width="238" height="148" rx="12" ry="12" fill="url(#trackpad-gradient)" stroke="#C4C4C4" stroke-width="2"/>
-                  <!-- A simple circle animation to indicate interactivity -->
-                  <circle cx="120" cy="75" r="0" fill="#007AFF" fill-opacity="0">
-                    <animate 
-                      attributeName="r" 
-                      values="0; 20; 20; 0" 
-                      dur="2.5s" 
-                      repeatCount="indefinite"
-                      keyTimes="0; 0.4; 0.8; 1"
-                    />
-                    <animate 
-                      attributeName="fill-opacity" 
-                      values="0; 0.7; 0.7; 0" 
-                      dur="2.5s" 
-                      repeatCount="indefinite"
-                      keyTimes="0; 0.4; 0.8; 1"
-                    />
-                  </circle>
-                </svg>
+                <svg width="240" height="150" viewBox="0 0 240 150" fill="none" xmlns="http://www.w3.org/2000/svg" class="trackpad-svg">
+  <defs>
+    <linearGradient id="trackpad-gradient" x1="120" y1="0" x2="120" y2="150" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#EAEAEA"/>
+      <stop offset="1" stop-color="#D7D7D7"/>
+    </linearGradient>
+  </defs>
+  
+  <!-- トラックパッド本体 -->
+  <rect x="1" y="1" width="238" height="148" rx="12" ry="12" fill="url(#trackpad-gradient)" stroke="#C4C4C4" stroke-width="2"/>
+
+  <!-- アニメーション用のグループ -->
+  <g style="user-select: none;">
+    <!-- 下向きの矢印 -->
+    <path d="M120 65 L114 57 L117 57 L117 45 L123 45 L123 57 L126 57 Z" fill="#007AFF">
+      <animateTransform 
+        attributeName="transform"
+        type="translate"
+        values="0 0; 0 5; 0 0"
+        dur="1.8s"
+        repeatCount="indefinite"
+        keyTimes="0; 0.5; 1"
+        calcMode="spline" 
+        keySplines="0.42 0 0.58 1; 0.42 0 0.58 1"
+      />
+    </path>
+
+    <!-- テキスト -->
+    <text x="120" y="90" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="14" font-weight="600" fill="#007AFF" text-anchor="middle">
+      Click & Hold
+      <animate 
+        attributeName="opacity"
+        values="1; 0.3; 1"
+        dur="1.8s"
+        repeatCount="indefinite"
+        keyTimes="0; 0.5; 1"
+        calcMode="spline" 
+        keySplines="0.42 0 0.58 1; 0.42 0 0.58 1"
+      />
+    </text>
+  </g>
+</svg>
             </div>
             <a href="https://github.com/krishkrosh/TrackWeight/releases" class="cta-button">Download now, laugh later</a>
         </section>

docs/pages/js/trackpad-animation.js

@@ -71,7 +71,7 @@ document.addEventListener('DOMContentLoaded', () => {
         currentWeight = 0;
         const updateWeight = () => {
             currentWeight += Math.random() * 5; // 重量の増加をシミュレート
-            if (currentWeight > 1000) currentWeight = 1000; // 上限を1000gに設定
+            if (currentWeight > 500) currentWeight = 500; // 上限を500gに設定
             weightDisplay.textContent = `${currentWeight.toFixed(2)} g`;
             animationFrameId = requestAnimationFrame(updateWeight);
         };