Blocks

import { ReadingProgressBar } from "@supertype.ai/foundations/essay";

export default function ArticleLayout({ children }) {
  return (
    <>
      {/* Fixed to the viewport. One per page, above your header. */}
      <ReadingProgressBar />
      {children}
    </>
  );
}

import {
  EssayHeader,
  EssayLayout,
  EssaySection,
  EssayPullQuote,
  EssayFigure,
  EssayDocument,
  createEssay,
} from "@supertype.ai/foundations/essay";

// Sections as data. The margin index is derived from them, so renaming a
// heading updates its rail link automatically.
<EssayDocument
  eyebrow="Engineering"
  title="What we learned shipping to forty workspaces"
  sections={[{ heading: "The queue", body: "Three months, one migration." }]}
/>;

// createEssay binds your own motion and decoration components once. Call it at
// module scope: each call defines new component types, and calling it during a
// render would remount the tree on every pass.
const { EssayHeader: Decorated } = createEssay({ Reveal, Glow });

"use client";

import {
  useScrollSpy,
  useReadingProgress,
} from "@supertype.ai/foundations/essay";

export function MyRail({ ids }: { ids: string[] }) {
  // Returns the id of the topmost heading on screen. The hook keys on the
  // joined ids, so building the array inline each render is fine.
  const active = useScrollSpy(ids);

  // Returns 0 to 1. All callers on a page share a single scroll listener.
  const progress = useReadingProgress();

  return <p>{active} · {Math.round(progress * 100)}%</p>;
}