Scroll Chapters Demo

1"use client";
2 
3import { useEffect, useRef, useState } from "react";
4import { CatalogScrollHint } from "@/components/catalog/catalog-scroll-hint";
5import { resolveScrollRoot } from "@/lib/catalog/resolve-scroll-root";
6import { waitForScrollerReady } from "@/lib/scroll/scroller-ready";
7import {
8  ScrollChapters,
9  type ScrollChaptersChapter,
10} from "@/components/sora-ui/effects/scroll-chapters";
11 
12// Same copy, colors, and per-chapter panel opt-in/opt-out as the reference
13// implementation at apps/www/app/demo/gsap-scrollbar-demo.tsx (kept
14// untouched, hand-rolled) — this is that same design, wired through the
15// generalized `ScrollChapters` primitive instead.
16 
17function ChapterBody({
18  body,
19  heading,
20  index,
21}: {
22  body: string;
23  heading: string;
24  index: number;
25}) {
26  return (
27    <div className="flex h-full flex-col justify-center gap-4 border-current/10 border-t px-6 py-16 first:border-t-0 md:px-16">
28      <span className="font-mono text-[#ff4433] text-sm tracking-wide">
29        {String(index + 1).padStart(2, "0")}
30      </span>
31      {/* No color class here — inherits from whatever `className` the
32          consumer passes to `<ScrollChapters>` on the root section. */}
33      <h3 className="m-0 font-semibold text-[clamp(2rem,5vw,3.5rem)] leading-[1.05] tracking-[-0.02em]">
34        {heading}
35      </h3>
36      <p className="m-0 max-w-[42rem] text-[1.05rem] leading-[1.6] opacity-75">
37        {body}
38      </p>
39    </div>
40  );
41}
42 
43function CodePreview({ code }: { code: string }) {
44  return (
45    <pre className="m-0 overflow-x-auto whitespace-pre-wrap leading-[1.3]">
46      {/* Inherits from the panel wrapper's own `text-[#f6f4f2]` (see
47          `classNames.panel` below) — the panel's background is always
48          dark regardless of the section's `className`, so its text
49          color is pinned there instead of following the section. */}
50      <code className="font-mono text-[0.75rem]">{code}</code>
51    </pre>
52  );
53}
54 
55// Not every panel has to be a code snippet — same as the original
56// anime.js reference, which mixes `<pre><code>` panels with a bundle-size
57// bar chart and a sponsor badge. A row of ticks was tried here first, but
58// sitting right above the track's own tick-marked ruler it just read as
59// a second, redundant scrollbar — a plain stat badge (matching the
60// original's sponsor/funding-level pill) reads cleaner.
61function StatRow({ label, value }: { label: string; value: string }) {
62  return (
63// … truncated