From 24fb38130e83434c49a8cc7fe247ec1016e5d65f Mon Sep 17 00:00:00 2001
From: multipleof4 <planetrenox@protonmail.com>
Date: Mon, 23 Feb 2026 17:01:36 -0800
Subject: [PATCH] Refactor: Sync all 16 points to rapid non-rotating pulse

---
 index.html | 59 ++++++++++++++++++------------------------------------
 1 file changed, 19 insertions(+), 40 deletions(-)
diff --git a/index.html b/index.html
index f11e7ff..b4d553c 100644
--- a/index.html
+++ b/index.html
@@ -7,36 +7,18 @@
 <script src="https://cdn.tailwindcss.com"></script>
 <style>
   /* 
-    The core rotation creates a surging, non-linear "thinking" motion. 
-    It sweeps forward, slows down seamlessly, then sweeps again. 
+    Super quick, life-like pulse. 
+    All 16 points expand and contract simultaneously while the core stays grounded.
   */
-  .s-spin { 
-    animation: s-surge 2s infinite; 
-    transform-origin: 50% 50%; 
-  }
-  
-  /* 
-    Odd and Even spikes pulse out of sync with each other 
-    creating an organic, jellyfish-like breathing effect.
-  */
-  .s-even { transform-origin: 50px 50px; animation: s-pulse-e 2s infinite; }
-  .s-odd { transform-origin: 50px 50px; animation: s-pulse-o 2s infinite; }
-
-  @keyframes s-surge {
-    0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
-    50% { transform: rotate(45deg); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
-    100% { transform: rotate(90deg); }
+  .s-spikes-pulse { 
+    transform-origin: 50px 50px; 
+    animation: s-rapid 0.35s infinite; 
   }
 
-  @keyframes s-pulse-e {
+  @keyframes s-rapid {
     0%, 100% { transform: scale(1); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
     50% { transform: scale(0.6); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
   }
-
-  @keyframes s-pulse-o {
-    0%, 100% { transform: scale(0.6); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
-    50% { transform: scale(1); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
-  }
 </style>
 </head>
 <body class="bg-gray-50 flex flex-col items-center justify-center min-h-screen gap-12 text-sm selection:bg-black/10 font-sans">
@@ -47,24 +29,23 @@
     <!-- Master spike perfectly tuned to match the logo proportions -->
     <polygon id="spike" points="47,50 50,2 53,50"/>
     
-    <g id="s-even">
+    <!-- All 16 spikes combined into a single group -->
+    <g id="s-spikes">
       <use href="#spike"/>
-      <use href="#spike" transform="rotate(45 50 50)"/>
-      <use href="#spike" transform="rotate(90 50 50)"/>
-      <use href="#spike" transform="rotate(135 50 50)"/>
-      <use href="#spike" transform="rotate(180 50 50)"/>
-      <use href="#spike" transform="rotate(225 50 50)"/>
-      <use href="#spike" transform="rotate(270 50 50)"/>
-      <use href="#spike" transform="rotate(315 50 50)"/>
-    </g>
-    <g id="s-odd">
       <use href="#spike" transform="rotate(22.5 50 50)"/>
+      <use href="#spike" transform="rotate(45 50 50)"/>
       <use href="#spike" transform="rotate(67.5 50 50)"/>
+      <use href="#spike" transform="rotate(90 50 50)"/>
       <use href="#spike" transform="rotate(112.5 50 50)"/>
+      <use href="#spike" transform="rotate(135 50 50)"/>
       <use href="#spike" transform="rotate(157.5 50 50)"/>
+      <use href="#spike" transform="rotate(180 50 50)"/>
       <use href="#spike" transform="rotate(202.5 50 50)"/>
+      <use href="#spike" transform="rotate(225 50 50)"/>
       <use href="#spike" transform="rotate(247.5 50 50)"/>
+      <use href="#spike" transform="rotate(270 50 50)"/>
       <use href="#spike" transform="rotate(292.5 50 50)"/>
+      <use href="#spike" transform="rotate(315 50 50)"/>
       <use href="#spike" transform="rotate(337.5 50 50)"/>
     </g>
   </defs>
@@ -81,10 +62,9 @@
         <div class="bg-gray-200 text-gray-900 shrink-0 h-7 w-7 rounded-full flex items-center justify-center">
           
           <!-- Animated Sune Logo -->
-          <svg viewBox="0 0 100 100" class="w-4 h-4 text-black s-spin">
+          <svg viewBox="0 0 100 100" class="w-4 h-4 text-black">
             <circle cx="50" cy="50" r="14" fill="currentColor"/>
-            <use href="#s-even" class="s-even" fill="currentColor"/>
-            <use href="#s-odd" class="s-odd" fill="currentColor"/>
+            <use href="#s-spikes" class="s-spikes-pulse" fill="currentColor"/>
           </svg>
           
         </div>
@@ -101,10 +81,9 @@
 <div class="flex flex-col items-center gap-4">
   <h2 class="text-[11px] font-bold text-gray-400 uppercase tracking-widest">Magnified View</h2>
   <div class="w-32 h-32 flex items-center justify-center bg-white rounded-full shadow-[0_10px_30px_rgba(0,0,0,0.08)] border border-gray-100">
-    <svg viewBox="0 0 100 100" class="w-16 h-16 text-black s-spin">
+    <svg viewBox="0 0 100 100" class="w-16 h-16 text-black">
       <circle cx="50" cy="50" r="14" fill="currentColor"/>
-      <use href="#s-even" class="s-even" fill="currentColor"/>
-      <use href="#s-odd" class="s-odd" fill="currentColor"/>
+      <use href="#s-spikes" class="s-spikes-pulse" fill="currentColor"/>
     </svg>
   </div>
 </div>
