From 244216520e0a1b1fb921fdff2393888a646ce307 Mon Sep 17 00:00:00 2001
From: soryu <soryu@soryu.co>
Date: Tue, 9 Dec 2025 23:19:03 +0000
Subject: Animate rings with dashed pulse

---
 makima/frontend/public/index.html | 121 ++++++++++++++++++++++++++++++++++++--
 1 file changed, 115 insertions(+), 6 deletions(-)

(limited to 'makima/frontend')

diff --git a/makima/frontend/public/index.html b/makima/frontend/public/index.html
index 70760d9..83544a1 100644
--- a/makima/frontend/public/index.html
+++ b/makima/frontend/public/index.html
@@ -347,6 +347,26 @@
         overflow: hidden;
         z-index: 1;
       }
+      .scan-sweep {
+        position: absolute;
+        inset: 10%;
+        border-radius: 50%;
+        background: radial-gradient(
+          circle,
+          rgba(117, 170, 252, 0.4) 0%,
+          rgba(117, 170, 252, 0.2) 38%,
+          rgba(15, 60, 120, 0.1) 64%,
+          transparent 85%
+        );
+        opacity: 0;
+        mix-blend-mode: screen;
+        filter: blur(0.8px);
+        z-index: 1;
+        transform: scale(0.65);
+      }
+      .scan-sweep.sweep-2 {
+        animation-delay: 1.2s;
+      }
       .logo-shell::before {
         content: "";
         position: absolute;
@@ -370,21 +390,45 @@
         mask-image: radial-gradient(circle, rgba(0, 0, 0, 0.25) 40%, transparent 80%);
         opacity: 0.7;
       }
+      .logo-shell:hover .scan-sweep {
+        opacity: 0.7;
+        animation: sweep-out 2.4s ease-out infinite;
+      }
       .logo-svg {
         width: 160px;
         height: 160px;
         z-index: 2;
         transition: filter 0.4s ease;
       }
-      .logo-svg circle {
-        transition: opacity 0.4s ease;
+      .logo-svg .ring {
+        fill: none;
+        stroke: #0f3c78;
+        stroke-dasharray: 400 0;
+        stroke-linecap: butt;
+        transition: stroke 0.35s ease, opacity 0.35s ease;
+      }
+      .logo-svg .core {
+        fill: #0f3c78;
       }
       .logo-shell:hover .logo-svg {
         filter: drop-shadow(0 0 14px rgba(15, 60, 120, 0.45));
       }
+      .logo-shell:hover .ring-outer {
+        animation: ring-scan 2.4s cubic-bezier(0.45, 0.05, 0.25, 1) infinite;
+        animation-delay: 0.7s;
+      }
+      .logo-shell:hover .ring-middle {
+        animation: ring-scan 2.4s cubic-bezier(0.45, 0.05, 0.25, 1) infinite;
+        animation-delay: 0.35s;
+      }
+      .logo-shell:hover .ring-inner {
+        animation: ring-scan 2.4s cubic-bezier(0.45, 0.05, 0.25, 1) infinite;
+        animation-delay: 0s;
+      }
       .logo-shell:hover::before {
         opacity: 1;
         transform: scale(1.08);
+        animation: glow-pulse 1.6s ease-in-out infinite;
       }
       .halo {
         position: absolute;
@@ -420,6 +464,69 @@
           transform: rotate(360deg);
         }
       }
+      @keyframes glow-pulse {
+        0% {
+          opacity: 0.4;
+          transform: scale(1.02);
+        }
+        50% {
+          opacity: 1;
+          transform: scale(1.12);
+        }
+        100% {
+          opacity: 0.4;
+          transform: scale(1.02);
+        }
+      }
+      @keyframes ring-scan {
+        0% {
+          stroke: #0f3c78;
+          opacity: 0.9;
+          stroke-dasharray: 400 0;
+          stroke-linecap: butt;
+        }
+        25% {
+          stroke: #6fa0ff;
+          opacity: 1;
+          stroke-dasharray: 18 14;
+          stroke-linecap: round;
+        }
+        55% {
+          stroke: #1e4c94;
+          opacity: 0.88;
+          stroke-dasharray: 10 18;
+        }
+        70% {
+          stroke: #0f3c78;
+          opacity: 0.9;
+          stroke-dasharray: 6 22;
+        }
+        90% {
+          stroke: #aac6ff;
+          opacity: 0.82;
+          stroke-dasharray: 4 26;
+        }
+        100% {
+          stroke: #0f3c78;
+          opacity: 0.9;
+          stroke-dasharray: 400 0;
+          stroke-linecap: butt;
+        }
+      }
+      @keyframes sweep-out {
+        0% {
+          opacity: 0.45;
+          transform: scale(0.55);
+        }
+        40% {
+          opacity: 0.7;
+          transform: scale(1.0);
+        }
+        100% {
+          opacity: 0;
+          transform: scale(1.35);
+        }
+      }
       .notice-panel {
         border: 1px solid #b3c8e8;
         background: #fdfdff;
@@ -619,6 +726,8 @@
           </div>
           <div class="hero-logo">
             <div class="logo-shell" aria-hidden="true">
+              <span class="scan-sweep"></span>
+              <span class="scan-sweep sweep-2"></span>
               <svg
                 class="logo-svg"
                 viewBox="0 0 120 120"
@@ -626,10 +735,10 @@
                 role="img"
                 focusable="false"
               >
-                <circle cx="60" cy="60" r="52" fill="none" stroke="#0f3c78" stroke-width="4" />
-                <circle cx="60" cy="60" r="36" fill="none" stroke="#0f3c78" stroke-width="3" />
-                <circle cx="60" cy="60" r="22" fill="none" stroke="#0f3c78" stroke-width="3" />
-                <circle cx="60" cy="60" r="8" fill="#0f3c78" />
+                <circle class="ring ring-outer" cx="60" cy="60" r="52" stroke-width="4" />
+                <circle class="ring ring-middle" cx="60" cy="60" r="36" stroke-width="3" />
+                <circle class="ring ring-inner" cx="60" cy="60" r="22" stroke-width="3" />
+                <circle class="core" cx="60" cy="60" r="8" />
               </svg>
             </div>
             <div class="halo" aria-hidden="true"></div>
-- 
cgit v1.2.3