Polish header entrance motion
This commit is contained in:
MOH
@@ -24,47 +24,24 @@ const navItems = [
|
||||
{ key: "contact", path: "/contact" },
|
||||
];
|
||||
|
||||
const brandTitleCharacters = [
|
||||
...Array.from("MOH").map((character) => ({ character, tone: "base" as const })),
|
||||
{ character: " ", tone: "space" as const },
|
||||
...Array.from("FARAWATI").map((character) => ({ character, tone: "accent" as const })),
|
||||
];
|
||||
const brandShellVariants = {
|
||||
hidden: {},
|
||||
visible: {
|
||||
transition: {
|
||||
staggerChildren: 0.035,
|
||||
delayChildren: 0.18,
|
||||
},
|
||||
},
|
||||
} as const;
|
||||
const brandCharacterVariants = {
|
||||
hidden: {
|
||||
opacity: 0,
|
||||
y: 18,
|
||||
rotateX: -80,
|
||||
filter: "blur(8px)",
|
||||
},
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
rotateX: 0,
|
||||
filter: "blur(0px)",
|
||||
transition: {
|
||||
type: "spring" as const,
|
||||
stiffness: 280,
|
||||
damping: 20,
|
||||
mass: 0.8,
|
||||
},
|
||||
},
|
||||
} as const;
|
||||
|
||||
type SiteHeaderProps = {
|
||||
isAdmin?: boolean;
|
||||
lightLogoUrl?: string | null;
|
||||
darkLogoUrl?: string | null;
|
||||
};
|
||||
|
||||
function getDirectionalReveal(direction: "rtl" | "ltr") {
|
||||
return direction === "rtl"
|
||||
? {
|
||||
initial: { opacity: 0, x: -16, clipPath: "inset(0 0 0 100%)", filter: "blur(10px)" },
|
||||
animate: { opacity: 1, x: 0, y: 0, clipPath: "inset(0 0 0 0)", filter: "blur(0px)" },
|
||||
}
|
||||
: {
|
||||
initial: { opacity: 0, x: 16, clipPath: "inset(0 100% 0 0)", filter: "blur(10px)" },
|
||||
animate: { opacity: 1, x: 0, y: 0, clipPath: "inset(0 0 0 0)", filter: "blur(0px)" },
|
||||
};
|
||||
}
|
||||
|
||||
function isNavItemActive(currentPath: string, itemPath: string) {
|
||||
if (itemPath === "/") {
|
||||
return currentPath === "/";
|
||||
@@ -134,6 +111,29 @@ export function SiteHeader({
|
||||
const t = useTranslations("navigation");
|
||||
const reducedMotion = useReducedMotion();
|
||||
const isArabic = locale === "ar";
|
||||
const languageDirection = isArabic ? "rtl" : "ltr";
|
||||
const titleMotion = getDirectionalReveal(languageDirection);
|
||||
const subtitleMotion = getDirectionalReveal(languageDirection);
|
||||
const navEntranceInitial = reducedMotion ? false : { opacity: 0, y: -14, scale: 0.985, filter: "blur(8px)" };
|
||||
const navEntranceVisible = { opacity: 1, y: 0, scale: 1, filter: "blur(0px)" };
|
||||
const controlEntranceInitial = reducedMotion
|
||||
? false
|
||||
: {
|
||||
opacity: 0,
|
||||
x: languageDirection === "rtl" ? -18 : 18,
|
||||
scale: 0.98,
|
||||
filter: "blur(8px)",
|
||||
};
|
||||
const controlEntranceVisible = { opacity: 1, x: 0, scale: 1, filter: "blur(0px)" };
|
||||
const mobileMenuInitial = reducedMotion
|
||||
? false
|
||||
: {
|
||||
opacity: 0,
|
||||
x: languageDirection === "rtl" ? -14 : 14,
|
||||
scale: 0.94,
|
||||
filter: "blur(8px)",
|
||||
};
|
||||
const mobileMenuVisible = { opacity: 1, x: 0, scale: 1, filter: "blur(0px)" };
|
||||
const brandSubtitle = isArabic
|
||||
? "مــــــطـــــــــــــور ويــــــــــب | فــــــــــــريــــــلانــــــســــــر"
|
||||
: "Webdesigner Bremen | Freelancer";
|
||||
@@ -182,51 +182,39 @@ export function SiteHeader({
|
||||
priority
|
||||
className="relative h-10 opacity-95"
|
||||
replayKey={logoReplayKey}
|
||||
direction={languageDirection}
|
||||
/>
|
||||
<motion.span
|
||||
initial={isArabic ? false : "hidden"}
|
||||
animate="visible"
|
||||
variants={reducedMotion || isArabic ? undefined : brandShellVariants}
|
||||
<span
|
||||
key={`${locale}-${logoReplayKey}`}
|
||||
className="flex flex-col justify-center"
|
||||
>
|
||||
{isArabic ? (
|
||||
<motion.span
|
||||
initial={reducedMotion ? false : { opacity: 0, x: 16, filter: "blur(8px)" }}
|
||||
animate={{ opacity: 1, x: 0, filter: "blur(0px)" }}
|
||||
transition={reducedMotion ? { duration: 0 } : { duration: 0.42, delay: 0.12, ease: [0.22, 1, 0.36, 1] }}
|
||||
className="text-[1.28rem] font-black leading-[1.2] whitespace-nowrap"
|
||||
dir="rtl"
|
||||
>
|
||||
<span className="text-[hsl(var(--hero-ink))] dark:text-foreground">مــــحـــمــد</span>
|
||||
{" "}
|
||||
<span className="text-primary">فــــرواتـــي</span>
|
||||
</motion.span>
|
||||
) : (
|
||||
<span className="flex flex-wrap items-center text-[1.28rem] font-black leading-[1.2]">
|
||||
{brandTitleCharacters.map(({ character, tone }, index) => (
|
||||
<motion.span
|
||||
key={`${character}-${index}`}
|
||||
variants={reducedMotion ? undefined : brandCharacterVariants}
|
||||
className={cn(
|
||||
character === " " ? "mr-[0.11em] w-[0.11em]" : "mr-[0.005em] inline-block",
|
||||
tone === "base" ? "text-[hsl(var(--hero-ink))] dark:text-foreground" : "",
|
||||
tone === "accent" ? "text-primary" : "",
|
||||
)}
|
||||
>
|
||||
{character === " " ? "\u00A0" : character}
|
||||
</motion.span>
|
||||
))}
|
||||
</span>
|
||||
)}
|
||||
<motion.span
|
||||
initial={
|
||||
reducedMotion
|
||||
? false
|
||||
: isArabic
|
||||
? { opacity: 0, x: -16, clipPath: "inset(0 0 0 100%)", filter: "blur(10px)" }
|
||||
: { opacity: 0, x: 16, clipPath: "inset(0 100% 0 0)", filter: "blur(10px)" }
|
||||
}
|
||||
animate={{ opacity: 1, x: 0, y: 0, clipPath: "inset(0 0 0% 0)", filter: "blur(0px)" }}
|
||||
initial={reducedMotion ? false : titleMotion.initial}
|
||||
animate={titleMotion.animate}
|
||||
transition={reducedMotion ? { duration: 0 } : { duration: 0.7, delay: 0.12, ease: [0.22, 1, 0.36, 1] }}
|
||||
className={cn(
|
||||
"text-[1.28rem] font-black leading-[1.2] whitespace-nowrap",
|
||||
isArabic ? "text-right" : "",
|
||||
)}
|
||||
dir={isArabic ? "rtl" : undefined}
|
||||
>
|
||||
{isArabic ? (
|
||||
<>
|
||||
<span className="text-[hsl(var(--hero-ink))] dark:text-foreground">مــــحـــمــد</span>
|
||||
{" "}
|
||||
<span className="text-primary">فــــرواتـــي</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span className="text-[hsl(var(--hero-ink))] dark:text-foreground">MOH</span>
|
||||
{" "}
|
||||
<span className="text-primary">FARAWATI</span>
|
||||
</>
|
||||
)}
|
||||
</motion.span>
|
||||
<motion.span
|
||||
initial={reducedMotion ? false : subtitleMotion.initial}
|
||||
animate={subtitleMotion.animate}
|
||||
transition={reducedMotion ? { duration: 0 } : { duration: 0.7, delay: 0.34, ease: [0.22, 1, 0.36, 1] }}
|
||||
className={cn(
|
||||
"-mt-0.5 text-[0.65rem] font-light leading-[1.2] tracking-[0.008em] text-foreground/78",
|
||||
@@ -236,15 +224,19 @@ export function SiteHeader({
|
||||
>
|
||||
{brandSubtitle}
|
||||
</motion.span>
|
||||
</motion.span>
|
||||
</span>
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
<div className="col-start-2 hidden justify-center lg:flex">
|
||||
<motion.nav
|
||||
initial={false}
|
||||
animate={isScrolled ? { y: -1, scale: 0.985 } : { y: 0, scale: 1 }}
|
||||
transition={reducedMotion ? { duration: 0 } : { duration: 0.3, ease: [0.22, 1, 0.36, 1] }}
|
||||
initial={navEntranceInitial}
|
||||
animate={
|
||||
isScrolled
|
||||
? { opacity: 1, y: -1, scale: 0.985, filter: "blur(0px)" }
|
||||
: navEntranceVisible
|
||||
}
|
||||
transition={reducedMotion ? { duration: 0 } : { duration: 0.56, delay: 0.22, ease: [0.22, 1, 0.36, 1] }}
|
||||
className={cn(
|
||||
"inline-flex items-center gap-1 rounded-pill border border-border/70 bg-background/80 p-1.5 backdrop-blur-chrome",
|
||||
isArabic ? "w-auto max-w-none" : "min-w-[27rem] max-w-[42rem]",
|
||||
@@ -255,9 +247,13 @@ export function SiteHeader({
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={false}
|
||||
animate={isScrolled ? { opacity: 0, x: 28 } : { opacity: 1, x: 0 }}
|
||||
transition={reducedMotion ? { duration: 0 } : { duration: 0.3, ease: [0.22, 1, 0.36, 1] }}
|
||||
initial={controlEntranceInitial}
|
||||
animate={
|
||||
isScrolled
|
||||
? { opacity: 0, x: languageDirection === "rtl" ? -28 : 28, scale: 0.98, filter: "blur(4px)" }
|
||||
: controlEntranceVisible
|
||||
}
|
||||
transition={reducedMotion ? { duration: 0 } : { duration: 0.56, delay: 0.3, ease: [0.22, 1, 0.36, 1] }}
|
||||
className={cn(
|
||||
"col-start-3 hidden items-center justify-end lg:flex",
|
||||
isScrolled ? "pointer-events-none invisible" : "",
|
||||
@@ -289,22 +285,29 @@ export function SiteHeader({
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => setIsOpen((open) => !open)}
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="col-start-3 ml-auto h-11 w-11 justify-self-end rounded-pill border border-border/70 bg-background/80 text-foreground backdrop-blur-chrome hover:bg-accent lg:hidden"
|
||||
aria-label={isOpen ? t("closeMenu") : t("openMenu")}
|
||||
<motion.div
|
||||
initial={mobileMenuInitial}
|
||||
animate={mobileMenuVisible}
|
||||
transition={reducedMotion ? { duration: 0 } : { duration: 0.52, delay: 0.2, ease: [0.22, 1, 0.36, 1] }}
|
||||
className="col-start-3 ml-auto justify-self-end lg:hidden"
|
||||
>
|
||||
<motion.span
|
||||
animate={{ rotate: isOpen ? 180 : 0, scale: isOpen ? 0.96 : 1 }}
|
||||
transition={{ duration: 0.2, ease: "easeOut" }}
|
||||
className="flex items-center justify-center"
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => setIsOpen((open) => !open)}
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-11 w-11 rounded-pill border border-border/70 bg-background/80 text-foreground backdrop-blur-chrome hover:bg-accent"
|
||||
aria-label={isOpen ? t("closeMenu") : t("openMenu")}
|
||||
>
|
||||
{isOpen ? <X className="h-4 w-4" /> : <Menu className="h-4 w-4" />}
|
||||
</motion.span>
|
||||
</Button>
|
||||
<motion.span
|
||||
animate={{ rotate: isOpen ? 180 : 0, scale: isOpen ? 0.96 : 1 }}
|
||||
transition={{ duration: 0.2, ease: "easeOut" }}
|
||||
className="flex items-center justify-center"
|
||||
>
|
||||
{isOpen ? <X className="h-4 w-4" /> : <Menu className="h-4 w-4" />}
|
||||
</motion.span>
|
||||
</Button>
|
||||
</motion.div>
|
||||
</div>
|
||||
</Container>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user