add "jiggle physics"

This commit is contained in:
Pas 2025-01-18 21:07:58 -07:00
parent 1390f653c1
commit e26f58e9dc
2 changed files with 18 additions and 1 deletions

View file

@ -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;
}

View file

@ -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" : ""