Scroll Progress

1"use client"
2 
3import {
4  motion,
5  type SpringOptions,
6  useScroll,
7  useSpring,
8} from "motion/react"
9import type { RefObject } from "react"
10 
11import { cn } from "@/lib/utils"
12 
13export type ScrollProgressProps = {
14  className?: string
15  springOptions?: SpringOptions
16  containerRef?: RefObject<HTMLDivElement | null>
17}
18 
19const DEFAULT_SPRING_OPTIONS: SpringOptions = {
20  stiffness: 200,
21  damping: 50,
22  restDelta: 0.001,
23}
24 
25export function ScrollProgress({
26  className,
27  springOptions,
28  containerRef,
29}: ScrollProgressProps) {
30  const { scrollYProgress } = useScroll({
31    container: containerRef,
32  })
33 
34  const scaleX = useSpring(scrollYProgress, {
35    ...DEFAULT_SPRING_OPTIONS,
36    ...(springOptions ?? {}),
37  })
38 
39  return (
40    <motion.div
41      className={cn("inset-x-0 top-0 h-1 origin-left", className)}
42      style={{
43        scaleX,
44      }}
45    />
46  )
47}