@struq/skill 0.4.3 → 0.5.1

package/skills/struq/blocks/kit/quiet/Close.tsx

@@ -0,0 +1,73 @@
+"use client";
+// components/struq/kit/quiet/Close.tsx (Struq recipe)
+// The page's last call: one line of type at the sheet's moment size from the grid's first column, and one link at the
+// far end of the line under it, so the eye crosses the page once, from the big line to the small way out. An optional
+// hairline frame around the line is the frame motif's last echo; an optional caption sits at the start of the link's
+// line, a label in the margin columns beside the line.
+//
+// <Close line="Kom kijken in de werkplaats." accent="werkplaats" link={{ href: "/contact", label: "Maak een afspraak" }}
+//   caption="Open op zaterdag, 10 tot 16 uur" frame />
+//
+// Props
+// - line: the closing sentence, plain text, short (it sets in two or three lines at moment size).
+// - accent: the site's one accent word, again: where it first stands in the line it is set in the pairing's italic
+//   accent face (--face-accent), as in the opening and the Statement (../accent). A word the line does not hold
+//   changes nothing.
+// - link: { href, label }, the one way out. Rendered as a plain <a>; wrap your own Link around it if you route.
+// - frame: draws a hairline from --line around the line, one gutter inside it. Use it only when the site's motif is the
+//   frame (it echoes the hero's or the centerpiece's frame).
+// - caption: small, at the start of the link's line. label: small, beside the line in the margin columns.
+// - className: on the root, for example "scene-inverse" or "scene-field".
+//
+// Mounting: the last section before the footer. The root carries data-scene="close" and data-energy="1".
+// Motion: it enters once. The line's rows rise through their masks (SplitHeadline), the caption and the link follow
+// (Reveal). No pin, no scrub, no hover motion: the link is underlined at rest and stays so. Reduced motion: a short
+// fade. Without scripts: the composed scene. Phones: the line, the label, then the link with the caption under it.
+import { withAccent } from "../accent";
+import { Reveal } from "../Reveal";
+import { SplitHeadline } from "../SplitHeadline";
+import { LABEL, SCENE_SPACE, SHEET_GRID } from "./sheet";
+
+type Props = {
+  line: string;
+  accent?: string;
+  link: { href: string; label: string };
+  frame?: boolean;
+  caption?: string;
+  label?: string;
+  className?: string;
+};
+
+export function Close({ line, accent, link, frame = false, caption, label, className = "" }: Props) {
+  return (
+    <section data-scene="close" data-energy="1" className={`text-ink ${SCENE_SPACE} ${className}`}>
+      <div className={`items-start gap-y-10 md:items-baseline md:gap-y-20 ${SHEET_GRID}`}>
+        {/* The frame's inset is in the line's own em, so it holds the mask's room for accents and descenders at any
+            size and the hairline never crosses a letter. */}
+        <div className={`col-span-12 md:col-span-10 ${frame ? "border border-line p-[0.35em] text-sheet-moment" : ""}`}>
+          <SplitHeadline as="h2" on="scroll" className="m-0 text-sheet-moment">
+            {withAccent(line, accent)}
+          </SplitHeadline>
+        </div>
+        {label ? (
+          <Reveal y={16} className="col-span-8 md:col-span-2 md:col-start-11">
+            <p className={LABEL}>{label}</p>
+          </Reveal>
+        ) : null}
+        {/* The link first in reading order; on wide screens it takes the far end and the caption the start. */}
+        <Reveal
+          y={16}
+          className="col-span-12 flex flex-col items-start gap-4 md:flex-row-reverse md:items-baseline md:justify-between md:gap-10"
+        >
+          <a
+            href={link.href}
+            className="font-body text-h3 font-medium text-ink underline decoration-1 underline-offset-[0.22em]"
+          >
+            {link.label}
+          </a>
+          {caption ? <p className={`${LABEL} max-w-[40ch]`}>{caption}</p> : null}
+        </Reveal>
+      </div>
+    </section>
+  );
+}

package/skills/struq/blocks/kit/quiet/PhotoText.tsx

