refactor: tune frontend animations and motion polish

Apply Emil Kowalski's design engineering principles across the web app:
add press feedback to interactive elements, fix popover transform-origin,
strengthen easing curves, cut overlong durations, cap list stagger, and
drop Framer Motion overhead from static components.

Author: ericjypark

apps/web/src/app/(pages)/(home)/_components/content.tsx

@@ -1,12 +1,14 @@
 'use client';
 
 import { useQuery } from '@tanstack/react-query';
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import { slotStatusQuery } from '../_store/queries/slot-status.query';
 import { SlotsCounter } from './slots-counter';
 
+const STRONG_EASE_OUT = [0.23, 1, 0.32, 1] as const;
+
 export const HomeContent = () => {
   const router = useRouter();
   const { data: slotStatus } = useQuery(slotStatusQuery());
@@ -25,59 +27,59 @@ export const HomeContent = () => {
     <div className='fixed left-0 top-24 flex size-full flex-col items-center justify-start overflow-hidden sm:top-32 md:top-44'>
       <motion.h2
         className='text-center text-4xl font-black sm:text-6xl md:text-7xl'
-        initial={{ opacity: 0, y: 20 }}
+        initial={{ opacity: 0, y: 12 }}
         animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.6 }}
+        transition={{ duration: 0.25, ease: STRONG_EASE_OUT }}
       >
         Your Bookmarks, <span className='bg-yellow-200 px-2'>Reimagined</span>
       </motion.h2>
       <motion.p
         className='mt-6 text-balance text-center text-sm text-gray-600 sm:text-xl md:text-2xl'
-        initial={{ opacity: 0, y: 20 }}
+        initial={{ opacity: 0, y: 12 }}
         animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.6, delay: 0.2 }}
+        transition={{ duration: 0.25, delay: 0.05, ease: STRONG_EASE_OUT }}
       >
         Organize, discover, and access your favorite sites in one place
       </motion.p>
 
       <motion.div
         className='mt-4'
-        initial={{ opacity: 0, y: 20 }}
+        initial={{ opacity: 0, y: 12 }}
         animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.6, delay: 0.25 }}
+        transition={{ duration: 0.25, delay: 0.1, ease: STRONG_EASE_OUT }}
       >
         <SlotsCounter />
       </motion.div>
 
       <motion.div
         className='mt-6 flex gap-4'
-        initial={{ opacity: 0, y: 20 }}
+        initial={{ opacity: 0, y: 12 }}
         animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.6, delay: 0.3 }}
+        transition={{ duration: 0.25, delay: 0.15, ease: STRONG_EASE_OUT }}
       >
-        <motion.button
+        <button
           onClick={handleJoinNowButtonClick}
           disabled={!slotStatus?.canSignUp}
