Scroll Progress

1"use client"
2 
3import * as React from "react"
4import {
5  AnimatePresence,
6  motion,
7  useReducedMotion,
8  useScroll,
9  useSpring,
10} from "motion/react"
11 
12import { cn } from "@/lib/utils"
13 
14export type ScrollProgressSection = { id: string; label: string }
15 
16const EASE_IN_OUT = [0.65, 0, 0.35, 1] as const
17const EASE_OUT = [0.22, 1, 0.36, 1] as const
18const SIZE_SPRING = { type: "spring", bounce: 0.16, duration: 0.5 } as const
19const LABEL_CROSSFADE = { duration: 0.22, ease: EASE_OUT } as const
20const LAYER_FADE = { duration: 0.24, ease: EASE_IN_OUT } as const
21 
22const useIsoLayoutEffect =
23  typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect
24 
25type Size = { width: number; height: number }
26 
27export type ScrollProgressProps = React.ComponentProps<"div"> & {
28  sections?: ScrollProgressSection[]
29  containerRef?: React.RefObject<HTMLElement | null>
30  offset?: number
31}
32 
33const ScrollProgress = ({
34  className,
35  sections = [],
36  containerRef,
37  offset = 120,
38  ...props
39}: ScrollProgressProps) => {
40  const layoutId = React.useId()
41  const reduceMotion = useReducedMotion()
42 
43  const { scrollYProgress } = useScroll(
44    containerRef ? { container: containerRef } : undefined
45  )
46  const progress = useSpring(scrollYProgress, {
47    stiffness: 120,
48    damping: 30,
49    mass: 0.3,
50  })
51 
52  const [activeId, setActiveId] = React.useState(sections[0]?.id)
53  const [open, setOpen] = React.useState(false)
54 
55  const scrollLock = React.useRef(false)
56  const scrollLockTimer = React.useRef<ReturnType<typeof setTimeout>>(undefined)
57 
58  React.useEffect(() => {
59    const scroller = containerRef?.current ?? window
60 
61    const update = () => {
62      if (scrollLock.current) return
63      const anchor =
64        (containerRef?.current?.getBoundingClientRect().top ?? 0) + offset
65      const active = sections.findLast(({ id }) => {
66        const top = document.getElementById(id)?.getBoundingClientRect().top
67        return top !== undefined && top <= anchor
68      })
69      setActiveId(active?.id ?? sections[0]?.id)
70    }
71 
72    update()
73    scroller.addEventListener("scroll", update, { passive: true })
74    window.addEventListener("resize", update)
75    return () => {
76      scroller.removeEventListener("scroll", update)
77      window.removeEventListener("resize", update)
78    }
79  }, [sections, containerRef, offset])
80 
81  const label = sections.find((s) => s.id === activeId)?.label
82 
83  const labelVersion = React.useRef(0)
84  const prevLabel = React.useRef(label)
85  if (label !== prevLabel.current) {
86// … truncated