@@ -0,0 +1,79 @@
+"use client";
+// components/struq/kit/quiet/PhotoText.tsx (Struq recipe)
+// A photograph and a short text, set on the page grid: the photo across seven columns, the heading and one or two
+// paragraphs across four, one empty column between them as the breath. The text stands on the photo's foot (its last
+// line on the photo's lower edge), so the two read as one composition; the caption hangs under the photo, the label at
+// the far end of that same line.
+//
+// <PhotoText image={images.card[1]} ratio="4/3" side="left" heading="Gedraaid, niet gegoten."
+//   text={["Elke kom begint als een klomp van vier kilo.", "Wat scheef groeit, mag blijven."]}
+//   caption="De draaischijf, ochtendlicht" label="Hoofdstuk twee" />
+//
+// Props
+// - image: a StruqImage. ratio: a CSS aspect ratio for its frame, "4/3" by default ("1/1", "4/5", "3/2" work).
+// - side: "left" (default) puts the photo on the left and the text on the right; "right" mirrors it.
+// - heading: a short heading, at h2 size. text: one paragraph, or two as a pair.
+// - caption: small, under the photo. label: small, sentence case, at the far end of the caption's line.
+// - className: on the root, for example "scene-inverse" or "scene-field".
+//
+// Mounting: a page section of its own. The root carries data-scene="photo-text" and data-energy="1".
+// Motion: it enters once. The photo opens from its foot (MediaFrame, no parallax), the heading's lines rise through
+// their masks (SplitHeadline), the paragraphs and the caption line follow (Reveal). No pin, no scrub, no hover motion.
+// Reduced motion: a short fade. Without scripts: the composed scene. Phones: photo, caption line, then the text.
+import { MediaFrame } from "../MediaFrame";
+import { Reveal } from "../Reveal";
+import { SplitHeadline } from "../SplitHeadline";
+import type { StruqImage } from "../images";
+import { LABEL, SCENE_SPACE, SHEET_GRID } from "./sheet";
+
+type Props = {
+  image: StruqImage;
+  ratio?: string;
+  side?: "left" | "right";
+  heading: string;
+  text: string | [string, string];
+  caption?: string;
+  label?: string;
+  className?: string;
+};
+
+export function PhotoText({ image, ratio = "4/3", side = "left", heading, text, caption, label, className = "" }: Props) {
+  const left = side === "left";
+  const paragraphs = Array.isArray(text) ? text : [text];
+  return (
+    <section data-scene="photo-text" data-energy="1" className={`text-ink ${SCENE_SPACE} ${className}`}>
+      <div className={`gap-y-6 md:gap-y-5 ${SHEET_GRID}`}>
+        <div className={`col-span-12 md:row-start-1 md:col-span-7 ${left ? "md:col-start-1" : "md:col-start-6"}`}>
+          <MediaFrame image={image} ratio={ratio} parallax={false} sizes="(min-width: 768px) 58vw, 100vw" />
+        </div>
+        {caption || label ? (
+          <Reveal
+            y={12}
+            className={`col-span-12 flex items-baseline justify-between gap-6 md:row-start-2 md:col-span-7 ${
+              left ? "md:col-start-1" : "md:col-start-6"
+            }`}
+          >
+            {caption ? <p className={LABEL}>{caption}</p> : <span />}
+            {label ? <p className={`${LABEL} text-right`}>{label}</p> : null}
+          </Reveal>
+        ) : null}
+        <div
+          className={`col-span-12 mt-10 md:row-start-1 md:col-span-4 md:mt-0 md:self-end ${
+            left ? "md:col-start-9" : "md:col-start-1"
+          }`}
+        >
+          <SplitHeadline as="h2" on="scroll" className="m-0 text-h2">
+            {heading}
+          </SplitHeadline>
+          <Reveal y={24} className="mt-8 grid gap-5 md:mt-10">
+            {paragraphs.map((p) => (
+              <p key={p} className="m-0 max-w-[38ch] text-body text-ink-muted">
+                {p}
+              </p>
+            ))}
+          </Reveal>
+        </div>
+      </div>
+    </section>
+  );
+}

package/skills/struq/blocks/kit/quiet/Rows.tsx

