Try a hover animation, prefer utility classes

app/assets/stylesheets/animation.css

@@ -11,6 +11,13 @@
   75% { transform: translateX(1rem); }
 }
 
+@keyframes shimmy {
+  0%  { transform: translateX(-0.5rem); }
+  25% { transform: translateX(0.5rem); }
+  50% { transform: translateX(-0.2rem); }
+  75% { transform: translateX(0.2rem); }
+}
+
 @keyframes splat {
   0% { transform: scale(150%); opacity: 0; }
   29% { transform: scale(150%); opacity: 0; }

app/assets/stylesheets/splats.css

@@ -3,11 +3,6 @@
 }
 
 .windshield {
-  align-items: end;
-  background-color: var(--color-bg);
-  display: inline-flex;
-  flex-wrap: wrap;
-  justify-content: center;
   margin-block: clamp(var(--block-space), 3%, calc(var(--block-space) * 2));
 
   > * {
@@ -51,6 +46,7 @@
 
   @media (hover: hover) {
     .windshield &:hover {
+      animation: shimmy 400ms normal forwards ease-out;
       scale: 1.1;
       z-index: 999;
 

app/views/splats/index.html.erb

@@ -25,7 +25,7 @@
   </nav>
 <% end %>
 
-<section class="windshield">
+<section class="windshield flex-inline flex-wrap gap-half justify-center align-end">
   <%= render @splats.last(10) %>
 </section>