feat: polish motion with stronger easing, press feedback and reduced motion (#73)
- Override Tailwind ease-out/ease-in-out with stronger curves, add ease-drawer - hoverOnlyWhenSupported so hover styles never stick on touch devices - Replace transition-all with explicit properties across the public UI - Press feedback via active:scale-[0.97] instead of hover:scale-105 - Global prefers-reduced-motion handling (CSS + MotionConfig reducedMotion="user") - Mobile menu is a real drawer: stays mounted, inert when closed, Escape closes - Progress and music bars animate scaleX/scaleY instead of width/height - Fix undefined animate-spin-slow, contain hero CTA shine with overflow-hidden Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -55,7 +55,7 @@ const Footer = () => {
|
||||
className="group flex flex-col items-center gap-4 text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-white transition-colors"
|
||||
>
|
||||
<span className="text-[10px] font-black uppercase tracking-[0.3em] text-stone-600 dark:text-stone-400" style={{ writingMode: 'vertical-rl', transform: 'rotate(180deg)' }}>{t("backToTop")}</span>
|
||||
<div className="w-12 h-12 rounded-full border border-stone-200 dark:border-stone-800 flex items-center justify-center group-hover:bg-stone-900 dark:group-hover:bg-stone-50 group-hover:text-white dark:group-hover:text-stone-900 transition-all shadow-sm">
|
||||
<div className="w-12 h-12 rounded-full border border-stone-200 dark:border-stone-800 flex items-center justify-center group-hover:bg-stone-900 dark:group-hover:bg-stone-50 group-hover:text-white dark:group-hover:text-stone-900 group-active:scale-[0.97] transition-[background-color,color,transform] duration-200 ease-out shadow-sm">
|
||||
<ArrowUp size={20} />
|
||||
</div>
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user