@@ -0,0 +1,81 @@
+"use client";
+// components/struq/kit/quiet/Rows.tsx (Struq recipe)
+// A short list set as hairline rows on the page grid: a term in the display face, one sentence in the body face beside
+// it, a hairline from --line above every row and under the last. Never numbered: the terms carry the order. An
+// optional heading opens the scene (the label beside it in the margin columns, on its first baseline) and an optional
+// upright photo stands in its own column beside the rows, level with the first hairline.
+//
+// <Rows heading="Hoe een kom ontstaat." label="Vier stappen, zes weken" image={images.column[2]}
+//   rows={[{ term: "Draaien", text: "Op de schijf, uit één klomp, in een ochtend." }, ...]} />
+//
+// Props
+// - rows: { term, text }[], three to six. term: one or two words. text: one sentence.
+// - heading: optional, at h2 size. label: optional, small, sentence case, beside the heading (or the first row).
+// - image: optional StruqImage, shown upright (4/5) in three columns beside the rows; the rows take eight.
+// - className: on the root, for example "scene-inverse" or "scene-field".
+//
+// Mounting: a page section of its own. The root carries data-scene="rows" and data-energy="1". The rows sit on the
+// page's own columns (subgrid), so every term starts on the same column as the heading and the blocks around it.
+// Motion: it enters once. The heading's lines rise through their masks, the rows follow one after another (Reveal), the
+// photo opens from its foot (MediaFrame, no parallax). No pin, no scrub, no hover motion. Reduced motion: a short
+// fade. Without scripts: the composed scene. Phones: heading, label, the rows with the sentence under its term, photo.
+import { MediaFrame } from "../MediaFrame";
+import { Reveal } from "../Reveal";
+import { SplitHeadline } from "../SplitHeadline";
+import type { StruqImage } from "../images";
+import { LABEL, SCENE_SPACE, SHEET_GRID } from "./sheet";
+
+type Row = { term: string; text: string };
+
+type Props = {
+  rows: Row[];
+  heading?: string;
+  label?: string;
+  image?: StruqImage;
+  className?: string;
+};
+
+export function Rows({ rows, heading, label, image, className = "" }: Props) {
+  const wide = !image;
+  return (
+    <section data-scene="rows" data-energy="1" className={`text-ink ${SCENE_SPACE} ${className}`}>
+      <div className={`items-start gap-y-10 md:gap-y-16 ${SHEET_GRID}`}>
+        {heading ? (
+          <SplitHeadline as="h2" on="scroll" className="col-span-12 m-0 text-h2 md:col-span-7 md:self-baseline">
+            {heading}
+          </SplitHeadline>
+        ) : null}
+        {label ? (
+          <Reveal y={16} className="col-span-8 md:col-span-2 md:col-start-11 md:self-baseline">
+            <p className={LABEL}>{label}</p>
+          </Reveal>
+        ) : null}
+        <Reveal
+          as="ul"
+          y={24}
+          stagger={0.07}
+          className={`col-span-12 m-0 grid list-none border-b border-line p-0 md:grid-cols-subgrid ${
+            wide ? "md:col-span-12" : "md:col-span-8"
+          }`}
+        >
+          {rows.map((row) => (
+            <li
+              key={row.term}
+              className="grid gap-y-2 border-t border-line py-6 md:col-span-full md:grid-cols-subgrid md:items-baseline md:py-8"
+            >
+              <h3 className="m-0 text-h3 md:col-span-3">{row.term}</h3>
+              <p className={`m-0 max-w-[48ch] text-body text-ink-muted ${wide ? "md:col-span-6 md:col-start-5" : "md:col-span-5"}`}>
+                {row.text}
+              </p>
+            </li>
+          ))}
+        </Reveal>
+        {image ? (
+          <div className="col-span-8 col-start-5 md:col-span-3 md:col-start-10">
+            <MediaFrame image={image} ratio="4/5" parallax={false} sizes="(min-width: 768px) 25vw, 66vw" />
+          </div>
+        ) : null}
+      </div>
+    </section>
+  );
+}

package/skills/struq/blocks/kit/quiet/Statement.tsx

