v4: the GeoCities marquee scrolls the community feed, what the site's members are doing — it crawled three canned lines, a welcome, "best viewed in Netscape Navigator" and "under construction", which said nothing of the site. The feed is a list any style may show (CommunityFeed.tsx), which GeoCities lays out along its marquee: who is online, the week's dumps, upvotes, comments and chat messages, linking to /community, its most upvoted dump, then the 12 latest things done in public, newest first, each ending on how long ago it was: a public dump posted, a public playlist created, a comment or an upvote on a public dump, someone joining and who invited them. Every name and title links to its page. A dump has one comment line and one upvote line at most, its latest, so that a thread or a popular dump doesn't fill the feed. GET /api/community/feed serves it, signed in only (community-service.ts): the events are read from the tables on each request, the week's figures are those /community already keeps, as of its last refresh. A signed-out visitor has no marquee. CommunityFeedProvider holds the feed around every page, so that it outlives the header each page renders anew, fetches it only while a component shows it, and fetches it again two seconds after the socket last told of a dump, a comment, a vote, a playlist, a rename, a deletion or a reconnection: the socket's messages don't carry a feed's lines, and the server's query stays the one place that decides what the feed holds. Someone joining comes with no message, and shows at the next of those. The crawl goes at 50 pixels a second however much the feed holds, Marquee.tsx measuring one copy for the stylesheet to work the loop's length out from, where a fixed 36 seconds would have sped up with every line. A loop shows what the feed held when it began: text that changed mid-crawl would jump, so what came meanwhile waits for the next loop, which also brings the times up to date. The next page's marquee carries on from where the last one's had got to, rather than from the start. The marquee was hidden from assistive technology as decoration; its first copy is now a labelled list of links, the second, which the seamless loop needs, hidden and out of the tab order. A link that takes the focus stops the crawl and the line scrolls to it, the pointer pauses it as before, and with reduced motion the line shows once, still, follows the feed as it changes and scrolls by hand. The sentences a notification also says, "posted", "upvoted", "commented on", share its translations. The tests' DOM gets an AnimationEvent before React loads (src/test/before-react.ts): finding none, React listened for the animation events under their WebKit names, and a test's "animationiteration" reached no handler.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/components/layout/Marquee.tsx

@@ -1,40 +1,128 @@
 /**
- * Renders the GeoCities style's marquee: a line of welcome that crawls across
+ * Renders the GeoCities style's marquee: the community feed crawling across
  * the page under the header, as a `<marquee>` did on a homepage of that era.
- * `AppHeader` renders it on every page, and it draws nothing in any other
- * style.
+ * `AppHeader` renders it on every page. It draws nothing in any other style,
+ * nor for a visitor, the feed being for signed-in users.
  *
  * @module
  */
 
