fix: typo

src/components/layout/header/internal/MenuPopover.tsx

@@ -6,7 +6,7 @@ import Link from 'next/link'
 import type { IHeaderMenu } from '../config'
 
 import { FloatPopover } from '~/components/ui/float-popover'
-import { microdampingPreset } from '~/constants/spring'
+import { microDampingPreset } from '~/constants/spring'
 import { clsxm } from '~/lib/helper'
 
 export const MenuPopover: Component<{
@@ -72,7 +72,7 @@ const Item = memo(function Item(
       {isEnter && (
         <m.span
           layoutId={currentId}
-          transition={microdampingPreset}
+          transition={microDampingPreset}
           className={clsxm(
             'absolute bottom-0 left-0 right-2 top-0 z-[-1] rounded-md',
             'bg-zinc-50 dark:bg-neutral-900',

src/components/layout/root/PageTransition.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import { useContext, useRef } from 'react'
+import { AnimatePresence, m } from 'framer-motion'
+import { LayoutRouterContext } from 'next/dist/shared/lib/app-router-context'
+import { usePathname } from 'next/navigation'
+import type { PropsWithChildren } from 'react'
+
+import { microDampingPreset } from '~/constants/spring'
+
+export function useLayoutRouterContext() {
+  return useContext(LayoutRouterContext)
+}
+
+function FrozenRouter(props: PropsWithChildren<{}>) {
+  const context = useLayoutRouterContext()
+  const frozen = useRef(context).current
+
+  return (
+    <LayoutRouterContext.Provider value={frozen}>
+      {props.children}
+    </LayoutRouterContext.Provider>
+  )
+}
+
+export const PageTransition: Component = ({ children }) => {
+  const pathname = usePathname()
+  return (
+    <AnimatePresence initial={false} mode="popLayout">
+      <m.div
+        key={pathname}
+        initial={{
+          opacity: 0.001,
+          y: 20,
+        }}
+        animate={{
+          opacity: 1,
+          y: 0,
+        }}
+        exit={{
+          opacity: 0.001,
+          y: -20,
+        }}
+        transition={microDampingPreset}
+      >
+        <FrozenRouter>{children}</FrozenRouter>
+      </m.div>
+    </AnimatePresence>
+  )
+}

src/components/ui/number-transition/NumberSmoothTransition.tsx

@@ -2,7 +2,7 @@
 
 import { AnimatePresence, m } from 'framer-motion'
 
-import { microdampingPreset } from '~/constants/spring'
+import { microDampingPreset } from '~/constants/spring'
 import useDebounceValue from '~/hooks/common/use-debounce-value'
 
 export const NumberSmoothTransition = (props: {
@@ -27,7 +27,7 @@ export const NumberSmoothTransition = (props: {
           y: -16,
           position: 'absolute',
         }}
-        transition={microdampingPreset}
+        transition={microDampingPreset}
       >
         {debouncedChildren}
       </m.span>

src/components/widgets/shared/SearchFAB.tsx

@@ -19,7 +19,7 @@ import type { KeyboardEventHandler } from 'react'
 
 import { EmptyIcon } from '~/components/icons/empty'
 import { FABPortable } from '~/components/ui/fab'
-import { microdampingPreset } from '~/constants/spring'
+import { microDampingPreset } from '~/constants/spring'
 import useDebounceValue from '~/hooks/common/use-debounce-value'
 import { useIsClient } from '~/hooks/common/use-is-client'
 import { noopArr } from '~/lib/noop'
@@ -230,7 +230,7 @@ const SearchPanelImpl = () => {
       }}
       animate={{
         y: 0,
-        transition: microdampingPreset,
+        transition: microDampingPreset,
       }}
     >
       <input

src/constants/spring.ts

@@ -7,7 +7,7 @@ export const reboundPreset: Spring = {
   damping: 8,
 }
 
-export const microdampingPreset: Spring = {
+export const microDampingPreset: Spring = {
   type: 'spring',
   damping: 24,
 }

src/lib/scroller.ts

@@ -2,7 +2,7 @@
 
 import { animateValue } from 'framer-motion'
 
-import { microdampingPreset } from '~/constants/spring'
+import { microDampingPreset } from '~/constants/spring'
 
 // TODO scroller lock
 export const springScrollTo = (y: number) => {
@@ -16,7 +16,7 @@ export const springScrollTo = (y: number) => {
   const animation = animateValue({
     keyframes: [scrollTop + 1, y],
     autoplay: true,
-    ...microdampingPreset,
+    ...microDampingPreset,
     onPlay() {
       window.addEventListener('wheel', stopSpringScrollHandler)
       window.addEventListener('touchmove', stopSpringScrollHandler)