@@ -0,0 +1,157 @@
+"use client";
+// components/struq/kit/quiet/Statement.tsx (Struq recipe)
+// The type moment of a quiet scene: one sentence at the sheet's moment size, set from the page grid's first column, on
+// the same left edge as the header wordmark and the heroes' type. A small label stands in the margin columns beside the
+// first line, on its baseline; a small upright photo hangs off the end of the last line, so the sentence and the
+// picture read as one composed plate instead of a big line in an empty room.
+//
+// <Statement accent="hand" label="Werkplaats Zuid, sinds 1998" image={images.column[0]}>
+//   Klei onthoudt elke hand die haar vormt.
+// </Statement>
+//
+// Props
+// - children: the sentence, plain text. Two to five lines at moment size on a wide screen.
+// - accent: one word of the sentence, set in the pairing's italic accent face (--face-accent) where it first stands
+//   (whole word, any case; punctuation stays outside). The site's one accent word: the opening and the Close carry it
+//   too (../accent). A word the sentence does not hold changes nothing.
+// - label: small, sentence case, body face. Beside the first line (wide screens), under the sentence (phones).
+// - image: a StruqImage, shown upright (4/5) and small: two columns wide, five on a phone.
+// - as: "h2" (default) or "p" when the page already has its heading here.
+// - className: on the root, for example "scene-inverse" or "scene-field"; the tokens turn inside it.
+//
+// Mounting: a page section of its own, between two blocks. The root carries data-scene="statement" and
+// data-energy="1", so the film check counts it as a quiet scene.
+//
+// Motion: it enters once. The lines rise through their masks as the sentence scrolls in (SplitHeadline), the label
+// follows (Reveal), the photo opens from its foot (MediaFrame, no parallax). No pin, no scrub, no hover motion. Reduced
+// motion: a short fade, nothing travels. Without scripts: the composed scene, the photo in its place on the grid.
+//
+// The hang: once the faces are in (document.fonts.ready) the end of the last line is measured, in whole pixels, from
+// the line's mask (which never moves, so a line still rising reads where it will stand). If the photo fits between that
+// end and the grid's right edge, one gutter on, it hangs there from the line's top; otherwise it keeps its place on the
+// grid. Its place on the grid keeps its room either way, so the page never jumps when it moves. Measured again when
+// the width changes.
+import { useEffect, useRef } from "react";
+import { withAccent } from "../accent";
+import { ScrollTrigger } from "../gsap";
+import { MediaFrame } from "../MediaFrame";
+import { Reveal } from "../Reveal";
+import { SplitHeadline } from "../SplitHeadline";
+import type { StruqImage } from "../images";
+import { LABEL, SCENE_SPACE, SHEET_GRID } from "./sheet";
+
+type Props = {
+  children: string;
+  accent?: string;
+  label?: string;
+  image?: StruqImage;
+  as?: "h2" | "p";
+  className?: string;
+};
+
+/** Where the last line ends and where its line box starts, in viewport pixels. */
+function lastLineEnd(head: HTMLElement) {
+  const lines = head.querySelectorAll<HTMLElement>(".struq-line");
+  const last = lines[lines.length - 1];
+  const range = document.createRange();
+  range.selectNodeContents(last ?? head);
+  const rects = Array.from(range.getClientRects()).filter((r) => r.width > 0);
+  const end = rects[rects.length - 1];
+  if (!end) return null;
+  const mask = last?.parentElement;
+  if (!mask) return { right: end.right, top: end.top };
+  // A cut line may still be rising inside its mask; the mask stands still, its padding is the room above the line.
+  return { right: end.right, top: mask.getBoundingClientRect().top + (parseFloat(getComputedStyle(mask).paddingTop) || 0) };
+}
+
+export function Statement({ children, accent, label, image, as = "h2", className = "" }: Props) {
+  const grid = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const box = grid.current;
+    if (!box || !image) return;
+    const head = box.querySelector<HTMLElement>("[data-split]");
+    const slot = box.querySelector<HTMLElement>("[data-hang-slot]");
+    const frame = box.querySelector<HTMLElement>("[data-hang-frame]");
+    if (!head || !slot || !frame) return;
+    let alive = true;
+    let timer = 0;
+
+    const unhang = () => {
+      frame.style.position = "";
+      frame.style.left = "";
+      frame.style.top = "";
+      frame.style.width = "";
+      delete box.dataset.hang;
+    };
+    const place = () => {
+      if (!alive) return;
+      unhang();
+      const g = box.getBoundingClientRect();
+      const cs = getComputedStyle(box);
+      const inner = Math.round(g.right - (parseFloat(cs.paddingRight) || 0) - g.left);
+      const gap = Math.round(parseFloat(cs.columnGap) || 0);
+      const w = Math.round(slot.getBoundingClientRect().width);
+      const end = lastLineEnd(head);
+      if (!end || w === 0) return;
+      const x = Math.round(end.right - g.left) + gap;
+      const y = Math.round(end.top - g.top);
+      if (x + w > inner) return;
+      // Never over the label: a one line sentence has the label beside it, a phone has it under the sentence.
+      const tag = box.querySelector<HTMLElement>("[data-scene-label]")?.getBoundingClientRect();
+      const h = Math.round((w * 5) / 4);
+      if (tag && tag.width > 0) {
+        const t = { left: tag.left - g.left, right: tag.right - g.left, top: tag.top - g.top, bottom: tag.bottom - g.top };
+        if (x < t.right + gap && x + w + gap > t.left && y < t.bottom + gap && y + h + gap > t.top) return;
+      }
+      frame.style.position = "absolute";
+      frame.style.left = `${x}px`;
+      frame.style.top = `${y}px`;
+      frame.style.width = `${w}px`;
+      box.dataset.hang = "1";
+      // The photo's entrance is triggered by where it stands, which just moved.
+      ScrollTrigger.refresh();
+    };
+    const later = () => {
+      window.clearTimeout(timer);
+      // After SplitText's own re-cut on a width change.
+      timer = window.setTimeout(place, 260);
+    };
+
+    (document.fonts?.ready ?? Promise.resolve()).then(() => requestAnimationFrame(place));
+    window.addEventListener("resize", later);
+    document.fonts?.addEventListener?.("loadingdone", later);
+    return () => {
+      alive = false;
+      window.clearTimeout(timer);
+      window.removeEventListener("resize", later);
+      document.fonts?.removeEventListener?.("loadingdone", later);
+      unhang();
+    };
+  }, [image, children, accent]);
+
+  return (
+    <section data-scene="statement" data-energy="1" className={`text-ink ${SCENE_SPACE} ${className}`}>
+      <div ref={grid} className={`relative items-start gap-y-10 md:items-baseline md:gap-y-12 ${SHEET_GRID}`}>
+        <SplitHeadline as={as} on="scroll" className="col-span-12 m-0 text-sheet-moment md:col-span-10">
+          {withAccent(children, accent)}
+        </SplitHeadline>
+        {label ? (
+          <Reveal y={16} className="col-span-6 md:col-span-2 md:col-start-11">
+            <p data-scene-label="" className={LABEL}>
+              {label}
+            </p>
+          </Reveal>
+        ) : null}
+        {image ? (
+          // The photo's place on the grid: it keeps its room when the photo hangs off the last line instead.
+          <div data-hang-slot="" className="col-span-5 col-start-8 aspect-[4/5] md:col-span-2 md:col-start-9 md:self-start">
+            <div data-hang-frame="" className="w-full">
+              <MediaFrame image={image} ratio="4/5" parallax={false} sizes="(min-width: 768px) 17vw, 40vw" />
+            </div>
+          </div>
+        ) : null}
+      </div>
+    </section>
+  );
+}

