Add pretext experiment to site

Author: nwthomas

app/components/Navbar.tsx

@@ -21,6 +21,7 @@ export function Navbar() {
   const isBookmarksPage = pathname === "/bookmarks";
   const isBooksPage = pathname === "/books";
   const isWritingPage = pathname === "/writing";
+  const isScatterPage = pathname === "/scatter";
   const isBlogPage = postsJson.posts.find((post: Post) => `/${post.id}` === pathname.split("#")[0]);
 
   let dateText: ReactNode | null = null;
@@ -46,6 +47,16 @@ export function Navbar() {
     titleText = <h1>Books</h1>;
   } else if (isWritingPage) {
     titleText = <h1>Writing</h1>;
+  } else if (isScatterPage) {
+    titleText = null;
+    showThemeSwitch = false;
+    subtitleText = (
+      <p className="text-sm text-gray-500">
+        <Link aria-label="Link to Nathan's home page" href="/">
+          go back
+        </Link>
+      </p>
+    );
   } else if (isBlogPage) {
     const writingTitleWithId = `${isBlogPage.title} [#${isBlogPage.id}]`;
     titleText = getHeading(writingTitleWithId, HeadingLevel.H1);

app/components/ScatterText.tsx

@@ -0,0 +1,233 @@
+"use client";
+
+import { HAMLET_ACT_1 } from "@/app/scatter/content";
+import { layoutWithLines, prepareWithSegments } from "@chenglou/pretext";
+import { type CSSProperties, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+
+const graphemeSegmenter =
+  typeof Intl !== "undefined" && "Segmenter" in Intl
+    ? new Intl.Segmenter(undefined, { granularity: "grapheme" })
+    : null;
+
+function splitGraphemes(text: string): string[] {
+  if (!graphemeSegmenter) {
+    return [...text];
+  }
+  return [...graphemeSegmenter.segment(text)].map((s) => s.segment);
+}
+
+const INFLUENCE_RADIUS = 140;
+const PUSH_STRENGTH = 28;
+const EASE = 0.22;
+
+type LineLayout = {
+  lines: { text: string }[];
+  lineHeightPx: number;
+};
+
+function usePrefersReducedMotion(): boolean {
+  const [reduced, setReduced] = useState(false);
+
+  useEffect(() => {
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const update = () => setReduced(mq.matches);
+    update();
+    mq.addEventListener("change", update);
+    return () => mq.removeEventListener("change", update);
+  }, []);
+
+  return reduced;
+}
+
+export function ScatterText() {
+  const measureRef = useRef<HTMLDivElement>(null);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const [layout, setLayout] = useState<LineLayout | null>(null);
+  const reducedMotion = usePrefersReducedMotion();
+
+  const restCentersRef = useRef<{ x: number; y: number }[]>([]);
+  const curRef = useRef<{ x: number; y: number }[]>([]);
+  const mouseRef = useRef<{ x: number; y: number; active: boolean }>({ x: 0, y: 0, active: false });
+  const rafRef = useRef(0);
+
+  const lineGraphemes = useMemo(() => {
+    if (!layout) return null;
+    return layout.lines.map((line) => {
+      const raw = line.text || "\u00a0";
+      const parts = splitGraphemes(raw);
+      return parts.length > 0 ? parts : ["\u00a0"];
+    });
+  }, [layout]);
+
+  const captureRestPositions = useCallback(() => {
+    const root = rootRef.current;
+    if (!root) return;
+
+    const spans = root.querySelectorAll<HTMLElement>("[data-scatter-glyph]");
+    const n = spans.length;
+    if (n === 0) return;
+
+    for (let i = 0; i < n; i++) {
+      spans[i].style.transform = "translate(0px, 0px)";
+    }
+    void root.offsetHeight;
+
+    const next: { x: number; y: number }[] = [];
+    for (let i = 0; i < n; i++) {
+      const r = spans[i].getBoundingClientRect();
+      next.push({ x: r.left + r.width / 2, y: r.top + r.height / 2 });
+    }
+    restCentersRef.current = next;
+    curRef.current = Array.from({ length: n }, () => ({ x: 0, y: 0 }));
+  }, []);
+
+  useLayoutEffect(() => {
+    const el = measureRef.current;
+    if (!el) return;
+
+    function measure() {
+      const node = measureRef.current;
+      if (!node) return;
+      const width = node.clientWidth;
+      if (width <= 0) return;
+
+      const cs = getComputedStyle(node);
+      const font = cs.font;
+      const fontSize = parseFloat(cs.fontSize) || 16;
+      const parsedLineHeight = parseFloat(cs.lineHeight);
+      const lineHeightPx =
+        Number.isFinite(parsedLineHeight) && !cs.lineHeight.includes("%") ? parsedLineHeight : fontSize * 1.45;
+
+      const prepared = prepareWithSegments(HAMLET_ACT_1, font, { whiteSpace: "pre-wrap" });
+      const { lines } = layoutWithLines(prepared, width, lineHeightPx);
+      setLayout({ lines, lineHeightPx });
+    }
+
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
+  useLayoutEffect(() => {
+    if (!layout || reducedMotion) return;
+    captureRestPositions();
+  }, [layout, reducedMotion, captureRestPositions]);
+
+  useEffect(() => {
+    if (!layout || reducedMotion) return;
+
+    const onScroll = () => {
+      captureRestPositions();
+    };
+
+    window.addEventListener("scroll", onScroll, true);
+    window.addEventListener("resize", captureRestPositions);
+    return () => {
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", captureRestPositions);
+    };
+  }, [layout, reducedMotion, captureRestPositions]);
+
+  useEffect(() => {
+    if (!layout || reducedMotion) return;
+
+    function tick() {
+      const root = rootRef.current;
+      if (!root) {
+        rafRef.current = requestAnimationFrame(tick);
+        return;
+      }
+
+      const spans = root.querySelectorAll<HTMLElement>("[data-scatter-glyph]");
+      const n = spans.length;
+      const centers = restCentersRef.current;
+      const cur = curRef.current;
+      const { x: mx, y: my, active } = mouseRef.current;
+
+      while (cur.length < n) {
+        cur.push({ x: 0, y: 0 });
+      }
+
+      for (let i = 0; i < n; i++) {
+        const c = centers[i];
+        let tx = 0;
+        let ty = 0;
+        if (active && c) {
+          const dx = c.x - mx;
+          const dy = c.y - my;
+          const d = Math.hypot(dx, dy);
+          if (d > 0.5) {
+            const influence = Math.max(0, 1 - d / INFLUENCE_RADIUS);
+            const f = influence * PUSH_STRENGTH;
+            tx = (dx / d) * f;
+            ty = (dy / d) * f;
+          }
+        }
+
+        const p = cur[i] ?? { x: 0, y: 0 };
+        p.x += (tx - p.x) * EASE;
+        p.y += (ty - p.y) * EASE;
+        cur[i] = p;
+
+        spans[i].style.transform = `translate(${p.x.toFixed(2)}px, ${p.y.toFixed(2)}px)`;
+      }
+
+      rafRef.current = requestAnimationFrame(tick);
+    }
+
+    rafRef.current = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(rafRef.current);
+  }, [layout, reducedMotion]);
+
+  const onPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (reducedMotion) return;
+    mouseRef.current = { x: e.clientX, y: e.clientY, active: true };
+  };
+
+  const onPointerLeave = () => {
+    mouseRef.current = { ...mouseRef.current, active: false };
+  };
+
+  return (
+    <div className="w-full min-w-0">
+      <p className="sr-only">{HAMLET_ACT_1}</p>
+      <div
+        ref={measureRef}
+        className="font-sans text-lg leading-relaxed text-foreground invisible h-0 w-full overflow-hidden pointer-events-none"
+        aria-hidden
+      >
+        &nbsp;
+      </div>
+      <div
+        ref={rootRef}
+        className="whitespace-pre-wrap font-sans text-lg leading-relaxed text-foreground select-none"
+        onPointerMove={onPointerMove}
+        onPointerLeave={onPointerLeave}
+        aria-hidden
+      >
+        {layout?.lines.map((_, lineIndex) => {
+          const glyphs = lineGraphemes?.[lineIndex] ?? ["\u00a0"];
+          return (
+            <div
+              key={lineIndex}
+              className="flex w-full flex-nowrap items-baseline"
+              style={{ minHeight: layout.lineHeightPx } as CSSProperties}
+            >
+              {glyphs.map((g, j) => (
+                <span
+                  key={`${lineIndex}-${j}`}
+                  data-scatter-glyph
+                  className="inline-block shrink-0 will-change-transform"
+                  style={reducedMotion ? { transform: "none" } : undefined}
+                >
+                  {g}
+                </span>
+              ))}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

app/scatter/content.ts

@@ -0,0 +1,2 @@
+export const HAMLET_ACT_1 =
+  "Who’s there? Nay, answer me. Stand and unfold yourself. Long live the King! Barnardo? He. You come most carefully upon your hour. ’Tis now struck twelve. Get thee to bed, Francisco. For this relief much thanks. ’Tis bitter cold, And I am sick at heart. Have you had quiet guard? Not a mouse stirring. Well, good night. If you do meet Horatio and Marcellus, The rivals of my watch, bid them make haste. I think I hear them. Stand, ho! Who is there? Friends to this ground. And liegemen to the Dane. Give you good night. O, farewell, honest soldier, who hath reliev’d you? Barnardo has my place. Give you good-night. Holla, Barnardo! Say, what, is Horatio there? A piece of him. Welcome, Horatio. Welcome, good Marcellus. What, has this thing appear’d again tonight? I have seen nothing. Horatio says ’tis but our fantasy, And will not let belief take hold of him Touching this dreaded sight, twice seen of us. Therefore I have entreated him along With us to watch the minutes of this night, That if again this apparition come He may approve our eyes and speak to it. Tush, tush, ’twill not appear. Sit down awhile, And let us once again assail your ears, That are so fortified against our story, What we two nights have seen. Well, sit we down, And let us hear Barnardo speak of this. Last night of all, When yond same star that’s westward from the pole, Had made his course t’illume that part of heaven Where now it burns, Marcellus and myself, The bell then beating one— Peace, break thee off. Look where it comes again. In the same figure, like the King that’s dead. Thou art a scholar; speak to it, Horatio. Looks it not like the King? Mark it, Horatio. Most like. It harrows me with fear and wonder. It would be spoke to. Question it, Horatio. What art thou that usurp’st this time of night, Together with that fair and warlike form In which the majesty of buried Denmark Did sometimes march? By heaven I charge thee speak. It is offended. See, it stalks away. Stay! speak, speak! I charge thee speak! ’Tis gone, and will not answer. How now, Horatio! You tremble and look pale. Is not this something more than fantasy? What think you on’t? Before my God, I might not this believe Without the sensible and true avouch Of mine own eyes. Is it not like the King? As thou art to thyself: Such was the very armour he had on When he th’ambitious Norway combated; So frown’d he once, when in an angry parle He smote the sledded Polacks on the ice. ’Tis strange. Thus twice before, and jump at this dead hour, With martial stalk hath he gone by our watch. In what particular thought to work I know not; But in the gross and scope of my opinion, This bodes some strange eruption to our state. Good now, sit down, and tell me, he that knows, Why this same strict and most observant watch So nightly toils the subject of the land, And why such daily cast of brazen cannon And foreign mart for implements of war; Why such impress of shipwrights, whose sore task Does not divide the Sunday from the week. What might be toward, that this sweaty haste Doth make the night joint-labourer with the day: Who is’t that can inform me? That can I; At least, the whisper goes so. Our last King, Whose image even but now appear’d to us, Was, as you know, by Fortinbras of Norway, Thereto prick’d on by a most emulate pride, Dar’d to the combat; in which our valiant Hamlet, For so this side of our known world esteem’d him, Did slay this Fortinbras; who by a seal’d compact, Well ratified by law and heraldry, Did forfeit, with his life, all those his lands Which he stood seiz’d of, to the conqueror; Against the which, a moiety competent Was gaged by our King; which had return’d To the inheritance of Fortinbras, Had he been vanquisher; as by the same cov’nant And carriage of the article design’d, His fell to Hamlet." as const;

app/scatter/page.tsx

@@ -0,0 +1,15 @@
+import type { Metadata } from "next";
+import { ScatterText } from "../components/ScatterText";
+
+export const metadata: Metadata = {
+  title: "Scatter",
+  description: "Hamlet Act I laid out with Pretext; characters scatter from the cursor on hover.",
+};
+
+export default function ScatterPage() {
+  return (
+    <section className="w-full max-w-4xl mx-5">
+      <ScatterText />
+    </section>
+  );
+}

bun.lock

@@ -5,6 +5,7 @@ const nextConfig = {
   // NextJS generic configurations
   pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
   reactStrictMode: true,
+  transpilePackages: ["@chenglou/pretext"],
   turbopack: [],
   images: {
     qualities: [75, 100],

next.config.js

@@ -23,6 +23,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "@chenglou/pretext": "0.0.2",
     "@mdx-js/loader": "3.1.1",
     "@mdx-js/react": "3.1.1",
     "@next/mdx": "16.2.0",
@@ -40,8 +41,8 @@
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "react-redux": "9.2.0",
-    "redux": "5.0.1",
     "redis": "5.11.0",
+    "redux": "5.0.1",
     "typescript": "5.9.3"
   },
   "devDependencies": {

package.json

@@ -9,6 +9,7 @@
     "esModuleInterop": true,
     "module": "esnext",
     "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "react-jsx",