@xingwangzhe/stalux 1.46.1 → 1.46.5

package/src/scripts/list-reveal.ts

@@ -4,13 +4,17 @@ const ITEM = ":scope > [data-stalux-reveal-item]";
 // never a queue long enough to keep the reader waiting for the last item.
 const MAX_CONTAINERS = 48;
 const MAX_ITEMS = 16;
-const STAGGER_MS = 45;
-const MAX_DELAY_MS = 400;
-const DURATION_MS = 380;
+// The whole unroll budget is lead-in + max delay + row duration. At the previous
+// 150 + 400 + 380 the tail alone ran 930ms after the swap, which readers report
+// as the page still moving a second later. Every number here is half of that, so
+// the same sheet reads in one motion without the wait.
+const STAGGER_MS = 22;
+const MAX_DELAY_MS = 200;
+const DURATION_MS = 190;
 // When a route cue is already moving the page body, the sheet waits for it to
 // mostly settle before unrolling. Starting both at once makes the rows wipe
 // open while the whole page is still semi-transparent, which reads as a smudge.
-const ROUTE_LEAD_IN_MS = 150;
+const ROUTE_LEAD_IN_MS = 75;
 // Strong ease-out: the row arrives fast and settles softly. The built-in
 // ease-out is too weak to read at this size.
 const EASING = "cubic-bezier(0.23, 1, 0.32, 1)";
@@ -20,6 +24,154 @@ const EASING = "cubic-bezier(0.23, 1, 0.32, 1)";
 const BLEED = "-10px";
 const UNROLL_START = `inset(${BLEED} ${BLEED} 100% ${BLEED})`;
 const UNROLL_END = `inset(${BLEED} ${BLEED} ${BLEED} ${BLEED})`;