package/skills/struq/blocks/kit/quiet/index.ts

@@ -0,0 +1,7 @@
+// components/struq/kit/quiet/index.ts (Struq recipe)
+// The composed quiet scenes, for the storyboard's energy 0 and 1 slots: a type moment, a photo with text, hairline
+// rows and the page's close. Each renders its own data-scene root, stands on the sheet's grid and enters once.
+export { Close } from "./Close";
+export { PhotoText } from "./PhotoText";
+export { Rows } from "./Rows";
+export { Statement } from "./Statement";

package/skills/struq/blocks/kit/quiet/sheet.ts

@@ -0,0 +1,12 @@
+// components/struq/kit/quiet/sheet.ts (Struq recipe)
+// The sheet the quiet scenes stand on: the page's 12 column grid inside the page margin (the header wordmark's and the
+// heroes' left edge) with the one gutter, and the margin label. Tokens from blocks.css only.
+
+/** The page grid: 12 columns, the sheet's gutter, the sheet's page margin. Phones keep the 12 columns. */
+export const SHEET_GRID = "grid grid-cols-12 gap-x-sheet-gutter px-sheet-margin";
+
+/** A quiet scene's breathing room above and below. */
+export const SCENE_SPACE = "py-28 md:py-40";
+
+/** The margin label: small, body face, sentence case, muted. Beside a headline or under a photo, never above a heading. */
+export const LABEL = "m-0 font-body text-sheet-label text-ink-muted";

