Chapter Scrubber

1"use client";
2 
3import * as React from "react";
4import {
5  motion,
6  useMotionValue,
7  useReducedMotion,
8  useSpring,
9  useTransform,
10  type MotionValue,
11} from "motion/react";
12import { cn } from "@/lib/utils";
13 
14export interface Chapter {
15  /** Stable, unique identifier for the chapter. */
16  id: string;
17  /** Bold heading shown at the top of the preview card. */
18  title: string;
19  /** Supporting copy shown under the title (clamped to three lines). */
20  description?: React.ReactNode;
21  /** Small muted label rendered above the title (e.g. a timestamp or step no.). */
22  meta?: React.ReactNode;
23}
24 
25export interface ChapterScrubberProps {
26  /** Chapters rendered top-to-bottom, one uniform tick each. */
27  chapters: Chapter[];
28  /** Which side the preview card opens toward. Auto-flips near a viewport edge. Default `"right"`. */
29  side?: "left" | "right";
30  /** Length a tick reaches at the crest of the magnification, in pixels. Default `56`. */
31  peakLength?: number;
32  /** Resting length of every tick, in pixels. Keep it small. Default `14`. */
33  restLength?: number;
34  /** Height of each row in pixels; the gap between ticks. Smaller = denser. Default `10`. */
35  rowHeight?: number;
36  /** Radius of the magnification wave, in rows — how far the rise reaches from the pointer. Default `4`. */
37  radius?: number;
38  /** Marks one chapter as the persistent "current" position (e.g. where an agent is now). */
39  currentIndex?: number;
40  /** Fires when the active (hovered/focused) chapter changes. */
41  onActiveChange?: (chapter: Chapter | null, index: number) => void;
42  /** Fires when a chapter is chosen via click, Enter or Space. */
43  onSelect?: (chapter: Chapter, index: number) => void;
44  /** Accessible name for the rail. Default `"Chapters"`. */
45  label?: string;
46  className?: string;
47}
48 
49const CARD_WIDTH = 260;
50const GAP = 20;
51// Tight, near-critically-damped spring: tracks the cursor with almost no lag
52// and never overshoots — the wave feels attached to the pointer.
53const POINTER_SPRING = { stiffness: 700, damping: 52, mass: 0.5 };
54// Softer spring for the rise/settle so the wave swells and relaxes gracefully.
55const STRENGTH_SPRING = { stiffness: 260, damping: 30, mass: 0.6 };
56 
57function clamp(value: number, min: number, max: number) {
58  return Math.min(Math.max(value, min), max);
59}
60 
61// Raised-cosine bump: 1 at the crest, 0 beyond the radius, with zero slope at
62// both ends so the wave has no seams — the source of the buttery falloff.
63// … truncated