From e26f58e9dcb8d6bfb8c6ead82f9e6cf5cf2cdf08 Mon Sep 17 00:00:00 2001
From: Pas <74743263+Pasithea0@users.noreply.github.com>
Date: Sat, 18 Jan 2025 21:07:58 -0700
Subject: [PATCH] add "jiggle physics"

---
 src/assets/css/index.css           | 13 +++++++++++++
 src/components/media/MediaCard.tsx |  6 +++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/assets/css/index.css b/src/assets/css/index.css
index 49788ee8..ff1af94c 100644
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@@ -238,3 +238,16 @@ input[type=range].styled-slider.slider-progress::-ms-fill-lower {
   /* default - otherwise it overwrites*/
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
 }
+
+@keyframes jiggle {
+  0%, 100% {
+    transform: rotate(-1deg);
+  }
+  50% {
+    transform: rotate(1deg);
+  }
+}
+
+.jiggle {
+  animation: jiggle 0.25s infinite;
+}
diff --git a/src/components/media/MediaCard.tsx b/src/components/media/MediaCard.tsx
index 3db718f8..b21046ec 100644
--- a/src/components/media/MediaCard.tsx
+++ b/src/components/media/MediaCard.tsx
@@ -129,7 +129,11 @@ function MediaCardContent({
   };
 
   return (
-    <div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
+    <div
+      className={classNames("media-card-content", { jiggle: closable })}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
       <Flare.Base
         className={`group -m-[0.705em] rounded-xl bg-background-main transition-colors duration-300 focus:relative focus:z-10 ${
           canLink ? "hover:bg-mediaCard-hoverBackground tabbable" : ""