package/skills/struq/blocks/page-transitions/page-transition-gate.tsx

@@ -1,12 +1,17 @@
 "use client";
 // page-transition-gate (Struq page transition): the gate, on every navigation
-// The preloader's leader carried into navigation. The click shuts the gate: two bars come in from
-// top and bottom, each carrying one half of a slate (the dial's rings and the destination's name in
-// the display face), while the page recedes behind them. The halves meet on the middle line and
-// lock into one frame: the line lights in the accent and an accent arc runs once round the dial.
-// The route changes under the locked frame. Then the gate opens on that line, the name and the
-// rings split in two and ride away with the bars, and the new page settles forward through it while
-// its own entrance (onGateReveal) starts in the gap.
+// The preloader's gate carried into navigation. The click shuts the gate: two bars come in from
+// top and bottom, each carrying one half of a frame (the dial and the destination's name in the
+// display face), while the page recedes behind them. The halves meet on the middle line and lock
+// into one frame: the line lights in the accent and an accent arc runs once round the dial. The
+// route changes under the locked frame. Then the gate opens on that line, the name and the dial
+// split in two and ride away with the bars, and the new page settles forward through it while its
+// own entrance starts in the gap.
+//
+// The words on the frame are the client's: the link's `label`, its text when short, else `name`.
+// The dial is neutral by default, one hairline ring round the name; `dial="leader"` draws the
+// preloader's film leader (two rings and a crosshair), which with the name makes a slate, the lab's
+// look; `dial="none"` leaves the name alone on the line.
 //
 // 0.00  click: the bars close (0.38s), the page behind recedes to 0.97
 // 0.30  the line lights from the centre; the arc runs round the dial (0.26s)
@@ -23,8 +28,11 @@
 //   <GateLink href="/werk" label="Werk">Bekijk het werk</GateLink>
 //   const router = useGateRouter(); router.push("/contact", "Contact");
 //
-// A page's own entrance: set its start state only while transitionCovers() is true and play it in
-// onGateReveal(), so it starts as the gate opens instead of half played under the shut frame.
+// The hand-over is the one every frame family uses (helper in preloaders/preloader-slices-uncovered.ts,
+// which ships with it): once the frame is locked <html> carries data-curtain="closed", and as the gate
+// starts to open the attribute goes and "curtain:lift" fires, so every Struq hero on the new page
+// waits behind the frame with no wiring. A page's own entrance does the same with whenUncovered;
+// transitionCovers() and onGateReveal() still work, and fire at the same moment.
 //
 // Back and forward get the same gate over the live page (canvases, video and a fixed header stay as
 // they are). The browser's traversal is undone at once with history.go, the gate shuts, and the
@@ -41,6 +49,9 @@ import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { Suspense, useCallback, useEffect, useRef, type ComponentProps, type ReactNode } from "react";
 import { gsap, useGSAP } from "../kit/gsap";
 import { getLenis } from "../kit/SmoothScroll";
+import { closeCurtain, covered, liftCurtain, whenUncovered } from "../preloaders/preloader-slices-uncovered";
+
+export { whenUncovered };
 
 /** Fired on window when the gate starts to open on a new page. */
 export const GATE_REVEAL_EVENT = "struq:gate-reveal";
