feat(14): animated countdown to house choice

14-rock-paper-scissors/src/input.css

@@ -21,3 +21,18 @@
 .slowly-appear {
   animation: slowly-appear 3s;
 }
+
+@keyframes pulsing-animation {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.pulsing-animation {
+  animation: pulsing-animation 1s;
+  animation-iteration-count: 3;
+  transform-origin: center;
+}

14-rock-paper-scissors/src/main/resources/public/output.css

@@ -905,10 +905,6 @@ video {
   line-height: 1;
 }
 
-.tracking-wide {
-  letter-spacing: 0.025em;
-}
-
 .tracking-widest {
   letter-spacing: 0.1em;
 }
@@ -928,6 +924,10 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.opacity-20 {
+  opacity: 0.2;
+}
+
 /* div, section, span, p { */
 
 /*     outline: 1px solid red; */
@@ -951,3 +951,19 @@ video {
 .slowly-appear {
   animation: slowly-appear 3s;
 }
+
+@keyframes pulsing-animation {
+  0% {
+    transform: scale(0);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+.pulsing-animation {
+  animation: pulsing-animation 1s;
+  animation-iteration-count: 3;
+  transform-origin: center;
+}

14-rock-paper-scissors/src/main/resources/templates/showdown.html

@@ -124,6 +124,9 @@
                 <div
                   class="rounded-full mt-[1rem] bg-radial-gradient-top h-[100px] w-[100px]"
                 ></div>
+                <div
+                  class="absolute bg-white rounded-full opacity-20 w-[100px] h-[100px] mt-[1rem] pulsing-animation"
+                ></div>
               </div>
             </div>
             <p