components/motion/reading-progress.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { motion, useReducedMotion, useScroll, useSpring } from "motion/react";
+
+/**
+ * 页面顶部阅读进度条。
+ *
+ * 使用 motion 的 `useScroll` + `useSpring`：滚动位置映射为宽度百分比，
+ * 经弹簧平滑后呈现，避免直接跟随时产生的抖动。
+ */
+export function ReadingProgress() {
+	const shouldReduceMotion = useReducedMotion();
+	const { scrollYProgress } = useScroll();
+	const scaleX = useSpring(scrollYProgress, {
+		stiffness: 220,
+		damping: 40,
+		restDelta: 0.001,
+	});
+
+	if (shouldReduceMotion) {
+		return null;
+	}
+
+	return (
+		<motion.div
+			aria-hidden="true"
+			style={{ scaleX }}
+			className="fixed inset-x-0 top-0 z-50 h-[2px] origin-left bg-brand-green"
+		/>
+	);
+}