feat: add smooth site-wide animations with framer-motion

- Add framer-motion and tailwindcss-animate for transitions
- Add page transitions via AnimatePresence in the site layout
- Convert nav dropdown and mobile menu to animated motion components
- Add entry animation to the radio player widget
- Add reveal/stagger animations to the home page views
- Add shared motion utilities and reusable animated components

src/components/home/guest-view.tsx

@@ -2,6 +2,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { getTranslations } from "next-intl/server";
 import { HomeLoginForm } from "@/components/auth/home-login-form";
+import { Reveal } from "@/components/motion-reveal";
 import { avatarImageUrl, excerpt } from "@/lib/format";
 import { prisma } from "@/lib/prisma";
 import { siteSettings } from "@/lib/services/site-settings";
@@ -40,7 +41,7 @@ export default async function GuestView() {
 
 	return (
 		<div className="flex flex-col gap-4 md:flex-row">
-			<div className="flex w-full flex-col gap-4 md:w-1/3 md:flex-shrink-0">
+			<Reveal className="flex w-full flex-col gap-4 md:w-1/3 md:flex-shrink-0">
 				<div
 					className="overflow-hidden rounded-lg border"
 					style={{
@@ -158,9 +159,9 @@ export default async function GuestView() {
 						</div>
 					</div>
 				)}
-			</div>
+			</Reveal>
 
-			<div className="flex w-full flex-col gap-4 md:w-2/3">
+			<Reveal delay={0.15} className="flex w-full flex-col gap-4 md:w-2/3">
 				<div
 					className="overflow-hidden rounded-lg border"
 					style={{
@@ -237,7 +238,7 @@ export default async function GuestView() {
 						)}
 					</div>
 				</div>
-			</div>
+			</Reveal>
 		</div>
 	);
 }

src/components/home/user-view.tsx

@@ -1,6 +1,7 @@
 import Image from "next/image";
 import Link from "next/link";
 import { getTranslations } from "next-intl/server";
+import { Reveal } from "@/components/motion-reveal";
 import { avatarImageUrl, excerpt } from "@/lib/format";
 import { prisma } from "@/lib/prisma";
 import { siteSettings } from "@/lib/services/site-settings";
@@ -54,7 +55,7 @@ export default async function UserView({
 
 	return (
 		<div className="flex flex-col gap-6 md:flex-row">
-			<div className="flex w-full flex-col gap-6 md:w-3/4">
+			<Reveal className="flex w-full flex-col gap-6 md:w-3/4">
 				<div className="relative flex h-[340px] items-start overflow-hidden rounded-lg">
 					<div
 						className="absolute inset-0"
@@ -80,9 +81,11 @@ export default async function UserView({
 						className="absolute -top-10 -left-10 w-48 h-48 rounded-full opacity-[0.08] blur-[60px]"
 						style={{ background: "var(--color-primary)" }}
 					/>
-					<div className="relative z-10 mx-auto mt-8 flex w-[95%] max-w-3xl items-center justify-between rounded-2xl px-8 py-6"
+					<div
+						className="relative z-10 mx-auto mt-8 flex w-[95%] max-w-3xl items-center justify-between rounded-2xl px-8 py-6"
 						style={{
-							background: "linear-gradient(135deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.2) 100%)",
+							background:
+								"linear-gradient(135deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.2) 100%)",
 							boxShadow: "0 8px 32px rgba(0,0,0,0.3)",
 						}}
 					>
@@ -91,16 +94,19 @@ export default async function UserView({
 								href={`/u/${username}`}
 								className="transition-transform duration-300 hover:scale-105"
 							>
-							<div
-								className="rounded-full p-[3px]"
-								style={{
-									border: "3px solid var(--panel-border-color)",
-									boxShadow:
-										"0 0 24px color-mix(in srgb, var(--panel-border-color) 50%, transparent)",
-								}}
-							>
+								<div
+									className="rounded-full p-[3px]"
+									style={{
+										border: "3px solid var(--panel-border-color)",
+										boxShadow:
+											"0 0 24px color-mix(in srgb, var(--panel-border-color) 50%, transparent)",
+									}}
+								>
 									<Image
-										src={avatarImageUrl(imager, look, { size: "l", direction: 2 })}
+										src={avatarImageUrl(imager, look, {
+											size: "l",
+											direction: 2,
+										})}
 										alt={username}
 										width={110}
 										height={190}
@@ -110,9 +116,11 @@ export default async function UserView({
 									/>
 								</div>
 							</Link>
-							<div className="flex flex-col gap-1.5 rounded-xl px-4 py-2"
+							<div
+								className="flex flex-col gap-1.5 rounded-xl px-4 py-2"
 								style={{
-									background: "color-mix(in srgb, var(--color-surface) 88%, transparent)",
+									background:
+										"color-mix(in srgb, var(--color-surface) 88%, transparent)",
 									backdropFilter: "blur(8px)",
 								}}
 							>
@@ -123,8 +131,12 @@ export default async function UserView({
 								>
 									{username}
 								</Link>
-								<p className="text-sm drop-shadow-md max-w-[240px] leading-tight"
-									style={{ color: "color-mix(in srgb, var(--color-text) 80%, transparent)" }}
+								<p
+									className="text-sm drop-shadow-md max-w-[240px] leading-tight"
+									style={{
+										color:
+											"color-mix(in srgb, var(--color-text) 80%, transparent)",
+									}}
 								>
 									{motto || "Welcome back!"}
 								</p>
@@ -217,9 +229,9 @@ export default async function UserView({
 						)}
 					</div>
 				</div>
-			</div>
+			</Reveal>
 
-			<div className="flex w-full flex-col gap-6 md:w-1/4">
+			<Reveal delay={0.15} className="flex w-full flex-col gap-6 md:w-1/4">
 				{latestArticle ? (
 					<div
 						className="overflow-hidden rounded-lg border"
@@ -267,7 +279,7 @@ export default async function UserView({
 						</Link>
 					</div>
 				) : null}
-			</div>
+			</Reveal>
 		</div>
 	);
 }

src/components/mobile-nav.tsx

@@ -1,7 +1,9 @@
 "use client";
 
+import { AnimatePresence, motion } from "framer-motion";
 import Image from "next/image";
-import { type ReactNode, useRef } from "react";
+import { type ReactNode, useRef, useState } from "react";
+import { mobileMenuVariants } from "@/lib/motion";
 
 interface MobileNavProps {
 	children: ReactNode;
@@ -16,30 +18,26 @@ export function MobileNav({
 	closeLabel = "Close menu",
 	brandLabel = "Atom",
 }: MobileNavProps) {
-	const detailsRef = useRef<HTMLDetailsElement>(null);
-
-	const handleClick = (e: React.MouseEvent) => {
-		if ((e.target as HTMLElement).closest("a") && detailsRef.current) {
-			detailsRef.current.open = false;
-		}
-	};
+	const [open, setOpen] = useState(false);
+	const detailsRef = useRef<HTMLDivElement>(null);
 
 	return (
-		<details
-			ref={detailsRef}
-			onClick={handleClick}
-			className="group relative md:hidden"
-		>
-			<summary
+		<div ref={detailsRef} className="group relative md:hidden">
+			<button
+				type="button"
+				onClick={() => setOpen((o) => !o)}
 				className="list-none cursor-pointer flex items-center justify-center w-11 h-11 rounded-xl shrink-0
-					[&::-webkit-details-marker]:hidden transition-colors duration-150
+					transition-colors duration-150
 					hover:bg-[color-mix(in_srgb,var(--color-primary)_12%,transparent)]
 					active:scale-[0.96]
 					focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary-readable,var(--color-primary))] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-navbar)]"
-				aria-label={menuLabel}
+				aria-label={open ? closeLabel : menuLabel}
+				aria-expanded={open}
 			>
-				<svg
-					className="w-6 h-6 details-open:hidden"
+				<motion.svg
+					className="w-6 h-6"
+					animate={{ rotate: open ? 90 : 0 }}
+					transition={{ duration: 0.2 }}
 					viewBox="0 0 24 24"
 					fill="none"
 					stroke="currentColor"
@@ -47,68 +45,74 @@ export function MobileNav({
 					strokeLinecap="round"
 					strokeLinejoin="round"
 				>
-					<line x1="4" y1="7" x2="20" y2="7" />
-					<line x1="4" y1="12" x2="20" y2="12" />
-					<line x1="4" y1="17" x2="20" y2="17" />
-				</svg>
-				<svg
-					className="w-6 h-6 hidden details-open:block"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					strokeWidth="2"
-					strokeLinecap="round"
-					strokeLinejoin="round"
-				>
-					<line x1="18" y1="6" x2="6" y2="18" />
-					<line x1="6" y1="6" x2="18" y2="18" />
-				</svg>
-			</summary>
+					{open ? (
+						<>
+							<line x1="18" y1="6" x2="6" y2="18" />
+							<line x1="6" y1="6" x2="18" y2="18" />
+						</>
+					) : (
+						<>
+							<line x1="4" y1="7" x2="20" y2="7" />
+							<line x1="4" y1="12" x2="20" y2="12" />
+							<line x1="4" y1="17" x2="20" y2="17" />
+						</>
+					)}
+				</motion.svg>
+			</button>
 
-			<div
-				className="absolute left-0 top-full mt-2 w-[min(86vw,320px)] z-50 origin-top-left"
-				style={{ backgroundColor: "transparent" }}
-			>
-				<div
-					className="flex flex-col gap-y-1 p-2 rounded-2xl border shadow-xl
-						bg-[var(--color-dropdown,var(--color-surface,#fff))]"
-					style={{
-						borderColor:
-							"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
-						boxShadow:
-							"0 12px 40px color-mix(in srgb, rgb(0 0 0) 22%, transparent)",
-					}}
-				>
-					<div
-						className="flex items-center gap-2 px-3 py-2 mb-1 rounded-xl"
-						style={{
-							backgroundColor:
-								"color-mix(in srgb, var(--color-primary) 12%, transparent)",
+			<AnimatePresence>
+				{open && (
+					<motion.div
+						className="absolute left-0 top-full mt-2 w-[min(86vw,320px)] z-50 origin-top-left"
+						style={{ backgroundColor: "transparent" }}
+						variants={mobileMenuVariants}
+						initial="hidden"
+						animate="visible"
+						exit="exit"
+					>
+						<div
+							className="flex flex-col gap-y-1 p-2 rounded-2xl border shadow-xl
+								bg-[var(--color-dropdown,var(--color-surface,#fff))]"
+							style={{
+								borderColor:
+									"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+							boxShadow:
+								"0 12px 40px color-mix(in srgb, rgb(0 0 0) 22%, transparent)",
 						}}
 					>
-						<Image
-							src="/assets/images/icons/navigation/home.png"
-							alt=""
-							width={22}
-							height={22}
-							className="shrink-0"
-						/>
-						<span
-							className="text-sm font-extrabold uppercase tracking-wide"
-							style={{
-								color: "var(--color-navbar-text-readable, var(--color-text))",
-							}}
-						>
-							{brandLabel}
-						</span>
-						<span className="ml-auto text-[11px] font-semibold uppercase tracking-wider opacity-75">
-							{closeLabel}
-						</span>
-					</div>
+							<div
+								className="flex items-center gap-2 px-3 py-2 mb-1 rounded-xl"
+								style={{
+									backgroundColor:
+										"color-mix(in srgb, var(--color-primary) 12%, transparent)",
+								}}
+							>
+								<Image
+									src="/assets/images/icons/navigation/home.png"
+									alt=""
+									width={22}
+									height={22}
+									className="shrink-0"
+								/>
+								<span
+									className="text-sm font-extrabold uppercase tracking-wide"
+									style={{
+										color:
+											"var(--color-navbar-text-readable, var(--color-text))",
+									}}
+								>
+									{brandLabel}
+								</span>
+								<span className="ml-auto text-[11px] font-semibold uppercase tracking-wider opacity-75">
+									{closeLabel}
+								</span>
+							</div>
 
-					{children}
-				</div>
-			</div>
-		</details>
+							{children}
+						</div>
+					</motion.div>
+				)}
+			</AnimatePresence>
+		</div>
 	);
 }

src/components/motion-elements.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import type { HTMLMotionProps } from "framer-motion";
+import { motion } from "framer-motion";
+import {
+	fadeIn,
+	fadeInUp,
+	hoverLift,
+	hoverScale,
+	scaleIn,
+	staggerContainer,
+	staggerItem,
+} from "@/lib/motion";
+
+type DivProps = HTMLMotionProps<"div">;
+
+export function AnimatedSection({ children, className, ...props }: DivProps) {
+	return (
+		<motion.div
+			className={className}
+			variants={staggerContainer}
+			initial="hidden"
+			animate="visible"
+			{...props}
+		>
+			{children}
+		</motion.div>
+	);
+}
+
+export function AnimatedChild({ children, className, ...props }: DivProps) {
+	return (
+		<motion.div className={className} variants={staggerItem} {...props}>
+			{children}
+		</motion.div>
+	);
+}
+
+export function FadeIn({ children, className, ...props }: DivProps) {
+	return (
+		<motion.div
+			className={className}
+			variants={fadeIn}
+			initial="hidden"
+			animate="visible"
+			{...props}
+		>
+			{children}
+		</motion.div>
+	);
+}
+
+export function FadeInUp({ children, className, ...props }: DivProps) {
+	return (
+		<motion.div
+			className={className}
+			variants={fadeInUp}
+			initial="hidden"
+			animate="visible"
+			{...props}
+		>
+			{children}
+		</motion.div>
+	);
+}
+
+export function ScaleIn({ children, className, ...props }: DivProps) {
+	return (
+		<motion.div
+			className={className}
+			variants={scaleIn}
+			initial="hidden"
+			animate="visible"
+			{...props}
+		>
+			{children}
+		</motion.div>
+	);
+}
+
+export function HoverCard({ children, className, ...props }: DivProps) {
+	return (
+		<motion.div
+			className={className}
+			{...hoverLift}
+			whileHover={{ y: -4, transition: { duration: 0.2 } }}
+			{...props}
+		>
+			{children}
+		</motion.div>
+	);
+}
+
+export function HoverButton({ children, className, ...props }: DivProps) {
+	return (
+		<motion.div className={className} {...hoverScale} {...props}>
+			{children}
+		</motion.div>
+	);
+}

src/components/motion-page-wrapper.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { usePathname } from "next/navigation";
+import type { ReactNode } from "react";
+import { pageTransition } from "@/lib/motion";
+
+export default function MotionPageWrapper({
+	children,
+}: {
+	children: ReactNode;
+}) {
+	const pathname = usePathname();
+
+	return (
+		<AnimatePresence mode="wait">
+			<motion.div
+				key={pathname}
+				variants={pageTransition}
+				initial="initial"
+				animate="enter"
+				exit="exit"
+			>
+				{children}
+			</motion.div>
+		</AnimatePresence>
+	);
+}

src/components/motion-reveal.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { motion } from "framer-motion";
+import type { ReactNode } from "react";
+
+interface RevealProps {
+	children: ReactNode;
+	className?: string;
+	delay?: number;
+}
+
+export function Reveal({ children, className, delay = 0 }: RevealProps) {
+	return (
+		<motion.div
+			className={className}
+			initial={{ opacity: 0, y: 24 }}
+			whileInView={{ opacity: 1, y: 0 }}
+			viewport={{ once: true, margin: "-50px" }}
+			transition={{ duration: 0.45, delay, ease: [0.25, 0.1, 0.25, 1] }}
+		>
+			{children}
+		</motion.div>
+	);
+}
+
+export function RevealStagger({ children, className }: RevealProps) {
+	return (
+		<motion.div
+			className={className}
+			initial="hidden"
+			whileInView="visible"
+			viewport={{ once: true, margin: "-50px" }}
+			variants={{
+				hidden: {},
+				visible: { transition: { staggerChildren: 0.08, delayChildren: 0.05 } },
+			}}
+		>
+			{children}
+		</motion.div>
+	);
+}
+
+export function RevealItem({ children, className }: RevealProps) {
+	return (
+		<motion.div
+			className={className}
+			variants={{
+				hidden: { opacity: 0, y: 20 },
+				visible: { opacity: 1, y: 0, transition: { duration: 0.35 } },
+			}}
+		>
+			{children}
+		</motion.div>
+	);
+}

src/components/nav-dropdown.tsx

@@ -1,5 +1,9 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
 import Image from "next/image";
-import type { ReactNode } from "react";
+import { type ReactNode, useEffect, useRef, useState } from "react";
+import { dropdownVariants } from "@/lib/motion";
 
 interface NavDropdownProps {
 	label: string;
@@ -8,11 +12,37 @@ interface NavDropdownProps {
 }
 
 export function NavDropdown({ label, icon, children }: NavDropdownProps) {
+	const [open, setOpen] = useState(false);
+	const ref = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		function onKeyDown(e: KeyboardEvent) {
+			if (e.key === "Escape") setOpen(false);
+		}
+		if (open) document.addEventListener("keydown", onKeyDown);
+		return () => document.removeEventListener("keydown", onKeyDown);
+	}, [open]);
+
+	useEffect(() => {
+		function onOutsideClick(e: MouseEvent) {
+			if (ref.current && !ref.current.contains(e.target as Node)) {
+				setOpen(false);
+			}
+		}
+		if (open) {
+			document.addEventListener("mousedown", onOutsideClick);
+		}
+		return () => document.removeEventListener("mousedown", onOutsideClick);
+	}, [open]);
+
 	return (
-		<details className="relative">
-			<summary
-				className="nav-item cursor-pointer [&::-webkit-details-marker]:hidden"
+		<div ref={ref} className="relative">
+			<button
+				type="button"
+				onClick={() => setOpen((o) => !o)}
+				className="nav-item cursor-pointer"
 				aria-haspopup="true"
+				aria-expanded={open}
 			>
 				{icon ? (
 					<Image
@@ -25,8 +55,10 @@ export function NavDropdown({ label, icon, children }: NavDropdownProps) {
 					/>
 				) : null}
 				{label}
-				<svg
-					className="ml-auto md:ml-1 w-3 h-3 details-open:rotate-180"
+				<motion.svg
+					className="ml-auto md:ml-1 w-3 h-3 shrink-0"
+					animate={{ rotate: open ? 180 : 0 }}
+					transition={{ duration: 0.2 }}
 					fill="none"
 					stroke="currentColor"
 					viewBox="0 0 24 24"
@@ -37,14 +69,22 @@ export function NavDropdown({ label, icon, children }: NavDropdownProps) {
 						strokeWidth={2}
 						d="M19 9l-7 7-7-7"
 					/>
-				</svg>
-			</summary>
-			<div
-				className="dropdown-menu md:absolute left-0 top-full mt-0.5 min-w-0 md:min-w-[200px] rounded-xl z-50 py-2"
-				role="menu"
-			>
-				{children}
-			</div>
-		</details>
+				</motion.svg>
+			</button>
+			<AnimatePresence>
+				{open && (
+					<motion.div
+						className="dropdown-menu md:absolute left-0 top-full mt-0.5 min-w-0 md:min-w-[200px] rounded-xl z-50 py-2"
+						role="menu"
+						variants={dropdownVariants}
+						initial="hidden"
+						animate="visible"
+						exit="exit"
+					>
+						{children}
+					</motion.div>
+				)}
+			</AnimatePresence>
+		</div>
 	);
 }

src/components/public/radio-player.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { motion } from "framer-motion";
 import { useCallback, useEffect, useRef, useState } from "react";
 
 /**
@@ -228,7 +229,10 @@ export default function RadioPlayer() {
 	const border = "color-mix(in srgb, var(--color-text-muted) 18%, transparent)";
 
 	return (
-		<section
+		<motion.section
+			initial={{ opacity: 0, y: 20, scale: 0.95 }}
+			animate={{ opacity: 1, y: 0, scale: 1 }}
+			transition={{ duration: 0.4, ease: [0.25, 0.1, 0.25, 1] }}
 			aria-label={`${config.name} player`}
 			style={{
 				position: "fixed",
@@ -392,6 +396,6 @@ export default function RadioPlayer() {
 			{/* Hidden stream element. preload="none" so nothing loads until the user
           hits play (and browsers block autoplay with sound regardless). */}
 			<audio ref={audioRef} preload="none" />
-		</section>
+		</motion.section>
 	);
 }