Improve settings modal animations with slide-from-right and optimized timing

- Added slide-right animation with 300ms duration for smoother modal entry
- Updated SettingsLayout to use new slide-right animation instead of fade-up
- Enhanced animation timing with cubic-bezier easing for premium feel
- Updated useSettingsAnimation hooks for consistent 300ms panel transitions
- Applied animations to all settings modals and sub-panels consistently

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/components/settings/SettingsLayout.tsx

@@ -55,10 +55,10 @@ const SettingsLayout = ({ children, onClose }: SettingsLayoutProps) => {
     >
       <div
         ref={modalRef}
-        className="glass rounded-3xl shadow-large w-full max-w-[520px] h-[800px] overflow-hidden animate-fade-up focus:outline-none focus:ring-0"
+        className="glass rounded-3xl shadow-large w-full max-w-[520px] h-[800px] overflow-hidden animate-slide-right focus:outline-none focus:ring-0"
         style={{
-          animationDuration: '200ms',
-          animationTimingFunction: 'ease-out',
+          animationDuration: '300ms',
+          animationTimingFunction: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
           animationFillMode: 'both'
         }}
         tabIndex={-1}

src/components/settings/hooks/useSettingsAnimation.ts

@@ -10,7 +10,7 @@ interface SettingsAnimationHook {
 }
 
 export const useSettingsAnimation = (
-  duration = 200
+  duration = 300
 ): SettingsAnimationHook => {
   const [animationState, setAnimationState] = useState<AnimationState>('exited');
 
@@ -39,7 +39,7 @@ export const useSettingsAnimation = (
 };
 
 // Hook for panel slide animations (slide from right)
-export const usePanelAnimation = (isActive: boolean, duration = 250) => {
+export const usePanelAnimation = (isActive: boolean, duration = 300) => {
   const [mounted, setMounted] = useState(isActive);
 
   useEffect(() => {
@@ -52,7 +52,7 @@ export const usePanelAnimation = (isActive: boolean, duration = 250) => {
   }, [isActive, duration]);
 
   const getPanelClasses = () => {
-    const baseClasses = 'transition-all duration-250 ease-out';
+    const baseClasses = 'transition-all duration-300 ease-[cubic-bezier(0.25,0.46,0.45,0.94)]';
     if (!mounted) return `${baseClasses} opacity-0`;
 
     return isActive

tailwind.config.js

@@ -202,6 +202,7 @@ module.exports = {
         'fade-in': 'fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
         'fade-up': 'fadeUp 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
         'slide-in': 'slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+        'slide-right': 'slideRight 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
         'scale-in': 'scaleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
         'shimmer': 'shimmer 2s linear infinite',
         'glow-pulse': 'glowPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
@@ -222,6 +223,10 @@ module.exports = {
           '0%': { transform: 'translateX(-100%)' },
           '100%': { transform: 'translateX(0)' },
         },
+        slideRight: {
+          '0%': { opacity: '0', transform: 'translateX(100%)' },
+          '100%': { opacity: '1', transform: 'translateX(0)' },
+        },
         scaleIn: {
           '0%': { transform: 'scale(0.95)', opacity: '0' },
           '100%': { transform: 'scale(1)', opacity: '1' },
@@ -262,6 +267,12 @@ module.exports = {
         'gradient-mesh': 'linear-gradient(to right, #5B9BF3 0%, #9B8AFB 25%, #6EE7B7 50%, #7DD3FC 75%, #5B9BF3 100%)',
         'noise': "url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"100\" height=\"100\"%3E%3Cfilter id=\"noise\"%3E%3CfeTurbulence type=\"fractalNoise\" baseFrequency=\"0.9\" numOctaves=\"4\" /%3E%3C/filter%3E%3Crect width=\"100\" height=\"100\" filter=\"url(%23noise)\" opacity=\"0.03\" /%3E%3C/svg%3E')",
       },
+
+      // Extended transition duration for smooth animations
+      transitionDuration: {
+        '300': '300ms',
+        '400': '400ms',
+      },
     },
   },
   plugins: [