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/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>
 	);
 }