ScrollProgress reads scrollYProgress from Framer Motion's useScroll instead of polling scroll position on a timer. It smooths the value with useSpring and maps that single number onto either a pinned bar's scaleX or a circle's strokeDashoffset.

The bar variant is a motion.div with role="progressbar", origin-left, and style={{ scaleX: progress, height }}. Pinning is fixed for the page, or sticky when a container ref is passed so the indicator stays inside a scrollable panel. Width never changes; scaleX keeps the paint cheap.

useScroll yields a raw MotionValue that jumps with every wheel tick. useSpring wraps it with { stiffness: 120, damping: 24, restDelta: 0.001 } so the bar eases toward the true progress instead of stuttering. Under prefers-reduced-motion, the spring stiffens to { stiffness: 1000, damping: 100 }. It is still a spring but settles almost instantly, so the indicator keeps tracking without a visible lag.

variant="circle" maps the same spring through useTransform into strokeDashoffset = circumference * (1 − progress). Visibility is gated by raw (unsprung) progress against showAfter (default 0.05); AnimatePresence springs the button in and out (stiffness: 520, damping: 32). Click finds the nearest [data-scroll-container] or falls back to window.scrollTo.

Neither variant animates layout. The bar never changes width, and the ring updates only strokeDashoffset, never the path geometry. The spring runs on the MotionValue pipeline instead of re-rendering React each frame.

One scroll signal and one spring drive two skins: a bar that scales from the left, and a ring that fills until you click it to scroll back to the top.