32 lines
731 B
TypeScript
32 lines
731 B
TypeScript
"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"
|
|
/>
|
|
);
|
|
}
|