51:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 52:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 53:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 54:T1db1,"use client"; import { useEffect, useRef, useState } from "react"; import { CatalogScrollHint } from "@/components/catalog/catalog-scroll-hint"; import { resolveScrollRoot } from "@/lib/catalog/resolve-scroll-root"; import { waitForScrollerReady } from "@/lib/scroll/scroller-ready"; import { ScrollChapters, type ScrollChaptersChapter, } from "@/components/sora-ui/effects/scroll-chapters"; // Same copy, colors, and per-chapter panel opt-in/opt-out as the reference // implementation at apps/www/app/demo/gsap-scrollbar-demo.tsx (kept // untouched, hand-rolled) — this is that same design, wired through the // generalized `ScrollChapters` primitive instead. function ChapterBody({ body, heading, index, }: { body: string; heading: string; index: number; }) { return (

{String(index + 1).padStart(2, "0")} {/* No color class here — inherits from whatever `className` the consumer passes to `` on the root section. */}

{heading}

{body}

); } function CodePreview({ code }: { code: string }) { return (

      {/* Inherits from the panel wrapper's own `text-[#f6f4f2]` (see
          `classNames.panel` below) — the panel's background is always
          dark regardless of the section's `className`, so its text
          color is pinned there instead of following the section. */}
      {code}

); } // Not every panel has to be a code snippet — same as the original // anime.js reference, which mixes `

` panels with a bundle-size
// bar chart and a sponsor badge. A row of ticks was tried here first, but
// sitting right above the track's own tick-marked ruler it just read as
// a second, redundant scrollbar — a plain stat badge (matching the
// original's sponsor/funding-level pill) reads cleaner.
function StatRow({ label, value }: { label: string; value: string }) {
  return (
    
      
      
        {label}
      
      {value}
    
  );
}

// Same taller shape as `GhostComparisonPreview` below — a raw-to-snapped
// value pair reads more concretely than a single "1 / 65" label, and
// keeps every panel from settling at the same one-line height.
function SnapStepComparisonPreview() {
  return (
    
      
      
      
      
        Every drag/click position rounds to the nearest 1/65th step before it
        ever reaches the scroll position.
      
    
  );
}

// A taller panel — a couple of stat rows plus a caption, instead of a
// single line, the same way the original's own panels vary in height
// (a five-line code block reads very differently from a one-line badge).
function GhostComparisonPreview() {
  return (
    
      
      
      
      
        Only the real cursor is ever draggable — the ghost just previews where a
        click on the track would seek to.
      
    
  );
}

const CHAPTERS: ScrollChaptersChapter[] = [
  {
    content: (
      
    ),
    id: "drag",
  },
  {
    content: (
      
    ),
    id: "sync",
    preview: (
      
    ),
  },
  {
    content: (
      
    ),
    id: "snap",
    preview: ,
  },
  {
    content: (
      
    ),
    id: "ghost",
    preview: ,
  },
  {
    content: (
      
    ),
    id: "panels",
  },
];

const TRACK_STYLE_CLASS =
  "[background-image:linear-gradient(to_right,rgb(242_242_237/18%)_1px,transparent_1px)] [background-size:1.53846%_0.5rem]";

export default function ScrollChaptersExample() {
  const rootRef = useRef(null);
  const [scroller, setScroller] = useState();

  useEffect(() => {
    const node = rootRef.current;
    if (!node) {
      return;
    }

    const resolved = resolveScrollRoot(node);

    waitForScrollerReady(resolved)
      .then(() => {
        setScroller(resolved);
      })
      .catch(() => {
        /* preview unmounted */
      });
  }, []);

  return (
    
      

      {scroller ? (
        
      ) : null}
    
  );
}
4d:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L51",null,{"registryDependencies":["@soralabs/scroll-chapters"]}]]}],["$","$L52",null,{"sourceUrl":"https://ui.soralabs.io.vn/r/demo-scroll-chapters.json","proxyUrl":"https://shadcnregistry.com/r/soralabs/demo-scroll-chapters","itemId":"@soralabs/demo-scroll-chapters"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L53",null,{"files":[{"path":"registry/demo/primitives/effects/scroll-chapters/index.tsx","content":"$54","type":"registry:ui","target":"components/sora-ui/demo/effects/scroll-chapters.tsx"}]}]]}],"$L55"]}]

Scroll Chapters Demo

Installation

Files

components

Styles