feat: polish motion with stronger easing, press feedback and reduced motion
- 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:
denshooter
@@ -50,10 +50,19 @@ export default function HeaderClient({ locale, translations }: HeaderClientProps
|
||||
setScrolled(window.scrollY > 50);
|
||||
};
|
||||
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
window.addEventListener("scroll", handleScroll, { passive: true });
|
||||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
const onKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") setIsOpen(false);
|
||||
};
|
||||
window.addEventListener("keydown", onKeyDown);
|
||||
return () => window.removeEventListener("keydown", onKeyDown);
|
||||
}, [isOpen]);
|
||||
|
||||
const navItems = [
|
||||
{ name: translations.home, href: `/${locale}` },
|
||||
{ name: translations.about, href: isHome ? "#about" : `/${locale}#about` },
|
||||
@@ -81,18 +90,18 @@ export default function HeaderClient({ locale, translations }: HeaderClientProps
|
||||
<>
|
||||
<header className="fixed top-6 left-0 right-0 z-50 flex justify-center px-4 pointer-events-none">
|
||||
<div
|
||||
className={`pointer-events-auto transition-all duration-500 ease-out ${
|
||||
className={`pointer-events-auto transition-[max-width] duration-500 ease-in-out ${
|
||||
scrolled ? "w-full max-w-5xl" : "w-full max-w-7xl"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`backdrop-blur-xl transition-all duration-500 flex justify-between items-center ${
|
||||
className={`backdrop-blur-xl transition-[padding,background-color,box-shadow,border-color] duration-500 ease-in-out flex justify-between items-center ${
|
||||
scrolled
|
||||
? "bg-white/95 border border-stone-200/50 shadow-[0_8px_30px_rgba(0,0,0,0.12)] rounded-full px-6 py-3"
|
||||
: "bg-white/85 border border-stone-200/30 shadow-[0_4px_24px_rgba(0,0,0,0.08)] px-4 py-4 rounded-full"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center space-x-2 hover:scale-105 transition-transform">
|
||||
<div className="flex items-center space-x-2 active:scale-[0.97] transition-transform duration-150 ease-out">
|
||||
<Link
|
||||
href={`/${locale}`}
|
||||
className="text-2xl font-black font-sans text-stone-900 tracking-tighter liquid-hover flex items-center"
|
||||
@@ -103,7 +112,7 @@ export default function HeaderClient({ locale, translations }: HeaderClientProps
|
||||
|
||||
<nav className="hidden md:flex items-center space-x-8">
|
||||
{navItems.map((item) => (
|
||||
<div key={item.name} className="hover:-translate-y-0.5 active:scale-95 transition-all">
|
||||
<div key={item.name} className="active:scale-[0.97] transition-transform duration-150 ease-out">
|
||||
<Link
|
||||
href={item.href}
|
||||
className="text-stone-700 hover:text-stone-900 font-medium transition-colors relative liquid-hover"
|
||||
@@ -117,7 +126,7 @@ export default function HeaderClient({ locale, translations }: HeaderClientProps
|
||||
<div className="flex items-center space-x-2 ml-4 pl-4 border-l border-stone-300">
|
||||
<Link
|
||||
href={enHref}
|
||||
className={`px-2 py-1 text-sm font-medium rounded transition-all ${
|
||||
className={`px-2 py-1 text-sm font-medium rounded transition-colors ${
|
||||
locale === "en"
|
||||
? "bg-stone-900 text-white"
|
||||
: "text-stone-600 hover:text-stone-900 hover:bg-stone-100"
|
||||
@@ -127,7 +136,7 @@ export default function HeaderClient({ locale, translations }: HeaderClientProps
|
||||
</Link>
|
||||
<Link
|
||||
href={deHref}
|
||||
className={`px-2 py-1 text-sm font-medium rounded transition-all ${
|
||||
className={`px-2 py-1 text-sm font-medium rounded transition-colors ${
|
||||
locale === "de"
|
||||
? "bg-stone-900 text-white"
|
||||
: "text-stone-600 hover:text-stone-900 hover:bg-stone-100"
|
||||
@@ -141,7 +150,7 @@ export default function HeaderClient({ locale, translations }: HeaderClientProps
|
||||
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="md:hidden p-2 rounded-lg bg-stone-100 hover:bg-stone-200 text-stone-700 transition-all hover:scale-105 active:scale-95"
|
||||
className="md:hidden p-2 rounded-lg bg-stone-100 hover:bg-stone-200 text-stone-700 transition-[background-color,transform] duration-150 ease-out active:scale-[0.97]"
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
{isOpen ? <XIcon size={24} /> : <MenuIcon size={24} />}
|
||||
@@ -150,19 +159,24 @@ export default function HeaderClient({ locale, translations }: HeaderClientProps
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Mobile menu overlay */}
|
||||
{isOpen && (
|
||||
<div
|
||||
className="fixed inset-0 bg-stone-900/50 backdrop-blur-sm z-40 md:hidden"
|
||||
onClick={() => setIsOpen(false)}
|
||||
/>
|
||||
)}
|
||||
{/* Mobile menu overlay — always mounted so it can fade out, not just vanish */}
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className={`fixed inset-0 bg-stone-900/50 backdrop-blur-sm z-40 md:hidden transition-opacity ${
|
||||
isOpen ? "opacity-100 duration-300 ease-out" : "opacity-0 pointer-events-none duration-200 ease-out"
|
||||
}`}
|
||||
onClick={() => setIsOpen(false)}
|
||||
/>
|
||||
|
||||
{/* Mobile menu panel */}
|
||||
{isOpen && (
|
||||
<div
|
||||
className="fixed right-0 top-0 h-full w-80 bg-white shadow-2xl z-50 md:hidden overflow-y-auto"
|
||||
>
|
||||
{/* Mobile menu panel — drawer curve in, quicker exit */}
|
||||
<div
|
||||
inert={!isOpen}
|
||||
className={`fixed right-0 top-0 h-full w-80 max-w-[85vw] bg-white shadow-2xl z-50 md:hidden overflow-y-auto overscroll-contain transition-[transform,visibility] ${
|
||||
isOpen
|
||||
? "translate-x-0 visible duration-500 ease-drawer"
|
||||
: "translate-x-full invisible duration-200 ease-out"
|
||||
}`}
|
||||
>
|
||||
<div className="p-6">
|
||||
<div className="flex justify-between items-center mb-8">
|
||||
<Link
|
||||
@@ -174,7 +188,7 @@ export default function HeaderClient({ locale, translations }: HeaderClientProps
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="p-2 rounded-lg bg-stone-100 hover:bg-stone-200 text-stone-700"
|
||||
className="p-2 rounded-lg bg-stone-100 hover:bg-stone-200 text-stone-700 transition-[background-color,transform] duration-150 ease-out active:scale-[0.97]"
|
||||
aria-label="Close menu"
|
||||
>
|
||||
<XIcon size={24} />
|
||||
@@ -187,7 +201,7 @@ export default function HeaderClient({ locale, translations }: HeaderClientProps
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="block px-4 py-3 text-stone-700 hover:bg-stone-50 rounded-lg font-medium transition-colors"
|
||||
className="block px-4 py-3 text-stone-700 hover:bg-stone-50 active:bg-stone-100 rounded-lg font-medium transition-colors"
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
@@ -199,7 +213,7 @@ export default function HeaderClient({ locale, translations }: HeaderClientProps
|
||||
<Link
|
||||
href={enHref}
|
||||
onClick={() => setIsOpen(false)}
|
||||
className={`flex-1 px-4 py-2 text-center font-medium rounded-lg transition-all ${
|
||||
className={`flex-1 px-4 py-2 text-center font-medium rounded-lg transition-colors ${
|
||||
locale === "en"
|
||||
? "bg-stone-900 text-white"
|
||||
: "bg-stone-100 text-stone-600 hover:bg-stone-200"
|
||||
@@ -210,7 +224,7 @@ export default function HeaderClient({ locale, translations }: HeaderClientProps
|
||||
<Link
|
||||
href={deHref}
|
||||
onClick={() => setIsOpen(false)}
|
||||
className={`flex-1 px-4 py-2 text-center font-medium rounded-lg transition-all ${
|
||||
className={`flex-1 px-4 py-2 text-center font-medium rounded-lg transition-colors ${
|
||||
locale === "de"
|
||||
? "bg-stone-900 text-white"
|
||||
: "bg-stone-100 text-stone-600 hover:bg-stone-200"
|
||||
@@ -231,7 +245,7 @@ export default function HeaderClient({ locale, translations }: HeaderClientProps
|
||||
href={link.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-3 rounded-lg bg-stone-100 hover:bg-stone-900 hover:text-white text-stone-700 transition-all"
|
||||
className="p-3 rounded-lg bg-stone-100 hover:bg-stone-900 hover:text-white text-stone-700 transition-[background-color,color,transform] duration-150 ease-out active:scale-[0.97]"
|
||||
aria-label={link.label}
|
||||
>
|
||||
<Icon size={20} />
|
||||
@@ -241,8 +255,7 @@ export default function HeaderClient({ locale, translations }: HeaderClientProps
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user