From a8903284d3d2eaa0a3ca3dde661d79ffbe6bee85 Mon Sep 17 00:00:00 2001
From: Innei <tukon479@gmail.com>
Date: Fri, 22 Aug 2025 19:14:00 +0800
Subject: [PATCH] refactor(animation): update spring presets for smoother
 transitions

- Replaced instances of 'softSpring' with 'smooth' for improved animation consistency across components, including VideoPlayer, BoostModalContent, and SourceContentView.
- Updated transition settings in modal and panel components to utilize 'snappy' for a more responsive feel.
- Removed deprecated spring presets from the constants file to streamline the animation configuration.

These changes enhance the overall user experience by providing smoother and more cohesive animations throughout the application.

Signed-off-by: Innei <tukon479@gmail.com>
---
 .../src/components/ui/media/VideoPlayer.tsx   |  4 +-
 .../components/ui/modal/stacked/constants.ts  |  7 +--
 .../renderer/src/modules/boost/modal.tsx      |  6 +--
 .../src/modules/boost/radio-cards.tsx         |  2 +-
 .../components/SourceContentView.tsx          |  4 +-
 .../layer/renderer/src/modules/panel/cmdf.tsx |  2 +-
 .../src/modules/player/corner-player.tsx      |  2 +-
 .../modules/update-notice/UpdateNotice.tsx    |  2 +-
 .../components/src/constants/spring.ts        | 49 +++----------------
 .../src/ui/auto-resize-height/index.tsx       | 14 +-----
 10 files changed, 19 insertions(+), 73 deletions(-)