+const UNROLL_KEYFRAMES: Keyframe[] = [
+    {
+        clipPath: UNROLL_START,
+        opacity: 0.4,
+        transform: "translate3d(0, -10px, 0)",
+    },
+    {
+        clipPath: UNROLL_END,
+        opacity: 1,
+        transform: "translate3d(0, 0, 0)",
+    },
+];
+// A swap can leave a row waiting at the start frame until it is scrolled into
+// view. Keep the bookkeeping bounded; a runaway map would pin removed nodes.
+const MAX_HELD = MAX_CONTAINERS * MAX_ITEMS;
+// A held row that never reaches the viewport would sit clipped forever if the
+// visit were abandoned before the observer ever ran. Releasing it after this
+// long is safe: an unheld row falls back to the original path, which starts the
+// wipe on its own without a flash.
+const HOLD_TIMEOUT_MS = 5000;
+
+interface Held {
+    animation: Animation;
+    stagger: number;
+    timer: ReturnType<typeof setTimeout>;
+}
+// Rows and groups are only ever queried, measured and animated, all of which
+// Element already provides. Typing them as HTMLElement forced a cast on the
+// observer's target for no gain.
+const held = new Map<Element, Held>();
+
+function canReveal(): boolean {
+    if (typeof IntersectionObserver !== "function") return false;
+    if (typeof document === "undefined") return false;
+    if (document.hidden) return false;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return false;
+    // Returning to a history entry restores what the reader already saw.
+    return document.documentElement.dataset.staluxVtPreset !== "restore";
+}
+
+function groups(): Element[] {
+    return [...document.querySelectorAll<Element>(CONTAINER)]
+        .filter(
+            (element) =>
+                // A retained shell kept its identity, so its list was already
+                // read: cueing it again would be a second animation. Contents
+                // that shell-hydration just replaced are new content and are
+                // explicitly marked as such.
+                element.hasAttribute("data-stalux-shell-fresh") ||
+                !element.closest("[data-swup-persist]"),
+        )
+        .slice(0, MAX_CONTAINERS);
+}
+
+function rows(group: Element): Element[] {
+    return [...group.querySelectorAll<Element>(ITEM)].slice(0, MAX_ITEMS);
+}
+
+/**
+ * Only a group the reader can already see is worth holding.
+ *
+ * Every held row costs a live effect on the compositor. An archive page carries
+ * one group per month, so holding all of them at swap time built hundreds of
+ * paused effects inside the swap frame — a 200-400ms task that dropped the frame
+ * the entry cue needed. Groups further down the page keep the authored visible
+ * state and start their wipe when they scroll in, which never flashed anyway.
+ */
+function nearViewport(group: Element): boolean {
+    const rect = group.getBoundingClientRect();
+    if (rect.width <= 0 || rect.height <= 0) return false;
+    const margin = window.innerHeight * 0.5;
+    return rect.top < window.innerHeight + margin && rect.bottom > -margin;
+}
+
+function staggerOf(index: number): number {
+    return Math.min(index * STAGGER_MS, MAX_DELAY_MS);
+}
+
+function leadIn(): number {
+    // A route cue leaves its preset on the document element while it runs.
+    return document.documentElement.dataset.staluxVtPreset ? ROUTE_LEAD_IN_MS : 0;
+}
+
+/**
+ * Hold every incoming row on the wipe's first frame the moment the router has
+ * its new document, before the browser paints it.
+ *
+ * Without this the swap paints the finished list for one frame, the observer
+ * fires a frame later, and the rows appear to flash, vanish, then unroll. A
+ * paused effect still paints its `backwards` fill, so priming here makes the
+ * first painted frame the *start* of the wipe: the reader only ever sees the
+ * sheet hidden, then unrolling.
+ */
+export function primeListReveal(): void {
+    if (!canReveal()) return;
+    // Rows from the document that was just replaced can never be revealed
+    // again; drop their paused effects instead of pinning detached nodes.
+    for (const [row, entry] of held) {
+        if (row.isConnected) continue;
+        held.delete(row);
+        clearTimeout(entry.timer);
+        entry.animation.cancel();
+    }
+    for (const group of groups()) {
+        // A group that is not laid out (the desktop tag cloud hides the mobile
+        // card groups, and vice versa) could never play its effect, and a group
+        // that is still off-screen must not add effects to the swap frame.
+        if (!nearViewport(group)) continue;
+        for (const [index, row] of rows(group).entries()) {
+            if (held.has(row) || held.size >= MAX_HELD) continue;
+            if (typeof row.animate !== "function") continue;
+            try {
+                const animation = row.animate(UNROLL_KEYFRAMES, {
+                    duration: DURATION_MS,
+                    delay: 0,
+                    easing: EASING,
+                    // The paused effect still paints this first frame, which is
+                    // what removes the flash.
+                    fill: "backwards",
+                });
+                animation.pause();
+                // A paused effect only ever settles by rejecting when the hold is
+                // released, and nothing awaits it yet: without a handler that is an
+                // unhandled rejection in the console. `reveal` attaches the real
+                // handler when it takes the effect over.
+                void animation.finished.catch(() => undefined);
+                const timer = setTimeout(() => {
+                    // The visit was abandoned: release the row so the authored
+                    // visible state returns rather than staying clipped.
+                    if (!held.has(row)) return;
+                    held.delete(row);
+                    animation.cancel();
+                }, HOLD_TIMEOUT_MS);
+                held.set(row, { animation, stagger: staggerOf(index), timer });
+            } catch {
+                /* An unsupported effect leaves the authored visible row. */
+            }
+        }
+    }
+}
+
+function cancelHeld(): void {
+    for (const [row, entry] of held) {
+        held.delete(row);
+        clearTimeout(entry.timer);
+        entry.animation.cancel();
+    }
+}
 
 /**
  * Rows unroll into place like paper: each one wipes open from its top edge
@@ -32,50 +184,50 @@ const UNROLL_END = `inset(${BLEED} ${BLEED} ${BLEED} ${BLEED})`;
  * clipped state can outlive the animation.
  */
 export function mountListReveal(): (() => void) | undefined {
-    if (typeof IntersectionObserver !== "function") return;
+    if (!canReveal()) return;
     const preference = window.matchMedia("(prefers-reduced-motion: reduce)");
-    if (preference.matches || document.hidden) return;
-    // Returning to a history entry restores what the reader already saw.
-    if (document.documentElement.dataset.staluxVtPreset === "restore") return;
-    const containers = [...document.querySelectorAll<HTMLElement>(CONTAINER)]
-        .filter((element) => !element.closest("[data-swup-persist]"))
-        .slice(0, MAX_CONTAINERS);
+    const containers = groups();
     if (!containers.length) return;
-    // A route cue leaves its preset on the document element while it runs.
-    const leadIn = document.documentElement.dataset.staluxVtPreset ? ROUTE_LEAD_IN_MS : 0;
 
     const active = new Set<Animation>();
-    const cancel = () => {
+    // Disposal runs on every same-document remount (page-runtime remounts on
+    // page-load). Releasing the held rows there would paint the finished list
+    // for a frame and clip it again on the next mount, which is the very flash
+    // this file removes. Held rows are released by the observer, by the timeout
+    // or by a reduced-motion switch instead.
+    const cancelActive = () => {
         for (const animation of active) animation.cancel();
         active.clear();
     };
-    const reveal = (container: HTMLElement) => {
+    const reveal = (container: Element) => {
         if (document.hidden || preference.matches) return;
-        const items = [...container.querySelectorAll<HTMLElement>(ITEM)].slice(0, MAX_ITEMS);
-        for (const [index, item] of items.entries()) {
-            if (typeof item.animate !== "function") continue;
+        const lead = leadIn();
+        for (const [index, row] of rows(container).entries()) {
+            if (typeof row.animate !== "function") continue;
+            // Prefer the effect created during the swap: it already owns the
+            // start frame, so starting it here never shows a finished row.
+            const primed = held.get(row);
+            if (primed) {
+                held.delete(row);
+                clearTimeout(primed.timer);
+            }
             try {
-                const animation = item.animate(
-                    [
-                        {
-                            clipPath: UNROLL_START,
-                            opacity: 0.4,
-                            transform: "translate3d(0, -10px, 0)",
-                        },
-                        {
-                            clipPath: UNROLL_END,
-                            opacity: 1,
-                            transform: "translate3d(0, 0, 0)",
-                        },
-                    ],
-                    {
+                const animation =
+                    primed?.animation ??
+                    row.animate(UNROLL_KEYFRAMES, {
                         duration: DURATION_MS,
-                        delay: leadIn + Math.min(index * STAGGER_MS, MAX_DELAY_MS),
+                        delay: lead + staggerOf(index),
                         easing: EASING,
                         // Hidden during the stagger delay instead of popping in.
                         fill: "backwards",
-                    },
-                );
+                    });
+                if (primed) {
+                    // The stagger is counted from now, not from the swap.
+                    primed.animation.effect?.updateTiming({
+                        delay: lead + primed.stagger,
+                    });
+                    primed.animation.play();
+                }
                 active.add(animation);
                 const release = () => {
                     active.delete(animation);
@@ -84,7 +236,8 @@ export function mountListReveal(): (() => void) | undefined {
                 };
                 void animation.finished.then(release, release);
             } catch {
-                /* An unsupported effect leaves the authored visible list. */
+                // A paused row would stay clipped forever otherwise.
+                primed?.animation.cancel();
             }
         }
     };
@@ -93,16 +246,37 @@ export function mountListReveal(): (() => void) | undefined {
             for (const entry of entries) {
                 if (!entry.isIntersecting) continue;
                 observer.unobserve(entry.target);
-                reveal(entry.target as HTMLElement);
+                reveal(entry.target);
             }
         },
         { threshold: 0.05 },
     );
     for (const container of containers) observer.observe(container);
-    preference.addEventListener("change", cancel);
+    const stopMotion = () => {
+        cancelActive();
+        // The reader asked for less motion: nothing may stay clipped.
+        cancelHeld();
+    };
+    preference.addEventListener("change", stopMotion);
     return () => {
         observer.disconnect();
-        preference.removeEventListener("change", cancel);
-        cancel();
+        preference.removeEventListener("change", stopMotion);
+        cancelActive();
     };
 }
+
+// The router dispatches this synchronously after replacing the main node and
+// before the browser paints, which is the only moment where the incoming rows
+// can be held without a visible flash. Registered once per document even when
+// both the shared layout and the article layout import this module.
+declare global {
+    interface Window {
+        __staluxListRevealPrime?: boolean;
+    }
+}
+if (typeof document !== "undefined" && typeof window !== "undefined") {
+    if (!window.__staluxListRevealPrime) {
+        window.__staluxListRevealPrime = true;
+        document.addEventListener("astro:after-swap", primeListReveal);
+    }
+}

package/src/scripts/module-motion.ts

@@ -11,7 +11,7 @@ export function mountModuleMotion(): (() => void) | undefined {
         typeof IntersectionObserver !== "function"
     )
         return;
-    const elements = [...document.querySelectorAll<HTMLElement>(SELECTOR)].slice(0, MAX_REGIONS);
+    const elements = [...document.querySelectorAll<Element>(SELECTOR)].slice(0, MAX_REGIONS);
     if (!elements.length) return;
     const active = new Set<Animation>();
     const motionPreference = window.matchMedia("(prefers-reduced-motion: reduce)");
@@ -23,7 +23,9 @@ export function mountModuleMotion(): (() => void) | undefined {
         (entries) => {
             for (const entry of entries) {
                 if (!entry.isIntersecting) continue;
-                const element = entry.target as HTMLElement;
+                // Element already covers everything used below (closest, animate),
+                // so the observer's target needs no assertion.
+                const element = entry.target;
                 observer.unobserve(element);
                 // The router owns a single bounded lead region. Do not layer an
                 // observer entry over that motion or make long comments slide.
@@ -44,7 +46,7 @@ export function mountModuleMotion(): (() => void) | undefined {
                     const animation = element.animate(
                         { opacity: [0.88, 1] },
                         {
-                            duration: 140,
+                            duration: 70,
                             easing: "cubic-bezier(0.2, 0.7, 0.2, 1)",
                         },
                     );

package/src/scripts/navigation-font.ts

@@ -16,7 +16,10 @@ function warmFont(href: string): Promise<FontFace> {
     });
     const ready = face.load();
     fonts.set(href, { face, ready });
-    if (fonts.size > MAX_FONTS) fonts.delete(fonts.keys().next().value as string);
+    if (fonts.size > MAX_FONTS) {
+        const oldest = fonts.keys().next();
+        if (!oldest.done) fonts.delete(oldest.value);
+    }
     void ready.catch(() => {
         if (fonts.get(href)?.ready === ready) fonts.delete(href);
     });

package/src/scripts/navigation.ts

@@ -38,7 +38,7 @@ registerPageLifecycle("navigation", () => {
     const navOverlay = document.querySelector<HTMLElement>("[data-ref='stalux-nav-overlay']");
     const buttonLeft = document.querySelector<HTMLElement>("[data-ref='stalux-nav-scroll-left']");
     const buttonRight = document.querySelector<HTMLElement>("[data-ref='stalux-nav-scroll-right']");
-    if (!navList || !buttonLeft || !buttonRight) return;
+    if (!(navList && buttonLeft && buttonRight)) return;
 
     const controller = new AbortController();
     const listenerOptions = { signal: controller.signal };

package/src/scripts/page-runtime.ts

@@ -12,12 +12,14 @@ interface RuntimeRegistration {
     unregister: PageDisposer;
 }
 
-interface RuntimeHost {
-    __staluxPageRuntime?: Map<string, RuntimeRegistration>;
+declare global {
+    interface Window {
+        __staluxPageRuntime?: Map<string, RuntimeRegistration>;
+    }
 }
 
 export interface PageRuntimeEnvironment {
-    host: RuntimeHost;
+    host: Pick<Window, "__staluxPageRuntime">;
     target: RuntimeTarget;
     queueTask: (callback: () => void) => void;
 }
@@ -25,7 +27,7 @@ export interface PageRuntimeEnvironment {
 function getBrowserEnvironment(): PageRuntimeEnvironment | undefined {
     if (typeof window === "undefined" || typeof document === "undefined") return undefined;
     return {
-        host: window as RuntimeHost,
+        host: window,
         target: document,
         queueTask: queueMicrotask,
     };

package/src/scripts/random-posts.ts

@@ -10,7 +10,7 @@ function shuffle<T extends object>(items: T[]): T[] {
         const j = (crypto.getRandomValues(bytes)[0] ?? 0) % (i + 1);
         const current = result[i];
         const target = result[j];
-        if (!current || !target) throw new RangeError("Shuffle index is out of bounds");
+        if (!(current && target)) throw new RangeError("Shuffle index is out of bounds");
         result[i] = target;
         result[j] = current;
     }
@@ -35,7 +35,7 @@ function render(posts: { abbrlink: string; title: string }[]) {
 export function mountRandomPosts(): (() => void) | undefined {
     const container = document.querySelector<HTMLElement>("[data-stalux-random-posts]");
     const list = container?.querySelector<HTMLElement>("#random-posts-list");
-    if (!container || !list) return;
+    if (!(container && list)) return;
     const controller = new AbortController();
     const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
     const fallback = container.dataset.loadError ?? "Failed to load posts";

package/src/scripts/route-motion.ts

@@ -37,17 +37,17 @@ interface HeadingMotion {
 // Legacy heading cues remain available to integrations. The router requests
 // one content animation; it never stacks a second animation on the heading.
 const headingMotions: Record<Exclude<RouteMotionPreset, "none">, HeadingMotion> = {
-    glide: { opacity: 0.86, duration: 100 },
-    article: { opacity: 0.86, duration: 100 },
-    enter: { opacity: 0.86, duration: 140, y: 6 },
-    up: { opacity: 0.9, duration: 120, y: -4 },
-    taxonomy: { opacity: 0.85, duration: 120 },
-    previous: { opacity: 0.9, duration: 140, x: -8 },
-    next: { opacity: 0.9, duration: 140, x: 8 },
-    panel: { opacity: 0.9, duration: 120, y: 4 },
-    home: { opacity: 0.9, duration: 120, y: 4 },
-    restore: { opacity: 0.96, duration: 80 },
-    error: { opacity: 0.9, duration: 80 },
+    glide: { opacity: 0.86, duration: 50 },
+    article: { opacity: 0.86, duration: 50 },
+    enter: { opacity: 0.86, duration: 70, y: 6 },
+    up: { opacity: 0.9, duration: 60, y: -4 },
+    taxonomy: { opacity: 0.85, duration: 60 },
+    previous: { opacity: 0.9, duration: 70, x: -8 },
+    next: { opacity: 0.9, duration: 70, x: 8 },
+    panel: { opacity: 0.9, duration: 60, y: 4 },
+    home: { opacity: 0.9, duration: 60, y: 4 },
+    restore: { opacity: 0.96, duration: 40 },
+    error: { opacity: 0.9, duration: 40 },
 };
 
 const MAIN = "main[data-stalux-route]";
@@ -55,41 +55,50 @@ const ARTICLE = "article.stalux-article";
 // Authored per page type by the theme, not inferred from layout: the article
 // body, archive list, tag cloud, post list, word list, link list, home block.
 const CONTENT = "[data-stalux-motion-content]";
+// The one node a page nominates as its cue stage. Preferred over measuring,
+// because measuring an article column forces a full layout of a document that
+// is tens of thousands of pixels tall, before it has ever been painted.
+const STAGE = "[data-stalux-motion-stage]";
 // A persist node marks the three-column article shell. Those sidebars keep
 // their identity across visits and must never travel with a route cue.
 const PERSIST = "[data-swup-persist]";
 
 interface StageMotion {
     opacity: number;
-    /** Enter offset in px. Positive y enters from below, positive x from the right. */
+    /**
+     * Enter offset in px. Positive y enters from below, positive x from the right.
+     * Zero means a pure cross-fade: the column is replaced in place.
+     */
     distance: number;
     axis: "x" | "y";
     duration: number;
 }
 
 // One entry per route kind, because the components are not interchangeable: an
-// article opens from below, the next article slides in from the side that the
-// reader is heading toward, and going back up to an index pulls away upward.
+// article opens from below and going back up to an index pulls away upward.
+//
+// Article-to-article is the exception: the reader keeps the same shell (sidebars,
+// header) and only the column changes, so the column fades in place instead of
+// travelling. Sliding a 28,000px column sideways made the whole page look like it
+// jerked, and the shell already tells the reader where they are.
 const stageMotions: Record<Exclude<RouteMotionPreset, "none">, StageMotion> = {
-    // Article-to-article keeps a lateral direction: previous/next already says
-    // which way the reading order goes, so the cue repeats that, not a fade.
-    previous: { opacity: 0, distance: -36, axis: "x", duration: 300 },
-    next: { opacity: 0, distance: 36, axis: "x", duration: 300 },
+    previous: { opacity: 0, distance: 0, axis: "x", duration: 150 },
+    next: { opacity: 0, distance: 0, axis: "x", duration: 150 },
     // Entering a different article without a reading-direction trigger.
-    article: { opacity: 0, distance: 40, axis: "y", duration: 300 },
+    article: { opacity: 0, distance: 0, axis: "y", duration: 150 },
     // Reaching an article from any list or the home block.
-    enter: { opacity: 0, distance: 56, axis: "y", duration: 340 },
-    home: { opacity: 0, distance: 48, axis: "y", duration: 320 },
+    enter: { opacity: 0, distance: 56, axis: "y", duration: 170 },
+    home: { opacity: 0, distance: 48, axis: "y", duration: 160 },
     // Leaving an article for the archive or a taxonomy index.
-    up: { opacity: 0, distance: -44, axis: "y", duration: 300 },
+    up: { opacity: 0, distance: -44, axis: "y", duration: 150 },
     // Moving between two taxonomy detail pages.
-    taxonomy: { opacity: 0, distance: 36, axis: "y", duration: 280 },
+    taxonomy: { opacity: 0, distance: 36, axis: "y", duration: 140 },
     // About / links / words: single-panel pages.
-    panel: { opacity: 0, distance: 44, axis: "y", duration: 300 },
-    glide: { opacity: 0, distance: 40, axis: "y", duration: 280 },
+    panel: { opacity: 0, distance: 44, axis: "y", duration: 150 },
+    glide: { opacity: 0, distance: 40, axis: "y", duration: 140 },
     // History traversal restores what the reader already saw.
-    restore: { opacity: 0, distance: -36, axis: "y", duration: 280 },
-    error: { opacity: 0, distance: 28, axis: "y", duration: 260 },
+    restore: { opacity: 0, distance: -36, axis: "y", duration: 140 },
+    error: { opacity: 0, distance: 28, axis: "y", duration: 130 },
 };
 
 const laidOut = (element: HTMLElement): boolean => {
@@ -100,14 +109,17 @@ const laidOut = (element: HTMLElement): boolean => {
 /**
  * The single node a route cue may animate for the current document.
  *
- * Picks the largest authored content stage, so an article moves its own column
- * and an archive moves its list, while sidebars (persisted shells), the header
- * and the footer stay untouched. Falls back to `main` only for pages without a
- * persisted shell inside it.
+ * A page can nominate its stage; only when it does not is the largest authored
+ * content stage measured. Measuring is the fallback, not the rule: on an article
+ * the column is tens of thousands of pixels tall and measuring it forces a full
+ * layout of the incoming document at the exact moment the entry cue needs to
+ * start. Sidebars (persisted shells), the header and the footer never qualify.
  */
 export function getRouteStage(): HTMLElement | null {
     const main = document.querySelector<HTMLElement>(MAIN);
     if (!main?.isConnected) return null;
+    const authored = main.querySelector<HTMLElement>(STAGE);
+    if (authored?.isConnected && !authored.closest(PERSIST)) return authored;
     const candidates: HTMLElement[] = [];
     const article = main.querySelector<HTMLElement>(ARTICLE);
     if (article) candidates.push(article);
@@ -156,7 +168,7 @@ function completion() {
 
 /** A route transition never captures a long article, list, or off-screen heading. */
 export function getRouteMotionTarget(focus: HTMLElement | null): HTMLElement | null {
-    if (!focus?.isConnected || !focus.hasAttribute("data-stalux-motion-focus")) return null;
+    if (!(focus?.isConnected && focus.hasAttribute("data-stalux-motion-focus"))) return null;
     const visible = (element: HTMLElement, maxHeight: number) => {
         const rect = element.getBoundingClientRect();
         return (
@@ -177,17 +189,17 @@ export function getRouteMotionTarget(focus: HTMLElement | null): HTMLElement | n
 }
 
 const regionMotions: Record<Exclude<RouteMotionPreset, "none">, HeadingMotion> = {
-    glide: { opacity: 0.72, duration: 160 },
-    article: { opacity: 0.72, duration: 180, y: 4 },
-    enter: { opacity: 0.72, duration: 180, y: 6 },
-    up: { opacity: 0.8, duration: 160, y: -4 },
-    taxonomy: { opacity: 0.72, duration: 160, x: 6 },
-    previous: { opacity: 0.76, duration: 180, x: -8 },
-    next: { opacity: 0.76, duration: 180, x: 8 },
-    panel: { opacity: 0.76, duration: 160, y: 4 },
-    home: { opacity: 0.76, duration: 180, y: 4 },
+    glide: { opacity: 0.72, duration: 80 },
+    article: { opacity: 0.72, duration: 90, y: 4 },
+    enter: { opacity: 0.72, duration: 90, y: 6 },
+    up: { opacity: 0.8, duration: 80, y: -4 },
+    taxonomy: { opacity: 0.72, duration: 80, x: 6 },
+    previous: { opacity: 0.76, duration: 90, x: -8 },
+    next: { opacity: 0.76, duration: 90, x: 8 },
+    panel: { opacity: 0.76, duration: 80, y: 4 },
+    home: { opacity: 0.76, duration: 90, y: 4 },
     restore: { opacity: 1, duration: 0 },
-    error: { opacity: 0.85, duration: 100 },
+    error: { opacity: 0.85, duration: 50 },
 };
 
 /** Share Swup's actual content animation with background and analytics consumers. */
@@ -281,19 +293,18 @@ export function prepareRouteMotion(event: RouteMotionEvent): RouteMotion {
                         spec.axis === "x"
                             ? `translate3d(${distance}px, 0, 0)`
                             : `translate3d(0, ${distance}px, 0)`;
-                    animation = stage.animate(
-                        {
-                            opacity: [spec.opacity, 1],
-                            transform: [from, "translate3d(0, 0, 0)"],
-                        },
-                        {
-                            duration: mobile ? Math.round(spec.duration * 0.9) : spec.duration,
-                            // Strong ease-out: quick arrival, soft settle. The
-                            // built-in ease-out is too weak to read at this size.
-                            easing: "cubic-bezier(0.23, 1, 0.32, 1)",
-                            fill: "both",
-                        },
-                    );
+                    // A zero distance is a cross-fade in place. Authoring a
+                    // translate3d(0,0,0) would put a 28,000px column on its own
+                    // compositor layer for nothing.
+                    const keyframes: PropertyIndexedKeyframes = { opacity: [spec.opacity, 1] };
+                    if (distance !== 0) keyframes.transform = [from, "translate3d(0, 0, 0)"];
+                    animation = stage.animate(keyframes, {
+                        duration: mobile ? Math.round(spec.duration * 0.9) : spec.duration,
+                        // Strong ease-out: quick arrival, soft settle. The
+                        // built-in ease-out is too weak to read at this size.
+                        easing: "cubic-bezier(0.23, 1, 0.32, 1)",
+                        fill: "both",
+                    });
                 } else {
                     const spec = options?.content ? regionMotions[preset] : headingMotions[preset];
                     const keyframes: PropertyIndexedKeyframes = { opacity: [spec.opacity, 1] };
@@ -306,7 +317,7 @@ export function prepareRouteMotion(event: RouteMotionEvent): RouteMotion {
                         ];
                     }
                     animation = target.animate(keyframes, {
-                        duration: mobile ? (options?.content ? 120 : 80) : spec.duration,
+                        duration: mobile ? (options?.content ? 60 : 40) : spec.duration,
                         easing: "cubic-bezier(0.2, 0.7, 0.2, 1)",
                         fill: "both",
                     });

package/src/scripts/route-out.ts

@@ -16,8 +16,7 @@ export async function animateRouteOut(
     const spec = getStageExit(preset);
     const stage = spec ? getRouteStage() : null;
     if (
-        !spec ||
-        !stage ||
+        !(spec && stage) ||
         signal.aborted ||
         document.hidden ||
         typeof stage.animate !== "function" ||
@@ -28,6 +27,10 @@ export async function animateRouteOut(
     const distance = mobile ? Math.round(spec.distance * 0.6) : spec.distance;
     const to =
         spec.axis === "x" ? `translate3d(${distance}px, 0, 0)` : `translate3d(0, ${distance}px, 0)`;
+    // Article-to-article has no distance: the column fades out in place, matching
+    // the entry fade, so the shell stays put and only the content disappears.
+    const keyframes: PropertyIndexedKeyframes = { opacity: [1, 0] };
+    if (distance !== 0) keyframes.transform = ["translate3d(0, 0, 0)", to];
     let animation: Animation | undefined;
     const cancel = () => {
         const active = animation;
@@ -39,18 +42,13 @@ export async function animateRouteOut(
         }
     };
     try {
-        animation = stage.animate(
-            { opacity: [1, 0], transform: ["translate3d(0, 0, 0)", to] },
-            {
-                duration: mobile
-                    ? Math.round(spec.duration * 0.62)
-                    : Math.round(spec.duration * 0.58),
-                // Strong ease-in: the outgoing document accelerates away. An exit
-                // is the one place ease-in is correct; entrances use ease-out.
-                easing: "cubic-bezier(0.4, 0, 1, 1)",
-                fill: "forwards",
-            },
-        );
+        animation = stage.animate(keyframes, {
+            duration: mobile ? Math.round(spec.duration * 0.62) : Math.round(spec.duration * 0.58),
+            // Strong ease-in: the outgoing document accelerates away. An exit
+            // is the one place ease-in is correct; entrances use ease-out.
+            easing: "cubic-bezier(0.4, 0, 1, 1)",
+            fill: "forwards",
+        });
         signal.addEventListener("abort", cancel, { once: true });
         await animation.finished;
         // The stage node survives the swap, so this filled effect is what holds