-          className={`h-10 rounded-full px-5 text-sm font-bold transition-colors md:h-12 md:px-8 md:text-lg ${
+          className={`h-10 rounded-full px-5 text-sm font-bold transition-[transform,background-color] duration-150 ease-out active:scale-[0.97] disabled:active:scale-100 md:h-12 md:px-8 md:text-lg ${
             slotStatus?.canSignUp
               ? 'bg-black text-white hover:bg-gray-800'
               : 'cursor-not-allowed bg-gray-400 text-white'
           }`}
         >
           {slotStatus?.canSignUp ? 'Join Now' : 'Slots Full'}
-        </motion.button>
-        <motion.button
+        </button>
+        <button
           onClick={handleGithubButtonClick}
-          className='h-10 rounded-full border-2 border-black px-5 text-sm font-bold transition-colors hover:bg-gray-100 md:h-12 md:px-8 md:text-lg'
+          className='h-10 rounded-full border-2 border-black px-5 text-sm font-bold transition-[transform,background-color] duration-150 ease-out hover:bg-gray-100 active:scale-[0.97] md:h-12 md:px-8 md:text-lg'
         >
           Github
-        </motion.button>
+        </button>
       </motion.div>
 
       <motion.div
-        initial={{ opacity: 0, scale: 0.95 }}
+        initial={{ opacity: 0, scale: 0.97 }}
         animate={{ opacity: 1, scale: 1 }}
-        transition={{ duration: 0.8, delay: 0.5 }}
+        transition={{ duration: 0.3, delay: 0.2, ease: STRONG_EASE_OUT }}
         className='flex justify-center'
       >
         <Image

apps/web/src/app/(pages)/(home)/_components/slots-counter.tsx

@@ -1,49 +1,41 @@
 'use client';
 
 import { useQuery } from '@tanstack/react-query';
-import { motion } from 'framer-motion';
 import { slotStatusQuery } from '../_store/queries/slot-status.query';
 
 export const SlotsCounter = () => {
   const { data: slotStatus, isLoading, error } = useQuery(slotStatusQuery());
 
   if (isLoading) {
     return (
-      <motion.div
-        className='flex items-center justify-center gap-2 rounded-full bg-gray-100 px-4 py-2'
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-      >
+      <div className='flex items-center justify-center gap-2 rounded-full bg-gray-100 px-4 py-2'>
         <div className='h-2 w-2 animate-pulse rounded-full bg-gray-400' />
         <span className='text-sm text-gray-600'>Checking slots...</span>
-      </motion.div>
+      </div>
     );
   }
 
   if (error || !slotStatus) {
     return (
-      <motion.div className='rounded-full bg-red-100 px-4 py-2' initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
+      <div className='rounded-full bg-red-100 px-4 py-2'>
         <span className='text-sm text-red-600'>Unable to check slot status</span>
-      </motion.div>
+      </div>
     );
   }
 
   const isLow = slotStatus.remaining <= 10;
   const isFull = slotStatus.remaining === 0;
 
   return (
-    <motion.div
+    <div
       className={`flex items-center gap-2 rounded-full px-4 py-2 ${
         isFull ? 'bg-red-100 text-red-700' : isLow ? 'bg-orange-100 text-orange-700' : 'bg-green-100 text-green-700'
       }`}
-      initial={{ opacity: 0, y: -10 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.3 }}
     >
       <div className={`h-2 w-2 rounded-full ${isFull ? 'bg-red-500' : isLow ? 'bg-orange-500' : 'bg-green-500'}`} />
       <span className='text-sm font-medium'>
         {slotStatus.remaining} slot{slotStatus.remaining !== 1 ? 's' : ''} left
       </span>
-    </motion.div>
+    </div>
   );
 };

apps/web/src/app/(pages)/(home)/home/_components/bookmark-card.tsx

@@ -1,4 +1,4 @@
-import { motion, useAnimation } from 'framer-motion';
+import { motion, useAnimation } from 'motion/react';
 import { Loader2 } from 'lucide-react';
 import Image from 'next/image';
 import Link from 'next/link';
@@ -76,7 +76,7 @@ export const BookmarkCard = ({ bookmark, isActive, isBlurred, isViewOnly }: Book
           longPressTimer.current = null;
           animationControls.start({
             scale: 1,
-            transition: { duration: 0.2 },
+            transition: { duration: 0.2, ease: [0.23, 1, 0.32, 1] },
           });
         }
       }
@@ -113,7 +113,7 @@ export const BookmarkCard = ({ bookmark, isActive, isBlurred, isViewOnly }: Book
               onClick={handleCardClick}
               key={bookmark.id}
               className={cn(
-                'flex w-full cursor-pointer items-center gap-3 rounded-md p-2 transition-all hover:bg-muted',
+                'flex w-full cursor-pointer items-center gap-3 rounded-md p-2 transition-[background-color,filter] duration-150 ease-out hover:bg-muted',
                 isActive && 'bg-muted',
                 isBlurred && 'pointer-events-none blur-sm',
               )}
@@ -153,7 +153,7 @@ export const BookmarkCard = ({ bookmark, isActive, isBlurred, isViewOnly }: Book
       <motion.div
         key={bookmark.id}
         className={cn(
-          'flex w-full cursor-pointer select-none items-center gap-3 rounded-md p-2 transition-all sm:hidden',
+          'flex w-full cursor-pointer select-none items-center gap-3 rounded-md p-2 transition-[background-color] duration-150 ease-out sm:hidden',
           isLongPressing && 'bg-muted',
         )}
         animate={animationControls}
@@ -192,7 +192,7 @@ export const BookmarkCard = ({ bookmark, isActive, isBlurred, isViewOnly }: Book
           setIsLongPressing(false);
           animationControls.start({
             scale: isActive ? 1.05 : 1,
-            transition: { duration: 0.2 },
+            transition: { duration: 0.2, ease: [0.23, 1, 0.32, 1] },
           });
           clearTimeout(longPressTimer.current!);
           longPressTimer.current = null;
@@ -221,7 +221,9 @@ const ViewOnlyBookmarkCard = React.memo(({ bookmark }: { bookmark: Bookmark }) =
       href={bookmark.url}
       target='_blank'
       key={bookmark.id}
-      className={cn('flex w-full cursor-pointer items-center gap-3 rounded-md p-2 transition-all hover:bg-muted')}
+      className={cn(
+        'flex w-full cursor-pointer items-center gap-3 rounded-md p-2 transition-[background-color] duration-150 ease-out hover:bg-muted',
+      )}
       animate={animationControls}
       onClick={handleSharedBookmarkClick}
     >

apps/web/src/app/(pages)/(home)/home/_components/bookmark-list.tsx

@@ -51,7 +51,7 @@ export function BookmarkList({ bookmarks: initialBookmarks, isViewOnly }: { book
   return (
     <div className='relative flex flex-col gap-2'>
       {filteredBookmarks?.map((bookmark, index) => (
-        <BlurFade key={bookmark.id} duration={0.2} delay={0.05 + index * 0.025}>
+        <BlurFade key={bookmark.id} delay={Math.min(index, 12) * 0.025}>
           <BookmarkCard
             bookmark={bookmark}
             isActive={activeBookmarkId === bookmark.id}

apps/web/src/app/_common/components/add-category-button.tsx

@@ -38,7 +38,7 @@ export const AddCategoryButton = () => {
   return (
     <Sheet open={open} onOpenChange={setOpen}>
       <SheetTrigger asChild>
-        <div className='relative ml-4 flex cursor-pointer items-center justify-center rounded-lg bg-black px-2 py-1 text-white transition-colors hover:bg-black/80'>
+        <div className='relative ml-4 flex cursor-pointer items-center justify-center rounded-lg bg-black px-2 py-1 text-white transition-[transform,background-color] duration-150 ease-out hover:bg-black/80 active:scale-[0.97]'>
           <PlusIcon size={16} />
         </div>
       </SheetTrigger>

apps/web/src/app/_common/components/animated-tab.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { AnimatePresence, motion } from 'framer-motion';
+import { AnimatePresence, motion } from 'motion/react';
 import { FolderIcon } from 'lucide-react';
 import { parseAsString, useQueryState } from 'nuqs';
 
@@ -35,7 +35,7 @@ export const AnimatedTab = ({ categories, isShared }: { categories: Category[];
       <div className='absolute left-1/2 hidden h-8 -translate-x-1/2 gap-2 bg-background sm:flex'>
         {categories.map(category => (
           <button
-            className='relative cursor-pointer rounded-full px-3 py-1.5 text-sm font-medium'
+            className='relative cursor-pointer rounded-full px-3 py-1.5 text-sm font-medium transition-transform duration-150 ease-out active:scale-[0.97]'
             key={category.id}
             onClick={() => handleCategoryClick(category)}
             style={{
@@ -48,14 +48,14 @@ export const AnimatedTab = ({ categories, isShared }: { categories: Category[];
                   className='absolute inset-0 bg-black'
                   layoutId='active-category'
                   style={{ borderRadius: 8 }}
-                  transition={{ type: 'spring', bounce: 0.2, duration: 0.6 }}
+                  transition={{ type: 'spring', bounce: 0.15, duration: 0.35 }}
                   initial={{ opacity: 0 }}
                   animate={{ opacity: 1 }}
                   exit={{ opacity: 0 }}
                 />
               )}
             </AnimatePresence>
-            <p className='relative z-10 max-w-20 truncate text-white mix-blend-exclusion transition-opacity duration-300'>
+            <p className='relative z-10 max-w-20 truncate text-white mix-blend-exclusion'>
               {category.name}
             </p>
           </button>

apps/web/src/app/_common/components/user-settings-dialog.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import { CheckIcon, Loader2Icon, LoaderCircleIcon, XIcon } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import React from 'react';
@@ -173,10 +173,10 @@ export default function UserSettingsDialog({
       onClick={e => {
         e.stopPropagation();
       }}
-      initial={{ opacity: 0, scale: 0.95 }}
+      initial={{ opacity: 0, scale: 0.97 }}
       animate={{ opacity: 1, scale: 1 }}
-      exit={{ opacity: 0, scale: 0.95 }}
-      transition={{ duration: 0.2, ease: 'easeOut' }}
+      exit={{ opacity: 0, scale: 0.97 }}
+      transition={{ duration: 0.2, ease: [0.23, 1, 0.32, 1] }}
     >
       <DialogHeader className='contents space-y-0 text-left'>
         <DialogTitle className='border-b px-6 py-4 text-base'>Edit profile</DialogTitle>

apps/web/src/app/_core/components/animated-underlined-text.tsx

@@ -5,7 +5,7 @@ export const AnimatedUnderlinedText = ({ children }: { children: React.ReactNode
     <span
       className={cn(
         'relative flex cursor-pointer px-2 py-1 align-middle hover:text-neutral-800 dark:hover:text-neutral-200',
-        'underline decoration-transparent underline-offset-2 transition-all duration-300 hover:decoration-current',
+        'underline decoration-transparent underline-offset-2 transition-[text-decoration-color,color] duration-150 ease-out hover:decoration-current',
       )}
     >
       {children}

apps/web/src/app/_core/components/blur-fade.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useRef } from 'react';
-import { AnimatePresence, motion, useInView, type UseInViewOptions, type Variants } from 'framer-motion';
+import { motion, useInView, type UseInViewOptions, type Variants } from 'motion/react';
 
 type MarginType = UseInViewOptions['margin'];
 
@@ -24,12 +24,12 @@ export default function BlurFade({
   children,
   className,
   variant,
-  duration = 0.4,
+  duration = 0.2,
   delay = 0,
-  yOffset = 12,
+  yOffset = 8,
   inView = false,
   inViewMargin = '-50px',
-  blur = '6px',
+  blur = '4px',
 }: BlurFadeProps) {
   const ref = useRef(null);
   const inViewResult = useInView(ref, { once: true, margin: inViewMargin });
@@ -40,22 +40,19 @@ export default function BlurFade({
   };
   const combinedVariants = variant ?? defaultVariants;
   return (
-    <AnimatePresence>
-      <motion.div
-        ref={ref}
-        initial='hidden'
-        animate={isInView ? 'visible' : 'hidden'}
-        exit='hidden'
-        variants={combinedVariants}
-        transition={{
-          delay: 0.04 + delay,
-          duration,
-          ease: 'easeOut',
-        }}
-        className={className}
-      >
-        {children}
-      </motion.div>
-    </AnimatePresence>
+    <motion.div
+      ref={ref}
+      initial='hidden'
+      animate={isInView ? 'visible' : 'hidden'}
+      variants={combinedVariants}
+      transition={{
+        delay,
+        duration,
+        ease: [0.23, 1, 0.32, 1],
+      }}
+      className={className}
+    >
+      {children}
+    </motion.div>
   );
 }

apps/web/src/app/_core/components/button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '~/app/_core/utils/cn';
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[transform,background-color,color,border-color,box-shadow] duration-150 ease-out active:scale-[0.97] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 disabled:active:scale-100 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
   {
     variants: {
       variant: {