Replace loading animation with a new plant-themed grow-loader in index.html and style.css. The updated loader features sprouting plants that bloom while the beat brews, enhancing the visual experience during loading times.

frontend/index.html

@@ -88,7 +88,20 @@
           placeholder="rainy night in kyoto, soft piano, vinyl crackle..."
         ></textarea>
         <div id="generating" class="hidden">
-          <div class="eq"><i></i><i></i><i></i><i></i><i></i></div>
+          <div class="grow-loader" aria-hidden="true">
+            <span class="sprout">
+              <i class="stem"></i><i class="leaf l"></i><i class="leaf r"></i><i class="bloom"></i>
+            </span>
+            <span class="sprout">
+              <i class="stem"></i><i class="leaf l"></i><i class="leaf r"></i><i class="bloom"></i>
+            </span>
+            <span class="sprout">
+              <i class="stem"></i><i class="leaf l"></i><i class="leaf r"></i><i class="bloom"></i>
+            </span>
+            <span class="sprout">
+              <i class="stem"></i><i class="leaf l"></i><i class="leaf r"></i><i class="bloom"></i>
+            </span>
+          </div>
           <p class="led-status">
             BREWING YOUR BEAT<span class="dots">...</span>
           </p>

frontend/style.css

@@ -465,50 +465,120 @@ body {
   }
 }
 
-.eq {
+/* cozy loader: a little row of plants that sprout, bloom, and loop while the
+   beat brews — green-on-LED to match the machine's dot-matrix screen. */
+.grow-loader {
+  position: relative;
   display: flex;
-  gap: 5px;
+  gap: 13px;
   justify-content: center;
   align-items: flex-end;
+  height: 40px;
+}
+
+/* a soft soil line the sprouts rise from */
+.grow-loader::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  transform: translateX(-50%);
+  width: 118px;
+  height: 3px;
+  border-radius: 2px;
+  background: linear-gradient(#2aa85a, #115f30);
+  box-shadow: 0 0 6px rgba(93, 255, 141, 0.25);
+}
+
+.sprout {
+  position: relative;
+  width: 18px;
   height: 34px;
+  transform-origin: 50% 100%;
+  animation: sprout-grow 2.8s ease-in-out infinite;
+}
+.sprout:nth-child(2) {
+  animation-delay: 0.4s;
+}
+.sprout:nth-child(3) {
+  animation-delay: 0.8s;
+}
+.sprout:nth-child(4) {
+  animation-delay: 1.2s;
 }
 
-.eq i {
-  width: 7px;
+.sprout .stem {
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  width: 2px;
+  height: 22px;
+  margin-left: -1px;
   border-radius: 2px;
   background: linear-gradient(#5dff8d, #1f8f4a);
   box-shadow: 0 0 6px rgba(93, 255, 141, 0.5);
-  animation: eq-bounce 1s ease-in-out infinite;
 }
 
-.eq i:nth-child(1) {
-  height: 40%;
-  animation-delay: 0s;
-}
-.eq i:nth-child(2) {
-  height: 75%;
-  animation-delay: 0.15s;
+.sprout .leaf {
+  position: absolute;
+  bottom: 9px;
+  width: 7px;
+  height: 4px;
+  background: #43e07f;
+  box-shadow: 0 0 4px rgba(93, 255, 141, 0.4);
 }
-.eq i:nth-child(3) {
-  height: 100%;
-  animation-delay: 0.3s;
+.sprout .leaf.l {
+  right: 50%;
+  border-radius: 60% 0 60% 0;
+  transform: rotate(22deg);
+  transform-origin: right center;
 }
-.eq i:nth-child(4) {
-  height: 65%;
-  animation-delay: 0.45s;
+.sprout .leaf.r {
+  left: 50%;
+  border-radius: 0 60% 0 60%;
+  transform: rotate(-22deg);
+  transform-origin: left center;
 }
-.eq i:nth-child(5) {
-  height: 45%;
-  animation-delay: 0.6s;
+
+/* a 5-dot flower head: pale centre + four green petals via box-shadow */
+.sprout .bloom {
+  position: absolute;
+  left: 50%;
+  bottom: 19px;
+  width: 5px;
+  height: 5px;
+  margin-left: -2.5px;
+  border-radius: 50%;
+  background: #d9ffe7;
+  box-shadow:
+    0 -4px 0 #5dff8d,
+    0 4px 0 #5dff8d,
+    -4px 0 0 #5dff8d,
+    4px 0 0 #5dff8d,
+    0 0 8px rgba(93, 255, 141, 0.8);
 }
 
-@keyframes eq-bounce {
-  0%,
-  100% {
-    transform: scaleY(0.5);
+@keyframes sprout-grow {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  12% {
+    opacity: 1;
   }
   50% {
-    transform: scaleY(1);
+    transform: scale(1.08);
+  }
+  62% {
+    transform: scale(1);
+  }
+  88% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
   }
 }