diff --git a/apps/desktop/layer/renderer/src/components/ui/media/VideoPlayer.tsx b/apps/desktop/layer/renderer/src/components/ui/media/VideoPlayer.tsx
index ee1214f12..15cb0ad3f 100644
--- a/apps/desktop/layer/renderer/src/components/ui/media/VideoPlayer.tsx
+++ b/apps/desktop/layer/renderer/src/components/ui/media/VideoPlayer.tsx
@@ -71,8 +71,8 @@ export const VideoPlayer = ({
   const isPlayer = variant === "player"
   const [clickToStatus, setClickToStatus] = useState(null as "play" | "pause" | null)
 
-  const scaleValue = useSpring(1, Spring.presets.softSpring)
-  const opacityValue = useSpring(0, Spring.presets.softSpring)
+  const scaleValue = useSpring(1, Spring.presets.smooth)
+  const opacityValue = useSpring(0, Spring.presets.smooth)
   const handleClick = useEventCallback((e?: any) => {
     if (!isPlayer) return
     e?.stopPropagation()
diff --git a/apps/desktop/layer/renderer/src/components/ui/modal/stacked/constants.ts b/apps/desktop/layer/renderer/src/components/ui/modal/stacked/constants.ts
index 9d91e67db..9bf96f465 100644
--- a/apps/desktop/layer/renderer/src/components/ui/modal/stacked/constants.ts
+++ b/apps/desktop/layer/renderer/src/components/ui/modal/stacked/constants.ts
@@ -15,12 +15,9 @@ export const modalMontionConfig = {
   animate: enterStyle,
   exit: {
     ...initialStyle,
-    // no spring
-    transition: {
-      type: "tween",
-    },
+    transition: Spring.presets.smooth,
   },
-  transition: Spring.presets.microRebound,
+  transition: Spring.presets.snappy,
 } satisfies MotionProps
 
 // Radix context menu z-index 999
diff --git a/apps/desktop/layer/renderer/src/modules/boost/modal.tsx b/apps/desktop/layer/renderer/src/modules/boost/modal.tsx
index 06a975068..1eff0a8f1 100644
--- a/apps/desktop/layer/renderer/src/modules/boost/modal.tsx
+++ b/apps/desktop/layer/renderer/src/modules/boost/modal.tsx
@@ -84,11 +84,7 @@ export const BoostModalContent = ({ feedId }: { feedId: string }) => {
 
       {boostFeedMutation.isSuccess ? (
         <>
-          <m.p
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={Spring.presets.softSpring}
-          >
+          <m.p initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={Spring.presets.smooth}>
             {t("boost.boost_success_thanks")}
           </m.p>
           <Button variant="primary" onClick={() => dismiss()}>
diff --git a/apps/desktop/layer/renderer/src/modules/boost/radio-cards.tsx b/apps/desktop/layer/renderer/src/modules/boost/radio-cards.tsx
index b65843c4a..eb61d5533 100644
--- a/apps/desktop/layer/renderer/src/modules/boost/radio-cards.tsx
+++ b/apps/desktop/layer/renderer/src/modules/boost/radio-cards.tsx
@@ -35,7 +35,7 @@ export const RadioCards = ({
         initial={{ height: "auto", opacity: 0 }}
         animate={{ height: "auto", opacity: 1 }}
         exit={{ height: 0, opacity: 0 }}
-        transition={Spring.presets.softSpring}
+        transition={Spring.presets.smooth}
       >
         {radios.map((item) => (
           <RadioCard
diff --git a/apps/desktop/layer/renderer/src/modules/entry-content/components/SourceContentView.tsx b/apps/desktop/layer/renderer/src/modules/entry-content/components/SourceContentView.tsx
index 410381302..4e78601ff 100644
--- a/apps/desktop/layer/renderer/src/modules/entry-content/components/SourceContentView.tsx
+++ b/apps/desktop/layer/renderer/src/modules/entry-content/components/SourceContentView.tsx
@@ -47,7 +47,7 @@ export const SourceContentView = ({ src }: { src: string }) => {
         className="size-full"
         initial={{ opacity: 0 }}
         animate={{ opacity: loading ? 0 : 1 }}
-        transition={Spring.presets.softSpring}
+        transition={Spring.presets.smooth}
       >
         <ViewTag
           ref={webviewRef}
@@ -74,7 +74,7 @@ export const SourceContentPanel = ({ src }: { src: string | null }) => {
           animate="visible"
           exit="exit"
           variants={variants}
-          transition={Spring.presets.softSpring}
+          transition={Spring.presets.smooth}
         >
           <SourceContentView src={src} />
         </m.div>
diff --git a/apps/desktop/layer/renderer/src/modules/panel/cmdf.tsx b/apps/desktop/layer/renderer/src/modules/panel/cmdf.tsx
index afbb30651..1eb597bae 100644
--- a/apps/desktop/layer/renderer/src/modules/panel/cmdf.tsx
+++ b/apps/desktop/layer/renderer/src/modules/panel/cmdf.tsx
@@ -259,7 +259,7 @@ export const CmdF = () => {
             initial={{ opacity: 0.8, y: -150 }}
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: -150 }}
-            transition={Spring.presets.softSpring}
+            transition={Spring.presets.smooth}
           >
             <CmdFImpl
               onClose={() => {
diff --git a/apps/desktop/layer/renderer/src/modules/player/corner-player.tsx b/apps/desktop/layer/renderer/src/modules/player/corner-player.tsx
index 2f33013f6..caa0ec8c3 100644
--- a/apps/desktop/layer/renderer/src/modules/player/corner-player.tsx
+++ b/apps/desktop/layer/renderer/src/modules/player/corner-player.tsx
@@ -64,7 +64,7 @@ export const CornerPlayer = ({ className, ...rest }: ControlButtonProps) => {
           initial={{ y: 50, opacity: 0 }}
           animate={{ y: 0, opacity: 1 }}
           exit={{ y: 50, opacity: 0 }}
-          transition={{ ...Spring.presets.microRebound, duration: 0.2 }}
+          transition={Spring.presets.snappy}
           onClick={(e) => e.stopPropagation()}
         >
           <CornerPlayerImpl {...rest} />
diff --git a/apps/desktop/layer/renderer/src/modules/update-notice/UpdateNotice.tsx b/apps/desktop/layer/renderer/src/modules/update-notice/UpdateNotice.tsx
index 7334b45e7..662b40271 100644
--- a/apps/desktop/layer/renderer/src/modules/update-notice/UpdateNotice.tsx
+++ b/apps/desktop/layer/renderer/src/modules/update-notice/UpdateNotice.tsx
@@ -65,7 +65,7 @@ export const UpdateNotice = () => {
       onClick={handleClick}
       initial={{ y: 50, opacity: 0 }}
       animate={{ y: 0, opacity: 1 }}
-      transition={Spring.presets.softBounce}
+      transition={Spring.presets.snappy}
     >
       <m.div
         layout
diff --git a/packages/internal/components/src/constants/spring.ts b/packages/internal/components/src/constants/spring.ts
index a358862e7..b93ba7529 100644
--- a/packages/internal/components/src/constants/spring.ts
+++ b/packages/internal/components/src/constants/spring.ts
@@ -1,37 +1,5 @@
 import type { Transition } from "motion/react"
 
-const reboundPreset: Transition = {
-  type: "spring",
-  bounce: 10,
-  stiffness: 140,
-  damping: 8,
-}
-
-const microDampingPreset: Transition = {
-  type: "spring",
-  damping: 24,
-}
-
-const microReboundPreset: Transition = {
-  type: "spring",
-  stiffness: 400,
-  damping: 30,
-  duration: 0.3,
-}
-
-const softSpringPreset: Transition = {
-  duration: 0.35,
-  type: "spring",
-  stiffness: 120,
-  damping: 20,
-}
-
-const softBouncePreset: Transition = {
-  type: "spring",
-  damping: 10,
-  stiffness: 100,
-}
-
 /**
  * A smooth spring with a predefined duration and no bounce.
  */
@@ -58,18 +26,13 @@ const bouncyPreset: Transition = {
   duration: 0.4,
   bounce: 0.3,
 }
-class SpringPresets {
-  rebound = reboundPreset
-  microDamping = microDampingPreset
-  microRebound = microReboundPreset
-  softSpring = softSpringPreset
-  softBounce = softBouncePreset
-  smooth = smoothPreset
-  snappy = snappyPreset
-  bouncy = bouncyPreset
-}
+
 class SpringStatic {
-  presets = new SpringPresets()
+  presets = {
+    smooth: smoothPreset,
+    snappy: snappyPreset,
+    bouncy: bouncyPreset,
+  }
 
   /**
    * A smooth spring with a predefined duration and no bounce that can be tuned.
diff --git a/packages/internal/components/src/ui/auto-resize-height/index.tsx b/packages/internal/components/src/ui/auto-resize-height/index.tsx
index 0f41fb632..2ac8bdeaf 100644
--- a/packages/internal/components/src/ui/auto-resize-height/index.tsx
+++ b/packages/internal/components/src/ui/auto-resize-height/index.tsx
@@ -9,7 +9,6 @@ interface AnimateChangeInHeightProps {
   className?: string
   duration?: number
 
-  spring?: boolean
   innerClassName?: string
 }
 
@@ -17,7 +16,7 @@ export const AutoResizeHeight: React.FC<AnimateChangeInHeightProps> = ({
   children,
   className,
   duration = 0.2,
-  spring = false,
+
   innerClassName,
 }) => {
   const containerRef = useRef<HTMLDivElement | null>(null)
@@ -50,16 +49,7 @@ export const AutoResizeHeight: React.FC<AnimateChangeInHeightProps> = ({
       className={cn("overflow-hidden", className)}
       initial={false}
       animate={{ height }}
-      transition={
-        spring
-          ? {
-              ...Spring.presets.softSpring,
-              duration,
-            }
-          : {
-              duration,
-            }
-      }
+      transition={Spring.smooth(duration)}
     >
       <div className={cn("overflow-hidden", innerClassName)} ref={containerRef}>
         {children}