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>

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()

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

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()}>

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

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>

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={() => {

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} />

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

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.

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}