feat: Optimize poster wall animation

ximu3 · Nov 29, 2024 · 07e2de5 · 07e2de5
1 parent bd6fd85
commit 07e2de5
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 10 deletions.
diff --git a/src/renderer/src/components/Showcase/posters/BigGamePoster.tsx b/src/renderer/src/components/Showcase/posters/BigGamePoster.tsx
@@ -28,7 +28,7 @@ export function BigGamePoster({
     [gameId, gameIndex]
 
   return (
-    <HoverCard>
+    <HoverCard openDelay={300} closeDelay={100}>
       <HoverCardTrigger className={cn('rounded-none')}>
         <ContextMenu>
           <ContextMenuTrigger className={cn('rounded-none')}>

diff --git a/src/renderer/src/components/Showcase/posters/GamePoster.tsx b/src/renderer/src/components/Showcase/posters/GamePoster.tsx
@@ -25,7 +25,7 @@ export function GamePoster({
   const [gameName] = useDBSyncedState('', `games/${gameId}/metadata.json`, ['name'])
 
   return (
-    <HoverCard>
+    <HoverCard openDelay={300} closeDelay={100}>
       <HoverCardTrigger>
         <ContextMenu>
           <ContextMenuTrigger>

diff --git a/src/renderer/src/components/animations/HoverBigCard.tsx b/src/renderer/src/components/animations/HoverBigCard.tsx
@@ -43,12 +43,12 @@ export function HoverBigCardAnimation({
   imageConfig = {
     scale: {
       initial: 1,
-      hover: 1.01
+      hover: 1.03
     }
   },
   animationConfig = {
-    tension: 600,
-    friction: 90
+    tension: 730,
+    friction: 100
   },
   ...rest
 }: HoverBigCardProps): JSX.Element {

diff --git a/src/renderer/src/components/animations/HoverCard.tsx b/src/renderer/src/components/animations/HoverCard.tsx
@@ -19,14 +19,14 @@ export function HoverCardAnimation({
   children,
   className,
   onClick,
-  liftAmount = 4,
+  liftAmount = 6,
   shadowConfig = {
     initial: '0 4px 8px rgba(0, 0, 0, 0.7)',
     hover: '0 8px 16px rgba(0, 0, 0, 1)'
   },
   animationConfig = {
-    tension: 600,
-    friction: 90
+    tension: 730,
+    friction: 100
   },
   ...rest
 }: HoverCardProps): JSX.Element {

diff --git a/src/renderer/src/components/animations/HoverSquareCard.tsx b/src/renderer/src/components/animations/HoverSquareCard.tsx
@@ -27,8 +27,8 @@ export function HoverSquareCardAnimation({
     }
   },
   animationConfig = {
-    tension: 600,
-    friction: 90
+    tension: 730,
+    friction: 100
   },
   ...rest
 }: HoverSquareCardProps): JSX.Element {