@@ -92,6 +103,10 @@ const store = {
   instant: false,
   landed: false,
   arriving: false,
+  /** This gate closed the shared curtain on <html> and owes the lift. */
+  curtain: false,
+  /** A lift owed by a provider torn down mid-journey; a provider that mounts again takes it back. */
+  pendingLift: 0,
   onCovered: null as (() => void) | null,
   gate: null as Gate | null,
   ceiling: null as gsap.core.Tween | null,
@@ -118,7 +133,7 @@ function entryKey() {
   return nav()?.currentEntry?.key ?? urlKey();
 }
 
-/** The slate's word for the entry `delta` steps from the page on screen. */
+/** The frame's word for the entry `delta` steps from the page on screen. */
 function labelAt(delta: number) {
   const entry = nav()?.entries?.()[store.index + delta];
   return (entry && store.labels.get(entry.key)) || store.name;
@@ -187,9 +202,21 @@ function undo(delta: number) {
   });
 }
 
-/** The cover reached the locked frame: run what waits on it, and open if the page has already landed. */
+/** The gate starts to open on the new page: the curtain lifts, so every entrance waiting on it starts in the gap. */
+function revealed() {
+  if (store.curtain) {
+    store.curtain = false;
+    liftCurtain();
+  }
+  window.dispatchEvent(new Event(GATE_REVEAL_EVENT));
+}
+
+/** The cover reached the locked frame: close the curtain, run what waits on it, open if the page has already landed. */
 function coverDone() {
   store.phase = "covered";
+  // Closed before the route is asked for, so the page that mounts under the frame finds it closed.
+  closeCurtain();
+  store.curtain = true;
   const next = store.onCovered;
   store.onCovered = null;
   next?.();
@@ -247,7 +274,7 @@ function arrive() {
   const gate = store.gate;
   if (!gate || gate.reduce || store.instant) {
     store.arriving = false;
-    window.dispatchEvent(new Event(GATE_REVEAL_EVENT));
+    revealed();
     finish();
     return;
   }
@@ -289,6 +316,8 @@ function finish() {
   store.phase = "idle";
   store.instant = false;
   store.passing = false;
+  // Never leave a closed curtain behind.
+  if (store.curtain) revealed();
   store.release?.();
   getLenis()?.start();
   if (store.after !== 0) {
@@ -298,7 +327,7 @@ function finish() {
   }
 }
 
-/** Starts a journey: the label goes on the slate, the gate shuts, `then` runs on the locked frame. */
+/** Starts a journey: the label goes on the frame, the gate shuts, `then` runs on the locked frame. */
 function begin(kind: "push" | "pop", label: string, then: (() => void) | null) {
   store.kind = kind;
   store.from = store.rendered || urlKey();
@@ -416,7 +445,7 @@ export function useGateRouter() {
   };
 }
 
-/** The name the slate shows for a link: its `label`, else its text when short, else the site's name. */
+/** The name the frame shows for a link: its `label`, else its text when short, else the site's name. */
 function linkLabel(a: HTMLAnchorElement, label?: string) {
   if (label) return label;
   const text = a.textContent?.trim() ?? "";
@@ -491,31 +520,41 @@ function UrlWatch({ onUrl }: { onUrl: (key: string) => void }) {
   return null;
 }
 
-/** One half of the slate: the full screen's leader, clipped by its bar, so the halves meet into one frame. */
-function Slate({ side }: { side: "top" | "bottom" }) {
+type Dial = "ring" | "leader" | "none";
+
+/** One half of the frame: the full screen's dial and name, clipped by its bar, so the halves meet into one frame. */
+function Frame({ side, dial }: { side: "top" | "bottom"; dial: Dial }) {
   const ring = "color-mix(in oklch, var(--on-gate) 46%, transparent)";
   const inner = "color-mix(in oklch, var(--on-gate) 30%, transparent)";
   const cross = "color-mix(in oklch, var(--on-gate) 24%, transparent)";
   return (
     <div className={`absolute inset-x-0 h-[200%] ${side === "top" ? "top-0" : "bottom-0"}`}>
       <div className="absolute left-1/2 top-1/2 aspect-square w-[min(64vw,22rem)] -translate-x-1/2 -translate-y-1/2">
-        <svg viewBox="0 0 200 200" className="absolute inset-0 size-full overflow-visible" fill="none">
-          <circle cx="100" cy="100" r="92" style={{ stroke: ring, strokeWidth: 0.8 }} />
-          <circle cx="100" cy="100" r="78" style={{ stroke: inner, strokeWidth: 0.7 }} />
-          <line x1="100" y1="-14" x2="100" y2="214" style={{ stroke: cross, strokeWidth: 0.7 }} />
-          <circle
-            data-arc=""
-            cx="100"
-            cy="100"
-            r="78"
-            pathLength={1}
-            strokeDasharray="1 1"
-            strokeDashoffset="1"
-            transform="rotate(-90 100 100)"
-            className="stroke-accent"
-            style={{ strokeWidth: 1.4 }}
-          />
-        </svg>
+        {dial === "none" ? null : (
+          <svg viewBox="0 0 200 200" className="absolute inset-0 size-full overflow-visible" fill="none">
+            {dial === "leader" ? (
+              <>
+                <circle cx="100" cy="100" r="92" style={{ stroke: ring, strokeWidth: 0.8 }} />
+                <circle cx="100" cy="100" r="78" style={{ stroke: inner, strokeWidth: 0.7 }} />
+                <line x1="100" y1="-14" x2="100" y2="214" style={{ stroke: cross, strokeWidth: 0.7 }} />
+              </>
+            ) : (
+              <circle cx="100" cy="100" r="78" style={{ stroke: ring, strokeWidth: 0.7 }} />
+            )}
+            <circle
+              data-arc=""
+              cx="100"
+              cy="100"
+              r="78"
+              pathLength={1}
+              strokeDasharray="1 1"
+              strokeDashoffset="1"
+              transform="rotate(-90 100 100)"
+              className="stroke-accent"
+              style={{ strokeWidth: 1.4 }}
+            />
+          </svg>
+        )}
         <div className="absolute inset-0 grid place-items-center">
           <span
             data-gate-label=""
@@ -529,11 +568,14 @@ function Slate({ side }: { side: "top" | "bottom" }) {
 
 export function PageTransitionGate({
   name = "",
+  dial = "ring",
   tone = "deep",
   children,
 }: {
-  /** The site's name: the slate's word when a journey has no label of its own. */
+  /** The site's name: the frame's word when a journey has no label of its own. */
   name?: string;
+  /** The drawing round the name: one ring (default), the film leader's two rings and crosshair (a slate), or none. */
+  dial?: Dial;
   tone?: "deep" | "inverse" | "field";
   /** Rendered as is, never wrapped: put the page content in GateStage. */
   children?: ReactNode;
@@ -547,6 +589,7 @@ export function PageTransitionGate({
     () => {
       const el = root.current;
       if (!el) return;
+      window.clearTimeout(store.pendingLift);
       const q = gsap.utils.selector(el);
       const [top, bottom] = q("[data-bar]");
       const lights = q("[data-light]");
@@ -608,7 +651,7 @@ export function PageTransitionGate({
             })
             .to(top, { yPercent: -100, duration: OPEN, ease: "power4.inOut" }, 0)
             .to(bottom, { yPercent: 100, duration: OPEN, ease: "power4.inOut" }, 0)
-            .call(() => window.dispatchEvent(new Event(GATE_REVEAL_EVENT)), [], 0.04);
+            .call(revealed, [], 0.04);
           // The page comes forward through the opening gate; its own tween, so the gate is free once open.
           const page = stage();
           if (page) {
@@ -649,6 +692,14 @@ export function PageTransitionGate({
         window.removeEventListener("scroll", record);
         history.scrollRestoration = previous;
         if (store.gate === gate) store.gate = null;
+        // Torn down with the curtain closed: lift it unless a provider mounts again and picks the journey up.
+        if (store.curtain) {
+          store.pendingLift = window.setTimeout(() => {
+            if (store.gate || !store.curtain) return;
+            store.curtain = false;
+            if (covered()) liftCurtain();
+          }, 0);
+        }
       };
     },
     { scope: root },
@@ -686,7 +737,7 @@ export function PageTransitionGate({
             data-bar={side}
             className={`absolute inset-x-0 h-1/2 overflow-hidden bg-[var(--gate)] ${side === "top" ? "top-0" : "bottom-0 shadow-[0_-1px_0_0_var(--gate)]"}`}
           >
-            <Slate side={side} />
+            <Frame side={side} dial={dial} />
             {/* The leading edge carries a hairline, so the bar reads on a page as dark as itself; when the frame
                 locks, the accent runs along it from the centre. */}
             <div