-import { Trans } from "@lingui/react/macro";
+import { useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import type { CommunityFeed as CommunityFeedData } from "../../../shared/community.ts";
+import type { OnlineUser } from "../../../shared/ws.ts";
+import { useAuth } from "../../hooks/auth/useAuth.ts";
+import { useCommunityFeed } from "../../hooks/social/useCommunityFeed.ts";
 import { useTheme } from "../../hooks/theme/useTheme.ts";
-import { SITE_NAME } from "../../hooks/shared/useDocumentTitle.ts";
+import { useWSPresence } from "../../hooks/ws/useWS.ts";
+import { CommunityFeed } from "../social/CommunityFeed.tsx";
+
+const REDUCED_MOTION = "(prefers-reduced-motion: reduce)";
+
+function onMotionChange(callback: () => void): () => void {
+  const query = matchMedia(REDUCED_MOTION);
+  query.addEventListener("change", callback);
+  return () => query.removeEventListener("change", callback);
+}
+
+// When the crawl began its current loop. It is kept out of the component,
+// which every page mounts anew with its header: the next page's marquee
+// carries on from where the last one's had got to, rather than from the
+// start.
+let loopStart: number | undefined;
+
+/** What one loop of the crawl shows, from its start to its end. */
+interface Loop {
+  feed: CommunityFeedData;
+  online: OnlineUser[];
+  /** Counts the loops, and keys the track: a new loop is a new animation. */
+  turn: number;
+}
 
 /**
- * Renders the banner's text twice, side by side: geocities.css slides the
- * pair left by half its width, so the second copy arrives where the first
- * began and the loop has no seam. It is decoration, hidden from assistive
- * technology, and stands still for a reader who asked for reduced motion.
+ * Renders the feed twice, side by side: geocities.css slides the pair left by
+ * the width of one, so the second copy arrives where the first began and the
+ * loop has no seam. The second copy is hidden from assistive technology and
+ * from the Tab key.
+ *
+ * A loop shows what the feed held when it began. Text that changed mid-crawl
+ * would jump, the track's width being what the slide is measured by, so what
+ * came meanwhile waits for the next loop, which also brings the lines' times
+ * up to date. The crawl's speed is the style's: this sets `--marquee-length`,
+ * one copy's width in pixels, from which the stylesheet works out how long a
+ * loop lasts.
+ *
+ * For a reader who asked for reduced motion nothing moves or repeats: the
+ * line shows once, and follows the feed as it changes.
  */
-export function Marquee(): React.JSX.Element | null {
-  const { style } = useTheme();
-  if (style !== "geocities") return null;
-
-  const line = (
-    <span>
-      ✦ <Trans>Welcome to {SITE_NAME}!</Trans> ✦{" "}
-      <Trans>Best viewed in Netscape Navigator at 800×600</Trans> ✦{" "}
-      <Trans>This page is under construction</Trans> ✦
-    </span>
+function FeedMarquee(): React.JSX.Element {
+  const feed = useCommunityFeed();
+  const { onlineUsers: online } = useWSPresence();
+  const still = useSyncExternalStore(
+    onMotionChange,
+    () => matchMedia(REDUCED_MOTION).matches,
   );
+  const [loop, setLoop] = useState<Loop | null>(null);
+  if (!loop && feed) setLoop({ feed, online, turn: 0 });
+  const shown = still ? feed && { feed, online } : loop;
+
+  const trackRef = useRef<HTMLDivElement>(null);
+  useLayoutEffect(() => {
+    const track = trackRef.current;
+    const length = track?.firstElementChild?.getBoundingClientRect().width;
+    if (!track || !length) return;
+    track.style.setProperty("--marquee-length", String(Math.round(length)));
+    loopStart ??= performance.now();
+    // A negative delay starts the animation that far in.
+    track.style.animationDelay = `${(loopStart - performance.now()) / 1000}s`;
+  }, [loop?.turn, still]);
 
   return (
-    <div className="site-marquee" aria-hidden="true">
-      <div className="site-marquee-track">
-        {line}
-        {line}
-      </div>
+    <div
+      className="site-marquee"
+      // A focused link stops the crawl, and the browser scrolls the line to
+      // show it: the line goes back to its start once the focus has left.
+      onBlur={(e) => {
+        if (!e.currentTarget.contains(e.relatedTarget)) {
+          e.currentTarget.scrollLeft = 0;
+        }
+      }}
+    >
+      {shown && (
+        <div
+          key={loop?.turn}
+          ref={trackRef}
+          className="site-marquee-track"
+          onAnimationIteration={(e) => {
+            // Not a child's animation ending a round of its own.
+            if (e.target !== e.currentTarget || !feed || !loop) return;
+            loopStart = performance.now();
+            setLoop({ feed, online, turn: loop.turn + 1 });
+          }}
+        >
+          <CommunityFeed feed={shown.feed} online={shown.online} />
+          {!still && (
+            <div aria-hidden="true">
+              <CommunityFeed
+                feed={shown.feed}
+                online={shown.online}
+                tabIndex={-1}
+              />
+            </div>
+          )}
+        </div>
+      )}
     </div>
   );
 }
+
+/**
+ * Renders the marquee for a signed-in user in the GeoCities style, an empty
+ * band until the feed is loaded, so that the page under it doesn't move when
+ * it comes.
+ */
+export function Marquee(): React.JSX.Element | null {
+  const { style } = useTheme();
+  const { user } = useAuth();
+  if (style !== "geocities" || !user) return null;
+  return <FeedMarquee />;
+}