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

package.json

@@ -33,6 +33,7 @@
 		"clsx": "^2.1.1",
 		"cmdk": "^1.1.1",
 		"croner": "^10.0.1",
+		"framer-motion": "^12.42.2",
 		"hash-wasm": "^4.12.0",
 		"ioredis": "^5.11.1",
 		"jpeg-js": "^0.4.4",
@@ -55,6 +56,7 @@
 		"sanitize-html": "^2.17.5",
 		"sonner": "^2.0.7",
 		"tailwind-merge": "^3.6.0",
+		"tailwindcss-animate": "^1.0.7",
 		"zod": "^3.24.0"
 	},
 	"devDependencies": {

pnpm-lock.yaml

@@ -49,6 +49,9 @@ importers:
       croner:
         specifier: ^10.0.1
         version: 10.0.1
+      framer-motion:
+        specifier: ^12.42.2
+        version: 12.42.2([email protected]([email protected]))([email protected])
       hash-wasm:
         specifier: ^4.12.0
         version: 4.12.0
@@ -115,6 +118,9 @@ importers:
       tailwind-merge:
         specifier: ^3.6.0
         version: 3.6.0
+      tailwindcss-animate:
+        specifier: ^1.0.7
+        version: 1.0.7([email protected])
       zod:
         specifier: ^3.24.0
         version: 3.25.76
@@ -2462,6 +2468,20 @@ packages:
     resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
     engines: {node: '>=14'}
 
+  [email protected]:
+    resolution: {integrity: sha512-5XY9luDiu0oHfHBjpDthFMh0ES+122w6p/papSJBweMkO8Sn+PW2QaEgRblQBpWFnuvZS5qvarpt/hO2pjGmnw==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
   [email protected]:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -2693,6 +2713,12 @@ packages:
     resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==}
     hasBin: true
 
+  [email protected]:
+    resolution: {integrity: sha512-5gIMWLp/PycBtJRJWRgjxke5n8dlvkSn2DrYW+tr3XcqAZY1xZh6BJyooJXCM8wdfM7wfMjkBJNLge1CKPUIRA==}
+
+  [email protected]:
+    resolution: {integrity: sha512-8nadJAJjTtqRkmRF36FoJTrywK9nnFmnPwnSMyxaOCU7GDjN9RTMJIxx9De8ErM+vpPhMccr/6fo5WciyQLnMQ==}
+
   [email protected]:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
@@ -3085,6 +3111,11 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==}
 
+  [email protected]:
+    resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
+
   [email protected]:
     resolution: {integrity: sha512-WtctNNSH8A9jlMIqxzuYumOHU5uGZyRv0Q5svQl+oEPy5w84YpBxdb7MdqyiSPQge5jTJ6zFQLq0PFygdccSBA==}
 
@@ -5252,6 +5283,15 @@ snapshots:
       cross-spawn: 7.0.6
       signal-exit: 4.1.0
 
+  [email protected]([email protected]([email protected]))([email protected]):
+    dependencies:
+      motion-dom: 12.42.2
+      motion-utils: 12.39.0
+      tslib: 2.8.1
+    optionalDependencies:
+      react: 19.2.7
+      react-dom: 19.2.7([email protected])
+
   [email protected]:
     optional: true
 
@@ -5445,6 +5485,12 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]:
+    dependencies:
+      motion-utils: 12.39.0
+
+  [email protected]: {}
+
   [email protected]: {}
 
   [email protected]:
@@ -5911,6 +5957,10 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]([email protected]):
+    dependencies:
+      tailwindcss: 4.3.2
+
   [email protected]: {}
 
   [email protected]: {}

src/app/(site)/layout.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import MotionPageWrapper from "@/components/motion-page-wrapper";
 import { Navigation } from "@/components/navigation";
 import RadioPlayerGate from "@/components/public/radio-player-gate";
 import { SiteFooter } from "@/components/site-footer";
@@ -17,7 +18,9 @@ export default function SiteLayout({ children }: { children: ReactNode }) {
 			<Navigation />
 			<main>
 				<div className="mx-auto mt-6 grid max-w-7xl grid-cols-12 gap-x-3 gap-y-6 px-4 py-4 md:mt-0 md:p-6">
-					<div className="col-span-12 min-w-0">{children}</div>
+					<div className="col-span-12 min-w-0">
+						<MotionPageWrapper>{children}</MotionPageWrapper>
+					</div>
 				</div>
 			</main>
 			<SiteFooter />

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)",
 						}}
 					>
@@ -100,7 +103,10 @@ export default async function UserView({
 									}}
 								>
 									<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"
+								<p
-									style={{ color: "color-mix(in srgb, var(--color-text) 80%, transparent)" }}
+									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/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">
+		<div ref={ref} className="relative">
-			<summary
+			<button
-				className="nav-item cursor-pointer [&::-webkit-details-marker]:hidden"
+				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
+				<motion.svg
-					className="ml-auto md:ml-1 w-3 h-3 details-open:rotate-180"
+					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>
+				</motion.svg>
-			</summary>
+			</button>
-			<div
+			<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>
-		</details>
 	);
 }

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