diff --git a/DESIGN.md b/DESIGN.md
index b68e244bd..74f7b3803 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -226,21 +226,24 @@ A custom Tailwind token `--aspect-page: 210 / 297` enforces A4 paper proportions
 
 ## Animation
 
-Animations use the Motion library (formerly Framer Motion) and follow a consistent choreography pattern:
+Motion exists to explain a change, confirm an action, or soften a jump. This is a tool people use for hours, so it stays crisp: short, precise, rarely decorative.
 
-**Entrance animations** use a fade-up reveal: elements start at `opacity: 0, y: 20-100` and animate to `opacity: 1, y: 0`. The hero section uses a larger y-offset (100px) for dramatic effect; subsequent sections use 20px for subtlety.
+**Frequency decides first.** Keyboard-initiated actions (the command palette, ⌘B sidebar toggle, zoom shortcuts, keyboard-opened menus via Base UI's `data-instant`) do not animate. Things hit tens of times a day (list rows, tooltips after the first, context menus) get opacity-only or no motion. Dialogs, sheets and toasts get a standard transition. Only rare moments (marketing pages, first load) get more.
 
-**Timing principles:**
-- **Base duration:** 0.35s–0.6s for standard section reveals, 0.45s for hero elements, up to 1.1s for the hero video entrance.
-- **Stagger pattern:** Sequential delays within a group, typically 0.1s–0.15s apart (hero: 0.55s, 0.7s, 0.82s, 0.95s). For grids, use `index * 0.03`–`0.1` for per-item stagger.
-- **Easing:** `easeOut` for entrances (elements decelerate into position). `easeInOut` for looping/ambient animations.
-- **Performance:** Apply `will-change-[transform,opacity]` on animated elements and `will-change-transform` on continuously animated elements.
+**Tokens.** Never hand-type a curve.
+- CSS: `ease-out-strong` / `var(--ease-out-strong)` (`cubic-bezier(0.23, 1, 0.32, 1)`) for anything entering, exiting or responding; `ease-in-out-strong` for on-screen movement nobody is waiting on (ambient loops, carousels); `ease-drawer` for sheets. Never `ease-in`.
+- Motion (JS): `EASE_OUT_STRONG` from `apps/web/src/libs/motion.ts`.
 
-**Hover/interaction animations** are quick (0.2s) and subtle — small scale bumps (`scale: 1.01`), slight y-offsets (`y: -2`), and `active:translate-y-px` for button press.
+**Durations.** Press feedback 100–160ms, tooltips/popovers/menus 150ms in and 100ms out, dialogs 200ms in and 150ms out, sheets 300ms. App UI stays under 300ms; marketing reveals may run 0.5–0.9s. Exits are faster than entrances.
 
-**Ambient animations** loop infinitely with `easeInOut` — the scroll indicator bounces gently (`y: [0, 5, 0]` over 1.5s).
+**Mechanics.**
+- Popups use interruptible CSS transitions on Base UI's `data-starting-style` / `data-ending-style`, scale from `0.95` (never `0`) and grow from `origin-(--transform-origin)`. Modals stay centred.
+- Animate `transform`/`translate`/`scale` and `opacity` only. No `transition-all`, no permanent `will-change` (Motion promotes layers while it animates).
+- Presses use `active:scale-[0.97]`. `Button` already has it; don't wrap it in Motion hover/tap wrappers.
+- Lists use `AnimatePresence initial={false}` so items animate when added or removed, not every time the list mounts.
+- Continuous loops (marquees, drifting spotlights) are CSS keyframes, so they run off the main thread.
 
-**Reduced motion:** All CSS transitions and animations collapse to `0.01ms` duration and single iteration when `prefers-reduced-motion: reduce` is active. Motion library animations should also respect this preference.
+**Reduced motion:** `MotionConfig reducedMotion="user"` disables Motion transforms, and CSS transitions and animations collapse to `0.01ms` — except `animate-spin`, which keeps spinning so loading never looks frozen. Values driven by `useSpring`/`useMotionValue` bypass `MotionConfig`, so check `useReducedMotion()` there.
 
 ## Elevation & Depth
 
diff --git a/apps/web/src/components/animation/comet-card.test.tsx b/apps/web/src/components/animation/comet-card.test.tsx
index 833c7716a..20ca126a2 100644
--- a/apps/web/src/components/animation/comet-card.test.tsx
+++ b/apps/web/src/components/animation/comet-card.test.tsx
@@ -37,20 +37,20 @@ describe("CometCard", () => {
 		expect(glare?.className).toContain("pointer-events-none");
 	});
 
-	it("does not throw when mouse enters / moves over / leaves the card", () => {
+	it("does not throw when pointer moves over / leaves the card", () => {
 		const { container } = render(
 			<CometCard>
 				<span>x</span>
 			</CometCard>,
 		);
 
-		const tiltable = container.querySelector("[class*='will-change-transform']") as HTMLElement;
+		const tiltable = container.querySelector("[class*='rounded-md']") as HTMLElement;
 		expect(tiltable).toBeTruthy();
 
 		expect(() => {
-			fireEvent.mouseMove(tiltable, { clientX: 100, clientY: 50 });
-			fireEvent.mouseMove(tiltable, { clientX: 0, clientY: 0 });
-			fireEvent.mouseLeave(tiltable);
+			fireEvent.pointerMove(tiltable, { clientX: 100, clientY: 50, pointerType: "mouse" });
+			fireEvent.pointerMove(tiltable, { clientX: 0, clientY: 0, pointerType: "mouse" });
+			fireEvent.pointerLeave(tiltable);
 		}).not.toThrow();
 	});
 });
diff --git a/apps/web/src/components/animation/comet-card.tsx b/apps/web/src/components/animation/comet-card.tsx
index 5a0e844c3..4b70b497c 100644
--- a/apps/web/src/components/animation/comet-card.tsx
+++ b/apps/web/src/components/animation/comet-card.tsx
@@ -1,63 +1,41 @@
 import type React from "react";
-import { m, useMotionTemplate, useMotionValue, useSpring, useTransform } from "motion/react";
-import { useRef } from "react";
+import { m, useMotionTemplate, useMotionValue, useReducedMotion, useSpring, useTransform } from "motion/react";
 import { cn } from "@reactive-resume/utils/style";
+import { EASE_OUT_STRONG } from "@/libs/motion";
 
 type Props = {
-	rotateDepth?: number;
-	translateDepth?: number;
 	glareOpacity?: number;
-	scaleFactor?: number;
 	className?: string;
 	children: React.ReactNode;
 };
 
-export const CometCard = ({
-	rotateDepth = 17.5,
-	translateDepth = 20,
-	glareOpacity = 0.4,
-	scaleFactor = 1.05,
-	className,
-	children,
-}: Props) => {
-	const ref = useRef<HTMLDivElement>(null);
+// Critically damped: the tilt follows the pointer without wobbling past it.
+const tiltSpring = { stiffness: 300, damping: 30 };
 
-	const x = useMotionValue(0);
-	const y = useMotionValue(0);
+export const CometCard = ({ glareOpacity = 0.4, className, children }: Props) => {
+	const reduceMotion = useReducedMotion();
 
-	const mouseXSpring = useSpring(x);
-	const mouseYSpring = useSpring(y);
+	const x = useSpring(useMotionValue(0), tiltSpring);
+	const y = useSpring(useMotionValue(0), tiltSpring);
 
-	const rotateX = useTransform(mouseYSpring, [-0.5, 0.5], [`-${rotateDepth}deg`, `${rotateDepth}deg`]);
-	const rotateY = useTransform(mouseXSpring, [-0.5, 0.5], [`${rotateDepth}deg`, `-${rotateDepth}deg`]);
-
-	const translateX = useTransform(mouseXSpring, [-0.5, 0.5], [`-${translateDepth}px`, `${translateDepth}px`]);
-	const translateY = useTransform(mouseYSpring, [-0.5, 0.5], [`${translateDepth}px`, `-${translateDepth}px`]);
-
-	const glareX = useTransform(mouseXSpring, [-0.5, 0.5], [0, 100]);
-	const glareY = useTransform(mouseYSpring, [-0.5, 0.5], [0, 100]);
+	const rotateX = useTransform(y, [-0.5, 0.5], ["-6deg", "6deg"]);
+	const rotateY = useTransform(x, [-0.5, 0.5], ["6deg", "-6deg"]);
+	const translateX = useTransform(x, [-0.5, 0.5], ["-3px", "3px"]);
+	const translateY = useTransform(y, [-0.5, 0.5], ["3px", "-3px"]);
 
+	const glareX = useTransform(x, [-0.5, 0.5], [0, 100]);
+	const glareY = useTransform(y, [-0.5, 0.5], [0, 100]);
 	const glareBackground = useMotionTemplate`radial-gradient(circle at ${glareX}% ${glareY}%, rgba(255, 255, 255, 0.9) 10%, rgba(255, 255, 255, 0.75) 20%, rgba(255, 255, 255, 0) 80%)`;
 
-	const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
-		if (!ref.current) return;
-
-		const rect = ref.current.getBoundingClientRect();
-
-		const width = rect.width;
-		const height = rect.height;
-
-		const mouseX = e.clientX - rect.left;
-		const mouseY = e.clientY - rect.top;
-
-		const xPct = mouseX / width - 0.5;
-		const yPct = mouseY / height - 0.5;
-
-		x.set(xPct);
-		y.set(yPct);
+	// Touch taps emit synthetic pointer moves that would leave the card stuck mid-tilt, so only follow a real mouse.
+	const handlePointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
+		if (e.pointerType !== "mouse" || reduceMotion) return;
+		const rect = e.currentTarget.getBoundingClientRect();
+		x.set((e.clientX - rect.left) / rect.width - 0.5);
+		y.set((e.clientY - rect.top) / rect.height - 0.5);
 	};
 
-	const handleMouseLeave = () => {
+	const handlePointerLeave = () => {
 		x.set(0);
 		y.set(0);
 	};
@@ -65,21 +43,20 @@ export const CometCard = ({
 	return (
 		<div className={cn("perspective-distant transform-3d", className)}>
 			<m.div
-				ref={ref}
-				initial={{ scale: 1, z: 0 }}
-				onMouseMove={handleMouseMove}
-				onMouseLeave={handleMouseLeave}
-				className="relative rounded-md will-change-transform"
-				whileHover={{ z: 50, scale: scaleFactor, transition: { duration: 0.2 } }}
-				style={{ rotateX: rotateX, rotateY: rotateY, translateX: translateX, translateY: translateY }}
+				onPointerMove={handlePointerMove}
+				onPointerLeave={handlePointerLeave}
+				className="relative rounded-md"
+				whileHover={{ z: 20, scale: 1.02, transition: { duration: 0.2, ease: EASE_OUT_STRONG } }}
+				style={{ rotateX, rotateY, translateX, translateY }}
 			>
 				{children}
 
-				<m.div
-					transition={{ duration: 0.2 }}
-					style={{ background: glareBackground, opacity: glareOpacity }}
-					className="pointer-events-none absolute inset-0 z-50 h-full w-full rounded-md mix-blend-overlay will-change-[opacity]"
-				/>
+				{glareOpacity > 0 && (
+					<m.div
+						style={{ background: glareBackground, opacity: glareOpacity }}
+						className="pointer-events-none absolute inset-0 z-50 size-full rounded-md mix-blend-overlay"
+					/>
+				)}
 			</m.div>
 		</div>
 	);
diff --git a/apps/web/src/components/animation/count-up.test.tsx b/apps/web/src/components/animation/count-up.test.tsx
index e616a995d..6f3fba697 100644
--- a/apps/web/src/components/animation/count-up.test.tsx
+++ b/apps/web/src/components/animation/count-up.test.tsx
@@ -1,46 +1,40 @@
 // @vitest-environment happy-dom
 
-import { render } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-import { CountUp } from "./count-up";
+import { render, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { domAnimation, LazyMotion } from "motion/react";
+
+const reducedMotion = vi.hoisted(() => ({ value: false }));
+
+vi.mock("motion/react", async (importOriginal) => ({
+	...(await importOriginal<typeof import("motion/react")>()),
+	useReducedMotion: () => reducedMotion.value,
+}));
+
+const { CountUp } = await import("./count-up");
 
 describe("CountUp", () => {
-	it("renders an aria-live=polite span by default (announced to screen readers)", () => {
-		const { container } = render(<CountUp to={1000} />);
-		const span = container.querySelector("span") as HTMLSpanElement;
-		expect(span.getAttribute("aria-live")).toBe("polite");
-		expect(span.getAttribute("aria-atomic")).toBe("true");
+	it("starts at 0 before animating", () => {
+		reducedMotion.value = false;
+		const { container } = render(<CountUp to={1234} />);
+		expect(container.querySelector("span")?.textContent).toBe("0");
 	});
 
-	it("seeds textContent to 0 on initial render", () => {
-		const { container } = render(<CountUp to={100} />);
-		const span = container.querySelector("span") as HTMLSpanElement;
-		expect(span.textContent).toBe("0");
+	it("jumps to the final grouped value under reduced motion", async () => {
+		reducedMotion.value = true;
+		const { container } = render(
+			<LazyMotion features={domAnimation}>
+				<CountUp to={1234} />
+			</LazyMotion>,
+		);
+		await waitFor(() => expect(container.querySelector("span")?.textContent).toBe("1,234"));
 	});
 
-	it("formats with the separator when one is supplied", () => {
-		const { container } = render(<CountUp to={1234} separator="," />);
-		const span = container.querySelector("span") as HTMLSpanElement;
-		expect(span.textContent).toBe("0");
-	});
-
-	it("preserves decimal places when to is fractional", () => {
-		const { container } = render(<CountUp to={3.75} />);
-		const span = container.querySelector("span") as HTMLSpanElement;
-		expect(span.textContent).toBe("0.00");
-	});
-
-	it("strips aria-live and aria-atomic when aria-hidden is set", () => {
-		const { container } = render(<CountUp to={100} aria-hidden="true" />);
-		const span = container.querySelector("span") as HTMLSpanElement;
-		expect(span.getAttribute("aria-hidden")).toBe("true");
-		expect(span.getAttribute("aria-live")).toBeNull();
-		expect(span.getAttribute("aria-atomic")).toBeNull();
-	});
-
-	it("accepts a custom className", () => {
-		const { container } = render(<CountUp to={100} className="custom-class" />);
+	it("forwards className and aria-hidden", () => {
+		reducedMotion.value = false;
+		const { container } = render(<CountUp to={100} className="custom-class" aria-hidden="true" />);
 		const span = container.querySelector("span") as HTMLSpanElement;
 		expect(span.className).toContain("custom-class");
+		expect(span.getAttribute("aria-hidden")).toBe("true");
 	});
 });
diff --git a/apps/web/src/components/animation/count-up.tsx b/apps/web/src/components/animation/count-up.tsx
index f54cdc188..76875292d 100644
--- a/apps/web/src/components/animation/count-up.tsx
+++ b/apps/web/src/components/animation/count-up.tsx
@@ -1,84 +1,28 @@
-import { useInView, useMotionValue, useSpring } from "motion/react";
-import { useCallback, useEffect, useEffectEvent, useRef } from "react";
+import { m, useInView, useReducedMotion, useSpring, useTransform } from "motion/react";
+import { useEffect, useRef } from "react";
 
 type CountUpProps = {
 	to: number;
-	duration?: number;
 	className?: string;
-	separator?: string;
 	"aria-hidden"?: boolean | "true" | "false";
-	"aria-live"?: "off" | "polite" | "assertive";
-	"aria-atomic"?: boolean | "true" | "false";
 };
 
-const getDecimalPlaces = (num: number): number => {
-	const str = num.toString();
-	if (str.includes(".")) {
-		const decimals = str.split(".")[1];
-		if (Number.parseInt(decimals, 10) !== 0) return decimals.length;
-	}
-	return 0;
-};
-
-// ponytail: from/direction/delay/startWhen/onStart/onEnd removed — no production caller passes them
-export function CountUp({
-	to,
-	duration = 2,
-	className = "",
-	separator = "",
-	"aria-hidden": ariaHidden,
-	"aria-live": ariaLive = "polite",
-	"aria-atomic": ariaAtomic = "true",
-}: CountUpProps) {
+// Integer count-up with en-US grouping. Starts once when scrolled into view; reduced motion shows the final value.
+export function CountUp({ to, className, "aria-hidden": ariaHidden }: CountUpProps) {
 	const ref = useRef<HTMLSpanElement>(null);
-	const motionValue = useMotionValue(0);
-
-	const damping = 20 + 40 * (1 / duration);
-	const stiffness = 100 * (1 / duration);
-
-	const springValue = useSpring(motionValue, { damping, stiffness });
-
-	const isInView = useInView(ref, { once: true, margin: "0px" });
-
-	const maxDecimals = getDecimalPlaces(to);
-
-	const formatValue = useCallback(
-		(latest: number) => {
-			const options: Intl.NumberFormatOptions = {
-				useGrouping: !!separator,
-				minimumFractionDigits: maxDecimals,
-				maximumFractionDigits: maxDecimals,
-			};
-			const formattedNumber = Intl.NumberFormat("en-US", options).format(latest);
-			return separator ? formattedNumber.replace(/,/g, separator) : formattedNumber;
-		},
-		[maxDecimals, separator],
-	);
-
-	const formatCurrentValue = useEffectEvent((latest: number) => formatValue(latest));
+	const isInView = useInView(ref, { once: true });
+	const reducedMotion = useReducedMotion();
+	const spring = useSpring(0, { visualDuration: 0.8, bounce: 0 });
+	const text = useTransform(spring, (value) => Math.round(value).toLocaleString("en-US"));
 
 	useEffect(() => {
-		if (ref.current) ref.current.textContent = formatCurrentValue(0);
-	}, []);
-
-	useEffect(() => {
-		if (isInView) motionValue.set(to);
-	}, [isInView, motionValue, to]);
-
-	useEffect(() => {
-		const unsubscribe = springValue.on("change", (latest: number) => {
-			if (ref.current) ref.current.textContent = formatCurrentValue(latest);
-		});
-		return () => unsubscribe();
-	}, [springValue]);
+		if (reducedMotion) spring.jump(to);
+		else if (isInView) spring.set(to);
+	}, [isInView, reducedMotion, spring, to]);
 
 	return (
-		<span
-			ref={ref}
-			className={className}
-			aria-hidden={ariaHidden}
-			aria-live={ariaHidden ? undefined : ariaLive}
-			aria-atomic={ariaHidden ? undefined : ariaAtomic}
-		/>
+		<m.span ref={ref} className={className} aria-hidden={ariaHidden}>
+			{text}
+		</m.span>
 	);
 }
diff --git a/apps/web/src/components/animation/spotlight.test.tsx b/apps/web/src/components/animation/spotlight.test.tsx
index d709dd371..e9b1d6991 100644
--- a/apps/web/src/components/animation/spotlight.test.tsx
+++ b/apps/web/src/components/animation/spotlight.test.tsx
@@ -18,28 +18,4 @@ describe("Spotlight", () => {
 		const beamGroups = container.firstChild?.childNodes;
 		expect(beamGroups?.length).toBe(2);
 	});
-
-	it("applies the provided width / height / smallWidth to inline styles", () => {
-		const { container } = render(<Spotlight width={500} height={800} smallWidth={120} translateY={-100} />);
-
-		const inlineStyles = Array.from(container.querySelectorAll<HTMLDivElement>("[style]")).map(
-			(el) => el.getAttribute("style") ?? "",
-		);
-		const allStyles = inlineStyles.join("|");
-
-		expect(allStyles).toContain("width: 500px");
-		expect(allStyles).toContain("height: 800px");
-		expect(allStyles).toContain("width: 120px");
-		expect(allStyles).toContain("translateY(-100px)");
-	});
-
-	it("uses the supplied gradient strings as background values", () => {
-		const customFirst = "radial-gradient(red, blue)";
-		const { container } = render(<Spotlight gradientFirst={customFirst} />);
-
-		const matched = Array.from(container.querySelectorAll<HTMLDivElement>("[style]")).filter(
-			(el) => el.style.background.includes("red") && el.style.background.includes("blue"),
-		);
-		expect(matched.length).toBeGreaterThan(0);
-	});
 });
diff --git a/apps/web/src/components/animation/spotlight.tsx b/apps/web/src/components/animation/spotlight.tsx
index 07972c850..23edcafb1 100644
--- a/apps/web/src/components/animation/spotlight.tsx
+++ b/apps/web/src/components/animation/spotlight.tsx
@@ -1,106 +1,44 @@
-import { m } from "motion/react";
+const FIRST =
+	"radial-gradient(68.54% 68.72% at 55.02% 31.46%, hsla(210, 100%, 85%, .08) 0, hsla(210, 100%, 55%, .02) 50%, hsla(210, 100%, 45%, 0) 80%)";
+const SECOND =
+	"radial-gradient(50% 50% at 50% 50%, hsla(210, 100%, 85%, .06) 0, hsla(210, 100%, 55%, .02) 80%, transparent 100%)";
+const THIRD =
+	"radial-gradient(50% 50% at 50% 50%, hsla(210, 100%, 85%, .04) 0, hsla(210, 100%, 45%, .02) 80%, transparent 100%)";
 
-type SpotlightProps = {
-	duration?: number;
-	gradientFirst?: string;
-	gradientSecond?: string;
-	gradientThird?: string;
-	width?: number;
-	height?: number;
-	smallWidth?: number;
-	translateY?: number;
-	xOffset?: number;
-};
+// CSS keyframes run on the compositor, so the infinite drift never competes with the page's main thread.
+const drift =
+	"pointer-events-none absolute top-0 z-40 h-svh w-svw animate-[spotlight-drift_7s_ease-in-out_infinite_alternate]";
 
-export const Spotlight = ({
-	duration = 7,
-	gradientFirst = "radial-gradient(68.54% 68.72% at 55.02% 31.46%, hsla(210, 100%, 85%, .08) 0, hsla(210, 100%, 55%, .02) 50%, hsla(210, 100%, 45%, 0) 80%)",
-	gradientSecond = "radial-gradient(50% 50% at 50% 50%, hsla(210, 100%, 85%, .06) 0, hsla(210, 100%, 55%, .02) 80%, transparent 100%)",
-	gradientThird = "radial-gradient(50% 50% at 50% 50%, hsla(210, 100%, 85%, .04) 0, hsla(210, 100%, 45%, .02) 80%, transparent 100%)",
-	width = 560,
-	height = 1380,
-	smallWidth = 240,
-	translateY = -350,
-	xOffset = 100,
-}: SpotlightProps) => {
-	return (
-		<m.div
-			initial={{ opacity: 0 }}
-			animate={{ opacity: 1 }}
-			transition={{ duration: 1.5 }}
-			className="pointer-events-none absolute inset-0 h-full w-full"
-		>
-			<m.div
-				animate={{ x: [0, xOffset, 0] }}
-				transition={{ duration, repeat: Number.POSITIVE_INFINITY, repeatType: "reverse", ease: "easeInOut" }}
-				className="pointer-events-none absolute inset-s-0 top-0 z-40 h-svh w-svw will-change-transform"
-			>
-				<div
-					className="absolute inset-s-0 top-0"
-					style={{
-						width: `${width}px`,
-						height: `${height}px`,
-						background: gradientFirst,
-						transform: `translateY(${translateY}px) rotate(-45deg)`,
-					}}
-				/>
+export const Spotlight = () => (
+	<div className="fade-in pointer-events-none absolute inset-0 size-full animate-in duration-1500 ease-out">
+		<div className={`${drift} inset-s-0 [--spotlight-drift:100px]`}>
+			<div
+				className="absolute inset-s-0 top-0 h-[1380px] w-[560px]"
+				style={{ background: FIRST, transform: "translateY(-350px) rotate(-45deg)" }}
+			/>
+			<div
+				className="absolute inset-s-0 top-0 h-[1380px] w-[240px] origin-top-left"
+				style={{ background: SECOND, transform: "rotate(-45deg) translate(5%, -50%)" }}
+			/>
+			<div
+				className="absolute inset-s-0 top-0 h-[1380px] w-[240px] origin-top-left"
+				style={{ background: THIRD, transform: "rotate(-45deg) translate(-180%, -70%)" }}
+			/>
+		</div>
 
-				<div
-					className="absolute inset-s-0 top-0 origin-top-left"
-					style={{
-						height: `${height}px`,
-						width: `${smallWidth}px`,
-						background: gradientSecond,
-						transform: "rotate(-45deg) translate(5%, -50%)",
-					}}
-				/>
-
-				<div
-					className="absolute inset-s-0 top-0 origin-top-left"
-					style={{
-						height: `${height}px`,
-						width: `${smallWidth}px`,
-						background: gradientThird,
-						transform: "rotate(-45deg) translate(-180%, -70%)",
-					}}
-				/>
-			</m.div>
-
-			<m.div
-				animate={{ x: [0, -xOffset, 0] }}
-				transition={{ duration, repeat: Number.POSITIVE_INFINITY, ease: "easeInOut", repeatType: "reverse" }}
-				className="pointer-events-none absolute inset-e-0 top-0 z-40 h-svh w-svw will-change-transform"
-			>
-				<div
-					className="absolute inset-e-0 top-0"
-					style={{
-						width: `${width}px`,
-						height: `${height}px`,
-						background: gradientFirst,
-						transform: `translateY(${translateY}px) rotate(45deg)`,
-					}}
-				/>
-
-				<div
-					className="absolute inset-e-0 top-0 origin-top-right"
-					style={{
-						height: `${height}px`,
-						width: `${smallWidth}px`,
-						background: gradientSecond,
-						transform: "rotate(45deg) translate(-5%, -50%)",
-					}}
-				/>
-
-				<div
-					className="absolute inset-e-0 top-0 origin-top-right"
-					style={{
-						height: `${height}px`,
-						width: `${smallWidth}px`,
-						background: gradientThird,
-						transform: "rotate(45deg) translate(180%, -70%)",
-					}}
-				/>
-			</m.div>
-		</m.div>
-	);
-};
+		<div className={`${drift} inset-e-0 [--spotlight-drift:-100px]`}>
+			<div
+				className="absolute inset-e-0 top-0 h-[1380px] w-[560px]"
+				style={{ background: FIRST, transform: "translateY(-350px) rotate(45deg)" }}
+			/>
+			<div
+				className="absolute inset-e-0 top-0 h-[1380px] w-[240px] origin-top-right"
+				style={{ background: SECOND, transform: "rotate(45deg) translate(-5%, -50%)" }}
+			/>
+			<div
+				className="absolute inset-e-0 top-0 h-[1380px] w-[240px] origin-top-right"
+				style={{ background: THIRD, transform: "rotate(45deg) translate(180%, -70%)" }}
+			/>
+		</div>
+	</div>
+);
diff --git a/apps/web/src/components/input/chip-input.tsx b/apps/web/src/components/input/chip-input.tsx
index 87fe962e1..16d1e6d9c 100644
--- a/apps/web/src/components/input/chip-input.tsx
+++ b/apps/web/src/components/input/chip-input.tsx
@@ -13,7 +13,6 @@ import { CSS } from "@dnd-kit/utilities";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import { PencilSimpleIcon, XIcon } from "@phosphor-icons/react";
-import { AnimatePresence, m } from "motion/react";
 import * as React from "react";
 import { createPortal } from "react-dom";
 import { Badge } from "@reactive-resume/ui/components/badge";
@@ -75,15 +74,10 @@ function ChipItem({ id, chip, index, isEditing, onEdit, onRemove }: ChipItemProp
 	};
 
 	return (
-		<m.div
-			layout
-			initial={{ opacity: 0, scale: 0.92, y: -4 }}
-			animate={{ opacity: isDragging ? 0.62 : 1, scale: 1, y: 0 }}
-			exit={{ opacity: 0, scale: 0.92, y: -4 }}
-			transition={{ duration: 0.1, ease: "easeOut" }}
+		<div
 			style={style}
 			ref={setNodeRef}
-			className="group/chip relative touch-none"
+			className={cn("group/chip relative touch-none", isDragging && "opacity-60")}
 			{...attributes}
 			{...listeners}
 		>
@@ -96,11 +90,11 @@ function ChipItem({ id, chip, index, isEditing, onEdit, onRemove }: ChipItemProp
 				)}
 			>
 				<span className="max-w-32 truncate sm:max-w-44">{chip}</span>
-				<m.div
-					initial={false}
-					animate={isEditing ? { opacity: 1 } : { opacity: 0.66 }}
-					transition={{ duration: 0.12, ease: "easeOut" }}
-					className="ms-1.5 flex shrink-0 items-center gap-x-0.5 will-change-[opacity] group-focus-within/chip:opacity-100 group-hover/chip:opacity-100"
+				<div
+					className={cn(
+						"ms-1.5 flex shrink-0 items-center gap-x-0.5 transition-opacity duration-150 group-focus-within/chip:opacity-100 group-hover/chip:opacity-100",
+						isEditing ? "opacity-100" : "opacity-65",
+					)}
 				>
 					<button
 						type="button"
@@ -134,9 +128,9 @@ function ChipItem({ id, chip, index, isEditing, onEdit, onRemove }: ChipItemProp
 					>
 						<XIcon className="size-3.5" />
 					</button>
-				</m.div>
+				</div>
 			</Badge>
-		</m.div>
+		</div>
 	);
 }
 
@@ -357,21 +351,19 @@ export function ChipInput({
 							className={cn("max-h-24 overflow-y-auto px-2 py-1.5", hasChips ? "border-border/70 border-b" : "hidden")}
 						>
 							<SortableContext items={chips} strategy={rectSortingStrategy}>
-								<m.div layout className="flex flex-wrap gap-1">
-									<AnimatePresence initial={false} mode="popLayout">
-										{chips.map((chip, idx) => (
-											<ChipItem
-												key={chip}
-												id={chip}
-												chip={chip}
-												index={idx}
-												isEditing={editingIndex === idx}
-												onEdit={handleEdit}
-												onRemove={removeChip}
-											/>
-										))}
-									</AnimatePresence>
-								</m.div>
+								<div className="flex flex-wrap gap-1">
+									{chips.map((chip, idx) => (
+										<ChipItem
+											key={chip}
+											id={chip}
+											chip={chip}
+											index={idx}
+											isEditing={editingIndex === idx}
+											onEdit={handleEdit}
+											onRemove={removeChip}
+										/>
+									))}
+								</div>
 							</SortableContext>
 						</div>
 						<div className={cn("flex items-center gap-1.5 px-2", hasChips ? "py-1.5" : "py-0")}>
@@ -393,28 +385,18 @@ export function ChipInput({
 								onChange={handleInputChange}
 								className="h-9 flex-1 border-none p-0 focus-visible:border-none focus-visible:ring-0 dark:bg-transparent"
 							/>
-							<AnimatePresence>
-								{chips.length > 0 && (
-									<m.span
-										layout
-										initial={{ opacity: 0, scale: 0.95 }}
-										animate={{
-											opacity: isEditingKeyword ? 1 : 0.8,
-											scale: 1,
-										}}
-										exit={{ opacity: 0, scale: 0.95 }}
-										transition={{ duration: 0.12, ease: "easeOut" }}
-										className={cn(
-											"flex h-6 min-w-6 shrink-0 items-center justify-center rounded-md border px-1.5 font-medium text-[0.7rem] tabular-nums",
-											isEditingKeyword
-												? "border-primary/30 bg-primary/10 text-primary"
-												: "border-border bg-muted/50 text-foreground/80",
-										)}
-									>
-										{isEditingKeyword ? <Trans>Edit</Trans> : chips.length}
-									</m.span>
-								)}
-							</AnimatePresence>
+							{chips.length > 0 && (
+								<span
+									className={cn(
+										"flex h-6 min-w-6 shrink-0 items-center justify-center rounded-md border px-1.5 font-medium text-[0.7rem] tabular-nums",
+										isEditingKeyword
+											? "border-primary/30 bg-primary/10 text-primary"
+											: "border-border bg-muted/50 text-foreground/80 opacity-80",
+									)}
+								>
+									{isEditingKeyword ? <Trans>Edit</Trans> : chips.length}
+								</span>
+							)}
 						</div>
 					</div>
 				</div>
diff --git a/apps/web/src/components/input/color-picker.tsx b/apps/web/src/components/input/color-picker.tsx
index c73dbf988..f82cb7702 100644
--- a/apps/web/src/components/input/color-picker.tsx
+++ b/apps/web/src/components/input/color-picker.tsx
@@ -65,7 +65,7 @@ export function ColorPicker({
 			{trigger ?? (
 				<PopoverTrigger>
 					<div
-						className="size-6 shrink-0 cursor-pointer rounded-full border border-foreground/60 transition-all hover:scale-105 focus-visible:outline-hidden"
+						className="size-6 shrink-0 cursor-pointer rounded-full border border-foreground/60 transition-transform duration-150 ease-out-strong focus-visible:outline-hidden active:scale-[0.97]"
 						style={{ backgroundColor: currentValue }}
 					/>
 				</PopoverTrigger>
@@ -95,7 +95,7 @@ export function ColorPicker({
 								aria-pressed={currentValue === color}
 								onClick={() => setCurrentValue(color)}
 								className={cn(
-									"size-5 shrink-0 cursor-pointer rounded-full transition-all hover:scale-105 focus-visible:outline-hidden",
+									"size-5 shrink-0 cursor-pointer rounded-full transition-transform duration-150 ease-out-strong focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring active:scale-[0.97]",
 									currentValue === color && "border border-foreground/60",
 								)}
 							/>
diff --git a/apps/web/src/components/input/github-stars-button.tsx b/apps/web/src/components/input/github-stars-button.tsx
index 3190e0539..32b16344a 100644
--- a/apps/web/src/components/input/github-stars-button.tsx
+++ b/apps/web/src/components/input/github-stars-button.tsx
@@ -25,9 +25,7 @@ export function GithubStarsButton() {
 					rel="noopener noreferrer"
 				>
 					<GithubLogoIcon aria-hidden="true" />
-					{starCount != null ? (
-						<CountUp to={starCount} duration={0.5} separator="," className="font-bold" aria-hidden="true" />
-					) : null}
+					{starCount != null ? <CountUp to={starCount} className="font-bold" aria-hidden="true" /> : null}
 					<StarIcon aria-hidden="true" />
 				</a>
 			}
diff --git a/apps/web/src/components/typography/font-display.tsx b/apps/web/src/components/typography/font-display.tsx
index 97d86fc38..e9d653aa2 100644
--- a/apps/web/src/components/typography/font-display.tsx
+++ b/apps/web/src/components/typography/font-display.tsx
@@ -34,7 +34,7 @@ export function FontDisplay({ family, label, type, url }: FontDisplayProps) {
 		<div ref={containerRef} className="inline-flex items-baseline gap-2">
 			<span
 				style={{ fontFamily: isLoaded ? `'${previewName}', sans-serif` : "sans-serif" }}
-				className={cn(isLoaded ? "opacity-100" : "opacity-50", "transition-opacity duration-200 ease-in")}
+				className={cn(isLoaded ? "opacity-100" : "opacity-50", "transition-opacity duration-150 ease-out-strong")}
 			>
 				{label}
 			</span>
diff --git a/apps/web/src/dialogs/resume/sections/experience.tsx b/apps/web/src/dialogs/resume/sections/experience.tsx
index 8e029b214..c53dbf20d 100644
--- a/apps/web/src/dialogs/resume/sections/experience.tsx
+++ b/apps/web/src/dialogs/resume/sections/experience.tsx
@@ -15,6 +15,7 @@ import { RichInput } from "@/components/input/rich-input";
 import { useDialogStore } from "@/dialogs/store";
 import { useUpdateResumeData } from "@/features/resume/builder/draft";
 import { useFormBlocker } from "@/hooks/use-form-blocker";
+import { EASE_OUT_STRONG } from "@/libs/motion";
 import { makeSectionItem } from "@/libs/resume/make-section-item";
 import { createSectionItem, updateSectionItem } from "@/libs/resume/section-actions";
 import { useAppForm, withForm } from "@/libs/tanstack-form";
@@ -189,7 +190,7 @@ const ExperienceForm = withForm({
 								onReorder={handleReorderRoles}
 								className="flex flex-col gap-4 sm:col-span-full"
 							>
-								<AnimatePresence>
+								<AnimatePresence initial={false}>
 									{rolesField.state.value.map((role: RoleItem, index: number) => (
 										<RoleFields
 											key={role.id}
@@ -238,10 +239,11 @@ const RoleFields = withForm({
 				value={role}
 				dragListener={false}
 				dragControls={controls}
-				initial={{ opacity: 1, y: -10 }}
-				animate={{ opacity: 1, y: 0 }}
-				exit={{ opacity: 0, y: -10 }}
-				className="relative grid rounded-md border sm:col-span-full sm:grid-cols-2"
+				initial={{ opacity: 0 }}
+				animate={{ opacity: 1 }}
+				exit={{ opacity: 0 }}
+				transition={{ duration: 0.15, ease: EASE_OUT_STRONG }}
+				className="relative grid rounded-md border bg-popover sm:col-span-full sm:grid-cols-2"
 			>
 				<div className="col-span-full flex items-center justify-between rounded-t bg-border/30 px-2 py-1.5">
 					<Button
diff --git a/apps/web/src/dialogs/resume/sections/interest.tsx b/apps/web/src/dialogs/resume/sections/interest.tsx
index b308b92f3..7005c08ba 100644
--- a/apps/web/src/dialogs/resume/sections/interest.tsx
+++ b/apps/web/src/dialogs/resume/sections/interest.tsx
@@ -160,7 +160,7 @@ const InterestForm = withForm({
 											trigger={
 												<PopoverTrigger className="h-9 rounded-e border-input border-y border-e px-2">
 													<div
-														className="size-4 shrink-0 cursor-pointer rounded-full border border-foreground/60 transition-all hover:scale-105 focus-visible:outline-hidden"
+														className="size-4 shrink-0 cursor-pointer rounded-full border border-foreground/60 transition-transform duration-150 ease-out-strong focus-visible:outline-hidden active:scale-[0.97]"
 														style={{ backgroundColor: field.state.value ?? "currentColor" }}
 													/>
 												</PopoverTrigger>
diff --git a/apps/web/src/dialogs/resume/sections/profile.tsx b/apps/web/src/dialogs/resume/sections/profile.tsx
index 8c68aeeea..3ca03e175 100644
--- a/apps/web/src/dialogs/resume/sections/profile.tsx
+++ b/apps/web/src/dialogs/resume/sections/profile.tsx
@@ -168,7 +168,7 @@ const ProfileForm = withForm({
 											trigger={
 												<PopoverTrigger className="h-9 rounded-e border-input border-y border-e px-2">
 													<div
-														className="size-4 shrink-0 cursor-pointer rounded-full border border-foreground/60 transition-all hover:scale-105 focus-visible:outline-hidden"
+														className="size-4 shrink-0 cursor-pointer rounded-full border border-foreground/60 transition-transform duration-150 ease-out-strong focus-visible:outline-hidden active:scale-[0.97]"
 														style={{ backgroundColor: field.state.value ?? "currentColor" }}
 													/>
 												</PopoverTrigger>
diff --git a/apps/web/src/dialogs/resume/sections/skill.tsx b/apps/web/src/dialogs/resume/sections/skill.tsx
index e830aaf7b..38db16ff2 100644
--- a/apps/web/src/dialogs/resume/sections/skill.tsx
+++ b/apps/web/src/dialogs/resume/sections/skill.tsx
@@ -164,7 +164,7 @@ const SkillForm = withForm({
 											trigger={
 												<PopoverTrigger className="h-9 rounded-e border-input border-y border-e px-2">
 													<div
-														className="size-4 shrink-0 cursor-pointer rounded-full border border-foreground/60 transition-all hover:scale-105 focus-visible:outline-hidden"
+														className="size-4 shrink-0 cursor-pointer rounded-full border border-foreground/60 transition-transform duration-150 ease-out-strong focus-visible:outline-hidden active:scale-[0.97]"
 														style={{ backgroundColor: field.state.value ?? "currentColor" }}
 													/>
 												</PopoverTrigger>
diff --git a/apps/web/src/dialogs/resume/template/gallery.tsx b/apps/web/src/dialogs/resume/template/gallery.tsx
index 5d70a034c..aa085b980 100644
--- a/apps/web/src/dialogs/resume/template/gallery.tsx
+++ b/apps/web/src/dialogs/resume/template/gallery.tsx
@@ -84,7 +84,7 @@ type TemplateCardProps = {
 
 function TemplateCard({ id, metadata, isActive, onSelect }: TemplateCardProps) {
 	return (
-		<CometCard translateDepth={3} rotateDepth={6} glareOpacity={0}>
+		<CometCard glareOpacity={0}>
 			<button
 				type="button"
 				onClick={() => onSelect(id)}
@@ -104,7 +104,7 @@ function TemplateCard({ id, metadata, isActive, onSelect }: TemplateCardProps) {
 			{metadata.tags.length > 0 && (
 				<div className="flex flex-wrap justify-center gap-1 px-1 pb-1">
 					{metadata.tags
-						.sort((a, b) => a.localeCompare(b))
+						.toSorted((a, b) => a.localeCompare(b))
 						.map((tag) => (
 							<Badge key={tag} variant="secondary" className="text-xs">
 								{tag}
diff --git a/apps/web/src/features/applications/components/application-ai-copilot.tsx b/apps/web/src/features/applications/components/application-ai-copilot.tsx
index e4abd8fd3..72a45e943 100644
--- a/apps/web/src/features/applications/components/application-ai-copilot.tsx
+++ b/apps/web/src/features/applications/components/application-ai-copilot.tsx
@@ -60,7 +60,7 @@ function FitRing({ score }: { score: number }) {
 				strokeLinecap="round"
 				strokeDasharray={c}
 				strokeDashoffset={c - (Math.max(0, Math.min(100, score)) / 100) * c}
-				className="transition-[stroke-dashoffset] duration-700 ease-out motion-reduce:transition-none"
+				className="transition-[stroke-dashoffset] duration-300 ease-out-strong motion-reduce:transition-none"
 			/>
 		</svg>
 	);
diff --git a/apps/web/src/features/applications/components/application-card.tsx b/apps/web/src/features/applications/components/application-card.tsx
index e12512e91..15079c337 100644
--- a/apps/web/src/features/applications/components/application-card.tsx
+++ b/apps/web/src/features/applications/components/application-card.tsx
@@ -31,7 +31,7 @@ export function ApplicationCard({ application, onClick, onEdit, className, dragg
 			}}
 			className={cn(
 				"group relative w-full cursor-pointer rounded-xl border border-border bg-card p-3 text-left shadow-sm outline-none transition-colors hover:border-foreground/25 focus-visible:ring-2 focus-visible:ring-ring",
-				dragging && "opacity-60",
+				dragging && "scale-[1.02] shadow-lg",
 				className,
 			)}
 		>
diff --git a/apps/web/src/features/applications/components/board.tsx b/apps/web/src/features/applications/components/board.tsx
index 2ee258a09..5eb93f9fa 100644
--- a/apps/web/src/features/applications/components/board.tsx
+++ b/apps/web/src/features/applications/components/board.tsx
@@ -88,7 +88,10 @@ export function ApplicationBoard({ applications, onOpen, onEdit }: Props) {
 				))}
 			</div>
 
-			<DragOverlay>{activeApp ? <ApplicationCard application={activeApp} dragging /> : null}</DragOverlay>
+			{/* No drop animation: the optimistic move lands after an await, so the default would fly the card back. */}
+			<DragOverlay dropAnimation={null}>
+				{activeApp ? <ApplicationCard application={activeApp} dragging /> : null}
+			</DragOverlay>
 		</DndContext>
 	);
 }
diff --git a/apps/web/src/features/ats-checker/report/score-header.tsx b/apps/web/src/features/ats-checker/report/score-header.tsx
index b53e85ce1..ee58484e1 100644
--- a/apps/web/src/features/ats-checker/report/score-header.tsx
+++ b/apps/web/src/features/ats-checker/report/score-header.tsx
@@ -1,4 +1,5 @@
 import type { PdfAtsReport } from "@reactive-resume/resume/ats-pdf";
+import type { CSSProperties } from "react";
 import { Trans } from "@lingui/react/macro";
 import { InfoIcon } from "@phosphor-icons/react";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@reactive-resume/ui/components/tooltip";
@@ -30,8 +31,11 @@ export function ScoreHeader({ report }: ScoreHeaderProps) {
 
 			<div className="h-1.5 overflow-hidden rounded-full bg-muted">
 				<div
-					className={cn("h-full rounded-full transition-[width] duration-300", tone.bar)}
-					style={{ width: `${report.score}%` }}
+					className={cn(
+						"h-full translate-x-(--fill) rounded-full transition-[translate] duration-300 ease-out-strong rtl:-translate-x-(--fill)",
+						tone.bar,
+					)}
+					style={{ "--fill": `${report.score - 100}%` } as CSSProperties}
 				/>
 			</div>
 
diff --git a/apps/web/src/features/command-palette/index.tsx b/apps/web/src/features/command-palette/index.tsx
index 77e0fc991..51cc9a71f 100644
--- a/apps/web/src/features/command-palette/index.tsx
+++ b/apps/web/src/features/command-palette/index.tsx
@@ -98,6 +98,7 @@ export function CommandPalette() {
 			</DialogHeader>
 
 			<DialogContent
+				instant
 				className="overflow-hidden p-0"
 				aria-label={
 					isFirstPage
diff --git a/apps/web/src/features/command-palette/pages/resumes.tsx b/apps/web/src/features/command-palette/pages/resumes.tsx
index f102950e4..668acea65 100644
--- a/apps/web/src/features/command-palette/pages/resumes.tsx
+++ b/apps/web/src/features/command-palette/pages/resumes.tsx
@@ -134,7 +134,7 @@ export function ResumesCommandGroup() {
 								<ReadCvLogoIcon />
 								{resume.name}
 
-								<CommandShortcut className="opacity-0 transition-opacity group-data-[selected=true]/command-item:opacity-100">
+								<CommandShortcut className="opacity-0 group-data-[selected=true]/command-item:opacity-100">
 									<Trans comment="Command palette hint that pressing Enter opens the selected resume">
 										Press <Kbd>Enter</Kbd> to open
 									</Trans>
diff --git a/apps/web/src/features/cover-letters/library.tsx b/apps/web/src/features/cover-letters/library.tsx
index b5981eb26..4231af531 100644
--- a/apps/web/src/features/cover-letters/library.tsx
+++ b/apps/web/src/features/cover-letters/library.tsx
@@ -1,6 +1,6 @@
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { keepPreviousData, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useEffect, useId, useRef, useState } from "react";
 import { coverLetterDocumentSchema } from "@reactive-resume/schema/cover-letter/data";
 import { templateSchema } from "@reactive-resume/schema/templates";
@@ -9,6 +9,7 @@ import { Input } from "@reactive-resume/ui/components/input";
 import { Label } from "@reactive-resume/ui/components/label";
 import { Spinner } from "@reactive-resume/ui/components/spinner";
 import { toast } from "@reactive-resume/ui/components/toast";
+import { cn } from "@reactive-resume/utils/style";
 import { Combobox } from "@/components/ui/combobox";
 import { templates } from "@/dialogs/resume/template/data";
 import { getReadableErrorMessage } from "@/libs/error-message";
@@ -46,7 +47,10 @@ export function CoverLetterLibrary({ initialResumeId, resumeReady = true, onEdit
 	useEffect(() => {
 		onEditingChange?.(selectedId !== null);
 	}, [selectedId, onEditingChange]);
-	const query = useQuery(orpc.coverLetters.list.queryOptions({ input: { search: querySearch, offset, limit: 20 } }));
+	const query = useQuery({
+		...orpc.coverLetters.list.queryOptions({ input: { search: querySearch, offset, limit: 20 } }),
+		placeholderData: keepPreviousData,
+	});
 	const resumes = useQuery(orpc.resume.list.queryOptions({ input: {} }));
 	const source = useQuery(
 		orpc.resume.getById.queryOptions({ input: { id: resumeId ?? "" }, enabled: creating && !!resumeId }),
@@ -250,7 +254,12 @@ export function CoverLetterLibrary({ initialResumeId, resumeReady = true, onEdit
 					<Trans>No cover letters found. Create one or import an existing letter.</Trans>
 				</p>
 			) : (
-				<ul className="divide-y rounded-lg border">
+				<ul
+					className={cn(
+						"divide-y rounded-lg border transition-opacity duration-150",
+						query.isPlaceholderData && "opacity-60",
+					)}
+				>
 					{query.data.items.map((letter) => (
 						<li key={letter.id}>
 							<button
diff --git a/apps/web/src/features/homepage/ats-playground.css b/apps/web/src/features/homepage/ats-playground.css
deleted file mode 100644
index 1220e4fcd..000000000
--- a/apps/web/src/features/homepage/ats-playground.css
+++ /dev/null
@@ -1,6 +0,0 @@
-/* Keyframes cannot be expressed as a utility; referenced via animate-[home-ats-spin_...] in ats-playground.tsx. */
-@keyframes home-ats-spin {
-	to {
-		transform: rotate(360deg);
-	}
-}
diff --git a/apps/web/src/features/homepage/ats-playground.tsx b/apps/web/src/features/homepage/ats-playground.tsx
index 0e63c3f12..4b5d504c5 100644
--- a/apps/web/src/features/homepage/ats-playground.tsx
+++ b/apps/web/src/features/homepage/ats-playground.tsx
@@ -2,7 +2,6 @@ import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import { ArrowRightIcon, ArrowUpRightIcon, FilePdfIcon, SpinnerGapIcon } from "@phosphor-icons/react";
 import { useEffect, useId, useRef, useState } from "react";
-import "./ats-playground.css";
 
 const focusRing = "focus-visible:outline-2 focus-visible:outline-(--home-accent) focus-visible:outline-offset-4";
 const message = "max-w-[300px] text-[14px] leading-[1.8]";
@@ -97,17 +96,13 @@ export default function AtsPlayground() {
 			</div>
 			<div className="flex flex-col items-center gap-[15px] max-[900px]:col-[1] max-[600px]:row-auto max-[900px]:row-[2] max-[600px]:flex-row max-[600px]:flex-wrap max-[600px]:justify-center max-[600px]:gap-2.5">
 				<button
-					className={`motion-safe:active:not-disabled:not-focus-visible:transform-[scale(0.97)] flex min-w-[140px] flex-col items-center gap-[14px] rounded border border-(--home-line) bg-(--home-panel) px-4 py-5 text-(--home-ink) text-[13px] transition-[transform_140ms_cubic-bezier(0.23,1,0.32,1)] hover:not-disabled:border-(--home-accent) disabled:cursor-progress max-[900px]:flex-row max-[900px]:gap-2.5 max-[900px]:py-[13px] ${focusRing}`}
+					className={`motion-safe:active:not-disabled:not-focus-visible:transform-[scale(0.97)] flex min-w-[140px] flex-col items-center gap-[14px] rounded border border-(--home-line) bg-(--home-panel) px-4 py-5 text-(--home-ink) text-[13px] [transition:transform_140ms_var(--ease-out-strong),border-color_150ms_ease] hover:not-disabled:border-(--home-accent) disabled:cursor-progress max-[900px]:flex-row max-[900px]:gap-2.5 max-[900px]:py-[13px] ${focusRing}`}
 					type="button"
 					disabled={isReading}
 					onClick={() => void read(file)}
 				>
 					{isReading ? (
-						<SpinnerGapIcon
-							className="animate-[home-ats-spin_900ms_linear_infinite] text-(--home-accent)"
-							size={22}
-							aria-hidden="true"
-						/>
+						<SpinnerGapIcon className="animate-spin text-(--home-accent)" size={22} aria-hidden="true" />
 					) : (
 						<ArrowRightIcon className="text-(--home-accent)" size={22} aria-hidden="true" />
 					)}
diff --git a/apps/web/src/features/homepage/export-playground.tsx b/apps/web/src/features/homepage/export-playground.tsx
index 82d56d053..7c7c578f3 100644
--- a/apps/web/src/features/homepage/export-playground.tsx
+++ b/apps/web/src/features/homepage/export-playground.tsx
@@ -184,7 +184,7 @@ export default function ExportPlayground({ name, accent, typeface, template }: E
 				className="perspective-[1000px] grid justify-items-center px-[30px] pt-[44px] pb-4 max-[700px]:pt-[35px]"
 				aria-hidden="true"
 			>
-				<div className="transform-3d transform-[rotate(-7deg)_rotateY(-12deg)] group-data-[format=docx]:transform-[rotate(-3deg)_rotateY(8deg)] group-data-[format=json]:transform-[rotate(7deg)_rotateY(9deg)] group-data-[format=md]:transform-[rotate(4deg)_rotateY(-7deg)] motion-reduce:transform-[rotate(-4deg)] relative aspect-[0.76] w-[min(100%,285px)] transition-[transform_280ms_cubic-bezier(0.23,1,0.32,1)] group-has-focus-visible:transition-none max-[700px]:w-[225px]">
+				<div className="transform-3d transform-[rotate(-7deg)_rotateY(-12deg)] group-data-[format=docx]:transform-[rotate(-3deg)_rotateY(8deg)] group-data-[format=json]:transform-[rotate(7deg)_rotateY(9deg)] group-data-[format=md]:transform-[rotate(4deg)_rotateY(-7deg)] motion-reduce:transform-[rotate(-4deg)] relative aspect-[0.76] w-[min(100%,285px)] [transition:transform_280ms_var(--ease-out-strong)] group-has-focus-visible:transition-none max-[700px]:w-[225px]">
 					<div className="transform-[translate(-26px,21px)_rotate(-10deg)] absolute inset-0 rounded border border-[#535154] bg-[#242427]" />
 					<div className="transform-[translate(-14px,10px)_rotate(-5deg)] absolute inset-0 rounded border border-[#535154] bg-[#383739]" />
 					<div className="absolute inset-0 flex flex-col overflow-hidden rounded bg-(--home-export-color) p-[25px] text-[#29272c] shadow-[1px_1px_0_#ffffff60_inset,0_24px_48px_#00000050] max-[700px]:p-5">
@@ -226,7 +226,7 @@ export default function ExportPlayground({ name, accent, typeface, template }: E
 						<button
 							key={item.id}
 							type="button"
-							className={`group flex min-h-16 w-full items-center gap-[17px] border-(--home-line) border-b py-3 pr-[15px] pl-2 text-left text-(--home-muted) text-[17px] [transition:color_160ms_ease,background-color_160ms_ease,transform_120ms_cubic-bezier(0.23,1,0.32,1)] hover:not-disabled:bg-[#ffffff08] hover:not-disabled:text-(--home-ink) aria-pressed:bg-[#ffffff04] aria-pressed:text-(--home-ink) aria-pressed:hover:not-disabled:bg-[#ffffff08] ${buttonState}`}
+							className={`group flex min-h-16 w-full items-center gap-[17px] border-(--home-line) border-b py-3 pr-[15px] pl-2 text-left text-(--home-muted) text-[17px] [transition:color_160ms_ease,background-color_160ms_ease,transform_120ms_var(--ease-out-strong)] hover:not-disabled:bg-[#ffffff08] hover:not-disabled:text-(--home-ink) aria-pressed:bg-[#ffffff04] aria-pressed:text-(--home-ink) aria-pressed:hover:not-disabled:bg-[#ffffff08] ${buttonState}`}
 							aria-pressed={format === item.id}
 							disabled={busy}
 							onClick={() => setFormat(item.id)}
@@ -253,7 +253,7 @@ export default function ExportPlayground({ name, accent, typeface, template }: E
 				</p>
 				<button
 					type="button"
-					className={`flex min-h-14 w-full items-center justify-between gap-5 rounded border border-transparent bg-(--home-export-color) px-5 py-4 font-[550] text-[#252329] text-[15px] [transition:transform_120ms_cubic-bezier(0.23,1,0.32,1),opacity_160ms_ease] hover:not-disabled:opacity-90 ${buttonState}`}
+					className={`flex min-h-14 w-full items-center justify-between gap-5 rounded border border-transparent bg-(--home-export-color) px-5 py-4 font-[550] text-[#252329] text-[15px] [transition:transform_120ms_var(--ease-out-strong),opacity_160ms_ease] hover:not-disabled:opacity-90 ${buttonState}`}
 					disabled={busy}
 					aria-describedby={descriptionId}
 					onClick={() => void download()}
diff --git a/apps/web/src/features/homepage/feature-explorer.tsx b/apps/web/src/features/homepage/feature-explorer.tsx
index 892270de8..deaf74bce 100644
--- a/apps/web/src/features/homepage/feature-explorer.tsx
+++ b/apps/web/src/features/homepage/feature-explorer.tsx
@@ -19,11 +19,11 @@ import { cn } from "@reactive-resume/utils/style";
 import { textLink } from "./classes";
 
 const demoClass =
-	"min-h-[492px] animate-[home-feature-enter_220ms_cubic-bezier(0.23,1,0.32,1)_both] px-[30px] py-6 group-data-[instant=true]/explorer:animate-none max-[1100px]:p-[23px] max-[900px]:p-[27px] max-[540px]:px-4 max-[540px]:py-5";
+	"min-h-[492px] animate-[home-feature-enter_220ms_var(--ease-out-strong)_both] px-[30px] py-6 group-data-[instant=true]/explorer:animate-none max-[1100px]:p-[23px] max-[900px]:p-[27px] max-[540px]:px-4 max-[540px]:py-5";
 const demoTopClass = "flex items-center justify-between gap-5 text-[12px] text-(--home-muted)";
 const demoCaptionClass = "mt-[25px] text-[12px] leading-[1.7] text-(--home-muted) max-[540px]:text-[11px]";
 const pressTransition =
-	"[transition:transform_140ms_cubic-bezier(0.23,1,0.32,1),background-color_180ms_ease,color_180ms_ease] active:transform-[scale(0.97)]";
+	"[transition:transform_140ms_var(--ease-out-strong),background-color_180ms_ease,color_180ms_ease] active:transform-[scale(0.97)]";
 const jobCardClass =
 	"min-h-[191px] rounded-[4px] border px-3 py-[14px] max-[540px]:min-h-[183px] max-[540px]:px-2 max-[540px]:py-[13px]";
 const toolBoxClass =
@@ -282,7 +282,7 @@ export function FeatureExplorer() {
 									/>
 								))}
 								<div
-									className={`${jobCardClass} transform-[translateX(calc(var(--stage)_*_(100%_+_var(--home-board-gap))))_rotate(calc(var(--stage)_*_3deg_-_2deg))] absolute top-0 left-0 w-[calc((100%_-_2_*_var(--home-board-gap))_/_3)] border-[#4b4b51] bg-[#2a2a2e] text-(--home-ink) shadow-[0_5px_12px_#0002] [transition:transform_460ms_cubic-bezier(0.23,1,0.32,1)] group-data-[instant=true]/explorer:transition-none`}
+									className={`${jobCardClass} transform-[translateX(calc(var(--stage)_*_(100%_+_var(--home-board-gap))))_rotate(calc(var(--stage)_*_3deg_-_2deg))] absolute top-0 left-0 w-[calc((100%_-_2_*_var(--home-board-gap))_/_3)] border-[#4b4b51] bg-[#2a2a2e] text-(--home-ink) shadow-[0_5px_12px_#0002] [transition:transform_460ms_var(--ease-out-strong)] group-data-[instant=true]/explorer:transition-none`}
 								>
 									<div className="mb-4 grid size-[30px] place-items-center rounded-[4px] bg-[#d8c4ac] font-[Georgia,serif] font-semibold text-[#34302a] text-[19px] leading-none">
 										n.
diff --git a/apps/web/src/features/homepage/languages-showcase.tsx b/apps/web/src/features/homepage/languages-showcase.tsx
index 31f7de866..3f5463cbf 100644
--- a/apps/web/src/features/homepage/languages-showcase.tsx
+++ b/apps/web/src/features/homepage/languages-showcase.tsx
@@ -30,7 +30,7 @@ const headingClass = `${wordClass} mb-[15px] font-semibold text-[13px] leading-[
 const paperClass =
 	"language-paper relative mx-auto w-full max-w-[440px] rotate-2 rounded border border-[#e0dcd5] bg-[#efede7] font-[Arial,Noto_Sans,sans-serif] text-[#29272b] text-start shadow-[4px_5px_0_#d5d0c8,5px_6px_0_#77716b,11px_16px_0_-4px_#b9b1a7,10px_28px_42px_#0005]";
 const optionClass =
-	"group/option flex min-h-[62px] items-center justify-between gap-2 rounded border border-[#454345] bg-[#222224] px-[17px] py-[14px] text-[#e3dfda] text-[clamp(16px,1.6vw,21px)] shadow-[0_3px_0_#101011] transition-[background,color,transform,box-shadow] duration-[160ms] ease-[ease] hover:not-aria-pressed:-translate-y-[2px] hover:not-aria-pressed:bg-[#343031] hover:not-aria-pressed:shadow-[0_5px_0_#101011] focus-visible:outline-2 focus-visible:outline-offset-[5px] focus-visible:outline-(--home-accent) active:translate-y-[2px] active:shadow-[0_1px_0_#101011] aria-pressed:translate-y-[2px] aria-pressed:border-[#d0b9a5] aria-pressed:bg-[#d0b9a5] aria-pressed:text-[#24201d] aria-pressed:shadow-[0_1px_0_#101011] group-data-[instant=true]/languages:transition-none max-[420px]:min-h-[56px] max-[420px]:px-[11px] max-[420px]:py-[10px] max-[420px]:text-[16px]";
+	"group/option flex min-h-[62px] items-center justify-between gap-2 rounded border border-[#454345] bg-[#222224] px-[17px] py-[14px] text-[#e3dfda] text-[clamp(16px,1.6vw,21px)] shadow-[0_3px_0_#101011] transition-[background-color,color,translate,box-shadow] duration-[160ms] ease-[ease] hover:not-aria-pressed:-translate-y-[2px] hover:not-aria-pressed:bg-[#343031] hover:not-aria-pressed:shadow-[0_5px_0_#101011] focus-visible:outline-2 focus-visible:outline-offset-[5px] focus-visible:outline-(--home-accent) active:translate-y-[2px] active:shadow-[0_1px_0_#101011] aria-pressed:translate-y-[2px] aria-pressed:border-[#d0b9a5] aria-pressed:bg-[#d0b9a5] aria-pressed:text-[#24201d] aria-pressed:shadow-[0_1px_0_#101011] group-data-[instant=true]/languages:transition-none max-[420px]:min-h-[56px] max-[420px]:px-[11px] max-[420px]:py-[10px] max-[420px]:text-[16px]";
 
 type LinesProps = { count: 2 | 3; className?: string };
 
diff --git a/apps/web/src/features/homepage/page.tsx b/apps/web/src/features/homepage/page.tsx
index 5b05ba075..ad164bddb 100644
--- a/apps/web/src/features/homepage/page.tsx
+++ b/apps/web/src/features/homepage/page.tsx
@@ -23,12 +23,12 @@ const ExportPlayground = lazy(() => import("./export-playground"));
 const AtsPlayground = lazy(() => import("./ats-playground"));
 const githubUrl = "https://github.com/reactive-resume/reactive-resume";
 const buttonClass =
-	"inline-flex min-h-[52px] items-center justify-center gap-3 rounded-[4px] border border-[#f1f0eb] bg-[#f1f0eb] px-[19px] py-[14px] text-[14px] font-[550] text-[#151516] [transition:background-color_150ms_ease,transform_150ms_cubic-bezier(0.23,1,0.32,1)] hover:bg-[#d9d8d2] active:transform-[scale(0.97)] max-[540px]:min-h-[49px] max-[540px]:gap-[18px] max-[540px]:px-[15px] max-[540px]:py-3 max-[540px]:text-[13px]";
+	"inline-flex min-h-[52px] items-center justify-center gap-3 rounded-[4px] border border-[#f1f0eb] bg-[#f1f0eb] px-[19px] py-[14px] text-[14px] font-[550] text-[#151516] [transition:background-color_150ms_ease,transform_150ms_var(--ease-out-strong)] hover:bg-[#d9d8d2] active:transform-[scale(0.97)] max-[540px]:min-h-[49px] max-[540px]:gap-[18px] max-[540px]:px-[15px] max-[540px]:py-3 max-[540px]:text-[13px]";
 const brandClass = "inline-flex shrink-0 items-center gap-[11px] font-[550] tracking-[-0.04em] max-[540px]:gap-2";
 const paperLinkClass =
 	"group/link flex min-h-[65px] items-center gap-[14px] border-t border-[#2d2e3038] text-[14px] [transition:background-color_160ms_ease] focus-visible:outline-[#37383a]";
 const paperArrowClass =
-	"ml-auto [transition:transform_180ms_cubic-bezier(0.23,1,0.32,1)] group-hover/link:transform-[translate(2px,-2px)]";
+	"ml-auto [transition:transform_180ms_var(--ease-out-strong)] group-hover/link:transform-[translate(2px,-2px)]";
 const contributeLinkClass =
 	"inline-flex min-h-11 items-center gap-2 text-(--home-ink) underline-offset-4 hover:underline";
 type DeferredDemoProps = { children: ReactNode };
@@ -91,7 +91,7 @@ export function Homepage() {
 					>
 						<Trans>Docs</Trans>
 					</a>
-					<div className="[&>a]:hover:[&_svg:last-child]:transform-[rotate(20deg)_scale(1.15)] [&>a>span]:min-w-[6ch] [&>a>span]:border-s [&>a>span]:border-s-[#3d444d] [&>a>span]:ps-2 [&>a>span]:text-center [&>a>span]:font-semibold max-[540px]:[&>a>span]:min-w-0 max-[540px]:[&>a>span]:ps-[6px] [&>a]:inline-flex [&>a]:min-h-[38px] [&>a]:min-w-[128px] [&>a]:items-center [&>a]:gap-2 [&>a]:rounded-[4px] [&>a]:border [&>a]:border-[#3d444d] [&>a]:bg-[#161b22] [&>a]:px-[11px] [&>a]:py-0 [&>a]:text-[#f0f6fc] [&>a]:text-[13px] [&>a]:tabular-nums [&>a]:shadow-[inset_0_1px_0_#ffffff0d,0_3px_0_#09090966] [&>a]:[transition:background-color_180ms_ease,border-color_180ms_ease,box-shadow_180ms_ease] [&>a]:hover:border-[#6e7681] [&>a]:hover:bg-[#21262d] [&>a]:hover:text-(--home-ink) [&>a]:hover:shadow-[inset_0_1px_0_#ffffff14,0_3px_0_#09090966,0_0_18px_#ffffff08] [&>a]:focus-visible:border-[#3d444d] [&>a]:focus-visible:ring-0 max-[540px]:[&>a]:min-w-24 max-[540px]:[&>a]:gap-[5px] max-[540px]:[&>a]:px-[6px] max-[540px]:[&>a]:text-[11px] [&_svg:last-child]:text-[#f0f6fc] [&_svg:last-child]:[transition:transform_220ms_cubic-bezier(0.23,1,0.32,1)] max-[540px]:[&_svg:not([class*='size-'])]:size-[14px]">
+					<div className="[&>a]:hover:[&_svg:last-child]:transform-[rotate(20deg)_scale(1.15)] [&>a>span]:min-w-[6ch] [&>a>span]:border-s [&>a>span]:border-s-[#3d444d] [&>a>span]:ps-2 [&>a>span]:text-center [&>a>span]:font-semibold max-[540px]:[&>a>span]:min-w-0 max-[540px]:[&>a>span]:ps-[6px] [&>a]:inline-flex [&>a]:min-h-[38px] [&>a]:min-w-[128px] [&>a]:items-center [&>a]:gap-2 [&>a]:rounded-[4px] [&>a]:border [&>a]:border-[#3d444d] [&>a]:bg-[#161b22] [&>a]:px-[11px] [&>a]:py-0 [&>a]:text-[#f0f6fc] [&>a]:text-[13px] [&>a]:tabular-nums [&>a]:shadow-[inset_0_1px_0_#ffffff0d,0_3px_0_#09090966] [&>a]:[transition:background-color_180ms_ease,border-color_180ms_ease,box-shadow_180ms_ease] [&>a]:hover:border-[#6e7681] [&>a]:hover:bg-[#21262d] [&>a]:hover:text-(--home-ink) [&>a]:hover:shadow-[inset_0_1px_0_#ffffff14,0_3px_0_#09090966,0_0_18px_#ffffff08] [&>a]:focus-visible:border-[#3d444d] [&>a]:focus-visible:ring-0 max-[540px]:[&>a]:min-w-24 max-[540px]:[&>a]:gap-[5px] max-[540px]:[&>a]:px-[6px] max-[540px]:[&>a]:text-[11px] [&_svg:last-child]:text-[#f0f6fc] [&_svg:last-child]:[transition:transform_220ms_var(--ease-out-strong)] max-[540px]:[&_svg:not([class*='size-'])]:size-[14px]">
 						<GithubStarsButton />
 					</div>
 				</nav>
diff --git a/apps/web/src/features/homepage/resume-sculpture.tsx b/apps/web/src/features/homepage/resume-sculpture.tsx
index ffd8a8d57..9683647df 100644
--- a/apps/web/src/features/homepage/resume-sculpture.tsx
+++ b/apps/web/src/features/homepage/resume-sculpture.tsx
@@ -1,7 +1,7 @@
 import type { CSSProperties, PointerEvent } from "react";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
-import { motion, useMotionTemplate, useReducedMotion, useSpring } from "motion/react";
+import { m, useMotionTemplate, useReducedMotion, useSpring } from "motion/react";
 import { useId, useRef, useState } from "react";
 import { cn } from "@reactive-resume/utils/style";
 import "./resume-sculpture.css";
@@ -16,7 +16,7 @@ const focusRing =
 const dockLabel = "mb-[7px] block text-[11px] leading-[1.4] text-[#a5a5ab]";
 
 const dockButton =
-	"relative grid min-h-[44px] min-w-[44px] cursor-pointer place-items-center bg-transparent text-[12px] text-[#a5a5ab] [transition:transform_140ms_cubic-bezier(0.23,1,0.32,1),color_150ms_ease]";
+	"relative grid min-h-[44px] min-w-[44px] cursor-pointer place-items-center bg-transparent text-[12px] text-[#a5a5ab] [transition:transform_140ms_var(--ease-out-strong),color_150ms_ease]";
 
 const templateIcon: Record<SculptureTemplate, string> = {
 	ditgar: "bg-[linear-gradient(to_right,#aa8ebe_34%,transparent_34%)]",
@@ -110,7 +110,7 @@ export function ResumeSculpture({
 					onPointerCancel={endDrag}
 					onLostPointerCapture={endDrag}
 				>
-					<motion.div
+					<m.div
 						className="sculpture-rig group/rig transform-3d absolute inset-0"
 						data-spread={spread}
 						data-instant={keyboardAction}
@@ -129,7 +129,7 @@ export function ResumeSculpture({
 								/>
 							);
 						})}
-					</motion.div>
+					</m.div>
 				</div>
 			</div>
 			<div className="flex items-center justify-between @max-[450px]:gap-1 gap-3 @max-[450px]:px-0 px-2 pt-[14px] pb-[18px] text-(--home-muted)">
@@ -351,7 +351,7 @@ function ResumePaper({ name, accent, typeface, template, position }: ResumePaper
 	return (
 		<article
 			className={cn(
-				"sculpture-paper transform-3d absolute top-[2%] left-[24%] aspect-[210/297] w-[56%] origin-[50%_80%] animate-[home-sculpture-assemble_900ms_cubic-bezier(0.23,1,0.32,1)_both] transition-[transform] duration-[650ms] ease-[cubic-bezier(0.23,1,0.32,1)] group-data-[instant=true]/rig:transition-none",
+				"sculpture-paper transform-3d absolute top-[2%] left-[24%] aspect-[210/297] w-[56%] origin-[50%_80%] animate-[home-sculpture-assemble_900ms_var(--ease-out-strong)_both] transition-[transform] duration-[650ms] ease-out-strong group-data-[instant=true]/rig:transition-none",
 				paperTransform[position],
 			)}
 			data-template={template}
diff --git a/apps/web/src/features/homepage/site-footer.tsx b/apps/web/src/features/homepage/site-footer.tsx
index c35a7c4ac..84de54503 100644
--- a/apps/web/src/features/homepage/site-footer.tsx
+++ b/apps/web/src/features/homepage/site-footer.tsx
@@ -12,6 +12,7 @@ import {
 import { Link } from "@tanstack/react-router";
 import { m } from "motion/react";
 import { cn } from "@reactive-resume/utils/style";
+import { EASE_OUT_STRONG } from "@/libs/motion";
 import { wrap } from "./classes";
 
 const githubUrl = "https://github.com/reactive-resume/reactive-resume";
@@ -73,7 +74,7 @@ const getSocialLinks = (): SocialLink[] => [
 const linkClass =
 	"group/link inline-flex min-h-9 items-center gap-1 text-(--home-muted) text-[14px] [transition:color_150ms_ease] hover:text-(--home-ink)";
 const arrowClass =
-	"opacity-0 [transition:opacity_180ms_ease,transform_180ms_cubic-bezier(0.23,1,0.32,1)] group-hover/link:transform-[translate(1px,-1px)] group-hover/link:opacity-60";
+	"opacity-0 [transition:opacity_180ms_ease,transform_180ms_var(--ease-out-strong)] group-hover/link:transform-[translate(1px,-1px)] group-hover/link:opacity-60";
 const socialClass =
 	"inline-grid size-10 place-items-center text-(--home-muted) [transition:color_160ms_ease] hover:text-(--home-ink)";
 const metaLinkClass = "text-(--home-ink) underline-offset-[3px] hover:underline";
@@ -201,7 +202,7 @@ export function SiteFooter() {
 					initial={{ opacity: 0, y: 24 }}
 					whileInView={{ opacity: 1, y: 0 }}
 					viewport={{ once: true, amount: 0.3 }}
-					transition={{ duration: 0.7, ease: [0.23, 1, 0.32, 1] }}
+					transition={{ duration: 0.7, ease: EASE_OUT_STRONG }}
 				>
 					Reactive Resume
 				</m.p>
diff --git a/apps/web/src/features/homepage/styles.css b/apps/web/src/features/homepage/styles.css
index 7875f3f73..a29819659 100644
--- a/apps/web/src/features/homepage/styles.css
+++ b/apps/web/src/features/homepage/styles.css
@@ -49,13 +49,3 @@
 		transform: translateX(100%);
 	}
 }
-
-@media (prefers-reduced-motion: reduce) {
-	.homepage *,
-	.homepage *::before,
-	.homepage *::after {
-		animation: none;
-		transition: none;
-		scroll-behavior: auto;
-	}
-}
diff --git a/apps/web/src/features/homepage/template-shelf.tsx b/apps/web/src/features/homepage/template-shelf.tsx
index f10cb63f5..cb4f0d721 100644
--- a/apps/web/src/features/homepage/template-shelf.tsx
+++ b/apps/web/src/features/homepage/template-shelf.tsx
@@ -11,7 +11,7 @@ type TemplateShelfProps = { template: Template; onChange: (template: Template) =
 const templates = templateSchema.options;
 const displayName = (name: string) => name[0].toUpperCase() + name.slice(1);
 const roundLinkClass =
-	"inline-flex size-[46px] shrink-0 items-center justify-center rounded-full border border-[#444447] bg-transparent text-(--home-ink) [transition:background-color_150ms_ease,transform_150ms_cubic-bezier(0.23,1,0.32,1)] hover:bg-[#2c2c2f] active:transform-[scale(0.97)] max-[540px]:size-11";
+	"inline-flex size-[46px] shrink-0 items-center justify-center rounded-full border border-[#444447] bg-transparent text-(--home-ink) [transition:background-color_150ms_ease,transform_150ms_var(--ease-out-strong)] hover:bg-[#2c2c2f] active:transform-[scale(0.97)] max-[540px]:size-11";
 
 export function TemplateShelf({ template, onChange }: TemplateShelfProps) {
 	const index = templates.indexOf(template);
@@ -35,7 +35,7 @@ export function TemplateShelf({ template, onChange }: TemplateShelfProps) {
 						<button
 							key={item}
 							type="button"
-							className="transform-[translateX(calc(var(--position)_*_var(--home-paper-step)))_translateY(calc(var(--distance)_*_15px))_translateZ(calc(var(--distance)_*_-80px))_rotateY(calc(var(--position)_*_-12deg))_rotateZ(calc(var(--position)_*_2deg))] absolute top-5 left-[calc(50%_-_var(--home-paper-width)_/_2)] z-[calc(10_-_var(--distance))] aspect-[510/720] w-(--home-paper-width) rounded-[2px] border border-[#dedbd3] bg-[#eee] shadow-[0_25px_28px_#0004,0_2px_1px_#0006] brightness-[calc(1_-_var(--distance)_*_0.18)] [transition:transform_550ms_cubic-bezier(0.23,1,0.32,1),filter_350ms_ease,opacity_220ms_ease] not-aria-pressed:hover:brightness-95 aria-hidden:invisible aria-hidden:opacity-0 group-data-[instant=true]/shelf:transition-none"
+							className="transform-[translateX(calc(var(--position)_*_var(--home-paper-step)))_translateY(calc(var(--distance)_*_15px))_translateZ(calc(var(--distance)_*_-80px))_rotateY(calc(var(--position)_*_-12deg))_rotateZ(calc(var(--position)_*_2deg))] absolute top-5 left-[calc(50%_-_var(--home-paper-width)_/_2)] z-[calc(10_-_var(--distance))] aspect-[510/720] w-(--home-paper-width) rounded-[2px] border border-[#dedbd3] bg-[#eee] shadow-[0_25px_28px_#0004,0_2px_1px_#0006] brightness-[calc(1_-_var(--distance)_*_0.18)] [transition:transform_550ms_var(--ease-out-strong),filter_350ms_ease,opacity_220ms_ease,visibility_220ms] not-aria-pressed:hover:brightness-95 aria-hidden:invisible aria-hidden:opacity-0 group-data-[instant=true]/shelf:transition-none"
 							aria-label={t`Choose ${displayName(item)}`}
 							aria-pressed={item === template}
 							aria-hidden={Math.abs(offset) > 2}
diff --git a/apps/web/src/features/resume/builder/section-recovery.tsx b/apps/web/src/features/resume/builder/section-recovery.tsx
index b9b3ed5b6..ad673c9fa 100644
--- a/apps/web/src/features/resume/builder/section-recovery.tsx
+++ b/apps/web/src/features/resume/builder/section-recovery.tsx
@@ -26,10 +26,15 @@ export function getVisibleLeftSidebarSections(data: ResumeData): LeftSidebarSect
 	);
 }
 
+/** Smooth scrolling unless the user asked for reduced motion. */
+export function getScrollBehavior(): ScrollBehavior {
+	return window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "instant" : "smooth";
+}
+
 function focusSidebarSection(sectionId: string): void {
 	const editorTarget = document.getElementById(`sidebar-${sectionId}`);
 	if (editorTarget) {
-		editorTarget.scrollIntoView({ block: "start", inline: "nearest", behavior: "smooth" });
+		editorTarget.scrollIntoView({ block: "start", inline: "nearest", behavior: getScrollBehavior() });
 		return;
 	}
 
@@ -39,7 +44,7 @@ function focusSidebarSection(sectionId: string): void {
 		if (!recoveryTarget) return;
 
 		recoveryTarget.focus({ preventScroll: true });
-		recoveryTarget.scrollIntoView({ block: "start", inline: "nearest", behavior: "smooth" });
+		recoveryTarget.scrollIntoView({ block: "start", inline: "nearest", behavior: getScrollBehavior() });
 	};
 
 	const trigger = document.getElementById("sidebar-hidden-sections-trigger");
diff --git a/apps/web/src/features/resume/preview/preview.browser.tsx b/apps/web/src/features/resume/preview/preview.browser.tsx
index 8f63cbe2a..5347c7ba6 100644
--- a/apps/web/src/features/resume/preview/preview.browser.tsx
+++ b/apps/web/src/features/resume/preview/preview.browser.tsx
@@ -9,6 +9,7 @@ import { toast } from "@reactive-resume/ui/components/toast";
 import { isRTL } from "@reactive-resume/utils/locale";
 import { cn } from "@reactive-resume/utils/style";
 import { createResumePdfBlob } from "@/features/resume/export/pdf-document";
+import { EASE_OUT_STRONG } from "@/libs/motion";
 import { usePreviewPausedStore, useResumeData } from "../builder/draft";
 import { PdfCanvasDocument, PdfCanvasPage } from "./pdf-canvas";
 import { ResumePreviewLoader } from "./preview.shared";
@@ -26,7 +27,10 @@ type PreviewPdf = {
 };
 
 const UPDATE_DEBOUNCE_MS = 100;
-const CROSSFADE_DURATION_MS = 180;
+// Incoming layer fades in over the old one; the old layer holds at full opacity until the incoming one is opaque,
+// then drops out. Fading both at once dips the page towards the background mid-swap.
+const INCOMING_TRANSITION = { duration: 0.15, ease: EASE_OUT_STRONG };
+const EXITING_TRANSITION = { duration: 0.1, delay: 0.18 };
 
 const createPreviewPdf = (file: Blob, id: number, hasExistingPreview: boolean, template: Template): PreviewPdf => ({
 	file,
@@ -189,7 +193,7 @@ export function ResumePreviewClient({
 						initial={{ opacity: visiblePdf.phase === "active" ? 1 : 0 }}
 						animate={{ opacity: visiblePdf.phase === "active" ? 1 : 0 }}
 						exit={{ opacity: 0 }}
-						transition={{ duration: CROSSFADE_DURATION_MS / 1000, ease: "easeOut" }}
+						transition={visiblePdf.phase === "exiting" ? EXITING_TRANSITION : INCOMING_TRANSITION}
 						onAnimationComplete={() => {
 							if (visiblePdf.phase !== "exiting") return;
 							setPreviewLayers((current) => removePreviewLayer(current, visiblePdf.id));
diff --git a/apps/web/src/features/resume/preview/preview.shared.tsx b/apps/web/src/features/resume/preview/preview.shared.tsx
index dff4888fd..eeb19e35e 100644
--- a/apps/web/src/features/resume/preview/preview.shared.tsx
+++ b/apps/web/src/features/resume/preview/preview.shared.tsx
@@ -65,7 +65,10 @@ export function ResumePreviewLoader({
 							role="img"
 							aria-label={`Loading resume page ${pageNumber} of ${pageCount}`}
 							style={pageSize}
-							className={cn("aspect-page overflow-hidden rounded-md bg-white", pageClassName)}
+							className={cn(
+								"flex aspect-page items-center justify-center overflow-hidden rounded-md bg-white text-neutral-400",
+								pageClassName,
+							)}
 						>
 							<Spinner className="size-10" />
 						</div>
diff --git a/apps/web/src/features/resume/preview/preview.tsx b/apps/web/src/features/resume/preview/preview.tsx
index 231b15efa..a6bbf299a 100644
--- a/apps/web/src/features/resume/preview/preview.tsx
+++ b/apps/web/src/features/resume/preview/preview.tsx
@@ -1,6 +1,5 @@
 import type { ResumePreviewProps } from "./preview.shared";
 import { lazy, Suspense } from "react";
-import { useIsClient } from "usehooks-ts";
 import { useResumeData } from "../builder/draft";
 import { ResumePreviewLoader } from "./preview.shared";
 import { getResumePreviewPageCount } from "./preview.shared.utils";
@@ -19,13 +18,10 @@ export function ResumePreview({
 	showPageNumbers = false,
 	...rest
 }: ResumePreviewProps) {
-	const isClient = useIsClient();
 	const builderResumeData = useResumeData();
 	const resumeData = rest.data ?? builderResumeData;
 	const pageCount = getResumePreviewPageCount(resumeData);
 
-	if (!isClient) return null;
-
 	const resolvedProps = { ...rest, pageGap, pageLayout, pageScale, showPageNumbers };
 
 	return (
diff --git a/apps/web/src/features/resume/public/public-resume.tsx b/apps/web/src/features/resume/public/public-resume.tsx
index 451c91586..0356d582c 100644
--- a/apps/web/src/features/resume/public/public-resume.tsx
+++ b/apps/web/src/features/resume/public/public-resume.tsx
@@ -89,7 +89,7 @@ export function PublicResumePage({ resume, username, slug, flags, isRoot = false
 					onClick={() => void onDownloadPDF()}
 					aria-label={t`Download PDF`}
 					title={t`Download PDF`}
-					className="fixed right-6 bottom-6 z-50 rounded-full bg-background/95 opacity-70 shadow-lg backdrop-blur transition-opacity hover:opacity-100 print:hidden"
+					className="fixed right-6 bottom-6 z-50 rounded-full bg-background/95 opacity-70 shadow-lg backdrop-blur transition-[opacity,scale] duration-150 ease-out-strong hover:opacity-100 print:hidden"
 				>
 					{isExporting ? (
 						<CircleNotchIcon className="size-5 animate-spin" />
diff --git a/apps/web/src/features/resume/stylesheet/editor.test.tsx b/apps/web/src/features/resume/stylesheet/editor.test.tsx
index d046a5381..95c07caf3 100644
--- a/apps/web/src/features/resume/stylesheet/editor.test.tsx
+++ b/apps/web/src/features/resume/stylesheet/editor.test.tsx
@@ -28,9 +28,8 @@ const builder = vi.hoisted(() => ({
 	redo: vi.fn(),
 }));
 
-vi.mock("usehooks-ts", async (importOriginal) => ({
-	...(await importOriginal<typeof import("usehooks-ts")>()),
-	useMediaQuery: () => media.mobile,
+vi.mock("@reactive-resume/ui/hooks/use-mobile", () => ({
+	useIsMobile: () => media.mobile,
 }));
 
 vi.mock("@/features/theme/provider", () => ({
diff --git a/apps/web/src/features/resume/stylesheet/editor.tsx b/apps/web/src/features/resume/stylesheet/editor.tsx
index 88da18522..2ad26ac06 100644
--- a/apps/web/src/features/resume/stylesheet/editor.tsx
+++ b/apps/web/src/features/resume/stylesheet/editor.tsx
@@ -20,7 +20,6 @@ import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import { BookOpenIcon } from "@phosphor-icons/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useMediaQuery } from "usehooks-ts";
 import { convertLegacyStyleRules } from "@reactive-resume/pdf/semantic-legacy";
 import {
 	buildSemanticTree,
@@ -31,6 +30,7 @@ import {
 import { isFatalStylesheetDiagnostic } from "@reactive-resume/resume/stylesheet";
 import { PopoverTrigger } from "@reactive-resume/ui/components/popover";
 import { Sheet, SheetContent, SheetTitle } from "@reactive-resume/ui/components/sheet";
+import { useIsMobile } from "@reactive-resume/ui/hooks/use-mobile";
 import { ColorPicker } from "@/components/input/color-picker";
 import { useIsResumeLocked, useResumeData, useResumeStore, useUpdateResumeData } from "@/features/resume/builder/draft";
 import { useTheme } from "@/features/theme/provider";
@@ -382,7 +382,7 @@ const createEditorMetadata = (data: ResumeData): SemanticCssEditorMetadata => {
 
 function StylesheetEditorShell({ readOnly = false }: StylesheetEditorShellProps) {
 	const { theme } = useTheme();
-	const isMobile = useMediaQuery("(max-width: 767px)", { initializeWithValue: false });
+	const isMobile = useIsMobile();
 	const [focusOpen, setFocusOpen] = useState(false);
 	const [diagnostics, setDiagnostics] = useState<readonly SemanticCssDiagnostic[]>([]);
 	const [colorTokens, setColorTokens] = useState<readonly SemanticCssColorToken[]>([]);
diff --git a/apps/web/src/features/settings/authentication/components/action-button.tsx b/apps/web/src/features/settings/authentication/components/action-button.tsx
deleted file mode 100644
index 78eb2a04b..000000000
--- a/apps/web/src/features/settings/authentication/components/action-button.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { ReactNode } from "react";
-import { m } from "motion/react";
-
-type ActionButtonProps = {
-	children: ReactNode;
-};
-
-export function ActionButton({ children }: ActionButtonProps) {
-	return (
-		<m.div
-			className="will-change-transform"
-			whileHover={{ y: -1, scale: 1.01 }}
-			whileTap={{ scale: 0.99 }}
-			transition={{ duration: 0.14, ease: "easeOut" }}
-		>
-			{children}
-		</m.div>
-	);
-}
diff --git a/apps/web/src/features/settings/authentication/components/passkeys.tsx b/apps/web/src/features/settings/authentication/components/passkeys.tsx
index 6032eebe9..acec15ba3 100644
--- a/apps/web/src/features/settings/authentication/components/passkeys.tsx
+++ b/apps/web/src/features/settings/authentication/components/passkeys.tsx
@@ -2,7 +2,6 @@ import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import { KeyIcon, PlusIcon, TrashIcon } from "@phosphor-icons/react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { m } from "motion/react";
 import { Button } from "@reactive-resume/ui/components/button";
 import { Separator } from "@reactive-resume/ui/components/separator";
 import { toast } from "@reactive-resume/ui/components/toast";
@@ -112,12 +111,7 @@ export function PasskeysSection() {
 	};
 
 	return (
-		<m.div
-			initial={{ y: -20 }}
-			animate={{ opacity: 1, y: 0 }}
-			transition={{ duration: 0.2, delay: 0.3, ease: "easeOut" }}
-			className="will-change-[transform,opacity]"
-		>
+		<div>
 			<Separator />
 
 			<div className="mt-4 grid gap-3">
@@ -166,6 +160,6 @@ export function PasskeysSection() {
 					</div>
 				)}
 			</div>
-		</m.div>
+		</div>
 	);
 }
diff --git a/apps/web/src/features/settings/authentication/components/password.tsx b/apps/web/src/features/settings/authentication/components/password.tsx
index 80f0919be..5f797b505 100644
--- a/apps/web/src/features/settings/authentication/components/password.tsx
+++ b/apps/web/src/features/settings/authentication/components/password.tsx
@@ -1,10 +1,8 @@
 import { Trans } from "@lingui/react/macro";
 import { PasswordIcon, PencilSimpleLineIcon } from "@phosphor-icons/react";
 import { Link } from "@tanstack/react-router";
-import { m } from "motion/react";
 import { Button } from "@reactive-resume/ui/components/button";
 import { useDialogStore } from "@/dialogs/store";
-import { ActionButton } from "./action-button";
 import { useAuthAccounts } from "./hooks";
 
 export function PasswordSection() {
@@ -14,35 +12,28 @@ export function PasswordSection() {
 	const hasPassword = hasAccount("credential");
 
 	return (
-		<m.div
-			initial={{ y: -20 }}
-			animate={{ opacity: 1, y: 0 }}
-			transition={{ duration: 0.2, delay: 0.1, ease: "easeOut" }}
-			className="flex items-center justify-between gap-x-4 will-change-[transform,opacity]"
-		>
+		<div className="flex items-center justify-between gap-x-4">
 			<h2 className="flex items-center gap-x-3 font-medium text-base">
 				<PasswordIcon />
 				<Trans>Password</Trans>
 			</h2>
 
-			<ActionButton>
-				{hasPassword ? (
-					<Button variant="outline" onClick={() => openDialog("auth.change-password", undefined)}>
-						<PencilSimpleLineIcon />
-						<Trans>Update Password</Trans>
-					</Button>
-				) : (
-					<Button
-						variant="outline"
-						nativeButton={false}
-						render={
-							<Link to="/auth/forgot-password">
-								<Trans>Set Password</Trans>
-							</Link>
-						}
-					/>
-				)}
-			</ActionButton>
-		</m.div>
+			{hasPassword ? (
+				<Button variant="outline" onClick={() => openDialog("auth.change-password", undefined)}>
+					<PencilSimpleLineIcon />
+					<Trans>Update Password</Trans>
+				</Button>
+			) : (
+				<Button
+					variant="outline"
+					nativeButton={false}
+					render={
+						<Link to="/auth/forgot-password">
+							<Trans>Set Password</Trans>
+						</Link>
+					}
+				/>
+			)}
+		</div>
 	);
 }
diff --git a/apps/web/src/features/settings/authentication/components/social-provider.tsx b/apps/web/src/features/settings/authentication/components/social-provider.tsx
index c54669d43..8455d4e55 100644
--- a/apps/web/src/features/settings/authentication/components/social-provider.tsx
+++ b/apps/web/src/features/settings/authentication/components/social-provider.tsx
@@ -1,19 +1,16 @@
 import type { AuthProvider } from "@reactive-resume/auth/types";
 import { Trans } from "@lingui/react/macro";
 import { LinkBreakIcon, LinkIcon } from "@phosphor-icons/react";
-import { m } from "motion/react";
 import { Button } from "@reactive-resume/ui/components/button";
 import { Separator } from "@reactive-resume/ui/components/separator";
-import { ActionButton } from "./action-button";
 import { getProviderIcon, getProviderName, useAuthAccounts, useAuthProviderActions } from "./hooks";
 
 type SocialProviderSectionProps = {
 	provider: AuthProvider;
 	name?: string;
-	animationDelay?: number;
 };
 
-export function SocialProviderSection({ provider, name, animationDelay = 0 }: SocialProviderSectionProps) {
+export function SocialProviderSection({ provider, name }: SocialProviderSectionProps) {
 	const { link, unlink } = useAuthProviderActions();
 	const { hasAccount, getAccountByProviderId } = useAuthAccounts();
 
@@ -24,12 +21,7 @@ export function SocialProviderSection({ provider, name, animationDelay = 0 }: So
 	const isConnected = hasAccount(provider);
 
 	return (
-		<m.div
-			className="will-change-[transform,opacity]"
-			initial={{ y: -20 }}
-			animate={{ opacity: 1, y: 0 }}
-			transition={{ duration: 0.2, delay: animationDelay, ease: "easeOut" }}
-		>
+		<div>
 			<Separator />
 
 			<div className="mt-4 flex items-center justify-between gap-x-4">
@@ -38,27 +30,25 @@ export function SocialProviderSection({ provider, name, animationDelay = 0 }: So
 					{providerName}
 				</h2>
 
-				<ActionButton>
-					{isConnected ? (
-						<Button
-							variant="outline"
-							onClick={() => {
-								if (account?.accountId) void unlink(provider, account.accountId);
-							}}
-						>
-							<LinkBreakIcon />
-							<Trans comment="Authentication settings action to unlink a connected social login provider">
-								Disconnect
-							</Trans>
-						</Button>
-					) : (
-						<Button variant="outline" onClick={() => void link(provider)}>
-							<LinkIcon />
-							<Trans comment="Authentication settings action to link a social login provider">Connect</Trans>
-						</Button>
-					)}
-				</ActionButton>
+				{isConnected ? (
+					<Button
+						variant="outline"
+						onClick={() => {
+							if (account?.accountId) void unlink(provider, account.accountId);
+						}}
+					>
+						<LinkBreakIcon />
+						<Trans comment="Authentication settings action to unlink a connected social login provider">
+							Disconnect
+						</Trans>
+					</Button>
+				) : (
+					<Button variant="outline" onClick={() => void link(provider)}>
+						<LinkIcon />
+						<Trans comment="Authentication settings action to link a social login provider">Connect</Trans>
+					</Button>
+				)}
 			</div>
-		</m.div>
+		</div>
 	);
 }
diff --git a/apps/web/src/features/settings/authentication/components/two-factor.tsx b/apps/web/src/features/settings/authentication/components/two-factor.tsx
index e05f35241..bf2ea5421 100644
--- a/apps/web/src/features/settings/authentication/components/two-factor.tsx
+++ b/apps/web/src/features/settings/authentication/components/two-factor.tsx
@@ -1,11 +1,9 @@
 import { Trans } from "@lingui/react/macro";
 import { KeyIcon, LockOpenIcon, ToggleLeftIcon, ToggleRightIcon } from "@phosphor-icons/react";
-import { m } from "motion/react";
 import { Button } from "@reactive-resume/ui/components/button";
 import { Separator } from "@reactive-resume/ui/components/separator";
 import { useDialogStore } from "@/dialogs/store";
 import { authClient } from "@/libs/auth/client";
-import { ActionButton } from "./action-button";
 import { useAuthAccounts } from "./hooks";
 
 export function TwoFactorSection() {
@@ -19,12 +17,7 @@ export function TwoFactorSection() {
 	if (!hasPassword) return null;
 
 	return (
-		<m.div
-			className="will-change-[transform,opacity]"
-			initial={{ y: -20 }}
-			animate={{ opacity: 1, y: 0 }}
-			transition={{ duration: 0.2, delay: 0.2, ease: "easeOut" }}
-		>
+		<div>
 			<Separator />
 
 			<div className="mt-4 flex items-center justify-between gap-x-4">
@@ -33,25 +26,23 @@ export function TwoFactorSection() {
 					<Trans>Two-Factor Authentication</Trans>
 				</h2>
 
-				<ActionButton>
-					<Button
-						variant="outline"
-						onClick={() => openDialog(hasTwoFactor ? "auth.two-factor.disable" : "auth.two-factor.enable", undefined)}
-					>
-						{hasTwoFactor ? (
-							<>
-								<ToggleLeftIcon />
-								<Trans>Disable 2FA</Trans>
-							</>
-						) : (
-							<>
-								<ToggleRightIcon />
-								<Trans>Enable 2FA</Trans>
-							</>
-						)}
-					</Button>
-				</ActionButton>
+				<Button
+					variant="outline"
+					onClick={() => openDialog(hasTwoFactor ? "auth.two-factor.disable" : "auth.two-factor.enable", undefined)}
+				>
+					{hasTwoFactor ? (
+						<>
+							<ToggleLeftIcon />
+							<Trans>Disable 2FA</Trans>
+						</>
+					) : (
+						<>
+							<ToggleRightIcon />
+							<Trans>Enable 2FA</Trans>
+						</>
+					)}
+				</Button>
 			</div>
-		</m.div>
+		</div>
 	);
 }
diff --git a/apps/web/src/features/settings/authentication/index.tsx b/apps/web/src/features/settings/authentication/index.tsx
index 84e9ed08b..f659911a5 100644
--- a/apps/web/src/features/settings/authentication/index.tsx
+++ b/apps/web/src/features/settings/authentication/index.tsx
@@ -1,4 +1,3 @@
-import { m } from "motion/react";
 import { useEnabledProviders } from "./components/hooks";
 import { PasskeysSection } from "./components/passkeys";
 import { PasswordSection } from "./components/password";
@@ -9,27 +8,20 @@ export function AuthenticationSettingsPage() {
 	const { enabledProviders } = useEnabledProviders();
 
 	return (
-		<m.div
-			initial={{ y: -20 }}
-			animate={{ opacity: 1, y: 0 }}
-			transition={{ duration: 0.25, ease: "easeOut" }}
-			className="grid max-w-xl gap-4 will-change-[transform,opacity]"
-		>
+		<div className="grid max-w-xl gap-4">
 			<PasswordSection />
 
 			<TwoFactorSection />
 
 			<PasskeysSection />
 
-			{"google" in enabledProviders && <SocialProviderSection provider="google" animationDelay={0.04} />}
+			{"google" in enabledProviders && <SocialProviderSection provider="google" />}
 
-			{"github" in enabledProviders && <SocialProviderSection provider="github" animationDelay={0.08} />}
+			{"github" in enabledProviders && <SocialProviderSection provider="github" />}
 
-			{"linkedin" in enabledProviders && <SocialProviderSection provider="linkedin" animationDelay={0.12} />}
+			{"linkedin" in enabledProviders && <SocialProviderSection provider="linkedin" />}
 
-			{"custom" in enabledProviders && (
-				<SocialProviderSection provider="custom" animationDelay={0.16} name={enabledProviders.custom} />
-			)}
-		</m.div>
+			{"custom" in enabledProviders && <SocialProviderSection provider="custom" name={enabledProviders.custom} />}
+		</div>
 	);
 }
diff --git a/apps/web/src/features/settings/integrations/index.tsx b/apps/web/src/features/settings/integrations/index.tsx
index 39a6bc28a..605c4b5db 100644
--- a/apps/web/src/features/settings/integrations/index.tsx
+++ b/apps/web/src/features/settings/integrations/index.tsx
@@ -1,20 +1,9 @@
-import { m } from "motion/react";
-import { useIsClient } from "usehooks-ts";
 import { AISettingsSection } from "./components/ai-section";
 
 export function IntegrationsSettingsPage() {
-	const isClient = useIsClient();
-
-	if (!isClient) return null;
-
 	return (
-		<m.div
-			initial={{ y: -20 }}
-			animate={{ opacity: 1, y: 0 }}
-			transition={{ duration: 0.25, ease: "easeOut" }}
-			className="grid max-w-4xl gap-8 will-change-[transform,opacity]"
-		>
+		<div className="grid max-w-4xl gap-8">
 			<AISettingsSection />
-		</m.div>
+		</div>
 	);
 }
diff --git a/apps/web/src/features/settings/pages/account.tsx b/apps/web/src/features/settings/pages/account.tsx
index e2428371c..c681a3b91 100644
--- a/apps/web/src/features/settings/pages/account.tsx
+++ b/apps/web/src/features/settings/pages/account.tsx
@@ -3,7 +3,6 @@ import { Trans } from "@lingui/react/macro";
 import { DownloadSimpleIcon, TrashSimpleIcon } from "@phosphor-icons/react";
 import { useMutation } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
-import { m } from "motion/react";
 import { useState } from "react";
 import { Button } from "@reactive-resume/ui/components/button";
 import { Input } from "@reactive-resume/ui/components/input";
@@ -20,7 +19,6 @@ export function AccountSettingsPage() {
 	const confirm = useConfirm();
 	const navigate = useNavigate();
 	const [confirmationText, setConfirmationText] = useState("");
-	const isConfirmationValid = confirmationText === CONFIRMATION_TEXT;
 
 	const { mutate: deleteAccount } = useMutation(orpc.auth.deleteAccount.mutationOptions());
 
@@ -86,28 +84,21 @@ export function AccountSettingsPage() {
 	};
 
 	return (
-		<m.div
-			initial={{ y: -20 }}
-			animate={{ opacity: 1, y: 0 }}
-			transition={{ duration: 0.25, ease: "easeOut" }}
-			className="grid max-w-xl gap-6 will-change-[transform,opacity]"
-		>
+		<div className="grid max-w-xl gap-6">
 			<div className="grid gap-3">
 				<p className="leading-relaxed">
 					<Trans>Download a copy of all your data, including your profile and every resume, as a JSON file.</Trans>
 				</p>
 
-				<m.div
-					className="justify-self-start will-change-transform"
-					whileHover={{ y: -1, scale: 1.01 }}
-					whileTap={{ scale: 0.98 }}
-					transition={{ duration: 0.14, ease: "easeOut" }}
+				<Button
+					variant="outline"
+					className="justify-self-start"
+					onClick={() => exportData(undefined)}
+					disabled={isExporting}
 				>
-					<Button variant="outline" onClick={() => exportData(undefined)} disabled={isExporting}>
-						<DownloadSimpleIcon />
-						<Trans>Export my data</Trans>
-					</Button>
-				</m.div>
+					<DownloadSimpleIcon />
+					<Trans>Export my data</Trans>
+				</Button>
 			</div>
 
 			<hr className="border-border" />
@@ -123,17 +114,15 @@ export function AccountSettingsPage() {
 				placeholder={t`Type "${CONFIRMATION_TEXT}" to confirm`}
 			/>
 
-			<m.div
-				className="justify-self-end will-change-transform"
-				whileHover={!isConfirmationValid ? undefined : { y: -1, scale: 1.01 }}
-				whileTap={!isConfirmationValid ? undefined : { scale: 0.98 }}
-				transition={{ duration: 0.14, ease: "easeOut" }}
+			<Button
+				variant="destructive"
+				className="justify-self-end"
+				onClick={handleDeleteAccount}
+				disabled={confirmationText !== CONFIRMATION_TEXT}
 			>
-				<Button variant="destructive" onClick={handleDeleteAccount} disabled={!isConfirmationValid}>
-					<TrashSimpleIcon />
-					<Trans>Delete Account</Trans>
-				</Button>
-			</m.div>
-		</m.div>
+				<TrashSimpleIcon />
+				<Trans>Delete Account</Trans>
+			</Button>
+		</div>
 	);
 }
diff --git a/apps/web/src/features/settings/pages/api-keys.tsx b/apps/web/src/features/settings/pages/api-keys.tsx
index 52ea0845e..062ed8c65 100644
--- a/apps/web/src/features/settings/pages/api-keys.tsx
+++ b/apps/web/src/features/settings/pages/api-keys.tsx
@@ -2,7 +2,6 @@ import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import { BookOpenIcon, KeyIcon, LinkSimpleIcon, PlusIcon, TrashSimpleIcon } from "@phosphor-icons/react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { AnimatePresence, m } from "motion/react";
 import { Button } from "@reactive-resume/ui/components/button";
 import { Separator } from "@reactive-resume/ui/components/separator";
 import { toast } from "@reactive-resume/ui/components/toast";
@@ -67,12 +66,7 @@ export function ApiKeysSettingsPage() {
 	};
 
 	return (
-		<m.div
-			initial={{ y: -20 }}
-			animate={{ opacity: 1, y: 0 }}
-			transition={{ duration: 0.25, ease: "easeOut" }}
-			className="grid max-w-xl gap-6 will-change-[transform,opacity]"
-		>
+		<div className="grid max-w-xl gap-6">
 			<div className="flex items-start gap-4 rounded-md border bg-popover p-6">
 				<div className="rounded-md bg-primary/10 p-2.5">
 					<BookOpenIcon className="text-primary" size={24} />
@@ -115,43 +109,27 @@ export function ApiKeysSettingsPage() {
 					<Trans>Create a new API key</Trans>
 				</Button>
 
-				<AnimatePresence initial={false} mode="popLayout">
-					{apiKeys.map((key, index) => (
-						<m.div
-							key={key.id}
-							className="flex items-center gap-x-4 py-4 will-change-[transform,opacity]"
-							initial={{ opacity: 0, y: -16 }}
-							animate={{ opacity: 1, y: 0 }}
-							exit={{ opacity: 0, y: -16 }}
-							transition={{ duration: 0.16, delay: Math.min(0.12, index * 0.04) }}
-						>
-							<KeyIcon />
+				{apiKeys.map((key) => (
+					<div key={key.id} className="flex items-center gap-x-4 py-4">
+						<KeyIcon />
 
-							<div className="flex-1 space-y-1">
-								<p className="font-mono text-xs">{key.start}...</p>
-								<div className="text-muted-foreground text-xs">
-									{key.expiresAt ? (
-										<Trans>Expires on {key.expiresAt.toLocaleDateString()}</Trans>
-									) : (
-										<Trans>Never expires</Trans>
-									)}
-								</div>
+						<div className="flex-1 space-y-1">
+							<p className="font-mono text-xs">{key.start}...</p>
+							<div className="text-muted-foreground text-xs">
+								{key.expiresAt ? (
+									<Trans>Expires on {key.expiresAt.toLocaleDateString()}</Trans>
+								) : (
+									<Trans>Never expires</Trans>
+								)}
 							</div>
+						</div>
 
-							<m.div
-								className="will-change-transform"
-								whileHover={{ y: -1, scale: 1.03 }}
-								whileTap={{ scale: 0.96 }}
-								transition={{ duration: 0.14, ease: "easeOut" }}
-							>
-								<Button size="icon" variant="ghost" onClick={() => onDelete(key.id)}>
-									<TrashSimpleIcon />
-								</Button>
-							</m.div>
-						</m.div>
-					))}
-				</AnimatePresence>
+						<Button size="icon" variant="ghost" onClick={() => onDelete(key.id)}>
+							<TrashSimpleIcon />
+						</Button>
+					</div>
+				))}
 			</div>
-		</m.div>
+		</div>
 	);
 }
diff --git a/apps/web/src/features/settings/pages/preferences.tsx b/apps/web/src/features/settings/pages/preferences.tsx
index 59eeba31e..baac230e0 100644
--- a/apps/web/src/features/settings/pages/preferences.tsx
+++ b/apps/web/src/features/settings/pages/preferences.tsx
@@ -1,6 +1,5 @@
 import { Trans } from "@lingui/react/macro";
 import { ArrowRightIcon } from "@phosphor-icons/react";
-import { m } from "motion/react";
 import { Button } from "@reactive-resume/ui/components/button";
 import { Label } from "@reactive-resume/ui/components/label";
 import { LocaleCombobox } from "@/features/locale/combobox";
@@ -8,12 +7,7 @@ import { ThemeCombobox } from "@/features/theme/combobox";
 
 export function PreferencesSettingsPage() {
 	return (
-		<m.div
-			initial={{ y: -20 }}
-			animate={{ opacity: 1, y: 0 }}
-			transition={{ duration: 0.25, ease: "easeOut" }}
-			className="grid max-w-xl gap-6 will-change-[transform,opacity]"
-		>
+		<div className="grid max-w-xl gap-6">
 			<div className="grid gap-1.5">
 				<Label className="mb-0.5">
 					<Trans>Theme</Trans>
@@ -39,6 +33,6 @@ export function PreferencesSettingsPage() {
 					}
 				/>
 			</div>
-		</m.div>
+		</div>
 	);
 }
diff --git a/apps/web/src/features/settings/pages/profile.tsx b/apps/web/src/features/settings/pages/profile.tsx
index f19f573f1..85cf5c3bd 100644
--- a/apps/web/src/features/settings/pages/profile.tsx
+++ b/apps/web/src/features/settings/pages/profile.tsx
@@ -12,6 +12,7 @@ import { Input } from "@reactive-resume/ui/components/input";
 import { toast } from "@reactive-resume/ui/components/toast";
 import { authClient } from "@/libs/auth/client";
 import { getReadableErrorMessage } from "@/libs/error-message";
+import { EASE_OUT_STRONG } from "@/libs/motion";
 import { useAppForm } from "@/libs/tanstack-form";
 
 const formSchema = z.object({
@@ -136,11 +137,8 @@ export function ProfileSettingsPage({ session }: Props) {
 	};
 
 	return (
-		<m.form
-			initial={{ y: -20 }}
-			animate={{ opacity: 1, y: 0 }}
-			transition={{ duration: 0.25, ease: "easeOut" }}
-			className="grid max-w-xl gap-6 will-change-[transform,opacity]"
+		<form
+			className="grid max-w-xl gap-6"
 			onSubmit={(event) => {
 				event.preventDefault();
 				event.stopPropagation();
@@ -258,8 +256,8 @@ export function ProfileSettingsPage({ session }: Props) {
 						initial={{ opacity: 0, y: -8 }}
 						animate={{ opacity: 1, y: 0 }}
 						exit={{ opacity: 0, y: -8 }}
-						transition={{ duration: 0.16, ease: "easeOut" }}
-						className="flex items-center gap-x-4 justify-self-end will-change-[transform,opacity]"
+						transition={{ duration: 0.16, ease: EASE_OUT_STRONG }}
+						className="flex items-center gap-x-4 justify-self-end"
 					>
 						<Button type="reset" variant="ghost" onClick={onCancel}>
 							<Trans comment="Profile settings form action to discard unsaved edits">Cancel</Trans>
@@ -271,6 +269,6 @@ export function ProfileSettingsPage({ session }: Props) {
 					</m.div>
 				)}
 			</AnimatePresence>
-		</m.form>
+		</form>
 	);
 }
diff --git a/apps/web/src/features/theme/provider.tsx b/apps/web/src/features/theme/provider.tsx
index 33a237d18..684470d17 100644
--- a/apps/web/src/features/theme/provider.tsx
+++ b/apps/web/src/features/theme/provider.tsx
@@ -12,19 +12,35 @@ type ThemeContextValue = {
 
 const ThemeContext = createContext<ThemeContextValue | null>(null);
 
+// Swap the theme class with transitions suppressed for one frame, so every color changes at once
+// instead of each element easing between palettes on its own schedule.
+function applyThemeClass(theme: Theme) {
+	const root = document.documentElement;
+	const isDark = theme === "dark";
+	if (root.classList.contains("dark") === isDark) return;
+
+	const style = document.createElement("style");
+	style.textContent = "*,*::before,*::after{transition:none!important}";
+	document.head.append(style);
+
+	root.classList.toggle("dark", isDark);
+	void window.getComputedStyle(root).color; // force a style flush while transitions are off
+	setTimeout(() => style.remove(), 1); // rAF would never fire in a hidden tab, leaving transitions off
+}
+
 type Props = PropsWithChildren<{ theme: Theme }>;
 
 export function ThemeProvider({ children, theme }: Props) {
 	const router = useRouter();
 
 	useEffect(() => {
-		document.documentElement.classList.toggle("dark", theme === "dark");
+		applyThemeClass(theme);
 	}, [theme]);
 
 	async function setTheme(value: Theme, options: { playSound?: boolean } = {}) {
 		const { playSound = true } = options;
 
-		document.documentElement.classList.toggle("dark", value === "dark");
+		applyThemeClass(value);
 		setThemeCookie(value);
 		void router.invalidate();
 
diff --git a/apps/web/src/features/user/dropdown-menu.tsx b/apps/web/src/features/user/dropdown-menu.tsx
index 750e72601..35108882c 100644
--- a/apps/web/src/features/user/dropdown-menu.tsx
+++ b/apps/web/src/features/user/dropdown-menu.tsx
@@ -4,7 +4,6 @@ import { useLingui } from "@lingui/react";
 import { Trans } from "@lingui/react/macro";
 import { PaletteIcon, SignOutIcon, TranslateIcon } from "@phosphor-icons/react";
 import { useRouter } from "@tanstack/react-router";
-import { useIsClient } from "usehooks-ts";
 import {
 	DropdownMenu,
 	DropdownMenuContent,
@@ -30,7 +29,6 @@ type Props = {
 };
 
 export function UserDropdownMenu({ children }: Props) {
-	const isClient = useIsClient();
 	const router = useRouter();
 	const { i18n } = useLingui();
 	const { theme, setTheme } = useTheme();
@@ -67,7 +65,6 @@ export function UserDropdownMenu({ children }: Props) {
 		});
 	};
 
-	if (!isClient) return null;
 	if (!session?.user) return null;
 
 	return (
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 816c7a29b..b38fd6937 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -1 +1,13 @@
 @import "@reactive-resume/ui/globals.css";
+
+@keyframes spotlight-drift {
+	to {
+		translate: var(--spotlight-drift);
+	}
+}
+
+@keyframes agent-prompt-marquee {
+	to {
+		transform: translateX(-33.333%);
+	}
+}
diff --git a/apps/web/src/libs/motion.ts b/apps/web/src/libs/motion.ts
new file mode 100644
index 000000000..0793ac6e8
--- /dev/null
+++ b/apps/web/src/libs/motion.ts
@@ -0,0 +1,2 @@
+// Mirrors `--ease-out-strong` in packages/ui/src/styles/globals.css for Motion (JS) animations.
+export const EASE_OUT_STRONG = [0.23, 1, 0.32, 1] as const;
diff --git a/apps/web/src/router.tsx b/apps/web/src/router.tsx
index 78d4c35d6..d67361e8e 100644
--- a/apps/web/src/router.tsx
+++ b/apps/web/src/router.tsx
@@ -15,7 +15,6 @@ export const getRouter = async () => {
 	const router = createRouter({
 		routeTree,
 		scrollRestoration: true,
-		defaultViewTransition: true,
 		defaultStructuralSharing: true,
 		defaultErrorComponent: ErrorScreen,
 		defaultPendingComponent: LoadingScreen,
diff --git a/apps/web/src/routes/__root.tsx b/apps/web/src/routes/__root.tsx
index f5ee26d01..bbfc74d60 100644
--- a/apps/web/src/routes/__root.tsx
+++ b/apps/web/src/routes/__root.tsx
@@ -15,7 +15,7 @@ import { QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtoolsPanel } from "@tanstack/react-query-devtools";
 import { createRootRouteWithContext, HeadContent, Outlet, useRouterState } from "@tanstack/react-router";
 import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
-import { domAnimation, LazyMotion, MotionConfig } from "motion/react";
+import { domMax, LazyMotion, MotionConfig } from "motion/react";
 import { useEffect } from "react";
 import { Toaster } from "@reactive-resume/ui/components/toast";
 import { TooltipProvider } from "@reactive-resume/ui/components/tooltip";
@@ -110,7 +110,7 @@ function RootComponent() {
 
 			<QueryClientProvider client={queryClient}>
 				<MotionConfig reducedMotion="user">
-					<LazyMotion features={domAnimation}>
+					<LazyMotion features={domMax}>
 						<I18nProvider i18n={i18n}>
 							<IconContext.Provider value={iconContextValue}>
 								<ThemeProvider theme={theme}>
diff --git a/apps/web/src/routes/_home/-sections/footer.tsx b/apps/web/src/routes/_home/-sections/footer.tsx
index 0b92c3c6c..34dd83c17 100644
--- a/apps/web/src/routes/_home/-sections/footer.tsx
+++ b/apps/web/src/routes/_home/-sections/footer.tsx
@@ -3,10 +3,10 @@ import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import { GithubLogoIcon, LinkedinLogoIcon, XLogoIcon } from "@phosphor-icons/react";
 import { m } from "motion/react";
-import { useState } from "react";
 import { BrandIcon } from "@reactive-resume/ui/components/brand-icon";
 import { Button } from "@reactive-resume/ui/components/button";
 import { Copyright } from "@/components/ui/copyright";
+import { EASE_OUT_STRONG } from "@/libs/motion";
 
 type FooterLinkItem = {
 	url: string;
@@ -48,11 +48,11 @@ export function Footer() {
 	return (
 		<m.footer
 			id="footer"
-			className="p-4 pb-8 will-change-[opacity] md:p-8 md:pb-12"
+			className="p-4 pb-8 md:p-8 md:pb-12"
 			initial={{ opacity: 0 }}
 			whileInView={{ opacity: 1 }}
 			viewport={{ once: true }}
-			transition={{ duration: 0.45 }}
+			transition={{ duration: 0.45, ease: EASE_OUT_STRONG }}
 		>
 			<div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
 				{/* Brand Column */}
@@ -121,31 +121,19 @@ function FooterLinkGroup({ title, links }: FooterLinkGroupProps) {
 }
 
 function FooterLink({ url, label }: FooterLinkItem) {
-	const [isHovered, setIsHovered] = useState(false);
-
 	return (
 		<li className="relative">
 			<a
 				href={url}
 				target="_blank"
 				rel="noopener noreferrer"
-				className="relative inline-block text-sm transition-colors hover:text-foreground"
-				onMouseEnter={() => setIsHovered(true)}
-				onMouseLeave={() => setIsHovered(false)}
+				className="relative inline-block text-sm transition-colors after:pointer-events-none after:absolute after:inset-x-0 after:-bottom-0.5 after:h-px after:origin-left after:scale-x-0 after:rounded-md after:bg-primary after:content-[''] hover:text-foreground hover:after:scale-x-100 rtl:after:origin-right after:[transition:scale_200ms_var(--ease-out-strong)]"
 			>
 				{label}
 
 				<span className="sr-only">
 					<Trans>(opens in new tab)</Trans>
 				</span>
-
-				<m.div
-					aria-hidden="true"
-					initial={{ width: 0, opacity: 0 }}
-					animate={isHovered ? { width: "100%", opacity: 1 } : { width: 0, opacity: 0 }}
-					transition={{ duration: 0.2, ease: "easeOut" }}
-					className="pointer-events-none absolute inset-s-0 -bottom-0.5 h-px rounded-md bg-primary will-change-[width,opacity]"
-				/>
 			</a>
 		</li>
 	);
diff --git a/apps/web/src/routes/_home/-sections/header.tsx b/apps/web/src/routes/_home/-sections/header.tsx
index 3119dc4f3..6bd336f16 100644
--- a/apps/web/src/routes/_home/-sections/header.tsx
+++ b/apps/web/src/routes/_home/-sections/header.tsx
@@ -1,8 +1,8 @@
 import { t } from "@lingui/core/macro";
 import { ArrowRightIcon, TranslateIcon } from "@phosphor-icons/react";
 import { Link } from "@tanstack/react-router";
-import { m, useMotionValue, useSpring } from "motion/react";
-import { useEffect, useRef } from "react";
+import { useMotionValueEvent, useScroll } from "motion/react";
+import { useState } from "react";
 import { BrandIcon } from "@reactive-resume/ui/components/brand-icon";
 import { Button } from "@reactive-resume/ui/components/button";
 import { GithubStarsButton } from "@/components/input/github-stars-button";
@@ -10,43 +10,17 @@ import { LocaleCombobox } from "@/features/locale/combobox";
 import { ThemeToggleButton } from "@/features/theme/toggle-button";
 
 export function Header() {
-	const y = useMotionValue(0);
-	const lastScroll = useRef(0);
-	const ticking = useRef(false);
-	const springY = useSpring(y, { stiffness: 300, damping: 40 });
+	const [hidden, setHidden] = useState(false);
+	const { scrollY } = useScroll();
 
-	useEffect(() => {
-		if (typeof window === "undefined") return;
-
-		function onScroll() {
-			const current = window.scrollY ?? 0;
-			if (!ticking.current) {
-				window.requestAnimationFrame(() => {
-					if (current > 32 && current > lastScroll.current) {
-						// Scrolling down, hide
-						y.set(-100);
-					} else {
-						// Scrolling up, show
-						y.set(0);
-					}
-					lastScroll.current = current;
-					ticking.current = false;
-				});
-				ticking.current = true;
-			}
-		}
-
-		window.addEventListener("scroll", onScroll, { passive: true });
-		return () => window.removeEventListener("scroll", onScroll);
-	}, [y]);
+	useMotionValueEvent(scrollY, "change", (current) => {
+		setHidden(current > 32 && current > (scrollY.getPrevious() ?? 0));
+	});
 
 	return (
-		<m.header
-			style={{ y: springY }}
-			className="fixed inset-x-0 top-0 z-50 border-transparent border-b bg-background/80 backdrop-blur-lg transition-colors"
-			initial={{ y: -100, opacity: 0 }}
-			animate={{ y: 0, opacity: 1 }}
-			transition={{ duration: 0.35, ease: "easeOut" }}
+		<header
+			data-hidden={hidden}
+			className="fade-in animation-duration-300 fixed inset-x-0 top-0 z-50 animate-in border-transparent border-b bg-background/80 backdrop-blur-lg ease-out-strong [transition:translate_250ms_var(--ease-out-strong)] data-[hidden=true]:-translate-y-full"
 		>
 			<nav aria-label={t`Main navigation`} className="container mx-auto flex items-center gap-x-4 p-3 lg:px-12">
 				<Link to="/" className="transition-opacity hover:opacity-80" aria-label={t`Reactive Resume - Go to homepage`}>
@@ -80,6 +54,6 @@ export function Header() {
 					</div>
 				</div>
 			</nav>
-		</m.header>
+		</header>
 	);
 }
diff --git a/apps/web/src/routes/_home/ats-checker.tsx b/apps/web/src/routes/_home/ats-checker.tsx
index 9270e2754..d59e73cfa 100644
--- a/apps/web/src/routes/_home/ats-checker.tsx
+++ b/apps/web/src/routes/_home/ats-checker.tsx
@@ -8,6 +8,7 @@ import { Spotlight } from "@/components/animation/spotlight";
 import { AiReviewCard } from "@/features/ats-checker/ai-review/ai-review-card";
 import { LockedAiCard } from "@/features/ats-checker/ai-review/locked-card";
 import { ParsePreview } from "@/features/ats-checker/parse-preview";
+import { EASE_OUT_STRONG } from "@/libs/motion";
 import { Footer } from "./-sections/footer";
 
 const PAGE_TITLE = "ATS Checker - Reactive Resume";
@@ -91,10 +92,10 @@ function Header() {
 
 			<div className="relative grid items-center gap-8 p-4 md:p-8 lg:grid-cols-[minmax(0,1fr)_minmax(0,32rem)] lg:gap-12 xl:py-12">
 				<m.div
-					className="space-y-5 will-change-[transform,opacity]"
+					className="space-y-5"
 					initial={{ opacity: 0, y: 16 }}
 					animate={{ opacity: 1, y: 0 }}
-					transition={{ duration: 0.5, ease: "easeOut" }}
+					transition={{ duration: 0.5, ease: EASE_OUT_STRONG }}
 				>
 					<h1 className="font-semibold text-4xl tracking-tight md:text-5xl">
 						<Trans>ATS Checker</Trans>
@@ -109,10 +110,9 @@ function Header() {
 				</m.div>
 
 				<m.div
-					className="will-change-[transform,opacity]"
 					initial={{ opacity: 0, y: 24 }}
 					animate={{ opacity: 1, y: 0 }}
-					transition={{ duration: 0.55, delay: 0.12, ease: "easeOut" }}
+					transition={{ duration: 0.55, delay: 0.12, ease: EASE_OUT_STRONG }}
 				>
 					<ParsePreview />
 				</m.div>
diff --git a/apps/web/src/routes/agent/$threadId.tsx b/apps/web/src/routes/agent/$threadId.tsx
index 28937bf0c..fea39ab43 100644
--- a/apps/web/src/routes/agent/$threadId.tsx
+++ b/apps/web/src/routes/agent/$threadId.tsx
@@ -7,9 +7,9 @@ import { useCallback, useRef, useState } from "react";
 import { useMediaQuery } from "usehooks-ts";
 import { Button } from "@reactive-resume/ui/components/button";
 import { ResizableGroup, ResizablePanel, ResizableSeparator } from "@reactive-resume/ui/components/resizable";
+import { Spinner } from "@reactive-resume/ui/components/spinner";
 import { Tabs, TabsList, TabsTrigger } from "@reactive-resume/ui/components/tabs";
 import { cn } from "@reactive-resume/utils/style";
-import { LoadingScreen } from "@/components/layout/loading-screen";
 import { orpc } from "@/libs/orpc/client";
 import { AgentChat } from "./-components/agent-chat";
 import { ResumePane } from "./-components/resume-pane";
@@ -62,9 +62,8 @@ function RouteComponent() {
 		}
 	}, []);
 
-	if (isLoading) return <LoadingScreen />;
-
-	if (error || !data) {
+	// Loading stays local to the chat/resume panes so the thread sidebar remains mounted while switching threads.
+	if (!isLoading && (error || !data)) {
 		return (
 			<div className="grid h-svh place-items-center bg-background p-6 text-center">
 				<div className="space-y-4">
@@ -79,12 +78,18 @@ function RouteComponent() {
 		);
 	}
 
-	const readOnlyReason: "archived" | "missing" | null = data.isReadOnly
+	const readOnlyReason: "archived" | "missing" | null = data?.isReadOnly
 		? data.thread.status === "archived"
 			? "archived"
 			: "missing"
 		: null;
 
+	const loadingPane = (
+		<div className="grid h-full place-items-center">
+			<Spinner className="size-6 text-muted-foreground" />
+		</div>
+	);
+
 	return (
 		<div className="h-svh min-w-0 overflow-hidden bg-background">
 			{isDesktopLayout ? (
@@ -104,18 +109,22 @@ function RouteComponent() {
 						</ResizablePanel>
 						<ResizableSeparator withHandle />
 						<ResizablePanel id="chat" defaultSize="52%" minSize="280px">
-							<AgentChat
-								threadId={threadId}
-								initialMessages={data.messages}
-								isReadOnly={data.isReadOnly}
-								readOnlyReason={readOnlyReason}
-								threadStatus={data.thread.status}
-								reviewPatches={data.thread.reviewPatches}
-								activeRunId={data.thread.activeRunId}
-								actions={data.actions}
-								onToggleThreads={toggleThreadsPanel}
-								onToggleResume={toggleResumePanel}
-							/>
+							{data ? (
+								<AgentChat
+									threadId={threadId}
+									initialMessages={data.messages}
+									isReadOnly={data.isReadOnly}
+									readOnlyReason={readOnlyReason}
+									threadStatus={data.thread.status}
+									reviewPatches={data.thread.reviewPatches}
+									activeRunId={data.thread.activeRunId}
+									actions={data.actions}
+									onToggleThreads={toggleThreadsPanel}
+									onToggleResume={toggleResumePanel}
+								/>
+							) : (
+								loadingPane
+							)}
 						</ResizablePanel>
 						<ResizableSeparator withHandle />
 						<ResizablePanel
@@ -129,7 +138,7 @@ function RouteComponent() {
 							onResize={(size) => setIsResumeCollapsed(size.inPixels < 24)}
 						>
 							<div className={cn("h-full", isResumeCollapsed && "invisible")}>
-								<ResumePane resume={data.resume} />
+								{data && <ResumePane resume={data.resume} />}
 							</div>
 						</ResizablePanel>
 					</ResizableGroup>
@@ -159,19 +168,23 @@ function RouteComponent() {
 							<AgentThreadSidebar activeThreadId={threadId} className="border-e-0" />
 						</div>
 						<div className={cn("h-full min-w-0", mobileTab !== "chat" && "hidden")}>
-							<AgentChat
-								threadId={threadId}
-								initialMessages={data.messages}
-								isReadOnly={data.isReadOnly}
-								readOnlyReason={readOnlyReason}
-								threadStatus={data.thread.status}
-								reviewPatches={data.thread.reviewPatches}
-								activeRunId={data.thread.activeRunId}
-								actions={data.actions}
-							/>
+							{data ? (
+								<AgentChat
+									threadId={threadId}
+									initialMessages={data.messages}
+									isReadOnly={data.isReadOnly}
+									readOnlyReason={readOnlyReason}
+									threadStatus={data.thread.status}
+									reviewPatches={data.thread.reviewPatches}
+									activeRunId={data.thread.activeRunId}
+									actions={data.actions}
+								/>
+							) : (
+								loadingPane
+							)}
 						</div>
 						<div className={cn("h-full min-w-0", mobileTab !== "resume" && "hidden")}>
-							<ResumePane resume={data.resume} />
+							{data && <ResumePane resume={data.resume} />}
 						</div>
 					</div>
 				</div>
diff --git a/apps/web/src/routes/agent/-components/agent-chat.tsx b/apps/web/src/routes/agent/-components/agent-chat.tsx
index 74e87855d..a0e7530b3 100644
--- a/apps/web/src/routes/agent/-components/agent-chat.tsx
+++ b/apps/web/src/routes/agent/-components/agent-chat.tsx
@@ -31,7 +31,6 @@ import {
 	parseJsonEventStream,
 	uiMessageChunkSchema,
 } from "ai";
-import { m } from "motion/react";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
@@ -412,14 +411,12 @@ function StarterPromptMarquee({ onSelect }: StarterPromptMarqueeProps) {
 					{ id: `${prompt}-repeat-b`, prompt },
 				]);
 				const duration = 135 + rowIndex * 22;
-				const animate = rowIndex % 2 === 0 ? { x: ["0%", "-33.333%"] } : { x: ["-33.333%", "0%"] };
 
 				return (
-					<m.div
+					<div
 						key={`prompt-row-${row.join("|")}`}
-						className="flex w-max gap-3"
-						animate={animate}
-						transition={{ duration, ease: "linear", repeat: Number.POSITIVE_INFINITY }}
+						className="flex w-max animate-[agent-prompt-marquee_135s_linear_infinite] gap-3 focus-within:[animation-play-state:paused] hover:[animation-play-state:paused]"
+						style={{ animationDuration: `${duration}s`, animationDirection: rowIndex % 2 === 0 ? "normal" : "reverse" }}
 					>
 						{marqueePrompts.map(({ id, prompt }) => (
 							<Button
@@ -432,7 +429,7 @@ function StarterPromptMarquee({ onSelect }: StarterPromptMarqueeProps) {
 								{promptPreview(prompt)}
 							</Button>
 						))}
-					</m.div>
+					</div>
 				);
 			})}
 		</div>
diff --git a/apps/web/src/routes/agent/-components/new-thread-setup.tsx b/apps/web/src/routes/agent/-components/new-thread-setup.tsx
index 1fdabffd8..87157da74 100644
--- a/apps/web/src/routes/agent/-components/new-thread-setup.tsx
+++ b/apps/web/src/routes/agent/-components/new-thread-setup.tsx
@@ -4,7 +4,6 @@ import { ArrowRightIcon, ChatCircleDotsIcon, FilePlusIcon, GearSixIcon } from "@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { Link, useNavigate } from "@tanstack/react-router";
 import { useState } from "react";
-import { useIsClient } from "usehooks-ts";
 import { Badge } from "@reactive-resume/ui/components/badge";
 import { Button } from "@reactive-resume/ui/components/button";
 import { Label } from "@reactive-resume/ui/components/label";
@@ -29,7 +28,6 @@ function isAgentConfigError(error: unknown) {
 }
 
 export function NewThreadSetup({ resumeId }: NewThreadSetupProps) {
-	const isClient = useIsClient();
 	const navigate = useNavigate();
 	const { usableProviders, isLoading: isLoadingProviders, error: providersError } = useHasUsableAiProvider();
 	const { data: resumes, isLoading: isLoadingResumes } = useQuery(
@@ -54,8 +52,6 @@ export function NewThreadSetup({ resumeId }: NewThreadSetupProps) {
 	const selectedResumeValue = sourceResumeId ?? "__scratch__";
 	const canCreate = !!aiProviderId && usableProviders.length > 0;
 
-	if (!isClient) return null;
-
 	return (
 		<div className="mx-auto grid w-full max-w-4xl gap-6 self-center p-4 lg:p-6">
 			<div className="flex items-start gap-4">
diff --git a/apps/web/src/routes/builder/$resumeId/-components/dock.tsx b/apps/web/src/routes/builder/$resumeId/-components/dock.tsx
index 2d3032379..15c852f54 100644
--- a/apps/web/src/routes/builder/$resumeId/-components/dock.tsx
+++ b/apps/web/src/routes/builder/$resumeId/-components/dock.tsx
@@ -14,7 +14,7 @@ import {
 } from "@phosphor-icons/react";
 import { useHotkey } from "@tanstack/react-hotkeys";
 import { useNavigate } from "@tanstack/react-router";
-import { m } from "motion/react";
+import { m, useReducedMotion } from "motion/react";
 import { useControls, useTransformComponent } from "react-zoom-pan-pinch";
 import { useCopyToClipboard } from "usehooks-ts";
 import { Button } from "@reactive-resume/ui/components/button";
@@ -26,13 +26,13 @@ import {
 } from "@reactive-resume/ui/components/dropdown-menu";
 import { toast } from "@reactive-resume/ui/components/toast";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@reactive-resume/ui/components/tooltip";
-import { cn } from "@reactive-resume/utils/style";
 import {
 	isEditableElementFocused,
 	useCurrentBuilderResumeSelector,
 	useResumeStore,
 } from "@/features/resume/builder/draft";
 import { authClient } from "@/libs/auth/client";
+import { EASE_OUT_STRONG } from "@/libs/motion";
 
 type BuilderDockProps = {
 	pageLayout: BuilderPreviewPageLayout;
@@ -48,13 +48,15 @@ export function BuilderDock({ pageLayout, onTogglePageLayout }: BuilderDockProps
 
 	const [_, copyToClipboard] = useCopyToClipboard();
 	const { zoomIn, zoomOut, resetTransform } = useControls();
+	const zoomDuration = useReducedMotion() ? 0 : 150;
 
 	const canUndo = useResumeStore((state) => state.canUndo);
 	const canRedo = useResumeStore((state) => state.canRedo);
 	const undo = useResumeStore((state) => state.undo);
 	const redo = useResumeStore((state) => state.redo);
 
-	useHotkey("Mod+0", () => resetTransform());
+	// Keyboard actions snap instantly; animating a shortcut makes it feel sluggish.
+	useHotkey("Mod+0", () => resetTransform(0));
 	// App-level undo/redo of resume state, scoped to the builder. Mod maps to Cmd (mac) / Ctrl (win/linux).
 	// Inside a focused text field, defer to the browser's native input undo; the dock buttons remain
 	// available for resume-level history while editing a field.
@@ -77,18 +79,25 @@ export function BuilderDock({ pageLayout, onTogglePageLayout }: BuilderDockProps
 	return (
 		<div className="fixed inset-x-0 bottom-20 flex items-center justify-center md:bottom-4">
 			<m.div
-				initial={{ opacity: 0, y: -18 }}
-				animate={{ opacity: 0.6, y: 0 }}
-				whileHover={{ opacity: 1, y: -2, scale: 1.01 }}
-				transition={{ duration: 0.2, ease: "easeOut" }}
-				className="flex items-center rounded-r-full rounded-l-full bg-popover px-2 shadow-xl will-change-[transform,opacity]"
+				initial={{ opacity: 0, transform: "translateY(8px)" }}
+				animate={{ opacity: 1, transform: "translateY(0px)" }}
+				transition={{ duration: 0.2, ease: EASE_OUT_STRONG }}
+				className="flex items-center rounded-r-full rounded-l-full bg-popover px-2 shadow-xl"
 			>
 				<DockIcon icon={ArrowUUpLeftIcon} title={t`Undo`} disabled={!canUndo} onClick={() => undo()} />
 				<DockIcon icon={ArrowUUpRightIcon} title={t`Redo`} disabled={!canRedo} onClick={() => redo()} />
 				<div className="mx-1 h-8 w-px bg-border" />
-				<DockIcon icon={MagnifyingGlassMinusIcon} title={t`Zoom out`} onClick={() => zoomOut(0.15)} />
+				<DockIcon
+					icon={MagnifyingGlassMinusIcon}
+					title={t`Zoom out`}
+					onClick={() => zoomOut(0.15, zoomDuration, "easeOutCubic")}
+				/>
 				<ZoomMenu />
-				<DockIcon icon={MagnifyingGlassPlusIcon} title={t`Zoom in`} onClick={() => zoomIn(0.15)} />
+				<DockIcon
+					icon={MagnifyingGlassPlusIcon}
+					title={t`Zoom in`}
+					onClick={() => zoomIn(0.15, zoomDuration, "easeOutCubic")}
+				/>
 				<DockIcon
 					icon={pageLayout === "horizontal" ? AlignTopIcon : AlignCenterHorizontalIcon}
 					title={t`Toggle page stacking`}
@@ -119,6 +128,7 @@ export function BuilderDock({ pageLayout, onTogglePageLayout }: BuilderDockProps
 function ZoomMenu() {
 	const scale = useTransformComponent((ctx) => ctx.state.scale);
 	const { centerView, resetTransform } = useControls();
+	const zoomDuration = useReducedMotion() ? 0 : 200;
 
 	return (
 		<DropdownMenu>
@@ -136,10 +146,10 @@ function ZoomMenu() {
 			/>
 
 			<DropdownMenuContent side="top" align="center">
-				<DropdownMenuItem onClick={() => centerView(1)}>
+				<DropdownMenuItem onClick={() => centerView(1, zoomDuration, "easeOutCubic")}>
 					<Trans>Actual size (100%)</Trans>
 				</DropdownMenuItem>
-				<DropdownMenuItem onClick={() => resetTransform()}>
+				<DropdownMenuItem onClick={() => resetTransform(zoomDuration, "easeOutCubic")}>
 					<Trans>Fit to view</Trans>
 				</DropdownMenuItem>
 			</DropdownMenuContent>
@@ -152,34 +162,17 @@ type DockIconProps = {
 	icon: Icon;
 	disabled?: boolean;
 	onClick: () => void;
-	iconClassName?: string;
-	active?: boolean;
 };
 
-function DockIcon({ icon: Icon, title, disabled, onClick, iconClassName, active }: DockIconProps) {
+function DockIcon({ icon: Icon, title, disabled, onClick }: DockIconProps) {
 	return (
 		<Tooltip>
-			<TooltipTrigger
-				render={
-					<m.div
-						className="will-change-transform"
-						whileHover={disabled ? undefined : { y: -1, scale: 1.04 }}
-						whileTap={disabled ? undefined : { scale: 0.97 }}
-						transition={{ duration: 0.15, ease: "easeOut" }}
-					>
-						<Button
-							size="icon"
-							variant="ghost"
-							disabled={disabled}
-							className={cn(active && "bg-primary/10 text-primary hover:bg-primary/15 hover:text-primary")}
-							onClick={onClick}
-							aria-label={title}
-						>
-							<Icon className={cn("size-4", iconClassName)} />
-						</Button>
-					</m.div>
-				}
-			/>
+			{/* A disabled button ignores the pointer, so a wrapper keeps the tooltip working for Undo/Redo. */}
+			<TooltipTrigger render={<span className="inline-flex" />}>
+				<Button size="icon" variant="ghost" disabled={disabled} onClick={onClick} aria-label={title}>
+					<Icon className="size-4" />
+				</Button>
+			</TooltipTrigger>
 
 			<TooltipContent side="top" align="center" className="font-medium">
 				{title}
diff --git a/apps/web/src/routes/builder/$resumeId/-components/header.tsx b/apps/web/src/routes/builder/$resumeId/-components/header.tsx
index 808d99773..96f354da8 100644
--- a/apps/web/src/routes/builder/$resumeId/-components/header.tsx
+++ b/apps/web/src/routes/builder/$resumeId/-components/header.tsx
@@ -26,6 +26,7 @@ import {
 	DropdownMenuTrigger,
 } from "@reactive-resume/ui/components/dropdown-menu";
 import { toast } from "@reactive-resume/ui/components/toast";
+import { cn } from "@reactive-resume/utils/style";
 import { useDialogStore } from "@/dialogs/store";
 import {
 	useCurrentBuilderResumeSelector,
@@ -137,9 +138,9 @@ function ResumeDownloadButton() {
 
 function SaveStatusIndicator() {
 	const status = useResumeStore((state) => state.saveStatus);
-	if (status === "idle") return null;
 
 	const { icon, label } = match(status)
+		.with("idle", () => ({ icon: null, label: "" }))
 		.with("saving", () => ({
 			icon: <CircleNotchIcon className="animate-spin" />,
 			label: t`Saving…`,
@@ -153,7 +154,11 @@ function SaveStatusIndicator() {
 
 	return (
 		<span
-			className="ms-1 flex shrink-0 items-center gap-x-1 text-muted-foreground text-xs"
+			// Always reserve the slot so the header buttons don't shift when the status appears or clears.
+			className={cn(
+				"ms-1 flex min-w-3 shrink-0 items-center gap-x-1 text-muted-foreground text-xs md:min-w-18",
+				status === "idle" && "invisible",
+			)}
 			aria-live="polite"
 			role="status"
 		>
diff --git a/apps/web/src/routes/builder/$resumeId/-components/mobile-builder-shell.tsx b/apps/web/src/routes/builder/$resumeId/-components/mobile-builder-shell.tsx
index c8890cc5c..72c89a387 100644
--- a/apps/web/src/routes/builder/$resumeId/-components/mobile-builder-shell.tsx
+++ b/apps/web/src/routes/builder/$resumeId/-components/mobile-builder-shell.tsx
@@ -53,7 +53,7 @@ function MobileBuilderTabBar({ activeTab, onTabChange }: MobileBuilderTabBarProp
 						aria-current={isActive ? "page" : undefined}
 						onClick={() => onTabChange(value)}
 						className={cn(
-							"flex min-h-16 flex-1 flex-col items-center justify-center gap-1 text-xs transition-colors",
+							"flex min-h-16 flex-1 flex-col items-center justify-center gap-1 text-xs transition-[color,scale] duration-150 ease-out-strong active:scale-[0.97]",
 							isActive ? "text-primary" : "text-muted-foreground hover:text-foreground",
 						)}
 					>
diff --git a/apps/web/src/routes/builder/$resumeId/-components/preview-page.tsx b/apps/web/src/routes/builder/$resumeId/-components/preview-page.tsx
index a68376b45..b440d956a 100644
--- a/apps/web/src/routes/builder/$resumeId/-components/preview-page.tsx
+++ b/apps/web/src/routes/builder/$resumeId/-components/preview-page.tsx
@@ -1,5 +1,6 @@
 import { t } from "@lingui/core/macro";
 import { useHotkey } from "@tanstack/react-hotkeys";
+import { useReducedMotion } from "motion/react";
 import { Suspense, useState } from "react";
 import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
 import { toast } from "@reactive-resume/ui/components/toast";
@@ -11,6 +12,7 @@ import { blurFocusedElementOnPan } from "./pan-focus";
 
 export function PreviewPage() {
 	const [pageLayout, setPageLayout] = useState(DEFAULT_BUILDER_PREVIEW_PAGE_LAYOUT);
+	const reduceMotion = useReducedMotion();
 
 	useHotkey("Mod+S", () => {
 		toast.add({
@@ -30,6 +32,7 @@ export function PreviewPage() {
 					initialScale={0.75}
 					limitToBounds={false}
 					wheel={{ step: 0.001 }}
+					doubleClick={{ animationType: "easeOutCubic", animationTime: reduceMotion ? 0 : 200 }}
 					onPanningStart={blurFocusedElementOnPan}
 				>
 					{/* Zoom transforms use left-origin coordinates, regardless of the interface language. */}
diff --git a/apps/web/src/routes/builder/$resumeId/-sidebar/left/index.tsx b/apps/web/src/routes/builder/$resumeId/-sidebar/left/index.tsx
index 5fc133f41..9fae33d89 100644
--- a/apps/web/src/routes/builder/$resumeId/-sidebar/left/index.tsx
+++ b/apps/web/src/routes/builder/$resumeId/-sidebar/left/index.tsx
@@ -28,40 +28,32 @@ import { orpc } from "@/libs/orpc/client";
 import { getSectionIcon, getSectionTitle, leftSidebarSections } from "@/libs/resume/section";
 import { BuilderSidebarEdge } from "../../-components/edge";
 import { useBuilderSidebar } from "../../-store/sidebar";
-import { AwardsSectionBuilder } from "./sections/awards";
 import { BasicsSectionBuilder } from "./sections/basics";
-import { CertificationsSectionBuilder } from "./sections/certifications";
 import { CustomSectionBuilder } from "./sections/custom";
-import { EducationSectionBuilder } from "./sections/education";
-import { ExperienceSectionBuilder } from "./sections/experience";
-import { InterestsSectionBuilder } from "./sections/interests";
-import { LanguagesSectionBuilder } from "./sections/languages";
 import { PictureSectionBuilder } from "./sections/picture";
-import { ProfilesSectionBuilder } from "./sections/profiles";
-import { ProjectsSectionBuilder } from "./sections/projects";
-import { PublicationsSectionBuilder } from "./sections/publications";
-import { ReferencesSectionBuilder } from "./sections/references";
-import { SkillsSectionBuilder } from "./sections/skills";
 import { SummarySectionBuilder } from "./sections/summary";
-import { VolunteerSectionBuilder } from "./sections/volunteer";
+import { ItemsSection } from "./shared/items-section";
 
 function getSectionComponent(type: LeftSidebarSection) {
 	return match(type)
 		.with("picture", () => <PictureSectionBuilder />)
 		.with("basics", () => <BasicsSectionBuilder />)
 		.with("summary", () => <SummarySectionBuilder />)
-		.with("profiles", () => <ProfilesSectionBuilder />)
-		.with("experience", () => <ExperienceSectionBuilder />)
-		.with("education", () => <EducationSectionBuilder />)
-		.with("projects", () => <ProjectsSectionBuilder />)
-		.with("skills", () => <SkillsSectionBuilder />)
-		.with("languages", () => <LanguagesSectionBuilder />)
-		.with("interests", () => <InterestsSectionBuilder />)
-		.with("awards", () => <AwardsSectionBuilder />)
-		.with("certifications", () => <CertificationsSectionBuilder />)
-		.with("publications", () => <PublicationsSectionBuilder />)
-		.with("volunteer", () => <VolunteerSectionBuilder />)
-		.with("references", () => <ReferencesSectionBuilder />)
+		.with(
+			"profiles",
+			"experience",
+			"education",
+			"projects",
+			"skills",
+			"languages",
+			"interests",
+			"awards",
+			"certifications",
+			"publications",
+			"volunteer",
+			"references",
+			(type) => <ItemsSection type={type} />,
+		)
 		.with("custom", () => <CustomSectionBuilder />)
 		.exhaustive();
 }
diff --git a/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/awards.tsx b/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/awards.tsx
deleted file mode 100644
index 6f405dd01..000000000
--- a/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/awards.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import type { awardItemSchema } from "@reactive-resume/schema/resume/data";
-import type z from "zod";
-import { Trans } from "@lingui/react/macro";
-import { AnimatePresence, Reorder } from "motion/react";
-import { cn } from "@reactive-resume/utils/style";
-import { useCurrentBuilderResumeSelector, useUpdateResumeData } from "@/features/resume/builder/draft";
-import { SectionBase } from "../shared/section-base";
-import { SectionAddItemButton, SectionItem } from "../shared/section-item";
-
-export function AwardsSectionBuilder() {
-	const section = useCurrentBuilderResumeSelector((resume) => resume.data.sections.awards);
-	const updateResumeData = useUpdateResumeData();
-
-	const handleReorder = (items: z.infer<typeof awardItemSchema>[]) => {
-		updateResumeData((draft) => {
-			draft.sections.awards.items = items;
-		});
-	};
-
-	return (
-		<SectionBase type="awards" className={cn("rounded-md border", section.items.length === 0 && "border-dashed")}>
-			<Reorder.Group axis="y" values={section.items} onReorder={handleReorder}>
-				<AnimatePresence>
-					{section.items.map((item) => (
-						<SectionItem key={item.id} type="awards" item={item} title={item.title} subtitle={item.awarder} />
-					))}
-				</AnimatePresence>
-			</Reorder.Group>
-
-			<SectionAddItemButton type="awards">
-				<Trans>Add a new award</Trans>
-			</SectionAddItemButton>
-		</SectionBase>
-	);
-}
diff --git a/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/certifications.tsx b/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/certifications.tsx
deleted file mode 100644
index 593b03dd9..000000000
--- a/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/certifications.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import type { certificationItemSchema } from "@reactive-resume/schema/resume/data";
-import type z from "zod";
-import { Trans } from "@lingui/react/macro";
-import { AnimatePresence, Reorder } from "motion/react";
-import { cn } from "@reactive-resume/utils/style";
-import { useCurrentBuilderResumeSelector, useUpdateResumeData } from "@/features/resume/builder/draft";
-import { SectionBase } from "../shared/section-base";
-import { SectionAddItemButton, SectionItem } from "../shared/section-item";
-
-export function CertificationsSectionBuilder() {
-	const section = useCurrentBuilderResumeSelector((resume) => resume.data.sections.certifications);
-	const updateResumeData = useUpdateResumeData();
-
-	const handleReorder = (items: z.infer<typeof certificationItemSchema>[]) => {
-		updateResumeData((draft) => {
-			draft.sections.certifications.items = items;
-		});
-	};
-
-	return (
-		<SectionBase
-			type="certifications"
-			className={cn("rounded-md border", section.items.length === 0 && "border-dashed")}
-		>
-			<Reorder.Group axis="y" values={section.items} onReorder={handleReorder}>
-				<AnimatePresence>
-					{section.items.map((item) => (
-						<SectionItem
-							key={item.id}
-							type="certifications"
-							item={item}
-							title={item.title}
-							subtitle={[item.issuer, item.date].filter(Boolean).join(" • ") || undefined}
-						/>
-					))}
-				</AnimatePresence>
-			</Reorder.Group>
-
-			<SectionAddItemButton type="certifications">
-				<Trans>Add a new certification</Trans>
-			</SectionAddItemButton>
-		</SectionBase>
-	);
-}
diff --git a/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/custom-fields.tsx b/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/custom-fields.tsx
index 31a393f06..0365d9677 100644
--- a/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/custom-fields.tsx
+++ b/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/custom-fields.tsx
@@ -33,7 +33,7 @@ export const CustomFieldsSection = withForm({
 			<form.Field name="customFields" mode="array">
 				{(customFieldsField) => (
 					<Reorder.Group
-						className="touch-none space-y-4"
+						className="space-y-4"
 						values={customFieldsField.state.value}
 						onReorder={(fields) => {
 							customFieldsField.setValue(fields);
@@ -152,15 +152,7 @@ function CustomFieldItem({ field, children }: CustomFieldItemProps) {
 	const controls = useDragControls();
 
 	return (
-		<Reorder.Item
-			key={field.id}
-			value={field}
-			dragListener={false}
-			dragControls={controls}
-			initial={{ opacity: 0, y: -10 }}
-			animate={{ opacity: 1, y: 0 }}
-			className="flex touch-none items-center"
-		>
+		<Reorder.Item value={field} dragListener={false} dragControls={controls} className="flex items-center">
 			<Button
 				size="icon"
 				variant="ghost"
diff --git a/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/custom.tsx b/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/custom.tsx
index bbe97ba17..ec77f501e 100644
--- a/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/custom.tsx
+++ b/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/custom.tsx
@@ -14,7 +14,6 @@ import {
 	PencilSimpleLineIcon,
 	TrashSimpleIcon,
 } from "@phosphor-icons/react";
-import { AnimatePresence, Reorder } from "motion/react";
 import { Badge } from "@reactive-resume/ui/components/badge";
 import {
 	DropdownMenu,
@@ -35,39 +34,11 @@ import { useDialogStore } from "@/dialogs/store";
 import { useCurrentBuilderResumeSelector, useUpdateResumeData } from "@/features/resume/builder/draft";
 import { useConfirm } from "@/hooks/use-confirm";
 import { getSectionTitle } from "@/libs/resume/section";
+import { SECTIONS, SectionItemList } from "../shared/items-section";
 import { SectionBase } from "../shared/section-base";
-import { SectionAddItemButton, SectionItem } from "../shared/section-item";
+import { SectionAddItemButton } from "../shared/section-item";
 import { SkillKeywordLayoutMenu } from "../shared/skill-keyword-layout-menu";
 
-// ponytail: data maps replace ts-pattern exhaustive matchers — same coverage, no runtime dependency
-const TITLE_FIELD: Partial<Record<CustomSectionType, string>> = {
-	profiles: "network",
-	experience: "company",
-	education: "school",
-	projects: "name",
-	skills: "name",
-	languages: "language",
-	interests: "name",
-	awards: "title",
-	certifications: "title",
-	publications: "title",
-	volunteer: "organization",
-	references: "name",
-};
-
-const SUBTITLE_FIELD: Partial<Record<CustomSectionType, string>> = {
-	profiles: "username",
-	experience: "position",
-	education: "degree",
-	projects: "period",
-	skills: "proficiency",
-	languages: "fluency",
-	awards: "awarder",
-	certifications: "issuer",
-	publications: "publisher",
-	volunteer: "period",
-};
-
 function truncateHtml(html: string, max = 50): string {
 	const stripped = stripHtml(html);
 	return stripped.length > max ? `${stripped.slice(0, max)}...` : stripped;
@@ -104,8 +75,7 @@ function getItemTitle(type: CustomSectionType, item: CustomSectionItemType): str
 			message: "Cover Letter",
 		});
 	}
-	const field = TITLE_FIELD[type];
-	return field && field in item ? String((item as Record<string, unknown>)[field]) : "";
+	return SECTIONS[type].title(item as never);
 }
 
 function getItemSubtitle(type: CustomSectionType, item: CustomSectionItemType): string | undefined {
@@ -116,10 +86,8 @@ function getItemSubtitle(type: CustomSectionType, item: CustomSectionItemType):
 		}
 		return undefined;
 	}
-	const field = SUBTITLE_FIELD[type];
-	if (!field || !(field in item)) return undefined;
-	const value = (item as Record<string, unknown>)[field];
-	return typeof value === "string" ? value || undefined : undefined;
+	if (type === "summary") return undefined;
+	return SECTIONS[type].subtitle?.(item as never) || undefined;
 }
 
 export function CustomSectionBuilder() {
@@ -127,13 +95,11 @@ export function CustomSectionBuilder() {
 
 	return (
 		<SectionBase type="custom" className={cn("space-y-4", customSections.length === 0 && "border-dashed")}>
-			<AnimatePresence>
-				{customSections
-					.filter((section) => !section.hidden)
-					.map((section) => (
-						<CustomSectionContainer key={section.id} section={section} />
-					))}
-			</AnimatePresence>
+			{customSections
+				.filter((section) => !section.hidden)
+				.map((section) => (
+					<CustomSectionContainer key={section.id} section={section} />
+				))}
 
 			{/* Add Custom Section Button */}
 			<SectionAddItemButton type="custom" variant="outline" className="rounded-md">
@@ -190,20 +156,14 @@ function CustomSectionContainer({ section }: CustomSectionContainerProps) {
 			{/* Section Items */}
 			{section.items.length > 0 && (
 				<div className={cn("border-t", section.hidden && "opacity-50")}>
-					<Reorder.Group axis="y" values={section.items} onReorder={handleReorder}>
-						<AnimatePresence>
-							{section.items.map((item) => (
-								<SectionItem
-									key={item.id}
-									type={section.type}
-									item={item}
-									customSectionId={section.id}
-									title={getItemTitle(section.type, item)}
-									subtitle={getItemSubtitle(section.type, item)}
-								/>
-							))}
-						</AnimatePresence>
-					</Reorder.Group>
+					<SectionItemList
+						type={section.type}
+						items={section.items}
+						onReorder={handleReorder}
+						customSectionId={section.id}
+						getTitle={(item) => getItemTitle(section.type, item)}
+						getSubtitle={(item) => getItemSubtitle(section.type, item)}
+					/>
 				</div>
 			)}
 
diff --git a/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/education-experience.test.tsx b/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/education-experience.test.tsx
index b83d14d37..f4fad520b 100644
--- a/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/education-experience.test.tsx
+++ b/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/education-experience.test.tsx
@@ -100,8 +100,9 @@ vi.mock("../shared/section-item", () => ({
 	),
 }));
 
-const { EducationSectionBuilder } = await import("./education");
-const { ExperienceSectionBuilder } = await import("./experience");
+const { ItemsSection } = await import("../shared/items-section");
+const EducationSectionBuilder = () => <ItemsSection type="education" />;
+const ExperienceSectionBuilder = () => <ItemsSection type="experience" />;
 
 beforeAll(() => {
 	i18n.loadAndActivate({ locale: "en", messages: {} });
diff --git a/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/education.tsx b/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/education.tsx
deleted file mode 100644
index 62066835f..000000000
--- a/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/education.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import type { educationItemSchema } from "@reactive-resume/schema/resume/data";
-import type z from "zod";
-import { Trans } from "@lingui/react/macro";
-import { AnimatePresence, Reorder } from "motion/react";
-import { cn } from "@reactive-resume/utils/style";
-import { useCurrentBuilderResumeSelector, useUpdateResumeData } from "@/features/resume/builder/draft";
-import { SectionBase } from "../shared/section-base";
-import { SectionAddItemButton, SectionItem } from "../shared/section-item";
-
-export function EducationSectionBuilder() {
-	const section = useCurrentBuilderResumeSelector((resume) => resume.data.sections.education);
-	const updateResumeData = useUpdateResumeData();
-
-	const handleReorder = (items: z.infer<typeof educationItemSchema>[]) => {
-		updateResumeData((draft) => {
-			draft.sections.education.items = items;
-		});
-	};
-
-	return (
-		<SectionBase type="education" className={cn("rounded-md border", section.items.length === 0 && "border-dashed")}>
-			<Reorder.Group axis="y" values={section.items} onReorder={handleReorder}>
-				<AnimatePresence>
-					{section.items.map((item) => (
-						<SectionItem key={item.id} type="education" item={item} title={item.school} subtitle={item.degree} />
-					))}
-				</AnimatePresence>
-			</Reorder.Group>
-
-			<SectionAddItemButton type="education">
-				<Trans>Add a new education</Trans>
-			</SectionAddItemButton>
-		</SectionBase>
-	);
-}
diff --git a/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/experience.tsx b/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/experience.tsx
deleted file mode 100644
index 5e9e3754c..000000000
--- a/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/experience.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import type { experienceItemSchema } from "@reactive-resume/schema/resume/data";
-import type z from "zod";
-import { plural } from "@lingui/core/macro";
-import { Trans } from "@lingui/react/macro";
-import { AnimatePresence, Reorder } from "motion/react";
-import { cn } from "@reactive-resume/utils/style";
-import { useCurrentBuilderResumeSelector, useUpdateResumeData } from "@/features/resume/builder/draft";
-import { SectionBase } from "../shared/section-base";
-import { SectionAddItemButton, SectionItem } from "../shared/section-item";
-
-export function ExperienceSectionBuilder() {
-	const section = useCurrentBuilderResumeSelector((resume) => resume.data.sections.experience);
-	const updateResumeData = useUpdateResumeData();
-
-	const handleReorder = (items: z.infer<typeof experienceItemSchema>[]) => {
-		updateResumeData((draft) => {
-			draft.sections.experience.items = items;
-		});
-	};
-
-	return (
-		<SectionBase type="experience" className={cn("rounded-md border", section.items.length === 0 && "border-dashed")}>
-			<Reorder.Group axis="y" values={section.items} onReorder={handleReorder}>
-				<AnimatePresence initial={false} mode="popLayout">
-					{section.items.map((item) => {
-						return (
-							<SectionItem
-								key={item.id}
-								type="experience"
-								item={item}
-								title={item.company}
-								subtitle={item.position || plural(item.roles.length, { one: "# role", other: "# roles" })}
-							/>
-						);
-					})}
-				</AnimatePresence>
-			</Reorder.Group>
-
-			<SectionAddItemButton type="experience">
-				<Trans>Add a new experience</Trans>
-			</SectionAddItemButton>
-		</SectionBase>
-	);
-}
diff --git a/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/interests.tsx b/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/interests.tsx
deleted file mode 100644
index 7c100a6ef..000000000
--- a/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/interests.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import type { interestItemSchema } from "@reactive-resume/schema/resume/data";
-import type z from "zod";
-import { Trans } from "@lingui/react/macro";
-import { AnimatePresence, Reorder } from "motion/react";
-import { cn } from "@reactive-resume/utils/style";
-import { useCurrentBuilderResumeSelector, useUpdateResumeData } from "@/features/resume/builder/draft";
-import { SectionBase } from "../shared/section-base";
-import { SectionAddItemButton, SectionItem } from "../shared/section-item";
-
-export function InterestsSectionBuilder() {
-	const section = useCurrentBuilderResumeSelector((resume) => resume.data.sections.interests);
-	const updateResumeData = useUpdateResumeData();
-
-	const handleReorder = (items: z.infer<typeof interestItemSchema>[]) => {
-		updateResumeData((draft) => {
-			draft.sections.interests.items = items;
-		});
-	};
-
-	return (
-		<SectionBase type="interests" className={cn("rounded-md border", section.items.length === 0 && "border-dashed")}>
-			<Reorder.Group axis="y" values={section.items} onReorder={handleReorder}>
-				<AnimatePresence>
-					{section.items.map((item) => (
-						<SectionItem key={item.id} type="interests" item={item} title={item.name} />
-					))}
-				</AnimatePresence>
-			</Reorder.Group>
-
-			<SectionAddItemButton type="interests">
-				<Trans>Add a new interest</Trans>
-			</SectionAddItemButton>
-		</SectionBase>
-	);
-}
diff --git a/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/languages.tsx b/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/languages.tsx
deleted file mode 100644
index 210bfbe74..000000000
--- a/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/languages.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import type { languageItemSchema } from "@reactive-resume/schema/resume/data";
-import type z from "zod";
-import { Trans } from "@lingui/react/macro";
-import { AnimatePresence, Reorder } from "motion/react";
-import { cn } from "@reactive-resume/utils/style";
-import { useCurrentBuilderResumeSelector, useUpdateResumeData } from "@/features/resume/builder/draft";
-import { SectionBase } from "../shared/section-base";
-import { SectionAddItemButton, SectionItem } from "../shared/section-item";
-
-export function LanguagesSectionBuilder() {
-	const section = useCurrentBuilderResumeSelector((resume) => resume.data.sections.languages);
-	const updateResumeData = useUpdateResumeData();
-
-	const handleReorder = (items: z.infer<typeof languageItemSchema>[]) => {
-		updateResumeData((draft) => {
-			draft.sections.languages.items = items;
-		});
-	};
-
-	return (
-		<SectionBase type="languages" className={cn("rounded-md border", section.items.length === 0 && "border-dashed")}>
-			<Reorder.Group axis="y" values={section.items} onReorder={handleReorder}>
-				<AnimatePresence>
-					{section.items.map((item) => (
-						<SectionItem key={item.id} type="languages" item={item} title={item.language} subtitle={item.fluency} />
-					))}
-				</AnimatePresence>
-			</Reorder.Group>
-
-			<SectionAddItemButton type="languages">
-				<Trans>Add a new language</Trans>
-			</SectionAddItemButton>
-		</SectionBase>
-	);
-}
diff --git a/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/many-sections.test.tsx b/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/many-sections.test.tsx
index 9f0266e73..a2a73042b 100644
--- a/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/many-sections.test.tsx
+++ b/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/many-sections.test.tsx
@@ -125,13 +125,14 @@ vi.mock("../shared/section-item", () => ({
 	),
 }));
 
-const { AwardsSectionBuilder } = await import("./awards");
-const { CertificationsSectionBuilder } = await import("./certifications");
-const { InterestsSectionBuilder } = await import("./interests");
-const { LanguagesSectionBuilder } = await import("./languages");
-const { PublicationsSectionBuilder } = await import("./publications");
-const { ReferencesSectionBuilder } = await import("./references");
-const { VolunteerSectionBuilder } = await import("./volunteer");
+const { ItemsSection } = await import("../shared/items-section");
+const AwardsSectionBuilder = () => <ItemsSection type="awards" />;
+const CertificationsSectionBuilder = () => <ItemsSection type="certifications" />;
+const InterestsSectionBuilder = () => <ItemsSection type="interests" />;
+const LanguagesSectionBuilder = () => <ItemsSection type="languages" />;
+const PublicationsSectionBuilder = () => <ItemsSection type="publications" />;
+const ReferencesSectionBuilder = () => <ItemsSection type="references" />;
+const VolunteerSectionBuilder = () => <ItemsSection type="volunteer" />;
 
 beforeAll(() => {
 	i18n.loadAndActivate({ locale: "en", messages: {} });
diff --git a/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/picture.tsx b/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/picture.tsx
index 2fc96d3b2..ef0c6a319 100644
--- a/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/picture.tsx
+++ b/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/picture.tsx
@@ -95,7 +95,7 @@ function PicturePreviewControls({
 						alt=""
 						src={normalizedPictureUrl}
 						style={{ objectFit: picture.fit }}
-						className="fade-in relative z-10 size-full animate-in rounded-md transition-opacity group-hover/picture:opacity-20"
+						className="relative z-10 size-full rounded-md transition-opacity group-hover/picture:opacity-20"
 					/>
 				)}
 
diff --git a/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/profiles.test.tsx b/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/profiles.test.tsx
index c10c2a98d..a185ad38b 100644
--- a/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/profiles.test.tsx
+++ b/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/profiles.test.tsx
@@ -67,7 +67,8 @@ vi.mock("../shared/section-item", () => ({
 	),
 }));
 
-const { ProfilesSectionBuilder } = await import("./profiles");
+const { ItemsSection } = await import("../shared/items-section");
+const ProfilesSectionBuilder = () => <ItemsSection type="profiles" />;
 
 beforeAll(() => {
 	i18n.loadAndActivate({ locale: "en", messages: {} });
diff --git a/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/profiles.tsx b/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/profiles.tsx
deleted file mode 100644
index ee2f0c8ce..000000000
--- a/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/profiles.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import type { profileItemSchema } from "@reactive-resume/schema/resume/data";
-import type z from "zod";
-import { Trans } from "@lingui/react/macro";
-import { AnimatePresence, Reorder } from "motion/react";
-import { cn } from "@reactive-resume/utils/style";
-import { useCurrentBuilderResumeSelector, useUpdateResumeData } from "@/features/resume/builder/draft";
-import { SectionBase } from "../shared/section-base";
-import { SectionAddItemButton, SectionItem } from "../shared/section-item";
-
-export function ProfilesSectionBuilder() {
-	const section = useCurrentBuilderResumeSelector((resume) => resume.data.sections.profiles);
-	const updateResumeData = useUpdateResumeData();
-
-	const handleReorder = (items: z.infer<typeof profileItemSchema>[]) => {
-		updateResumeData((draft) => {
-			draft.sections.profiles.items = items;
-		});
-	};
-
-	return (
-		<SectionBase type="profiles" className={cn("rounded-md border", section.items.length === 0 && "border-dashed")}>
-			<Reorder.Group axis="y" values={section.items} onReorder={handleReorder}>
-				<AnimatePresence>
-					{section.items.map((item) => (
-						<SectionItem key={item.id} type="profiles" item={item} title={item.network} subtitle={item.username} />
-					))}
-				</AnimatePresence>
-			</Reorder.Group>
-
-			<SectionAddItemButton type="profiles">
-				<Trans>Add a new profile</Trans>
-			</SectionAddItemButton>
-		</SectionBase>
-	);
-}
diff --git a/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/projects.test.tsx b/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/projects.test.tsx
index a0812efe8..245e03638 100644
--- a/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/projects.test.tsx
+++ b/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/projects.test.tsx
@@ -69,7 +69,8 @@ vi.mock("../shared/section-item", () => ({
 	),
 }));
 
-const { ProjectsSectionBuilder } = await import("./projects");
+const { ItemsSection } = await import("../shared/items-section");
+const ProjectsSectionBuilder = () => <ItemsSection type="projects" />;
 
 beforeAll(() => {
 	i18n.loadAndActivate({ locale: "en", messages: {} });
diff --git a/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/projects.tsx b/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/projects.tsx
deleted file mode 100644
index 9313edacc..000000000
--- a/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/projects.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import type { projectItemSchema } from "@reactive-resume/schema/resume/data";
-import type z from "zod";
-import { Trans } from "@lingui/react/macro";
-import { AnimatePresence, Reorder } from "motion/react";
-import { cn } from "@reactive-resume/utils/style";
-import { useCurrentBuilderResumeSelector, useUpdateResumeData } from "@/features/resume/builder/draft";
-import { SectionBase } from "../shared/section-base";
-import { SectionAddItemButton, SectionItem } from "../shared/section-item";
-
-const buildSubtitle = (item: z.infer<typeof projectItemSchema>) => {
-	const parts = [item.period, item.website.label].filter((part) => part && part.trim().length > 0);
-	return parts.length > 0 ? parts.join(" • ") : undefined;
-};
-
-export function ProjectsSectionBuilder() {
-	const section = useCurrentBuilderResumeSelector((resume) => resume.data.sections.projects);
-	const updateResumeData = useUpdateResumeData();
-
-	const handleReorder = (items: z.infer<typeof projectItemSchema>[]) => {
-		updateResumeData((draft) => {
-			draft.sections.projects.items = items;
-		});
-	};
-
-	return (
-		<SectionBase type="projects" className={cn("rounded-md border", section.items.length === 0 && "border-dashed")}>
-			<Reorder.Group axis="y" values={section.items} onReorder={handleReorder}>
-				<AnimatePresence>
-					{section.items.map((item) => (
-						<SectionItem key={item.id} type="projects" item={item} title={item.name} subtitle={buildSubtitle(item)} />
-					))}
-				</AnimatePresence>
-			</Reorder.Group>
-
-			<SectionAddItemButton type="projects">
-				<Trans>Add a new project</Trans>
-			</SectionAddItemButton>
-		</SectionBase>
-	);
-}
diff --git a/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/publications.tsx b/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/publications.tsx
deleted file mode 100644
index 282139910..000000000
--- a/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/publications.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import type { publicationItemSchema } from "@reactive-resume/schema/resume/data";
-import type z from "zod";
-import { Trans } from "@lingui/react/macro";
-import { AnimatePresence, Reorder } from "motion/react";
-import { cn } from "@reactive-resume/utils/style";
-import { useCurrentBuilderResumeSelector, useUpdateResumeData } from "@/features/resume/builder/draft";
-import { SectionBase } from "../shared/section-base";
-import { SectionAddItemButton, SectionItem } from "../shared/section-item";
-
-export function PublicationsSectionBuilder() {
-	const section = useCurrentBuilderResumeSelector((resume) => resume.data.sections.publications);
-	const updateResumeData = useUpdateResumeData();
-
-	const handleReorder = (items: z.infer<typeof publicationItemSchema>[]) => {
-		updateResumeData((draft) => {
-			draft.sections.publications.items = items;
-		});
-	};
-
-	return (
-		<SectionBase type="publications" className={cn("rounded-md border", section.items.length === 0 && "border-dashed")}>
-			<Reorder.Group axis="y" values={section.items} onReorder={handleReorder}>
-				<AnimatePresence>
-					{section.items.map((item) => (
-						<SectionItem key={item.id} type="publications" item={item} title={item.title} subtitle={item.publisher} />
-					))}
-				</AnimatePresence>
-			</Reorder.Group>
-
-			<SectionAddItemButton type="publications">
-				<Trans>Add a new publication</Trans>
-			</SectionAddItemButton>
-		</SectionBase>
-	);
-}
diff --git a/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/references.tsx b/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/references.tsx
deleted file mode 100644
index e897fb2d6..000000000
--- a/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/references.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import type { referenceItemSchema } from "@reactive-resume/schema/resume/data";
-import type z from "zod";
-import { Trans } from "@lingui/react/macro";
-import { AnimatePresence, Reorder } from "motion/react";
-import { cn } from "@reactive-resume/utils/style";
-import { useCurrentBuilderResumeSelector, useUpdateResumeData } from "@/features/resume/builder/draft";
-import { SectionBase } from "../shared/section-base";
-import { SectionAddItemButton, SectionItem } from "../shared/section-item";
-
-export function ReferencesSectionBuilder() {
-	const section = useCurrentBuilderResumeSelector((resume) => resume.data.sections.references);
-	const updateResumeData = useUpdateResumeData();
-
-	const handleReorder = (items: z.infer<typeof referenceItemSchema>[]) => {
-		updateResumeData((draft) => {
-			draft.sections.references.items = items;
-		});
-	};
-
-	return (
-		<SectionBase type="references" className={cn("rounded-md border", section.items.length === 0 && "border-dashed")}>
-			<Reorder.Group axis="y" values={section.items} onReorder={handleReorder}>
-				<AnimatePresence>
-					{section.items.map((item) => (
-						<SectionItem key={item.id} type="references" item={item} title={item.name} />
-					))}
-				</AnimatePresence>
-			</Reorder.Group>
-
-			<SectionAddItemButton type="references">
-				<Trans>Add a new reference</Trans>
-			</SectionAddItemButton>
-		</SectionBase>
-	);
-}
diff --git a/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/skills.test.tsx b/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/skills.test.tsx
index d7dcac2cb..e0151decf 100644
--- a/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/skills.test.tsx
+++ b/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/skills.test.tsx
@@ -49,7 +49,8 @@ vi.mock("../shared/section-item", () => ({
 	),
 }));
 
-const { SkillsSectionBuilder } = await import("./skills");
+const { ItemsSection } = await import("../shared/items-section");
+const SkillsSectionBuilder = () => <ItemsSection type="skills" />;
 
 beforeAll(() => {
 	i18n.loadAndActivate({ locale: "en", messages: {} });
diff --git a/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/skills.tsx b/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/skills.tsx
deleted file mode 100644
index 5a232319a..000000000
--- a/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/skills.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import type { skillItemSchema } from "@reactive-resume/schema/resume/data";
-import type z from "zod";
-import { Trans } from "@lingui/react/macro";
-import { AnimatePresence, Reorder } from "motion/react";
-import { cn } from "@reactive-resume/utils/style";
-import { useCurrentBuilderResumeSelector, useUpdateResumeData } from "@/features/resume/builder/draft";
-import { SectionBase } from "../shared/section-base";
-import { SectionAddItemButton, SectionItem } from "../shared/section-item";
-
-export function SkillsSectionBuilder() {
-	const section = useCurrentBuilderResumeSelector((resume) => resume.data.sections.skills);
-	const updateResumeData = useUpdateResumeData();
-
-	const handleReorder = (items: z.infer<typeof skillItemSchema>[]) => {
-		updateResumeData((draft) => {
-			draft.sections.skills.items = items;
-		});
-	};
-
-	return (
-		<SectionBase type="skills" className={cn("rounded-md border", section.items.length === 0 && "border-dashed")}>
-			<Reorder.Group axis="y" values={section.items} onReorder={handleReorder}>
-				<AnimatePresence initial={false} mode="popLayout">
-					{section.items.map((item) => (
-						<SectionItem key={item.id} type="skills" item={item} title={item.name} subtitle={item.proficiency} />
-					))}
-				</AnimatePresence>
-			</Reorder.Group>
-
-			<SectionAddItemButton type="skills">
-				<Trans>Add a new skill</Trans>
-			</SectionAddItemButton>
-		</SectionBase>
-	);
-}
diff --git a/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/volunteer.tsx b/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/volunteer.tsx
deleted file mode 100644
index 983f0b4a0..000000000
--- a/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/volunteer.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import type { volunteerItemSchema } from "@reactive-resume/schema/resume/data";
-import type z from "zod";
-import { Trans } from "@lingui/react/macro";
-import { AnimatePresence, Reorder } from "motion/react";
-import { cn } from "@reactive-resume/utils/style";
-import { useCurrentBuilderResumeSelector, useUpdateResumeData } from "@/features/resume/builder/draft";
-import { SectionBase } from "../shared/section-base";
-import { SectionAddItemButton, SectionItem } from "../shared/section-item";
-
-export function VolunteerSectionBuilder() {
-	const section = useCurrentBuilderResumeSelector((resume) => resume.data.sections.volunteer);
-	const updateResumeData = useUpdateResumeData();
-
-	const handleReorder = (items: z.infer<typeof volunteerItemSchema>[]) => {
-		updateResumeData((draft) => {
-			draft.sections.volunteer.items = items;
-		});
-	};
-
-	return (
-		<SectionBase type="volunteer" className={cn("rounded-md border", section.items.length === 0 && "border-dashed")}>
-			<Reorder.Group axis="y" values={section.items} onReorder={handleReorder}>
-				<AnimatePresence>
-					{section.items.map((item) => (
-						<SectionItem
-							key={item.id}
-							type="volunteer"
-							item={item}
-							title={item.organization}
-							subtitle={item.location}
-						/>
-					))}
-				</AnimatePresence>
-			</Reorder.Group>
-
-			<SectionAddItemButton type="volunteer">
-				<Trans>Add a new volunteer experience</Trans>
-			</SectionAddItemButton>
-		</SectionBase>
-	);
-}
diff --git a/apps/web/src/routes/builder/$resumeId/-sidebar/left/shared/items-section.tsx b/apps/web/src/routes/builder/$resumeId/-sidebar/left/shared/items-section.tsx
new file mode 100644
index 000000000..cb491508c
--- /dev/null
+++ b/apps/web/src/routes/builder/$resumeId/-sidebar/left/shared/items-section.tsx
@@ -0,0 +1,147 @@
+import type {
+	CustomSectionItem,
+	CustomSectionType,
+	SectionItem as SectionItemType,
+	SectionType,
+} from "@reactive-resume/schema/resume/data";
+import type { ReactNode } from "react";
+import { plural } from "@lingui/core/macro";
+import { Trans } from "@lingui/react/macro";
+import { AnimatePresence, Reorder } from "motion/react";
+import { cn } from "@reactive-resume/utils/style";
+import { useCurrentBuilderResumeSelector, useUpdateResumeData } from "@/features/resume/builder/draft";
+import { SectionBase } from "./section-base";
+import { SectionAddItemButton, SectionItem } from "./section-item";
+
+type SectionItemListProps<T extends CustomSectionItem | SectionItemType> = {
+	type: CustomSectionType;
+	items: T[];
+	onReorder: (items: T[]) => void;
+	getTitle: (item: T) => string;
+	getSubtitle?: (item: T) => string | undefined;
+	customSectionId?: string;
+};
+
+export function SectionItemList<T extends CustomSectionItem | SectionItemType>({
+	type,
+	items,
+	onReorder,
+	getTitle,
+	getSubtitle,
+	customSectionId,
+}: SectionItemListProps<T>) {
+	return (
+		// popLayout pops exiting rows out of flow, so the group must be the positioned ancestor.
+		<Reorder.Group axis="y" values={items} onReorder={onReorder} className="relative">
+			<AnimatePresence initial={false} mode="popLayout">
+				{items.map((item) => (
+					<SectionItem
+						key={item.id}
+						type={type}
+						item={item}
+						customSectionId={customSectionId}
+						title={getTitle(item)}
+						subtitle={getSubtitle?.(item)}
+					/>
+				))}
+			</AnimatePresence>
+		</Reorder.Group>
+	);
+}
+
+type ItemsSectionConfig<T extends SectionType> = {
+	title: (item: SectionItemType<T>) => string;
+	subtitle?: (item: SectionItemType<T>) => string | undefined;
+	addLabel: ReactNode;
+};
+
+export const SECTIONS: { [T in SectionType]: ItemsSectionConfig<T> } = {
+	profiles: {
+		title: (item) => item.network,
+		subtitle: (item) => item.username,
+		addLabel: <Trans>Add a new profile</Trans>,
+	},
+	experience: {
+		title: (item) => item.company,
+		subtitle: (item) => item.position || plural(item.roles.length, { one: "# role", other: "# roles" }),
+		addLabel: <Trans>Add a new experience</Trans>,
+	},
+	education: {
+		title: (item) => item.school,
+		subtitle: (item) => item.degree,
+		addLabel: <Trans>Add a new education</Trans>,
+	},
+	projects: {
+		title: (item) => item.name,
+		subtitle: (item) => [item.period, item.website.label].filter((part) => part?.trim()).join(" • ") || undefined,
+		addLabel: <Trans>Add a new project</Trans>,
+	},
+	skills: {
+		title: (item) => item.name,
+		subtitle: (item) => item.proficiency,
+		addLabel: <Trans>Add a new skill</Trans>,
+	},
+	languages: {
+		title: (item) => item.language,
+		subtitle: (item) => item.fluency,
+		addLabel: <Trans>Add a new language</Trans>,
+	},
+	interests: {
+		title: (item) => item.name,
+		addLabel: <Trans>Add a new interest</Trans>,
+	},
+	awards: {
+		title: (item) => item.title,
+		subtitle: (item) => item.awarder,
+		addLabel: <Trans>Add a new award</Trans>,
+	},
+	certifications: {
+		title: (item) => item.title,
+		subtitle: (item) => [item.issuer, item.date].filter(Boolean).join(" • ") || undefined,
+		addLabel: <Trans>Add a new certification</Trans>,
+	},
+	publications: {
+		title: (item) => item.title,
+		subtitle: (item) => item.publisher,
+		addLabel: <Trans>Add a new publication</Trans>,
+	},
+	volunteer: {
+		title: (item) => item.organization,
+		subtitle: (item) => item.location,
+		addLabel: <Trans>Add a new volunteer experience</Trans>,
+	},
+	references: {
+		title: (item) => item.name,
+		addLabel: <Trans>Add a new reference</Trans>,
+	},
+};
+
+type ItemsSectionProps<T extends SectionType> = {
+	type: T;
+};
+
+export function ItemsSection<T extends SectionType>({ type }: ItemsSectionProps<T>) {
+	const items = useCurrentBuilderResumeSelector((resume) => resume.data.sections[type].items) as SectionItemType<T>[];
+	const updateResumeData = useUpdateResumeData();
+	const config = SECTIONS[type];
+
+	const handleReorder = (nextItems: SectionItemType<T>[]) => {
+		updateResumeData((draft) => {
+			(draft.sections[type] as { items: SectionItemType<T>[] }).items = nextItems;
+		});
+	};
+
+	return (
+		<SectionBase type={type} className={cn("rounded-md border", items.length === 0 && "border-dashed")}>
+			<SectionItemList
+				type={type}
+				items={items}
+				onReorder={handleReorder}
+				getTitle={config.title}
+				getSubtitle={config.subtitle}
+			/>
+
+			<SectionAddItemButton type={type}>{config.addLabel}</SectionAddItemButton>
+		</SectionBase>
+	);
+}
diff --git a/apps/web/src/routes/builder/$resumeId/-sidebar/left/shared/section-item.tsx b/apps/web/src/routes/builder/$resumeId/-sidebar/left/shared/section-item.tsx
index 71b7567d6..3a8c2c3e9 100644
--- a/apps/web/src/routes/builder/$resumeId/-sidebar/left/shared/section-item.tsx
+++ b/apps/web/src/routes/builder/$resumeId/-sidebar/left/shared/section-item.tsx
@@ -1,10 +1,12 @@
 import type {
 	CustomSectionItem,
 	CustomSectionType,
+	ResumeData,
 	SectionItem as SectionItemType,
 	SectionType,
 } from "@reactive-resume/schema/resume/data";
 import type { ButtonProps } from "@reactive-resume/ui/components/button";
+import type { Ref } from "react";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import {
@@ -39,6 +41,7 @@ import { cn } from "@reactive-resume/utils/style";
 import { useDialogStore } from "@/dialogs/store";
 import { useCurrentResume, useUpdateResumeData } from "@/features/resume/builder/draft";
 import { useConfirm } from "@/hooks/use-confirm";
+import { EASE_OUT_STRONG } from "@/libs/motion";
 import { atsFindingItemElementId } from "@/libs/resume/ats";
 import { getCompatibleMoveTargets, getSourceSectionTitle, moveItem } from "@/libs/resume/move-item";
 
@@ -169,6 +172,8 @@ type Props<T extends CustomSectionItem | SectionItemType> = {
 	title: string;
 	subtitle?: string;
 	customSectionId?: string;
+	// Injected by `AnimatePresence mode="popLayout"` to pop an exiting row out of the flow.
+	ref?: Ref<HTMLLIElement>;
 };
 
 export function SectionItem<T extends CustomSectionItem | SectionItemType>({
@@ -177,28 +182,27 @@ export function SectionItem<T extends CustomSectionItem | SectionItemType>({
 	title,
 	subtitle,
 	customSectionId,
+	ref,
 }: Props<T>) {
 	const confirm = useConfirm();
 	const controls = useDragControls();
 	const { openDialog } = useDialogStore();
 	const updateResumeData = useUpdateResumeData();
 
+	// Returns the items array (and index) this row lives in, from either a custom or a built-in section.
+	const findItem = (draft: ResumeData) => {
+		const items = customSectionId
+			? draft.customSections.find((section) => section.id === customSectionId)?.items
+			: // Type assertion: when customSectionId is not provided, type is always a built-in SectionType
+				draft.sections[type as SectionType].items;
+		const index = items?.findIndex((_item) => _item.id === item.id) ?? -1;
+		return index === -1 || !items ? null : { items, index };
+	};
+
 	const onToggleVisibility = () => {
 		updateResumeData((draft) => {
-			if (customSectionId) {
-				const section = draft.customSections.find((s) => s.id === customSectionId);
-				if (!section) return;
-				const index = section.items.findIndex((_item) => _item.id === item.id);
-				if (index === -1) return;
-				section.items[index].hidden = !section.items[index].hidden;
-			} else {
-				// Type assertion: when customSectionId is not provided, type is always a built-in SectionType
-				const section = draft.sections[type as SectionType];
-				if (!("items" in section)) return;
-				const index = section.items.findIndex((_item) => _item.id === item.id);
-				if (index === -1) return;
-				section.items[index].hidden = !section.items[index].hidden;
-			}
+			const found = findItem(draft);
+			if (found) found.items[found.index].hidden = !found.items[found.index].hidden;
 		});
 	};
 
@@ -227,38 +231,27 @@ export function SectionItem<T extends CustomSectionItem | SectionItemType>({
 		if (!confirmed) return;
 
 		updateResumeData((draft) => {
-			if (customSectionId) {
-				const section = draft.customSections.find((s) => s.id === customSectionId);
-				if (!section) return;
-				const index = section.items.findIndex((_item) => _item.id === item.id);
-				if (index === -1) return;
-				section.items.splice(index, 1);
-			} else {
-				// Type assertion: when customSectionId is not provided, type is always a built-in SectionType
-				const section = draft.sections[type as SectionType];
-				if (!("items" in section)) return;
-				const index = section.items.findIndex((_item) => _item.id === item.id);
-				if (index === -1) return;
-				section.items.splice(index, 1);
-			}
+			const found = findItem(draft);
+			if (found) found.items.splice(found.index, 1);
 		});
 	};
 
 	return (
 		<Reorder.Item
-			key={item.id}
+			ref={ref}
 			id={atsFindingItemElementId(item.id)}
 			value={item}
 			dragListener={false}
 			dragControls={controls}
-			initial={{ opacity: 0, y: -8 }}
-			animate={{ opacity: 1, y: 0 }}
-			exit={{ opacity: 0, y: -8 }}
-			transition={{ duration: 0.16, ease: "easeOut" }}
-			className="group relative flex h-18 select-none border-b will-change-[transform,opacity]"
+			initial={{ opacity: 0 }}
+			animate={{ opacity: 1 }}
+			exit={{ opacity: 0 }}
+			transition={{ duration: 0.12, ease: EASE_OUT_STRONG }}
+			whileDrag={{ boxShadow: "0 4px 12px rgb(0 0 0 / 0.08)" }}
+			className="group relative flex h-18 select-none border-b bg-background"
 		>
 			<div
-				className="flex cursor-ns-resize touch-none items-center px-1.5 opacity-40 transition-[background-color,opacity] hover:bg-secondary/40 group-hover:opacity-100"
+				className="flex cursor-grab touch-none items-center px-1.5 opacity-40 transition-[background-color,opacity] hover:bg-secondary/40 active:cursor-grabbing group-hover:opacity-100"
 				onPointerDown={(e) => {
 					e.preventDefault();
 					controls.start(e);
diff --git a/apps/web/src/routes/builder/$resumeId/-sidebar/right/index.tsx b/apps/web/src/routes/builder/$resumeId/-sidebar/right/index.tsx
index 3983aa654..5f4a538d9 100644
--- a/apps/web/src/routes/builder/$resumeId/-sidebar/right/index.tsx
+++ b/apps/web/src/routes/builder/$resumeId/-sidebar/right/index.tsx
@@ -6,6 +6,7 @@ import { ScrollArea } from "@reactive-resume/ui/components/scroll-area";
 import { Separator } from "@reactive-resume/ui/components/separator";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@reactive-resume/ui/components/tooltip";
 import { Copyright } from "@/components/ui/copyright";
+import { getScrollBehavior } from "@/features/resume/builder/section-recovery";
 import { getSectionIcon, getSectionTitle, rightSidebarSections } from "@/libs/resume/section";
 import { BuilderSidebarEdge } from "../../-components/edge";
 import { useBuilderSidebar } from "../../-store/sidebar";
@@ -74,7 +75,7 @@ function SidebarEdge() {
 			// Section ids are globally unique; document.getElementById reliably resolves the scroll target.
 			document
 				.getElementById(`sidebar-${section}`)
-				?.scrollIntoView({ block: "start", inline: "nearest", behavior: "smooth" });
+				?.scrollIntoView({ block: "start", inline: "nearest", behavior: getScrollBehavior() });
 		},
 		[toggleSidebar],
 	);
diff --git a/apps/web/src/routes/builder/$resumeId/-sidebar/right/sections/ats-check.tsx b/apps/web/src/routes/builder/$resumeId/-sidebar/right/sections/ats-check.tsx
index 6d9766ee5..f889b8853 100644
--- a/apps/web/src/routes/builder/$resumeId/-sidebar/right/sections/ats-check.tsx
+++ b/apps/web/src/routes/builder/$resumeId/-sidebar/right/sections/ats-check.tsx
@@ -1,4 +1,5 @@
 import type { AtsFinding, AtsSeverity } from "@reactive-resume/resume/ats";
+import type { CSSProperties } from "react";
 import type { AtsCheckResult } from "@/features/ats-checker/run-ats-check";
 import { t } from "@lingui/core/macro";
 import { Plural, Trans } from "@lingui/react/macro";
@@ -18,6 +19,7 @@ import { AiReviewCard } from "@/features/ats-checker/ai-review/ai-review-card";
 import { AtsPdfReportView } from "@/features/ats-checker/report/report-view";
 import { blobToPdfFile, runAtsCheck } from "@/features/ats-checker/run-ats-check";
 import { useResumeData } from "@/features/resume/builder/draft";
+import { getScrollBehavior } from "@/features/resume/builder/section-recovery";
 import { createResumePdfBlob } from "@/features/resume/export/pdf-document";
 import {
 	atsFindingItemElementId,
@@ -118,7 +120,7 @@ function LiveLintTier() {
 
 			const item = target.itemId ? document.getElementById(atsFindingItemElementId(target.itemId)) : null;
 			const destination = item ?? document.getElementById(`sidebar-${target.section}`);
-			destination?.scrollIntoView({ block: "start", inline: "nearest", behavior: "smooth" });
+			destination?.scrollIntoView({ block: "start", inline: "nearest", behavior: getScrollBehavior() });
 		},
 		[data, setCollapsed, toggleSidebar],
 	);
@@ -146,8 +148,8 @@ function LiveLintTier() {
 
 					<div className="h-1.5 overflow-hidden rounded-full bg-muted">
 						<div
-							className="h-full rounded-full bg-primary transition-[width] duration-300"
-							style={{ width: `${Math.round((passedRules / totalRules) * 100)}%` }}
+							className="h-full translate-x-(--fill) rounded-full bg-primary transition-[translate] duration-200 ease-out-strong rtl:-translate-x-(--fill)"
+							style={{ "--fill": `${(passedRules / totalRules) * 100 - 100}%` } as CSSProperties}
 						/>
 					</div>
 				</div>
diff --git a/apps/web/src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx b/apps/web/src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
index cfebb956e..1e9479700 100644
--- a/apps/web/src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
+++ b/apps/web/src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
@@ -17,6 +17,7 @@ import { LevelTypeCombobox } from "@/components/level/combobox";
 import { LevelDisplay } from "@/components/level/display";
 import { useCurrentResume, useUpdateResumeData } from "@/features/resume/builder/draft";
 import { useSyncFormValues } from "@/hooks/use-sync-form-values";
+import { EASE_OUT_STRONG } from "@/libs/motion";
 import { useAppForm } from "@/libs/tanstack-form";
 import { SectionBase } from "../shared/section-base";
 
@@ -179,21 +180,21 @@ function QuickColorCircle({ color, active, onSelect, className, ...props }: Quic
 			onClick={() => onSelect(color)}
 			className={cn(
 				"relative flex size-8 items-center justify-center rounded-md bg-transparent",
-				"scale-100 transition-transform hover:scale-120 hover:bg-secondary/80 active:scale-95",
+				"transition-[scale,background-color] duration-150 ease-out-strong hover:bg-secondary/80 active:scale-[0.97]",
 				className,
 			)}
 			{...props}
 		>
 			<div style={{ backgroundColor: color }} className="size-6 shrink-0 rounded-md" />
 
-			<AnimatePresence>
+			<AnimatePresence initial={false}>
 				{active && (
 					<m.div
 						initial={{ scale: 0.95, opacity: 0 }}
 						animate={{ scale: 1, opacity: 1 }}
 						exit={{ scale: 0.95, opacity: 0 }}
-						transition={{ duration: 0.16, ease: "easeOut" }}
-						className="absolute inset-0 flex size-8 items-center justify-center will-change-transform"
+						transition={{ duration: 0.16, ease: EASE_OUT_STRONG }}
+						className="absolute inset-0 flex size-8 items-center justify-center"
 					>
 						<div className="size-4 rounded-md bg-foreground" />
 					</m.div>
diff --git a/apps/web/src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx b/apps/web/src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
index 0618ce5ad..a2cf81ad3 100644
--- a/apps/web/src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
+++ b/apps/web/src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
@@ -41,6 +41,7 @@ import { Switch } from "@reactive-resume/ui/components/switch";
 import { cn } from "@reactive-resume/utils/style";
 import { templates } from "@/dialogs/resume/template/data";
 import { useCurrentResume, useUpdateResumeData } from "@/features/resume/builder/draft";
+import { EASE_OUT_STRONG } from "@/libs/motion";
 import { resolveLayoutSectionTitle } from "./title";
 import { filterVisibleLayoutSectionIds } from "./visibility";
 
@@ -270,7 +271,9 @@ export function LayoutPages() {
 				</Button>
 			</div>
 
-			<DragOverlay>{activeId ? <LayoutItemContent id={activeId} isDragging isOverlay /> : null}</DragOverlay>
+			<DragOverlay dropAnimation={{ duration: 150, easing: `cubic-bezier(${EASE_OUT_STRONG})` }}>
+				{activeId ? <LayoutItemContent id={activeId} isOverlay /> : null}
+			</DragOverlay>
 		</DndContext>
 	);
 }
@@ -617,10 +620,10 @@ function LayoutItemContent({
 			data-overlay={isOverlay ? "true" : undefined}
 			data-dragging={isDragging ? "true" : undefined}
 			className={cn(
-				"group/item flex cursor-grab touch-none select-none items-center gap-x-2 rounded-md border border-border bg-background px-2 py-1.5 font-medium text-sm transition-all duration-200 ease-out",
+				"group/item flex cursor-grab touch-none select-none items-center gap-x-2 rounded-md border border-border bg-background px-2 py-1.5 font-medium text-sm transition-[background-color,border-color] duration-150",
 				"hover:bg-secondary/40 active:cursor-grabbing active:border-primary/60 active:bg-secondary/40",
-				"data-[overlay=true]:cursor-grabbing data-[overlay=true]:border-primary/60 data-[overlay=true]:bg-background",
-				"data-[dragging=true]:cursor-grabbing data-[dragging=true]:border-primary/60 data-[dragging=true]:bg-background",
+				"data-[overlay=true]:cursor-grabbing data-[overlay=true]:border-primary/60 data-[overlay=true]:bg-background data-[overlay=true]:shadow-md",
+				"data-[dragging=true]:cursor-grabbing data-[dragging=true]:opacity-40",
 				className,
 			)}
 			{...rest}
diff --git a/apps/web/src/routes/builder/$resumeId/-store/sidebar.ts b/apps/web/src/routes/builder/$resumeId/-store/sidebar.ts
index 89df1aaa3..1db973df5 100644
--- a/apps/web/src/routes/builder/$resumeId/-store/sidebar.ts
+++ b/apps/web/src/routes/builder/$resumeId/-store/sidebar.ts
@@ -1,8 +1,9 @@
 import type { Layout, usePanelRef } from "react-resizable-panels";
 import Cookies from "js-cookie";
 import { useCallback } from "react";
-import { useMediaQuery, useWindowSize } from "usehooks-ts";
+import { useWindowSize } from "usehooks-ts";
 import { create } from "zustand/react";
+import { useIsMobile } from "@reactive-resume/ui/hooks/use-mobile";
 
 type PanelImperativeHandle = ReturnType<typeof usePanelRef>;
 
@@ -102,7 +103,7 @@ type UseBuilderSidebarReturn = {
 };
 
 export function useBuilderSidebar(): UseBuilderSidebarReturn {
-	const isMobile = useMediaQuery("(max-width: 767px)", { initializeWithValue: false });
+	const isMobile = useIsMobile();
 	const { width } = useWindowSize();
 
 	const { maxSidebarSize, minSidebarSize, collapsedSidebarSize, expandSize, groupResizeBehavior } =
diff --git a/apps/web/src/routes/builder/$resumeId/route.tsx b/apps/web/src/routes/builder/$resumeId/route.tsx
index df0738af9..bf24b1081 100644
--- a/apps/web/src/routes/builder/$resumeId/route.tsx
+++ b/apps/web/src/routes/builder/$resumeId/route.tsx
@@ -2,7 +2,7 @@ import type { BuilderLayout } from "./-store/sidebar";
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { createFileRoute, redirect } from "@tanstack/react-router";
 import { useEffect } from "react";
-import { useMediaQuery } from "usehooks-ts";
+import { useIsMobile } from "@reactive-resume/ui/hooks/use-mobile";
 import { useBuilderResumeUpdateSubscription, useResumeCleanup, useResumeStore } from "@/features/resume/builder/draft";
 import { orpc } from "@/libs/orpc/client";
 import { createNoindexFollowMeta } from "@/libs/seo";
@@ -73,7 +73,7 @@ function RouteComponent() {
 
 function BuilderLayoutShell({ initialLayout }: { initialLayout: BuilderLayout }) {
 	// Single breakpoint (below `md`) switches between the desktop resizable panels and the mobile tabbed shell.
-	const isMobile = useMediaQuery("(max-width: 767px)", { initializeWithValue: false });
+	const isMobile = useIsMobile();
 
 	if (isMobile) return <MobileBuilderShell />;
 	return <DesktopBuilderShell initialLayout={initialLayout} />;
diff --git a/apps/web/src/routes/dashboard/-components/functions.ts b/apps/web/src/routes/dashboard/-components/functions.ts
deleted file mode 100644
index b5e1d1c52..000000000
--- a/apps/web/src/routes/dashboard/-components/functions.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import Cookies from "js-cookie";
-import z from "zod";
-
-const SIDEBAR_COOKIE_NAME = "sidebar_state";
-
-export function getDashboardSidebarState() {
-	return Cookies.get(SIDEBAR_COOKIE_NAME) !== "false";
-}
-
-export function setDashboardSidebarState(value: boolean) {
-	const parsed = z.boolean().parse(value);
-	Cookies.set(SIDEBAR_COOKIE_NAME, parsed.toString());
-}
diff --git a/apps/web/src/routes/dashboard/-components/sidebar.tsx b/apps/web/src/routes/dashboard/-components/sidebar.tsx
index 29b138d30..05676fe7b 100644
--- a/apps/web/src/routes/dashboard/-components/sidebar.tsx
+++ b/apps/web/src/routes/dashboard/-components/sidebar.tsx
@@ -40,6 +40,7 @@ import { getInitials } from "@reactive-resume/utils/string";
 import { Copyright } from "@/components/ui/copyright";
 import { useCommandPaletteStore } from "@/features/command-palette/store";
 import { UserDropdownMenu } from "@/features/user/dropdown-menu";
+import { EASE_OUT_STRONG } from "@/libs/motion";
 
 type SidebarItem = {
 	icon: React.ReactNode;
@@ -120,11 +121,11 @@ function SidebarItemList({ items }: SidebarItemListProps) {
 			{items.map((item) => (
 				<SidebarMenuItem key={item.href}>
 					<SidebarMenuButton
-						title={i18n.t(item.label)}
+						tooltip={i18n.t(item.label)}
 						render={
 							<Link to={item.href} activeProps={{ className: "bg-sidebar-accent" }}>
 								{item.icon}
-								<span className="shrink-0 transition-[margin,opacity] duration-200 ease-in-out group-data-[collapsible=icon]:-ms-8 group-data-[collapsible=icon]:opacity-0">
+								<span className="shrink-0 transition-opacity duration-150 ease-out-strong group-data-[collapsible=icon]:opacity-0 group-data-instant/sidebar-wrapper:transition-none">
 									{i18n.t(item.label)}
 								</span>
 							</Link>
@@ -144,12 +145,14 @@ function SidebarSearchButton() {
 
 	return (
 		<SidebarMenuItem>
-			<SidebarMenuButton title={label} tooltip={label} onClick={() => setOpen(true)}>
+			<SidebarMenuButton tooltip={label} onClick={() => setOpen(true)}>
 				<MagnifyingGlassIcon />
-				<span className="flex-1 text-start transition-[margin,opacity] duration-200 ease-in-out group-data-[collapsible=icon]:-ms-8 group-data-[collapsible=icon]:opacity-0">
+				<span className="flex-1 text-start transition-opacity duration-150 ease-out-strong group-data-[collapsible=icon]:opacity-0 group-data-instant/sidebar-wrapper:transition-none">
 					{label}
 				</span>
-				<Kbd className="transition-opacity duration-200 ease-in-out group-data-[collapsible=icon]:opacity-0">⌘K</Kbd>
+				<Kbd className="transition-opacity duration-150 ease-out-strong group-data-[collapsible=icon]:opacity-0 group-data-instant/sidebar-wrapper:transition-none">
+					⌘K
+				</Kbd>
 			</SidebarMenuButton>
 		</SidebarMenuItem>
 	);
@@ -209,14 +212,14 @@ export function DashboardSidebar() {
 						<UserDropdownMenu>
 							{({ session }) => (
 								<SidebarMenuButton className="h-auto gap-x-3 group-data-[collapsible=icon]:p-1!">
-									<Avatar className="size-8 shrink-0 transition-all group-data-[collapsible=icon]:size-6">
+									<Avatar className="size-8 shrink-0 group-data-[collapsible=icon]:size-6">
 										<AvatarImage src={session.user.image ?? undefined} />
 										<AvatarFallback className="group-data-[collapsible=icon]:text-[0.5rem]">
 											{getInitials(session.user.name)}
 										</AvatarFallback>
 									</Avatar>
 
-									<div className="transition-[margin,opacity] duration-200 ease-in-out group-data-[collapsible=icon]:-ms-8 group-data-[collapsible=icon]:opacity-0">
+									<div className="transition-opacity duration-150 ease-out-strong group-data-[collapsible=icon]:opacity-0 group-data-instant/sidebar-wrapper:transition-none">
 										<p className="font-medium">{session.user.name}</p>
 										<p className="text-muted-foreground text-xs">{session.user.email}</p>
 									</div>
@@ -230,11 +233,9 @@ export function DashboardSidebar() {
 					{state === "expanded" && (
 						<m.div
 							key="copyright"
-							className="will-change-[transform,opacity]"
-							initial={{ y: 12, opacity: 0 }}
-							animate={{ y: 0, opacity: 1 }}
-							exit={{ y: 12, opacity: 0 }}
-							transition={{ duration: 0.2, ease: "easeOut" }}
+							initial={{ opacity: 0 }}
+							animate={{ opacity: 1, transition: { duration: 0.2, ease: EASE_OUT_STRONG } }}
+							exit={{ opacity: 0, transition: { duration: 0.08 } }}
 						>
 							<Copyright className="wrap-break-word shrink-0 whitespace-normal p-2" />
 						</m.div>
diff --git a/apps/web/src/routes/dashboard/applications/index.tsx b/apps/web/src/routes/dashboard/applications/index.tsx
index b28584193..9c0e5cb37 100644
--- a/apps/web/src/routes/dashboard/applications/index.tsx
+++ b/apps/web/src/routes/dashboard/applications/index.tsx
@@ -87,7 +87,7 @@ function RouteComponent() {
 		void navigate({ replace: true, search: (prev: Search) => ({ ...prev, create: false }) });
 	}, [create, navigate]);
 
-	const { data: applications } = useQuery(applicationsListQueryOptions());
+	const { data: applications, isPending } = useQuery(applicationsListQueryOptions());
 	const { data: allTags } = useQuery(orpc.applications.tags.queryOptions());
 
 	useEffect(() => {
@@ -116,7 +116,8 @@ function RouteComponent() {
 
 	const archivedCount = (applications ?? []).filter((app) => app.archived).length;
 
-	const isEmpty = (applications?.length ?? 0) === 0;
+	// While loading render neither the empty state nor the board; a failed load falls back to the empty state.
+	const isEmpty = !applications?.length;
 
 	const setUrlSearch = (patch: Partial<Search>) => void navigate({ search: (prev: Search) => ({ ...prev, ...patch }) });
 
@@ -148,7 +149,7 @@ function RouteComponent() {
 
 			<Separator />
 
-			{isEmpty ? (
+			{isPending ? null : isEmpty ? (
 				<EmptyState onAdd={() => setAddOpen(true)} onImport={() => setImportOpen(true)} />
 			) : (
 				<>
diff --git a/apps/web/src/routes/dashboard/resumes/-components/cards/base-card.tsx b/apps/web/src/routes/dashboard/resumes/-components/cards/base-card.tsx
index 1f6ec550c..8dde93fd9 100644
--- a/apps/web/src/routes/dashboard/resumes/-components/cards/base-card.tsx
+++ b/apps/web/src/routes/dashboard/resumes/-components/cards/base-card.tsx
@@ -12,7 +12,7 @@ type BaseCardProps = React.ComponentProps<"div"> & {
 
 export function BaseCard({ title, description, tags, className, children, ...props }: BaseCardProps) {
 	return (
-		<CometCard translateDepth={3} rotateDepth={6}>
+		<CometCard>
 			<div
 				{...props}
 				className={cn(
diff --git a/apps/web/src/routes/dashboard/resumes/-components/cards/resume-card.tsx b/apps/web/src/routes/dashboard/resumes/-components/cards/resume-card.tsx
index d041763ed..978e3e792 100644
--- a/apps/web/src/routes/dashboard/resumes/-components/cards/resume-card.tsx
+++ b/apps/web/src/routes/dashboard/resumes/-components/cards/resume-card.tsx
@@ -5,6 +5,7 @@ import { LockSimpleIcon } from "@phosphor-icons/react";
 import { Link } from "@tanstack/react-router";
 import { AnimatePresence, m } from "motion/react";
 import { useMemo } from "react";
+import { EASE_OUT_STRONG } from "@/libs/motion";
 import { ResumeContextMenu } from "../menus/context-menu";
 import { BaseCard } from "./base-card";
 import { ResumeThumbnail } from "./resume-thumbnail";
@@ -27,18 +28,11 @@ export function ResumeCard({ resume }: ResumeCardProps) {
 	return (
 		<ResumeContextMenu resume={resume}>
 			<Link to="/builder/$resumeId" params={{ resumeId: resume.id }} className="cursor-default">
-				<m.div
-					className="will-change-transform"
-					whileHover={{ y: -2, scale: 1.005 }}
-					whileTap={{ scale: 0.998 }}
-					transition={{ type: "spring", stiffness: 320, damping: 28 }}
-				>
-					<BaseCard title={resume.name} description={t`Last updated on ${updatedAt}`} tags={resume.tags}>
-						<ResumeThumbnail resume={resume} isLocked={resume.isLocked} />
+				<BaseCard title={resume.name} description={t`Last updated on ${updatedAt}`} tags={resume.tags}>
+					<ResumeThumbnail resume={resume} isLocked={resume.isLocked} />
 
-						<ResumeLockOverlay isLocked={resume.isLocked} />
-					</BaseCard>
-				</m.div>
+					<ResumeLockOverlay isLocked={resume.isLocked} />
+				</BaseCard>
 			</Link>
 		</ResumeContextMenu>
 	);
@@ -53,8 +47,8 @@ function ResumeLockOverlay({ isLocked }: ResumeLockOverlayProps) {
 					initial={{ opacity: 0 }}
 					animate={{ opacity: 0.6 }}
 					exit={{ opacity: 0 }}
-					transition={{ duration: 0.15 }}
-					className="absolute inset-0 flex items-center justify-center will-change-[opacity]"
+					transition={{ duration: 0.15, ease: EASE_OUT_STRONG }}
+					className="absolute inset-0 flex items-center justify-center"
 				>
 					<div className="flex items-center justify-center rounded-full bg-popover p-6">
 						<LockSimpleIcon weight="thin" className="size-12 opacity-60" />
diff --git a/apps/web/src/routes/dashboard/resumes/-components/cards/resume-thumbnail.tsx b/apps/web/src/routes/dashboard/resumes/-components/cards/resume-thumbnail.tsx
index 7cdc03602..7748c233b 100644
--- a/apps/web/src/routes/dashboard/resumes/-components/cards/resume-thumbnail.tsx
+++ b/apps/web/src/routes/dashboard/resumes/-components/cards/resume-thumbnail.tsx
@@ -190,7 +190,10 @@ export function ResumeThumbnail({ isLocked, resume }: ResumeThumbnailProps) {
 	return (
 		<div
 			ref={containerRef}
-			className={cn("relative size-full overflow-hidden bg-muted/40 transition-all", isLocked && "blur-xs")}
+			className={cn(
+				"relative size-full overflow-hidden bg-muted/40 transition-[filter] duration-200 ease-out-strong",
+				isLocked && "blur-xs",
+			)}
 		>
 			{thumbnail.status === "ready" ? (
 				<div
diff --git a/apps/web/src/routes/dashboard/resumes/-components/grid-view.tsx b/apps/web/src/routes/dashboard/resumes/-components/grid-view.tsx
index 908f8135e..03c786756 100644
--- a/apps/web/src/routes/dashboard/resumes/-components/grid-view.tsx
+++ b/apps/web/src/routes/dashboard/resumes/-components/grid-view.tsx
@@ -2,6 +2,7 @@ import type { RouterOutput } from "@/libs/orpc/client";
 import { Trans } from "@lingui/react/macro";
 import { AnimatePresence, m } from "motion/react";
 import { cn } from "@reactive-resume/utils/style";
+import { EASE_OUT_STRONG } from "@/libs/motion";
 import { CreateResumeCard } from "./cards/create-card";
 import { ImportResumeCard } from "./cards/import-card";
 import { ResumeCard } from "./cards/resume-card";
@@ -9,7 +10,8 @@ import { ResumeCard } from "./cards/resume-card";
 type Resume = RouterOutput["resume"]["list"][number];
 
 type Props = {
-	resumes: Resume[];
+	/** `undefined` while the first page of resumes is loading. */
+	resumes: Resume[] | undefined;
 	hasResumes: boolean;
 	compact?: boolean;
 };
@@ -22,6 +24,15 @@ export function GridView({ resumes, hasResumes, compact = false }: Props) {
 			: "3xl:grid-cols-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5",
 	);
 
+	if (!resumes) {
+		return (
+			<div className={gridClassName}>
+				<div className="aspect-page rounded-md bg-muted/40" />
+				<div className="aspect-page rounded-md bg-muted/40" />
+			</div>
+		);
+	}
+
 	if (resumes.length === 0 && hasResumes) {
 		return (
 			<p className="py-8 text-center text-muted-foreground text-sm">
@@ -33,25 +44,8 @@ export function GridView({ resumes, hasResumes, compact = false }: Props) {
 	if (resumes.length === 0) {
 		return (
 			<div className={gridClassName}>
-				<m.div
-					initial={{ y: -20 }}
-					animate={{ opacity: 1, y: 0 }}
-					exit={{ y: -20 }}
-					transition={{ duration: 0.2, ease: "easeOut" }}
-					className="will-change-[transform,opacity]"
-				>
-					<CreateResumeCard />
-				</m.div>
-
-				<m.div
-					initial={{ y: -20 }}
-					animate={{ opacity: 1, y: 0 }}
-					exit={{ y: -20 }}
-					transition={{ duration: 0.2, delay: 0.03, ease: "easeOut" }}
-					className="will-change-[transform,opacity]"
-				>
-					<ImportResumeCard />
-				</m.div>
+				<CreateResumeCard />
+				<ImportResumeCard />
 			</div>
 		);
 	}
@@ -59,19 +53,14 @@ export function GridView({ resumes, hasResumes, compact = false }: Props) {
 	return (
 		<div className={gridClassName}>
 			<AnimatePresence initial={false} mode="popLayout">
-				{resumes.map((resume, index) => (
+				{resumes.map((resume) => (
 					<m.div
 						layout
 						key={resume.id}
-						initial={{ y: -20 }}
-						animate={{ opacity: 1, y: 0 }}
-						exit={{
-							opacity: 0,
-							y: -20,
-							filter: "blur(8px)",
-						}}
-						transition={{ duration: 0.2, delay: Math.min(0.12, index * 0.02), ease: "easeOut" }}
-						className="will-change-[transform,opacity]"
+						initial={{ opacity: 0 }}
+						animate={{ opacity: 1 }}
+						exit={{ opacity: 0 }}
+						transition={{ duration: 0.15, ease: EASE_OUT_STRONG }}
 					>
 						<ResumeCard resume={resume} />
 					</m.div>
diff --git a/apps/web/src/routes/dashboard/resumes/-components/list-view.tsx b/apps/web/src/routes/dashboard/resumes/-components/list-view.tsx
index cdd649313..9b6fbaf75 100644
--- a/apps/web/src/routes/dashboard/resumes/-components/list-view.tsx
+++ b/apps/web/src/routes/dashboard/resumes/-components/list-view.tsx
@@ -7,12 +7,14 @@ import { AnimatePresence, m } from "motion/react";
 import { useMemo } from "react";
 import { Button } from "@reactive-resume/ui/components/button";
 import { useDialogStore } from "@/dialogs/store";
+import { EASE_OUT_STRONG } from "@/libs/motion";
 import { ResumeDropdownMenu } from "./menus/dropdown-menu";
 
 type Resume = RouterOutput["resume"]["list"][number];
 
 type ListViewProps = {
-	resumes: Resume[];
+	/** `undefined` while the first page of resumes is loading. */
+	resumes: Resume[] | undefined;
 	hasResumes: boolean;
 };
 
@@ -23,6 +25,8 @@ type ResumeListItemProps = {
 export function ListView({ resumes, hasResumes }: ListViewProps) {
 	const { openDialog } = useDialogStore();
 
+	if (!resumes) return null;
+
 	if (resumes.length === 0 && hasResumes) {
 		return (
 			<p className="py-8 text-center text-muted-foreground text-sm">
@@ -42,54 +46,38 @@ export function ListView({ resumes, hasResumes }: ListViewProps) {
 
 		return (
 			<div className="flex flex-col gap-y-1">
-				<m.div
-					className="will-change-[transform,opacity]"
-					initial={{ opacity: 0, y: -20 }}
-					animate={{ opacity: 1, y: 0 }}
-					exit={{ opacity: 0, y: -20 }}
-					transition={{ duration: 0.2, ease: "easeOut" }}
+				<Button
+					size="lg"
+					variant="ghost"
+					className="h-12 w-full justify-start gap-x-4 text-start"
+					onClick={handleCreateResume}
 				>
-					<Button
-						size="lg"
-						variant="ghost"
-						className="h-12 w-full justify-start gap-x-4 text-start"
-						onClick={handleCreateResume}
-					>
-						<PlusIcon />
-						<div className="min-w-0 flex-1 truncate">
-							<Trans>Create a new resume</Trans>
-						</div>
+					<PlusIcon />
+					<div className="min-w-0 flex-1 truncate">
+						<Trans>Create a new resume</Trans>
+					</div>
 
-						<p className="hidden text-xs opacity-60 sm:block">
-							<Trans>Start building your resume from scratch</Trans>
-						</p>
-					</Button>
-				</m.div>
+					<p className="hidden text-xs opacity-60 sm:block">
+						<Trans>Start building your resume from scratch</Trans>
+					</p>
+				</Button>
 
-				<m.div
-					className="will-change-[transform,opacity]"
-					initial={{ opacity: 0, y: -20 }}
-					animate={{ opacity: 1, y: 0 }}
-					exit={{ opacity: 0, y: -20 }}
-					transition={{ duration: 0.2, delay: 0.03, ease: "easeOut" }}
+				<Button
+					size="lg"
+					variant="ghost"
+					className="h-12 w-full justify-start gap-x-4 text-start"
+					onClick={handleImportResume}
 				>
-					<Button
-						size="lg"
-						variant="ghost"
-						className="h-12 w-full justify-start gap-x-4 text-start"
-						onClick={handleImportResume}
-					>
-						<DownloadSimpleIcon />
+					<DownloadSimpleIcon />
 
-						<div className="min-w-0 flex-1 truncate">
-							<Trans>Import an existing resume</Trans>
-						</div>
+					<div className="min-w-0 flex-1 truncate">
+						<Trans>Import an existing resume</Trans>
+					</div>
 
-						<p className="hidden text-xs opacity-60 sm:block">
-							<Trans>Continue where you left off</Trans>
-						</p>
-					</Button>
-				</m.div>
+					<p className="hidden text-xs opacity-60 sm:block">
+						<Trans>Continue where you left off</Trans>
+					</p>
+				</Button>
 			</div>
 		);
 	}
@@ -97,15 +85,14 @@ export function ListView({ resumes, hasResumes }: ListViewProps) {
 	return (
 		<div className="flex flex-col gap-y-1">
 			<AnimatePresence initial={false} mode="popLayout">
-				{resumes.map((resume, index) => (
+				{resumes.map((resume) => (
 					<m.div
 						layout
 						key={resume.id}
-						className="will-change-[transform,opacity]"
-						initial={{ opacity: 0, y: -20 }}
-						animate={{ opacity: 1, y: 0 }}
-						exit={{ opacity: 0, y: -20 }}
-						transition={{ duration: 0.18, delay: Math.min(0.12, index * 0.02), ease: "easeOut" }}
+						initial={{ opacity: 0 }}
+						animate={{ opacity: 1 }}
+						exit={{ opacity: 0 }}
+						transition={{ duration: 0.15, ease: EASE_OUT_STRONG }}
 					>
 						<ResumeListItem resume={resume} />
 					</m.div>
diff --git a/apps/web/src/routes/dashboard/resumes/index.tsx b/apps/web/src/routes/dashboard/resumes/index.tsx
index 5fa1b313a..a51ac988b 100644
--- a/apps/web/src/routes/dashboard/resumes/index.tsx
+++ b/apps/web/src/routes/dashboard/resumes/index.tsx
@@ -10,7 +10,7 @@ import {
 	PlusIcon,
 	ReadCvLogoIcon,
 } from "@phosphor-icons/react";
-import { useQuery } from "@tanstack/react-query";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { createFileRoute, Link, stripSearchParams, useNavigate } from "@tanstack/react-router";
 import { useMemo, useState } from "react";
 import z from "zod";
@@ -58,13 +58,16 @@ function RouteComponent() {
 	const { openDialog } = useDialogStore();
 
 	const { data: allTags } = useQuery(orpc.resume.tags.list.queryOptions());
-	const { data: resumes } = useQuery(orpc.resume.list.queryOptions({ input: { tags, sort } }));
+	const { data: resumes } = useQuery({
+		...orpc.resume.list.queryOptions({ input: { tags, sort } }),
+		placeholderData: keepPreviousData,
+	});
 
 	const filteredResumes = useMemo(() => {
-		const list = resumes ?? [];
+		if (!resumes) return undefined;
 		const query = searchQuery.trim().toLowerCase();
-		if (!query) return list;
-		return list.filter(
+		if (!query) return resumes;
+		return resumes.filter(
 			(resume) => resume.name.toLowerCase().includes(query) || resume.slug.toLowerCase().includes(query),
 		);
 	}, [resumes, searchQuery]);
diff --git a/apps/web/src/routes/dashboard/route.tsx b/apps/web/src/routes/dashboard/route.tsx
index f7f112be7..505c33bd5 100644
--- a/apps/web/src/routes/dashboard/route.tsx
+++ b/apps/web/src/routes/dashboard/route.tsx
@@ -1,8 +1,8 @@
 import { Trans } from "@lingui/react/macro";
-import { createFileRoute, Outlet, redirect, useRouter } from "@tanstack/react-router";
+import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";
+import Cookies from "js-cookie";
 import { SidebarProvider } from "@reactive-resume/ui/components/sidebar";
 import { createNoindexFollowMeta } from "@/libs/seo";
-import { getDashboardSidebarState, setDashboardSidebarState } from "./-components/functions";
 import { DashboardSidebar } from "./-components/sidebar";
 
 export const Route = createFileRoute("/dashboard")({
@@ -12,7 +12,7 @@ export const Route = createFileRoute("/dashboard")({
 		return { session: context.session };
 	},
 	loader: () => {
-		const sidebarState = getDashboardSidebarState();
+		const sidebarState = Cookies.get("sidebar_state") !== "false";
 		return { sidebarState };
 	},
 	head: () => ({
@@ -21,16 +21,10 @@ export const Route = createFileRoute("/dashboard")({
 });
 
 function RouteComponent() {
-	const router = useRouter();
 	const { sidebarState } = Route.useLoaderData();
 
-	const handleSidebarOpenChange = (open: boolean) => {
-		setDashboardSidebarState(open);
-		void router.invalidate();
-	};
-
 	return (
-		<SidebarProvider open={sidebarState} onOpenChange={handleSidebarOpenChange}>
+		<SidebarProvider defaultOpen={sidebarState}>
 			<a
 				href="#main-content"
 				className="sr-only rounded-md bg-popover px-4 py-2 text-sm ring-2 ring-ring focus:not-sr-only focus:absolute focus:inset-s-2 focus:top-2 focus:z-[100]"
diff --git a/apps/web/src/routes/templates/$.tsx b/apps/web/src/routes/templates/$.tsx
index 0879d6bc4..ba17a1fb5 100644
--- a/apps/web/src/routes/templates/$.tsx
+++ b/apps/web/src/routes/templates/$.tsx
@@ -1,6 +1,5 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { lazy, Suspense } from "react";
-import { useIsClient } from "usehooks-ts";
 import { sampleResumeData } from "@reactive-resume/schema/resume/sample";
 import { templateSchema } from "@reactive-resume/schema/templates";
 import { useLocalizedResumeDocument } from "@/features/resume/export/pdf-document";
@@ -20,14 +19,13 @@ export const Route = createFileRoute("/templates/$")({
 });
 
 function TemplatePdfRoute() {
-	const isClient = useIsClient();
 	const params = Route.useParams();
 
 	const templateName = params._splat?.split(".")[0] ?? "azurill";
 	const template = templateSchema.parse(templateName);
 	const resumeDocument = useLocalizedResumeDocument(sampleResumeData, template);
 
-	if (!isClient || !resumeDocument) return null;
+	if (!resumeDocument) return null;
 
 	return (
 		<Suspense fallback={null}>
diff --git a/packages/ui/src/components/accordion.test.tsx b/packages/ui/src/components/accordion.test.tsx
index d2d1fce5b..452416eff 100644
--- a/packages/ui/src/components/accordion.test.tsx
+++ b/packages/ui/src/components/accordion.test.tsx
@@ -93,7 +93,7 @@ describe("AccordionTrigger", () => {
 		expect(screen.getByTestId("trigger")).toHaveAttribute("data-slot", "accordion-trigger");
 	});
 
-	it("renders down/up caret icons", () => {
+	it("renders a single caret icon that rotates when expanded", () => {
 		const { container } = render(
 			<Accordion>
 				<AccordionItem value="1">
@@ -102,6 +102,6 @@ describe("AccordionTrigger", () => {
 				</AccordionItem>
 			</Accordion>,
 		);
-		expect(container.querySelectorAll("[data-slot=accordion-trigger-icon]")).toHaveLength(2);
+		expect(container.querySelectorAll("[data-slot=accordion-trigger-icon]")).toHaveLength(1);
 	});
 });
diff --git a/packages/ui/src/components/accordion.tsx b/packages/ui/src/components/accordion.tsx
index 5288c1e7e..0003a61e5 100644
--- a/packages/ui/src/components/accordion.tsx
+++ b/packages/ui/src/components/accordion.tsx
@@ -1,5 +1,5 @@
 import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
-import { CaretDownIcon, CaretUpIcon } from "@phosphor-icons/react";
+import { CaretDownIcon } from "@phosphor-icons/react";
 import { cn } from "@reactive-resume/utils/style";
 
 function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
@@ -26,11 +26,7 @@ function AccordionTrigger({ className, children, ...props }: AccordionPrimitive.
 				{children}
 				<CaretDownIcon
 					data-slot="accordion-trigger-icon"
-					className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
-				/>
-				<CaretUpIcon
-					data-slot="accordion-trigger-icon"
-					className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+					className="pointer-events-none shrink-0 transition-transform duration-200 ease-out-strong group-aria-expanded/accordion-trigger:rotate-180"
 				/>
 			</AccordionPrimitive.Trigger>
 		</AccordionPrimitive.Header>
@@ -41,17 +37,10 @@ function AccordionContent({ className, children, ...props }: AccordionPrimitive.
 	return (
 		<AccordionPrimitive.Panel
 			data-slot="accordion-content"
-			className="overflow-hidden text-sm data-closed:animate-accordion-up data-open:animate-accordion-down"
+			className="h-(--accordion-panel-height) overflow-hidden text-sm transition-[height] duration-200 ease-out-strong data-ending-style:h-0 data-starting-style:h-0 data-ending-style:duration-150"
 			{...props}
 		>
-			<div
-				className={cn(
-					"h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_p:not(:last-child)]:mb-4",
-					className,
-				)}
-			>
-				{children}
-			</div>
+			<div className={cn("pt-0 pb-2.5 [&_p:not(:last-child)]:mb-4", className)}>{children}</div>
 		</AccordionPrimitive.Panel>
 	);
 }
diff --git a/packages/ui/src/components/alert-dialog.tsx b/packages/ui/src/components/alert-dialog.tsx
index 00be9cc63..d7658442e 100644
--- a/packages/ui/src/components/alert-dialog.tsx
+++ b/packages/ui/src/components/alert-dialog.tsx
@@ -20,7 +20,7 @@ function AlertDialogOverlay({ className, ...props }: AlertDialogPrimitive.Backdr
 		<AlertDialogPrimitive.Backdrop
 			data-slot="alert-dialog-overlay"
 			className={cn(
-				"data-open:fade-in-0 data-closed:fade-out-0 fixed inset-0 isolate z-50 bg-black/10 duration-200 ease-(--ease-out-strong) data-closed:animate-out data-open:animate-in data-closed:duration-150 supports-backdrop-filter:backdrop-blur-xs",
+				"fixed inset-0 isolate z-50 bg-black/10 transition-opacity duration-200 ease-out-strong data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-150 supports-backdrop-filter:backdrop-blur-xs",
 				className,
 			)}
 			{...props}
@@ -42,7 +42,7 @@ function AlertDialogContent({
 				data-slot="alert-dialog-content"
 				data-size={size}
 				className={cn(
-					"group/alert-dialog-content data-open:fade-in-0 data-open:zoom-in-95 data-closed:fade-out-0 data-closed:zoom-out-95 fixed inset-s-1/2 top-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground outline-none ring-1 ring-foreground/10 duration-200 ease-(--ease-out-strong) data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-closed:animate-out data-open:animate-in data-closed:duration-150 data-[size=default]:sm:max-w-sm rtl:translate-x-1/2",
+					"group/alert-dialog-content fixed inset-s-1/2 top-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground outline-none ring-1 ring-foreground/10 transition-[opacity,scale] duration-200 ease-out-strong data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-ending-style:scale-95 data-starting-style:scale-95 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-150 data-[size=default]:sm:max-w-sm rtl:translate-x-1/2",
 					className,
 				)}
 				{...props}
diff --git a/packages/ui/src/components/avatar.tsx b/packages/ui/src/components/avatar.tsx
index d6a748ebb..f3528f2d5 100644
--- a/packages/ui/src/components/avatar.tsx
+++ b/packages/ui/src/components/avatar.tsx
@@ -26,7 +26,10 @@ function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
 	return (
 		<AvatarPrimitive.Image
 			data-slot="avatar-image"
-			className={cn("aspect-square size-full rounded-full object-cover", className)}
+			className={cn(
+				"aspect-square size-full rounded-full object-cover starting:opacity-0 transition-opacity duration-150 ease-out-strong",
+				className,
+			)}
 			{...props}
 		/>
 	);
diff --git a/packages/ui/src/components/checkbox.tsx b/packages/ui/src/components/checkbox.tsx
index ad8108aaf..17f7cc560 100644
--- a/packages/ui/src/components/checkbox.tsx
+++ b/packages/ui/src/components/checkbox.tsx
@@ -7,14 +7,14 @@ function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
 		<CheckboxPrimitive.Root
 			data-slot="checkbox"
 			className={cn(
-				"peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input shadow-xs outline-none transition-shadow focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive data-disabled:cursor-not-allowed data-checked:border-primary data-indeterminate:border-primary data-checked:bg-primary data-indeterminate:bg-primary data-checked:text-primary-foreground data-indeterminate:text-primary-foreground data-disabled:opacity-50",
+				"peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input shadow-xs outline-none transition-[background-color,border-color,box-shadow] duration-100 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive data-disabled:cursor-not-allowed data-checked:border-primary data-indeterminate:border-primary data-checked:bg-primary data-indeterminate:bg-primary data-checked:text-primary-foreground data-indeterminate:text-primary-foreground data-disabled:opacity-50",
 				className,
 			)}
 			{...props}
 		>
 			<CheckboxPrimitive.Indicator
 				data-slot="checkbox-indicator"
-				className="flex items-center justify-center text-current"
+				className="flex items-center justify-center text-current transition-[opacity,scale] duration-150 ease-out-strong data-ending-style:scale-90 data-starting-style:scale-90 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-100"
 			>
 				{props.indeterminate ? (
 					<MinusIcon weight="bold" className="size-3" />
diff --git a/packages/ui/src/components/combobox.tsx b/packages/ui/src/components/combobox.tsx
index b4fc8bf69..e8b1c2990 100644
--- a/packages/ui/src/components/combobox.tsx
+++ b/packages/ui/src/components/combobox.tsx
@@ -101,7 +101,7 @@ function ComboboxContent({
 					data-slot="combobox-content"
 					data-chips={!!anchor}
 					className={cn(
-						"group/combobox-content relative max-h-(--available-height) w-fit min-w-[calc(var(--anchor-width)+--spacing(7))] max-w-(--available-width) origin-(--transform-origin) overflow-hidden rounded-lg bg-popover/70 text-popover-foreground shadow-md ring-1 ring-foreground/10 transition-[opacity,scale] duration-150 ease-(--ease-out-strong) before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 data-[chips=true]:min-w-(--anchor-width) data-ending-style:scale-95 data-starting-style:scale-95 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-100 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-9 *:data-[slot=input-group]:border-input/30 **:data-[slot$=-separator]:bg-foreground/5 *:data-[slot=input-group]:bg-input/30 **:data-[variant=destructive]:**:text-accent-foreground! **:data-[variant=destructive]:text-accent-foreground! *:data-[slot=input-group]:shadow-none **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[variant=destructive]:focus:bg-foreground/10!",
+						"group/combobox-content relative max-h-(--available-height) w-fit min-w-[calc(var(--anchor-width)+--spacing(7))] max-w-(--available-width) origin-(--transform-origin) overflow-hidden rounded-lg bg-popover/70 text-popover-foreground shadow-md ring-1 ring-foreground/10 backdrop-blur-lg backdrop-saturate-150 transition-opacity duration-100 ease-out-strong data-[chips=true]:min-w-(--anchor-width) data-ending-style:opacity-0 data-starting-style:opacity-0 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-9 *:data-[slot=input-group]:border-input/30 **:data-[slot$=-separator]:bg-foreground/5 *:data-[slot=input-group]:bg-input/30 **:data-[variant=destructive]:**:text-accent-foreground! **:data-[variant=destructive]:text-accent-foreground! *:data-[slot=input-group]:shadow-none **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[variant=destructive]:focus:bg-foreground/10!",
 						className,
 					)}
 					{...props}
diff --git a/packages/ui/src/components/context-menu.tsx b/packages/ui/src/components/context-menu.tsx
index 4c8a3fda1..3ed783ce0 100644
--- a/packages/ui/src/components/context-menu.tsx
+++ b/packages/ui/src/components/context-menu.tsx
@@ -42,7 +42,7 @@ function ContextMenuContent({
 				<ContextMenuPrimitive.Popup
 					data-slot="context-menu-content"
 					className={cn(
-						"relative z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-y-auto overflow-x-hidden rounded-lg bg-popover/70 p-1 text-popover-foreground shadow-md outline-none ring-1 ring-foreground/10 transition-[opacity,scale] duration-150 ease-(--ease-out-strong) before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 data-ending-style:scale-95 data-starting-style:scale-95 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-100 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[variant=destructive]:**:text-accent-foreground! **:data-[variant=destructive]:text-accent-foreground! **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[variant=destructive]:focus:bg-foreground/10!",
+						"relative z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-y-auto overflow-x-hidden rounded-lg bg-popover/70 p-1 text-popover-foreground shadow-md outline-none ring-1 ring-foreground/10 backdrop-blur-lg backdrop-saturate-150 transition-opacity duration-100 ease-out-strong data-ending-style:opacity-0 data-starting-style:opacity-0 data-instant:transition-none **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[variant=destructive]:**:text-accent-foreground! **:data-[variant=destructive]:text-accent-foreground! **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[variant=destructive]:focus:bg-foreground/10!",
 						className,
 					)}
 					{...props}
@@ -125,14 +125,7 @@ function ContextMenuSubTrigger({
 }
 
 function ContextMenuSubContent({ ...props }: React.ComponentProps<typeof ContextMenuContent>) {
-	return (
-		<ContextMenuContent
-			data-slot="context-menu-sub-content"
-			className="relative bg-popover/70 shadow-lg before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[variant=destructive]:**:text-accent-foreground! **:data-[variant=destructive]:text-accent-foreground! **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[variant=destructive]:focus:bg-foreground/10!"
-			side="inline-end"
-			{...props}
-		/>
-	);
+	return <ContextMenuContent data-slot="context-menu-sub-content" className="shadow-lg" side="inline-end" {...props} />;
 }
 
 function ContextMenuCheckboxItem({
diff --git a/packages/ui/src/components/dialog.tsx b/packages/ui/src/components/dialog.tsx
index 494256a7d..bfef559e3 100644
--- a/packages/ui/src/components/dialog.tsx
+++ b/packages/ui/src/components/dialog.tsx
@@ -25,7 +25,7 @@ function DialogOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props)
 		<DialogPrimitive.Backdrop
 			data-slot="dialog-overlay"
 			className={cn(
-				"data-open:fade-in-0 data-closed:fade-out-0 fixed inset-0 isolate z-50 bg-black/10 duration-200 ease-(--ease-out-strong) data-closed:animate-out data-open:animate-in data-closed:duration-150 supports-backdrop-filter:backdrop-blur-xs",
+				"fixed inset-0 isolate z-50 bg-black/10 transition-opacity duration-200 ease-out-strong data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-150 supports-backdrop-filter:backdrop-blur-xs",
 				className,
 			)}
 			{...props}
@@ -37,17 +37,21 @@ function DialogContent({
 	className,
 	children,
 	showCloseButton = true,
+	instant = false,
 	...props
 }: DialogPrimitive.Popup.Props & {
 	showCloseButton?: boolean;
+	/** Skip the open/close transition, for dialogs toggled many times a day (e.g. the command palette). */
+	instant?: boolean;
 }) {
 	return (
 		<DialogPortal>
-			<DialogOverlay />
+			<DialogOverlay className={cn(instant && "transition-none")} />
 			<DialogPrimitive.Popup
 				data-slot="dialog-content"
 				className={cn(
-					"data-open:fade-in-0 data-open:zoom-in-95 data-closed:fade-out-0 data-closed:zoom-out-95 fixed inset-s-1/2 top-1/2 z-50 grid max-h-[calc(100svh-2rem)] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 overflow-y-auto overscroll-contain rounded-xl bg-popover p-4 text-popover-foreground text-sm outline-none ring-1 ring-foreground/10 duration-200 ease-(--ease-out-strong) data-closed:animate-out data-open:animate-in data-closed:duration-150 sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl rtl:translate-x-1/2",
+					"fixed inset-s-1/2 top-1/2 z-50 grid max-h-[calc(100svh-2rem)] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 overflow-y-auto overscroll-contain rounded-xl bg-popover p-4 text-popover-foreground text-sm outline-none ring-1 ring-foreground/10 transition-[opacity,scale] duration-200 ease-out-strong data-ending-style:scale-95 data-starting-style:scale-95 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-150 sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl rtl:translate-x-1/2",
+					instant && "transition-none",
 					className,
 				)}
 				{...props}
diff --git a/packages/ui/src/components/dropdown-menu.tsx b/packages/ui/src/components/dropdown-menu.tsx
index 52bb3e7bf..ee191a676 100644
--- a/packages/ui/src/components/dropdown-menu.tsx
+++ b/packages/ui/src/components/dropdown-menu.tsx
@@ -41,7 +41,7 @@ function DropdownMenuContent({
 				<MenuPrimitive.Popup
 					data-slot="dropdown-menu-content"
 					className={cn(
-						"relative z-50 max-h-(--available-height) w-fit min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-y-auto overflow-x-hidden rounded-lg bg-popover/70 p-1 text-popover-foreground shadow-md outline-none ring-1 ring-foreground/10 transition-[opacity,scale] duration-150 ease-(--ease-out-strong) before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 data-ending-style:scale-95 data-starting-style:scale-95 data-closed:overflow-hidden data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-100 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[variant=destructive]:**:text-accent-foreground! **:data-[variant=destructive]:text-accent-foreground! **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[variant=destructive]:focus:bg-foreground/10!",
+						"relative z-50 max-h-(--available-height) w-fit min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-y-auto overflow-x-hidden rounded-lg bg-popover/70 p-1 text-popover-foreground shadow-md outline-none ring-1 ring-foreground/10 backdrop-blur-lg backdrop-saturate-150 transition-[opacity,scale] duration-150 ease-out-strong data-ending-style:scale-95 data-starting-style:scale-95 data-closed:overflow-hidden data-ending-style:opacity-0 data-starting-style:opacity-0 data-instant:transition-none data-ending-style:duration-100 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[variant=destructive]:**:text-accent-foreground! **:data-[variant=destructive]:text-accent-foreground! **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[variant=destructive]:focus:bg-foreground/10!",
 						className,
 					)}
 					{...props}
@@ -134,10 +134,7 @@ function DropdownMenuSubContent({
 	return (
 		<DropdownMenuContent
 			data-slot="dropdown-menu-sub-content"
-			className={cn(
-				"relative w-auto min-w-[96px] rounded-lg bg-popover/70 p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 transition-[opacity,scale] duration-150 ease-(--ease-out-strong) before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 data-ending-style:scale-95 data-starting-style:scale-95 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-100 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[variant=destructive]:**:text-accent-foreground! **:data-[variant=destructive]:text-accent-foreground! **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[variant=destructive]:focus:bg-foreground/10!",
-				className,
-			)}
+			className={cn("w-auto min-w-[96px] shadow-lg", className)}
 			align={align}
 			alignOffset={alignOffset}
 			side={side}
diff --git a/packages/ui/src/components/form.tsx b/packages/ui/src/components/form.tsx
index 592f295a5..9e479f117 100644
--- a/packages/ui/src/components/form.tsx
+++ b/packages/ui/src/components/form.tsx
@@ -181,7 +181,7 @@ function FormMessage({ className, errors, ...props }: FormMessageProps) {
 			data-error={hasError}
 			data-slot="form-message"
 			className={cn(
-				"fade-in-0 slide-in-from-top-1 line-clamp-1 animate-in text-xs duration-150",
+				"line-clamp-1 starting:-translate-y-1 text-xs starting:opacity-0 transition-[opacity,translate] duration-150 ease-out-strong",
 				hasError ? "text-destructive" : "text-muted-foreground",
 				className,
 			)}
diff --git a/packages/ui/src/components/input.tsx b/packages/ui/src/components/input.tsx
index ec3f93a00..0c42a6f0e 100644
--- a/packages/ui/src/components/input.tsx
+++ b/packages/ui/src/components/input.tsx
@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
 			type={type}
 			data-slot="input"
 			className={cn(
-				"h-9 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-sm outline-none transition-colors file:inline-flex file:h-6 file:border-0 file:bg-transparent file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20",
+				"h-9 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-sm outline-none transition-[color,background-color,border-color,box-shadow] file:inline-flex file:h-6 file:border-0 file:bg-transparent file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20",
 				className,
 			)}
 			{...props}
diff --git a/packages/ui/src/components/message-scroller.tsx b/packages/ui/src/components/message-scroller.tsx
index 2e65d5bcb..910a2fb60 100644
--- a/packages/ui/src/components/message-scroller.tsx
+++ b/packages/ui/src/components/message-scroller.tsx
@@ -87,7 +87,7 @@ function MessageScrollerButton({
 			data-size={size}
 			direction={direction}
 			className={cn(
-				"absolute inset-s-1/2 -translate-x-1/2 border-border bg-background text-foreground transition-[translate,scale,opacity] duration-200 hover:bg-muted hover:text-foreground data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:data-[active=false]:-translate-y-full data-[active=false]:pointer-events-none data-[direction=start]:top-4 data-[direction=end]:bottom-4 data-[active=true]:translate-y-0 data-[active=false]:scale-95 data-[active=true]:scale-100 data-[active=false]:opacity-0 data-[active=true]:opacity-100 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] rtl:translate-x-1/2 data-[direction=start]:[&_svg]:rotate-180",
+				"absolute inset-s-1/2 -translate-x-1/2 border-border bg-background text-foreground transition-[translate,scale,opacity] duration-200 hover:bg-muted hover:text-foreground data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:data-[active=false]:-translate-y-full data-[active=false]:pointer-events-none data-[direction=start]:top-4 data-[direction=end]:bottom-4 data-[active=true]:translate-y-0 data-[active=false]:scale-95 data-[active=true]:scale-100 data-[active=false]:opacity-0 data-[active=true]:opacity-100 data-[active=false]:duration-150 data-[active=false]:ease-out-strong data-[active=true]:ease-out-strong rtl:translate-x-1/2 data-[direction=start]:[&_svg]:rotate-180",
 				className,
 			)}
 			render={render ?? <Button variant={variant} size={size} />}
diff --git a/packages/ui/src/components/otp-field.tsx b/packages/ui/src/components/otp-field.tsx
index 5701e5e56..c4cb0dd9b 100644
--- a/packages/ui/src/components/otp-field.tsx
+++ b/packages/ui/src/components/otp-field.tsx
@@ -19,7 +19,7 @@ function OTPFieldInput({ className, ...props }: OTPFieldPrimitive.Input.Props) {
 		<OTPFieldPrimitive.Input
 			data-slot="otp-field-input"
 			className={cn(
-				"size-9 rounded-lg border border-input bg-transparent text-center font-mono text-sm outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 group-aria-invalid:border-destructive group-aria-invalid:ring-3 group-aria-invalid:ring-destructive/20",
+				"size-9 rounded-lg border border-input bg-transparent text-center font-mono text-sm outline-none transition-[color,background-color,border-color,box-shadow] focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 group-aria-invalid:border-destructive group-aria-invalid:ring-3 group-aria-invalid:ring-destructive/20",
 				className,
 			)}
 			{...props}
diff --git a/packages/ui/src/components/popover.tsx b/packages/ui/src/components/popover.tsx
index 2c680d2de..ec08139a8 100644
--- a/packages/ui/src/components/popover.tsx
+++ b/packages/ui/src/components/popover.tsx
@@ -31,7 +31,7 @@ function PopoverContent({
 				<PopoverPrimitive.Popup
 					data-slot="popover-content"
 					className={cn(
-						"data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:fade-in-0 data-open:zoom-in-95 data-closed:fade-out-0 data-closed:zoom-out-95 z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-popover-foreground text-sm shadow-md outline-hidden ring-1 ring-foreground/10 duration-150 ease-(--ease-out-strong) data-closed:animate-out data-open:animate-in data-closed:duration-100",
+						"z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-popover-foreground text-sm shadow-md outline-hidden ring-1 ring-foreground/10 transition-[opacity,scale] duration-150 ease-out-strong data-ending-style:scale-95 data-starting-style:scale-95 data-ending-style:opacity-0 data-starting-style:opacity-0 data-instant:transition-none data-ending-style:duration-100",
 						className,
 					)}
 					{...props}
diff --git a/packages/ui/src/components/questionnaire.tsx b/packages/ui/src/components/questionnaire.tsx
index 4338b6eb1..2f8e5470d 100644
--- a/packages/ui/src/components/questionnaire.tsx
+++ b/packages/ui/src/components/questionnaire.tsx
@@ -101,7 +101,7 @@ function QuestionnaireInput({ className, ...props }: React.ComponentProps<typeof
 			<QuestionnairePrimitive.Input
 				data-slot="questionnaire-input"
 				className={cn(
-					"h-8 min-h-11 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base outline-none transition-[color,box-shadow,background-color] focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 sm:min-h-0 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 dark:disabled:bg-input/80",
+					"h-9 min-h-11 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base outline-none transition-[color,box-shadow,background-color] focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 sm:min-h-0 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 dark:disabled:bg-input/80",
 					"selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground",
 					className,
 				)}
diff --git a/packages/ui/src/components/sheet.tsx b/packages/ui/src/components/sheet.tsx
index 48155b525..bedc3c602 100644
--- a/packages/ui/src/components/sheet.tsx
+++ b/packages/ui/src/components/sheet.tsx
@@ -25,7 +25,7 @@ function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
 		<SheetPrimitive.Backdrop
 			data-slot="sheet-overlay"
 			className={cn(
-				"fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs",
+				"fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 ease-out-strong data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs",
 				className,
 			)}
 			{...props}
@@ -50,7 +50,7 @@ function SheetContent({
 				data-slot="sheet-content"
 				data-side={side}
 				className={cn(
-					"fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-popover-foreground text-sm shadow-lg transition duration-300 ease-(--ease-drawer) data-[side=left]:data-ending-style:-translate-x-10 data-[side=left]:data-starting-style:-translate-x-10 data-[side=right]:data-ending-style:translate-x-10 data-[side=right]:data-starting-style:translate-x-10 data-[side=bottom]:data-ending-style:translate-y-10 data-[side=bottom]:data-starting-style:translate-y-10 data-[side=top]:data-ending-style:-translate-y-10 data-[side=top]:data-starting-style:-translate-y-10 data-[side=bottom]:inset-x-0 data-[side=top]:inset-x-0 data-[side=left]:inset-y-0 data-[side=right]:inset-y-0 data-[side=top]:top-0 data-[side=right]:right-0 data-[side=bottom]:bottom-0 data-[side=left]:left-0 data-[side=bottom]:h-auto data-[side=left]:h-full data-[side=right]:h-full data-[side=top]:h-auto data-[side=left]:w-3/4 data-[side=right]:w-3/4 data-[side=right]:border-s data-[side=left]:border-e data-[side=bottom]:border-t data-[side=top]:border-b data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-200 data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm rtl:data-[side=left]:data-ending-style:translate-x-10 rtl:data-[side=left]:data-starting-style:translate-x-10 rtl:data-[side=right]:data-ending-style:-translate-x-10 rtl:data-[side=right]:data-starting-style:-translate-x-10",
+					"fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-popover-foreground text-sm shadow-lg transition-[translate,opacity] duration-300 ease-drawer data-[side=left]:data-ending-style:-translate-x-10 data-[side=left]:data-starting-style:-translate-x-10 data-[side=right]:data-ending-style:translate-x-10 data-[side=right]:data-starting-style:translate-x-10 data-[side=bottom]:data-ending-style:translate-y-10 data-[side=bottom]:data-starting-style:translate-y-10 data-[side=top]:data-ending-style:-translate-y-10 data-[side=top]:data-starting-style:-translate-y-10 data-[side=bottom]:inset-x-0 data-[side=top]:inset-x-0 data-[side=left]:inset-y-0 data-[side=right]:inset-y-0 data-[side=top]:top-0 data-[side=right]:right-0 data-[side=bottom]:bottom-0 data-[side=left]:left-0 data-[side=bottom]:h-auto data-[side=left]:h-full data-[side=right]:h-full data-[side=top]:h-auto data-[side=left]:w-3/4 data-[side=right]:w-3/4 data-[side=right]:border-s data-[side=left]:border-e data-[side=bottom]:border-t data-[side=top]:border-b data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-200 data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm rtl:data-[side=left]:data-ending-style:translate-x-10 rtl:data-[side=left]:data-starting-style:translate-x-10 rtl:data-[side=right]:data-ending-style:-translate-x-10 rtl:data-[side=right]:data-starting-style:-translate-x-10",
 					className,
 				)}
 				{...props}
diff --git a/packages/ui/src/components/sidebar.tsx b/packages/ui/src/components/sidebar.tsx
index 50638c8b9..143ce4513 100644
--- a/packages/ui/src/components/sidebar.tsx
+++ b/packages/ui/src/components/sidebar.tsx
@@ -55,6 +55,8 @@ function SidebarProvider({
 }) {
 	const isMobile = useIsMobile();
 	const [openMobile, setOpenMobile] = React.useState(false);
+	// Keyboard toggles snap; only pointer toggles animate the collapse.
+	const [instant, setInstant] = React.useState(false);
 
 	// This is the internal state of the sidebar.
 	// We use openProp and setOpenProp for control from outside the component.
@@ -87,6 +89,7 @@ function SidebarProvider({
 
 	// Helper to toggle the sidebar.
 	const toggleSidebar = React.useCallback(() => {
+		setInstant(false);
 		return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
 	}, [isMobile, setOpen]);
 
@@ -96,6 +99,7 @@ function SidebarProvider({
 			if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
 				event.preventDefault();
 				toggleSidebar();
+				setInstant(true);
 			}
 		};
 
@@ -124,6 +128,7 @@ function SidebarProvider({
 		<SidebarContext.Provider value={contextValue}>
 			<div
 				data-slot="sidebar-wrapper"
+				data-instant={instant || undefined}
 				style={
 					{
 						"--sidebar-width": SIDEBAR_WIDTH,
@@ -206,7 +211,7 @@ function Sidebar({
 			<div
 				data-slot="sidebar-gap"
 				className={cn(
-					"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+					"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out-strong group-data-instant/sidebar-wrapper:transition-none",
 					"group-data-[collapsible=offcanvas]:w-0",
 					"group-data-[side=right]:rotate-180",
 					variant === "floating" || variant === "inset"
@@ -218,7 +223,7 @@ function Sidebar({
 				data-slot="sidebar-container"
 				data-side={side}
 				className={cn(
-					"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=right]:right-0 data-[side=left]:left-0 data-[side=right]:group-data-[collapsible=offcanvas]:-right-(--sidebar-width) data-[side=left]:group-data-[collapsible=offcanvas]:-left-(--sidebar-width) md:flex",
+					"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out-strong data-[side=right]:right-0 data-[side=left]:left-0 group-data-instant/sidebar-wrapper:transition-none data-[side=right]:group-data-[collapsible=offcanvas]:-right-(--sidebar-width) data-[side=left]:group-data-[collapsible=offcanvas]:-left-(--sidebar-width) md:flex",
 					// Adjust the padding for floating and inset variants.
 					variant === "floating" || variant === "inset"
 						? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
@@ -274,7 +279,7 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
 			onClick={toggleSidebar}
 			title="Toggle Sidebar"
 			className={cn(
-				"absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear after:absolute after:inset-s-1/2 after:inset-y-0 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
+				"absolute inset-y-0 z-20 hidden w-4 transition-[translate] duration-200 ease-out-strong after:absolute after:inset-s-1/2 after:inset-y-0 after:w-[2px] after:transition-colors hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
 				"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize rtl:in-data-[side=left]:cursor-e-resize rtl:in-data-[side=right]:cursor-w-resize",
 				"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize rtl:[[data-side=left][data-state=collapsed]_&]:cursor-w-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize rtl:[[data-side=right][data-state=collapsed]_&]:cursor-e-resize",
 				"group-data-[collapsible=offcanvas]:translate-x-0 hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:after:inset-s-full rtl:group-data-[collapsible=offcanvas]:translate-x-0",
@@ -355,7 +360,7 @@ function SidebarGroupLabel({
 		props: mergeProps<"div">(
 			{
 				className: cn(
-					"flex h-9 shrink-0 items-center rounded-md px-2 font-medium text-sidebar-foreground/70 text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 [&>svg]:size-4 [&>svg]:shrink-0",
+					"flex h-9 shrink-0 items-center rounded-md px-2 font-medium text-sidebar-foreground/70 text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity] duration-200 ease-out-strong focus-visible:ring-2 group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 group-data-instant/sidebar-wrapper:transition-none [&>svg]:size-4 [&>svg]:shrink-0",
 					className,
 				),
 			},
@@ -403,13 +408,13 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
 }
 
 const sidebarMenuButtonVariants = cva(
-	"peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-start text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pe-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0",
+	"peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-start text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] duration-200 ease-out-strong hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pe-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! group-data-instant/sidebar-wrapper:transition-none [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0",
 	{
 		variants: {
 			variant: {
 				default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
 				outline:
-					"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+					"bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
 			},
 			size: {
 				default: "h-9 text-sm",
diff --git a/packages/ui/src/components/switch.tsx b/packages/ui/src/components/switch.tsx
index d89af1261..2ba9ceaa7 100644
--- a/packages/ui/src/components/switch.tsx
+++ b/packages/ui/src/components/switch.tsx
@@ -20,7 +20,7 @@ function Switch({
 		>
 			<SwitchPrimitive.Thumb
 				data-slot="switch-thumb"
-				className="pointer-events-none block rounded-full bg-background ring-0 transition-transform ease-(--ease-out-strong) group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-unchecked:translate-x-0 rtl:group-data-[size=default]/switch:data-checked:-translate-x-[calc(100%-2px)] rtl:group-data-[size=default]/switch:data-unchecked:translate-x-0 rtl:group-data-[size=sm]/switch:data-checked:-translate-x-[calc(100%-2px)] rtl:group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-checked:bg-primary-foreground dark:data-unchecked:bg-foreground"
+				className="pointer-events-none block rounded-full bg-background ring-0 transition-transform ease-out-strong group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-unchecked:translate-x-0 rtl:group-data-[size=default]/switch:data-checked:-translate-x-[calc(100%-2px)] rtl:group-data-[size=default]/switch:data-unchecked:translate-x-0 rtl:group-data-[size=sm]/switch:data-checked:-translate-x-[calc(100%-2px)] rtl:group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-checked:bg-primary-foreground dark:data-unchecked:bg-foreground"
 			/>
 		</SwitchPrimitive.Root>
 	);
diff --git a/packages/ui/src/components/tabs.tsx b/packages/ui/src/components/tabs.tsx
index 13babf152..36e30bc54 100644
--- a/packages/ui/src/components/tabs.tsx
+++ b/packages/ui/src/components/tabs.tsx
@@ -53,7 +53,7 @@ function TabsIndicator({ className, ...props }: TabsPrimitive.Indicator.Props) {
 		<TabsPrimitive.Indicator
 			data-slot="tabs-indicator"
 			className={cn(
-				"absolute top-(--active-tab-top) left-(--active-tab-left) h-(--active-tab-height) w-(--active-tab-width) rounded-md border border-transparent bg-background shadow-sm transition-[left,top,width,height] duration-200 ease-(--ease-out-strong) dark:border-input dark:bg-input/30",
+				"absolute top-0 left-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) translate-y-(--active-tab-top) rounded-md border border-transparent bg-background shadow-sm transition-[translate,width,height] duration-200 ease-out-strong dark:border-input dark:bg-input/30",
 				className,
 			)}
 			{...props}
@@ -66,7 +66,7 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
 		<TabsPrimitive.Tab
 			data-slot="tabs-trigger"
 			className={cn(
-				"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-1.5 py-0.5 font-medium text-foreground/60 text-sm transition hover:text-foreground focus-visible:border-ring focus-visible:outline-1 focus-visible:outline-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-start]:ps-1 has-data-[icon=inline-end]:pe-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start dark:text-muted-foreground dark:hover:text-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+				"relative inline-flex h-[calc(100%-1px)] min-w-fit flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-1.5 py-0.5 font-medium text-foreground/60 text-sm transition hover:text-foreground focus-visible:border-ring focus-visible:outline-1 focus-visible:outline-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-start]:ps-1 has-data-[icon=inline-end]:pe-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start dark:text-muted-foreground dark:hover:text-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 				"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
 				"data-active:text-foreground dark:data-active:text-foreground",
 				"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-vertical/tabs:after:-inset-e-1 group-data-horizontal/tabs:after:inset-x-0 group-data-vertical/tabs:after:inset-y-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
diff --git a/packages/ui/src/components/textarea.tsx b/packages/ui/src/components/textarea.tsx
index 2d2ea2955..1b2e82307 100644
--- a/packages/ui/src/components/textarea.tsx
+++ b/packages/ui/src/components/textarea.tsx
@@ -6,7 +6,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
 		<textarea
 			data-slot="textarea"
 			className={cn(
-				"field-sizing-content flex min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-sm outline-none transition-colors placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20",
+				"field-sizing-content flex min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-sm outline-none transition-[color,background-color,border-color,box-shadow] placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20",
 				className,
 			)}
 			{...props}
diff --git a/packages/ui/src/components/toast.tsx b/packages/ui/src/components/toast.tsx
index c0eb72c3a..f1acbeb39 100644
--- a/packages/ui/src/components/toast.tsx
+++ b/packages/ui/src/components/toast.tsx
@@ -34,7 +34,7 @@ function Toast({ className, ...props }: ToastPrimitive.Root.Props) {
 			className={cn(
 				"group/toast pointer-events-auto absolute right-0 bottom-0 z-[calc(1000-var(--toast-index))] w-full origin-bottom select-none rounded-2xl border bg-popover text-popover-foreground shadow-lg outline-none will-change-transform focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
 				"[--gap:0.75rem] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))]",
-				"h-(--height) [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] [transition:transform_500ms_cubic-bezier(0.22,1,0.36,1),opacity_500ms,height_150ms]",
+				"h-(--height) [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] [transition:transform_400ms_var(--ease-out-strong),opacity_400ms_var(--ease-out-strong),height_150ms_var(--ease-out-strong)] data-swiping:transition-none data-ending-style:duration-250",
 				"after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']",
 				"data-expanded:h-(--toast-height) data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))]",
 				"data-limited:opacity-0 data-starting-style:[transform:translateY(150%)]",
@@ -59,7 +59,7 @@ function ToastContent({ className, ...props }: ToastPrimitive.Content.Props) {
 		<ToastPrimitive.Content
 			data-slot="toast-content"
 			className={cn(
-				"flex h-full items-center gap-3 overflow-hidden p-4 transition-opacity duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] data-behind:opacity-0 data-expanded:opacity-100",
+				"flex h-full items-center gap-3 overflow-hidden p-4 transition-opacity duration-250 ease-out-strong data-behind:opacity-0 data-expanded:opacity-100",
 				className,
 			)}
 			{...props}
diff --git a/packages/ui/src/components/toggle.tsx b/packages/ui/src/components/toggle.tsx
index a73fb9483..2208433c4 100644
--- a/packages/ui/src/components/toggle.tsx
+++ b/packages/ui/src/components/toggle.tsx
@@ -4,7 +4,7 @@ import { cva } from "class-variance-authority";
 import { cn } from "@reactive-resume/utils/style";
 
 const toggleVariants = cva(
-	"group/toggle inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-lg font-medium text-sm outline-none transition hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-pressed:bg-muted aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+	"group/toggle inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-lg font-medium text-sm outline-none transition hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 aria-pressed:bg-muted aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 	{
 		variants: {
 			variant: {
diff --git a/packages/ui/src/components/tooltip.tsx b/packages/ui/src/components/tooltip.tsx
index a17f4f380..836353549 100644
--- a/packages/ui/src/components/tooltip.tsx
+++ b/packages/ui/src/components/tooltip.tsx
@@ -35,7 +35,7 @@ function TooltipContent({
 				<TooltipPrimitive.Popup
 					data-slot="tooltip-content"
 					className={cn(
-						"data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:fade-in-0 data-open:zoom-in-95 data-closed:fade-out-0 data-closed:zoom-out-95 z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-background text-xs has-data-[slot=kbd]:pe-1.5 data-[state=delayed-open]:animate-in data-closed:animate-out data-open:animate-in **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm",
+						"z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-background text-xs transition-[opacity,scale] duration-150 ease-out-strong has-data-[slot=kbd]:pe-1.5 data-ending-style:scale-95 data-starting-style:scale-95 data-ending-style:opacity-0 data-starting-style:opacity-0 data-instant:transition-none data-ending-style:duration-100 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm",
 						className,
 					)}
 					{...props}
diff --git a/packages/ui/src/styles/globals.css b/packages/ui/src/styles/globals.css
index fb48900d9..b589dfca5 100644
--- a/packages/ui/src/styles/globals.css
+++ b/packages/ui/src/styles/globals.css
@@ -176,4 +176,12 @@
 		/* biome-ignore lint/complexity/noImportantStyles: required */
 		scroll-behavior: auto !important;
 	}
+
+	/* Spinners are status, not decoration: freezing them makes a loading app look hung. */
+	.animate-spin {
+		/* biome-ignore lint/complexity/noImportantStyles: required */
+		animation-duration: 1.5s !important;
+		/* biome-ignore lint/complexity/noImportantStyles: required */
+		animation-iteration-count: infinite !important;
+	}
 }