Thread Timeline

1"use client"
2 
3import * as React from "react"
4 
5import { cn } from "@/lib/utils"
6 
7export interface ThreadTimelineProps extends React.ComponentProps<"ol"> {
8  /** Where the thread head sits in the viewport, 0 at the top, 1 at the bottom. */
9  line?: number
10}
11 
12export function ThreadTimeline({
13  children,
14  className,
15  line = 0.55,
16  style,
17  ...props
18}: ThreadTimelineProps) {
19  const ref = React.useRef<HTMLOListElement>(null)
20 
21  React.useEffect(() => {
22    const list = ref.current
23    if (!list) {
24      return
25    }
26 
27    const settle = (progress: number, reached: boolean) => {
28      list.style.setProperty("--thread-progress", `${progress}`)
29      for (const item of list.querySelectorAll<HTMLElement>(
30        "[data-slot='thread-timeline-item']"
31      )) {
32        item.toggleAttribute("data-reached", reached)
33      }
34    }
35 
36    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
37      settle(1, true)
38      return
39    }
40 
41    let frame = 0
42 
43    const measure = () => {
44      const head = window.innerHeight * line
45      const rect = list.getBoundingClientRect()
46      const progress = rect.height > 0 ? (head - rect.top) / rect.height : 1
47      list.style.setProperty(
48        "--thread-progress",
49        `${Math.min(Math.max(progress, 0), 1)}`
50      )
51 
52      // Each node is measured against the same head the thread is drawn to, so
53      // a node can never light up ahead of the thread that reaches it.
54      for (const item of list.querySelectorAll<HTMLElement>(
55        "[data-slot='thread-timeline-item']"
56      )) {
57        const node = item.querySelector<HTMLElement>(
58          "[data-slot='thread-timeline-node']"
59        )
60        const box = (node ?? item).getBoundingClientRect()
61        item.toggleAttribute("data-reached", box.top + box.height / 2 <= head)
62      }
63    }
64 
65    const onScroll = () => {
66      cancelAnimationFrame(frame)
67      frame = requestAnimationFrame(measure)
68    }
69 
70    measure()
71    window.addEventListener("scroll", onScroll, { passive: true })
72    window.addEventListener("resize", onScroll, { passive: true })
73    return () => {
74      window.removeEventListener("scroll", onScroll)
75      window.removeEventListener("resize", onScroll)
76      cancelAnimationFrame(frame)
77    }
78  }, [line])
79 
80  return (
81    <ol
82      ref={ref}
83      data-slot="thread-timeline"
84      className={cn("relative", className)}
85      style={{ "--thread-progress": "0", ...style } as React.CSSProperties}
86      {...props}
87    >
88// … truncated