@struq/skill 0.5.1 → 0.5.3

package/skills/struq/blocks/headers/header-bar.tsx

@@ -1,8 +1,8 @@
 "use client";
 // header-bar (Struq header recipe): the bar a site wears on every screen when it shows its links
 // The wordmark, three or four links and one quiet action as a text link. The bar has no ground on the first screen; once
-// the page has scrolled it takes the ground of whatever is under it (the page's own surface, the inverse, or none over a
-// photo), so it reads as a window onto the page, never as a coloured strip.
+// the page has scrolled it takes a solid ground in the tone of whatever is under it (the page's own surface, the
+// inverse, or the photo band's dark), so body text never runs through its ink and it still reads as part of the page.
 //
 //   quiet   wordmark left, links right; each label rolls through its mask on hover, letter by letter. The bar hides
 //           as the page scrolls down and returns as it scrolls up, scrubbed to the scroll with a short ease and
@@ -19,11 +19,19 @@
 // The bar turns its ink with what is under it, exactly at the edge, per pixel: it is drawn three times (ink for the
 // page ground, on-photo, on-inverse), each copy clipped to the stretches of the bar its own sections cover. Sections
 // opt in with data-bar-tone="photo" or data-bar-tone="inverse" (the menu curtain's contract); anything else is ground.
+// Mark a section "photo" only where a photo really runs under the bar's band (a full-bleed hero); a poster or a framed
+// photo with ground above it is ground. The start tone is read from the page too, never passed: before the script,
+// the first section's data-bar-tone (the element right after the bar, or that element's first child) sets the ink.
+// Over a "photo" section the bar reads the photo itself (kit/photo-read): the band of the photo under the bar, with
+// any data-veil over it and the bar's own ground at the strength it has come in, is held against each ink, and the
+// on-photo ink stays while it keeps 3:1; over a bright window the bar takes the ink (and the scrolled ground) that
+// reads instead, and keeps it while that still holds 3:1, so it never flickers. A photo that cannot be read (not
+// loaded yet, another origin) keeps the declared tone. No scrim is ever added for it.
 // The real bar (the links) sits on top with transparent text: one focusable bar, never three. Hover and keyboard focus
 // on a real link are mirrored onto the copies, so the focus ring is drawn in the right ink too.
 //
-// Mount it once at the top of the page; it is fixed and needs no wrapper:
-//   <HeaderBar variant="quiet" name="Noord" links={[{ label: "Werk", href: "/werk" }]} startTone="photo"
+// Mount it once at the top of the page, right before the first section; it is fixed and needs no wrapper:
+//   <HeaderBar variant="quiet" name="Noord" links={[{ label: "Werk", href: "/werk" }]}
 //     action={{ label: "Plan een gesprek", href: "/contact" }} menuHref="#menu" />
 // Keep the hero's type below var(--hb-top) (set on the nearest [data-blocks]: the bar's height, or for settle the
 // bottom of the large wordmark). On phones the bar is the wordmark and one "Menu" link: pass onMenu to open a menu
@@ -34,6 +42,7 @@
 // Without JavaScript the plain bar stands in the start tone's ink, and nothing waits.
 import { useEffect, useRef, useState, type CSSProperties, type FocusEvent, type HTMLAttributes, type PointerEvent } from "react";
 import { gsap, ScrollTrigger, useGSAP } from "../kit/gsap";
+import { photoLuminances } from "../kit/photo-read";
 
 export const HEADER_BAR_VARIANTS = [
   { id: "quiet", title: "De stille balk" },
@@ -47,17 +56,45 @@ export type BarTone = "ground" | "photo" | "inverse";
 
 const TONES: BarTone[] = ["ground", "photo", "inverse"];
 const TONE_INK: Record<BarTone, string> = { ground: "text-ink", photo: "text-on-photo", inverse: "text-on-inverse" };
-// Over a photo the scrolled bar takes the palette's own dark for bands over photos (--photo-ground: the inverse on a
-// light palette, the page ground on a dark one), nearly opaque, over a blur of what passes under it, so the hero's type
-// runs under the bar quiet and soft and the band never reads as a letterbox beside the page.
+// Once the page scrolls the bar stands on a solid ground, so nothing that passes under it ever prints through its ink:
+// the page's own surface, the inverse, and over a photo the palette's own dark for bands over photos (--photo-ground:
+// the inverse on a light palette, the page ground on a dark one). Never a blur, a see-through tint or a shadow.
 const TONE_GROUND: Record<BarTone, string> = {
   ground: "bg-surface-0",
-  photo: "bg-[color-mix(in_oklab,var(--photo-ground,var(--inverse))_88%,transparent)]",
+  photo: "bg-[var(--photo-ground,var(--inverse))]",
   inverse: "bg-inverse",
 };
 const NONE = "polygon(0px 0px, 0px 0px, 0px 0px)";
 /** The display face is waited for at most this long before the large wordmark is measured. */
 const FONT_CAP = 800;
+/** The wordmark and the links against what is under them over a photo: at least this much. */
+const PHOTO_RATIO = 3;
+
+const linear = (c: number) => (c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4));
+const encode = (l: number) => (l <= 0.0031308 ? l * 12.92 : 1.055 * Math.pow(l, 1 / 2.4) - 0.055);
+const contrast = (a: number, b: number) => (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05);
+/** A layer of luminance `top` at opacity `a` over `under`, composited in sRGB as the browser does. */
+const over = (under: number, top: number, a: number) => linear(encode(under) * (1 - a) + encode(top) * a);
+
+/** Any CSS colour's relative luminance and alpha, through a one-pixel canvas so every colour syntax resolves. */
+const colours = new Map<string, { y: number; a: number }>();
+function colourOf(css: string) {
+  const kept = colours.get(css);
+  if (kept) return kept;
+  let out = { y: 0, a: 0 };
+  const cv = document.createElement("canvas");
+  cv.width = 1;
+  cv.height = 1;
+  const ctx = cv.getContext("2d", { willReadFrequently: true });
+  if (ctx) {
+    ctx.fillStyle = css;
+    ctx.fillRect(0, 0, 1, 1);
+    const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
+    out = { y: 0.2126 * linear(r / 255) + 0.7152 * linear(g / 255) + 0.0722 * linear(b / 255), a: a / 255 };
+  }
+  colours.set(css, out);
+  return out;
+}
 
 /**
  * settle: the wordmark's advance, estimated from its letters, so the CSS can set it large across the hero from the
@@ -274,7 +311,6 @@ export function HeaderBar({
   place = "Rotterdam",
   clock = false,
   timeZone = "Europe/Amsterdam",
-  startTone = "ground",
 }: {
   variant?: HeaderBarVariant;
   /** The wordmark. */
@@ -294,8 +330,6 @@ export function HeaderBar({
   clock?: boolean;
   /** IANA zone for the clock. */
   timeZone?: string;
-  /** The ground under the bar on the first paint, before the script measures it (the hero's, usually "photo"). */
-  startTone?: BarTone;
 }) {
   const root = useRef<HTMLDivElement>(null);
   const api = useRef<{ hot: (i: number, on: boolean, from?: "left" | "right") => void; focus: (on: boolean) => void } | null>(null);
@@ -340,7 +374,6 @@ export function HeaderBar({
       const words = q("[data-hb-word]");
       const fades = q("[data-hb-fade]");
       const fills = q("[data-hb-fill]");
-      const blur = q("[data-hb-blur]")[0] as HTMLElement | undefined;
       if (!move || !realFace || !realWord) return;
 
       let barH = realFace.offsetHeight;
@@ -408,16 +441,82 @@ export function HeaderBar({
         host.style.setProperty("--hb-top", `${Math.round(bigTop + S * wordH + barH * 0.25)}px`);
       };
 
+      // --- over a photo: the ink the photo under the bar asks for ---
+      // Each copy's ink and its scrolled ground, as the page resolves them.
+      const inkY = {} as Record<BarTone, number>;
+      const groundY = {} as Record<BarTone, number>;
+      const readInks = () => {
+        TONES.forEach((t, i) => {
+          inkY[t] = colourOf(getComputedStyle(copies[i]).color).y;
+          const g = copies[i].querySelector<HTMLElement>("[data-hb-ground]");
+          groundY[t] = g ? colourOf(getComputedStyle(g).backgroundColor).y : inkY[t];
+        });
+      };
+      // The last pick per photo section: kept while it still holds, so a band near the line never flickers.
+      const picked = new WeakMap<HTMLElement, BarTone>();
+      const photoTone = (sec: HTMLElement, top: number, bottom: number, k: number): BarTone => {
+        const band = { x: 0, y: top, w: window.innerWidth, h: bottom - top };
+        let lo = 0;
+        let hi = 0;
+        if (k < 1) {
+          // The photo with the most of the band under it, read as object-cover of its own box.
+          let img: HTMLImageElement | null = null;
+          let f: DOMRect | null = null;
+          let most = 0;
+          for (const im of Array.from(sec.querySelectorAll("img"))) {
+            const r = im.getBoundingClientRect();
+            const w = Math.min(r.right, band.w) - Math.max(r.left, 0);
+            const h = Math.min(r.bottom, bottom) - Math.max(r.top, top);
+            if (w > 0 && h > 0 && w * h > most) {
+              most = w * h;
+              img = im;
+              f = r;
+            }
+          }
+          if (!img || !f) return "photo";
+          const ys = photoLuminances(img, { x: f.left, y: f.top, w: f.width, h: f.height }, band);
+          if (!ys) return "photo";
+          lo = ys[Math.floor(ys.length * 0.1)];
+          hi = ys[Math.floor(ys.length * 0.9)];
+          // The block's own veils over the photo (data-veil), where they cover the band.
+          const mid = (top + bottom) / 2;
+          sec.querySelectorAll<HTMLElement>("[data-veil]").forEach((v) => {
+            const r = v.getBoundingClientRect();
+            if (r.top > mid || r.bottom < mid) return;
+            const cs = getComputedStyle(v);
+            const c = colourOf(cs.backgroundColor);
+            const a = (parseFloat(cs.opacity) || 0) * c.a;
+            if (a <= 0) return;
+            lo = over(lo, c.y, a);
+            hi = over(hi, c.y, a);
+          });
+        }
+        // Each ink over the band with its own scrolled ground at the strength it has come in, the worse end counted.
+        const score = (t: BarTone) => {
+          const a = Math.min(1, k);
+          return Math.min(contrast(inkY[t], over(lo, groundY[t], a)), contrast(inkY[t], over(hi, groundY[t], a)));
+        };
+        const was = picked.get(sec);
+        let tone: BarTone = "photo";
+        if (was && score(was) >= PHOTO_RATIO) tone = was;
+        else if (score("photo") < PHOTO_RATIO) {
+          for (const t of TONES) if (score(t) > score(tone)) tone = t;
+        }
+        picked.set(sec, tone);
+        return tone;
+      };
+
       // --- the ink, cut where the sections under the bar meet, in the bar's own coordinates ---
-      const ink = (o: number, extent: number) => {
+      const ink = (o: number, extent: number, k: number) => {
         const segs: Array<[number, number, BarTone]> = [[0, extent, "ground"]];
         document.querySelectorAll<HTMLElement>("[data-bar-tone]").forEach((sec) => {
-          const tone = sec.dataset.barTone;
-          if ((tone !== "photo" && tone !== "inverse") || el.contains(sec)) return;
+          const declared = sec.dataset.barTone;
+          if ((declared !== "photo" && declared !== "inverse") || el.contains(sec)) return;
           const r = sec.getBoundingClientRect();
           const a = Math.max(0, r.top + o);
           const b = Math.min(extent, r.bottom + o);
           if (b <= a) return;
+          const tone: BarTone = declared === "photo" ? photoTone(sec, a - o, b - o, k) : declared;
           // Later sections in document order (the nested ones) paint over earlier ones.
           for (let k = segs.length - 1; k >= 0; k -= 1) {
             const [s0, s1, t] = segs[k];
@@ -437,10 +536,25 @@ export function HeaderBar({
           }
           copies[i].style.clipPath = pts.length ? `polygon(${pts.join(", ")})` : NONE;
         });
-        // The blur sits under the copies (a clipped copy would blur nothing), cut to the photo's stretches like its ink.
-        if (blur) blur.style.clipPath = copies[1].style.clipPath;
       };
 
+      // The plain bar's ink until the copies show (settle waits for its face): the tone of the section under the bar's
+      // middle now, read from the page's own data-bar-tone, so it can never disagree with the hero.
+      const startTone = (): BarTone => {
+        let tone: BarTone = "ground";
+        const h = realFace.offsetHeight;
+        const mid = h / 2;
+        document.querySelectorAll<HTMLElement>("[data-bar-tone]").forEach((sec) => {
+          const t = sec.dataset.barTone;
+          if ((t !== "photo" && t !== "inverse") || el.contains(sec)) return;
+          const r = sec.getBoundingClientRect();
+          if (r.top <= mid && r.bottom > mid) tone = t === "photo" ? photoTone(sec, Math.max(0, r.top), Math.min(h, r.bottom), 0) : t;
+        });
+        return tone;
+      };
+      readInks();
+      el.dataset.start = startTone();
+
       const paint = () => {
         const y = Math.max(0, window.scrollY);
         let o = 0;
@@ -478,7 +592,7 @@ export function HeaderBar({
         const from = variant === "settle" && S > 1 ? yFit : 0;
         const k = reduce ? (y > 2 ? 1 : 0) : Math.min(1, Math.max(0, (y - from) / barH));
         el.style.setProperty("--hb-k", k.toFixed(3));
-        ink(o, extent);
+        ink(o, extent, k);
       };
 
       // quiet: the wish follows the scroll pixel for pixel, the bar eases after it; at rest it settles to a side.
@@ -585,9 +699,15 @@ export function HeaderBar({
 
       const onResize = () => {
         measure();
+        readInks();
         paint();
       };
       window.addEventListener("resize", onResize);
+      // A photo under the bar that arrives after the bar has painted: read it as soon as it is there.
+      const onLoad = (e: Event) => {
+        if (e.target instanceof HTMLImageElement && e.target.closest('[data-bar-tone="photo"]')) paint();
+      };
+      document.addEventListener("load", onLoad, true);
 
       // --- start: settle's large wordmark already stands from the first paint at the CSS estimate (its scale from the
       // estimated advance); the script waits for the display face (capped), measures the real width and eases the
@@ -620,6 +740,7 @@ export function HeaderBar({
         window.clearTimeout(rest);
         window.removeEventListener("scroll", onScroll);
         window.removeEventListener("resize", onResize);
+        document.removeEventListener("load", onLoad, true);
         real.removeEventListener("focusin", onFocusIn);
         real.removeEventListener("focusout", onFocusOut);
         host.style.removeProperty("--hb-top");
@@ -632,15 +753,8 @@ export function HeaderBar({
   const face = { variant, name, homeHref, links, action, menuHref, onMenu, place, clock, time };
 
   return (
-    <div ref={root} data-header-bar={variant} data-start={startTone} style={{ "--hb-adv": advanceEm(name).toFixed(3) } as CSSProperties}>
+    <div ref={root} data-header-bar={variant} style={{ "--hb-adv": advanceEm(name).toFixed(3) } as CSSProperties}>
       <div data-hb-move="" className="pointer-events-none fixed inset-x-0 top-0 z-[70]">
-        {/* Over a photo the scrolled ground is see-through at its edge: what passes under it is blurred, not sharp. */}
-        <div
-          aria-hidden="true"
-          data-hb-blur=""
-          className="absolute inset-x-0 top-0 h-[var(--hb-h)] backdrop-blur-md"
-          style={{ clipPath: startTone === "photo" ? "none" : NONE }}
-        />
         {/* The bar's ink over the page: one copy per ground, each clipped to the stretches it covers. */}
         {TONES.map((tone) => (
           <div
@@ -648,13 +762,14 @@ export function HeaderBar({
             aria-hidden="true"
             data-hb-copy={tone}
             className={`absolute inset-x-0 top-0 ${TONE_INK[tone]}`}
-            style={{ clipPath: tone === startTone ? "none" : NONE }}
+            style={{ clipPath: NONE }}
           >
             <Face {...face} tone={tone} />
           </div>
         ))}
-        {/* The real bar: the links, on top, their ink drawn by the copies under them once those show. */}
-        <header data-hb-real="" className={`relative ${TONE_INK[startTone]}`}>
+        {/* The real bar: the links, on top, their ink drawn by the copies under them once those show. Until then its
+            ink is the start tone's (blocks.css, "--- header-bar ---"). */}
+        <header data-hb-real="" className={`relative ${TONE_INK.ground}`}>
           <Face {...face} real bind={bind} />
         </header>
       </div>

package/skills/struq/blocks/headers/menu-curtain.tsx

@@ -15,14 +15,19 @@
 //
 // The bar turns its ink with what is under it, exactly at the edge: it is drawn three times (ink for the page ground,
 // on-photo, on-inverse), each copy clipped to the stretch of the bar its own sections cover. Sections opt in with
-// data-bar-tone="photo" or data-bar-tone="inverse"; anything else is ground. The curtain carries its own copy of the
+// data-bar-tone="photo" or data-bar-tone="inverse"; anything else is ground. Mark a section "photo" only where a photo
+// really runs under the bar's band (a full-bleed hero); a poster or a framed photo with ground above it is ground. The
+// start tone is read from the page too, never passed: before the script, the first section's data-bar-tone (the
+// element right after the bar, or that element's first child) picks the ink. The curtain carries its own copy of the
 // bar, so while it travels the bar's ink splits along its edge. The real bar (the link and the button) sits on top
-// with transparent text: one focusable bar, never three.
+// with transparent text: one focusable bar, never three. On the first screen the bar has no ground; once the page
+// scrolls each copy takes a solid ground in its own tone and a hairline (no blur, no tint), so body text passing under
+// the bar never prints through the name or the button.
 //
-// Mount it once at the top of the page; it is fixed and needs no wrapper:
-//   <MenuCurtain variant="gate" name="Noord" items={[{ label: "Werk", href: "/werk", image }]} startTone="photo"
+// Mount it once at the top of the page, right before the first section; it is fixed and needs no wrapper:
+//   <MenuCurtain variant="gate" name="Noord" items={[{ label: "Werk", href: "/werk", image }]}
 //     contact={{ label: "hallo@noord.studio", href: "mailto:hallo@noord.studio" }} place="Rotterdam" />
-// Keep the hero's type out of the top var(--menu-bar-h) of the screen; the bar never gets a ground of its own.
+// Keep the hero's type out of the top var(--menu-bar-h) of the screen (set on the nearest [data-blocks]).
 //
 // While open, the page under it does not move (Lenis stopped, or the root's overflow held without Lenis) and is
 // inert; Tab cycles the bar and the menu, Escape closes and gives focus back to where it was. A link to a spot on the
@@ -48,6 +53,13 @@ export type BarTone = "ground" | "photo" | "inverse";
 
 const TONES: BarTone[] = ["ground", "photo", "inverse"];
 const TONE_INK: Record<BarTone, string> = { ground: "text-ink", photo: "text-on-photo", inverse: "text-on-inverse" };
+// Once the page scrolls the bar stands on a solid ground in the tone under it, so body text never prints through its
+// ink: the page's surface, the inverse, and over a photo the palette's dark for bands over photos (the header bar's).
+const TONE_GROUND: Record<BarTone, string> = {
+  ground: "bg-surface-0",
+  photo: "bg-[var(--photo-ground,var(--inverse))]",
+  inverse: "bg-inverse",
+};
 const EMPTY = "inset(0px 0px 100% 0px)";
 const SLICES = [0, 1, 2, 3];
 const PANELS = [
@@ -91,6 +103,7 @@ function inertOutside(el: HTMLElement) {
  */
 function BarFace({
   real = false,
+  tone,
   name,
   homeHref,
   items,
@@ -100,6 +113,8 @@ function BarFace({
   onToggle,
 }: {
   real?: boolean;
+  /** The ink copies over the page: their ground and hairline, shown once the page scrolls. */
+  tone?: BarTone;
   name: string;
   homeHref: string;
   items: MenuItem[];
@@ -125,15 +140,21 @@ function BarFace({
     </>
   );
   return (
-    <div className="flex h-[var(--menu-bar-h)] items-center justify-between gap-6 px-sheet-margin">
+    <div className="relative flex h-[var(--menu-bar-h)] items-center justify-between gap-6 px-sheet-margin">
+      {tone ? (
+        <>
+          <div data-mc-ground="" aria-hidden="true" className={`absolute inset-0 ${TONE_GROUND[tone]}`} />
+          <div data-mc-line="" aria-hidden="true" className="absolute inset-x-0 bottom-0 h-px bg-current" />
+        </>
+      ) : null}
       {real ? (
-        <a href={homeHref} className={word}>
+        <a href={homeHref} className={`relative ${word}`}>
           {name}
         </a>
       ) : (
-        <span className={word}>{name}</span>
+        <span className={`relative ${word}`}>{name}</span>
       )}
-      <div className="grid justify-items-end">
+      <div className="relative grid justify-items-end">
         <ul data-menu-fallback="" className="m-0 flex list-none flex-wrap justify-end gap-x-4 gap-y-1 p-0 text-small [grid-area:1/1]">
           {items.map((item) => (
             <li key={item.label}>{real ? <a href={item.href}>{item.label}</a> : <span>{item.label}</span>}</li>
@@ -171,7 +192,6 @@ export function MenuCurtain({
   place = "Rotterdam",
   clock = false,
   timeZone = "Europe/Amsterdam",
-  startTone = "ground",
 }: {
   variant?: MenuCurtainVariant;
   /** The wordmark. */
@@ -187,8 +207,6 @@ export function MenuCurtain({
   clock?: boolean;
   /** IANA zone for the clock. */
   timeZone?: string;
-  /** The ground under the bar on the first paint, before the script measures it (the hero's, usually "photo"). */
-  startTone?: BarTone;
 }) {
   const root = useRef<HTMLDivElement>(null);
   const panel = useRef<HTMLDivElement>(null);
@@ -342,6 +360,10 @@ export function MenuCurtain({
           const s = spans[TONES[i]];
           face.style.clipPath = s ? `inset(${s[0]}px 0px ${barH - s[1]}px 0px)` : EMPTY;
         });
+        // The ground (and its hairline) arrives over the bar's own height of scroll; under reduced motion it cuts in.
+        const sy = Math.max(0, window.scrollY);
+        const k = reduce ? (sy > 2 ? 1 : 0) : Math.min(1, sy / Math.max(1, barH));
+        el.style.setProperty("--mc-k", k.toFixed(3));
       };
       // On Lenis this runs inside its scroll (ScrollTrigger.update), so the split never trails the page by a frame.
       const watch = ScrollTrigger.create({ start: 0, end: "max", onUpdate: ink, onRefresh: ink });
@@ -660,13 +682,8 @@ export function MenuCurtain({
       {/* The bar's ink over the page: one copy per ground, each clipped to the stretch it covers. */}
       <div aria-hidden="true" className="pointer-events-none fixed inset-x-0 top-0 z-[79]">
         {TONES.map((tone) => (
-          <div
-            key={tone}
-            data-tone-face={tone}
-            className={`absolute inset-x-0 top-0 ${TONE_INK[tone]}`}
-            style={{ clipPath: tone === startTone ? "none" : EMPTY }}
-          >
-            <BarFace {...face} />
+          <div key={tone} data-tone-face={tone} className={`absolute inset-x-0 top-0 ${TONE_INK[tone]}`}>
+            <BarFace {...face} tone={tone} />
           </div>
         ))}
       </div>

package/skills/struq/blocks/heroes/hero-poster.tsx

@@ -30,6 +30,10 @@
 // Phones: one word per line, the window between at the height that is left, showing the photo's own crop; the
 // entrance only (no pin, no open).
 //
+// The top line keeps clear of the site's bar on every width: the sheet's top room is the bar's height (header-bar's
+// --hb-top or menu-curtain's --menu-bar-h) plus a breath (blocks.css, --hp-pt), and the fit reads that room. The
+// poster stands on the page ground, so the section around it is ground for the bar: never mark it data-bar-tone="photo".
+//
 // Three variants of the same poster, picked with `variant`:
 // - window (the default, above): one letterbox window between the two lines.
 // - column: the two lines centred, fitted edge to edge, and a tall narrow slit to one side that cuts through them from
@@ -87,6 +91,21 @@ const sideOf = (el: HTMLElement) => {
   const pad = el.querySelector<HTMLElement>("[data-hp-sheet]");
   return pad ? parseFloat(getComputedStyle(pad).paddingLeft) || 0 : 0;
 };
+/** The sheet's top and bottom room as laid out, in px: the top keeps the site's bar clear (blocks.css, --hp-pt). */
+const padsOf = (el: HTMLElement) => {
+  const pad = el.querySelector<HTMLElement>("[data-hp-sheet]");
+  if (!pad) return 0;
+  const cs = getComputedStyle(pad);
+  return (parseFloat(cs.paddingTop) || 0) + (parseFloat(cs.paddingBottom) || 0);
+};
+/** Refits when the sheet's room changes without a resize: the site's bar measuring itself after the first fit. */
+const watchRoom = (el: HTMLElement, refit: () => void) => {
+  const sheet = el.querySelector<HTMLElement>("[data-hp-sheet]");
+  if (!sheet || typeof ResizeObserver === "undefined") return () => {};
+  const ro = new ResizeObserver(() => refit());
+  ro.observe(sheet);
+  return () => ro.disconnect();
+};
 /** The width the script-free estimates fit into: the screen inside the sheet margin on both sides. */
 const INSIDE = "(100vw - 2 * var(--spacing-sheet-margin))";
 
@@ -147,7 +166,7 @@ function PosterWindow({ image, lines, accent, place, link, className = "" }: Inn
         });
         const rows = wide ? [1, 1] : words.map((ws) => ws.length);
         const foot = el.querySelector<HTMLElement>("[data-hp-foot]")?.offsetHeight ?? 0;
-        const free = H - foot - (wide ? H * 0.1 : 64) - H * 0.12;
+        const free = H - foot - padsOf(el) - (wide ? H * 0.03 : 8) - H * 0.12;
         const k = Math.min(1, free / (LEADING * (sizes[0] * rows[0] + sizes[1] * rows[1])));
         return [Math.floor(sizes[0] * k), Math.floor(sizes[1] * k)];
       };
@@ -224,6 +243,7 @@ function PosterWindow({ image, lines, accent, place, link, className = "" }: Inn
       const onFonts = () => refit();
       document.fonts?.addEventListener?.("loadingdone", onFonts);
       window.addEventListener("resize", refit);
+      const unwatch = watchRoom(el, refit);
 
       // The photo decoded ahead of its first show.
       for (const img of q<HTMLImageElement>("img")) {
@@ -332,6 +352,7 @@ function PosterWindow({ image, lines, accent, place, link, className = "" }: Inn
         dead = true;
         document.fonts?.removeEventListener?.("loadingdone", onFonts);
         window.removeEventListener("resize", refit);
+        unwatch();
         mm.revert();
       };
     },
@@ -377,7 +398,7 @@ function PosterWindow({ image, lines, accent, place, link, className = "" }: Inn
       <h1 className="sr-only">{`${lines[0]} ${lines[1]}`}</h1>
 
       {/* The poster: line, window, line, foot. The lines stand above the photo as it opens past them. */}
-      <div data-hp-sheet="" className="relative flex h-full flex-col px-sheet-margin pb-6 pt-8 md:pb-[3svh] md:pt-[4svh]">
+      <div data-hp-sheet="" className="relative flex h-full flex-col px-sheet-margin pb-6 pt-[var(--hp-pt)] md:pb-[3svh]">
         <div data-hp-top="" className="relative z-10 will-change-transform">
           <p aria-hidden className="m-0">
             <span
@@ -401,7 +422,7 @@ function PosterWindow({ image, lines, accent, place, link, className = "" }: Inn
           >
             <div
               data-stack-photo=""
-              className="absolute inset-0 md:inset-auto md:-left-sheet-margin md:top-[calc(-4svh_-_0.84_*_var(--hp-s1,var(--hp-e1))_-_1.2svh)] md:h-svh md:w-screen"
+              className="absolute inset-0 md:inset-auto md:-left-sheet-margin md:top-[calc(0px_-_var(--hp-pt)_-_0.84_*_var(--hp-s1,var(--hp-e1))_-_1.2svh)] md:h-svh md:w-screen"
             >
               <Image
                 src={image.src}
@@ -623,7 +644,7 @@ function PosterColumn({ image, lines, accent, place, link, className = "" }: Inn
           return width > 0 ? (100 * room) / width : 100;
         });
         const rows = wide ? [1, 1] : words.map((ws) => ws.length);
-        const free = H - (foot?.offsetHeight ?? 0) - (wide ? H * 0.2 : 140);
+        const free = H - (foot?.offsetHeight ?? 0) - padsOf(el) - (wide ? H * 0.13 : 84);
         const k = Math.min(1, free / (LEADING * (sizes[0] * rows[0] + sizes[1] * rows[1])));
         return [Math.floor(sizes[0] * k), Math.floor(sizes[1] * k)];
       };
@@ -690,6 +711,7 @@ function PosterColumn({ image, lines, accent, place, link, className = "" }: Inn
       const onFonts = () => refit();
       document.fonts?.addEventListener?.("loadingdone", onFonts);
       window.addEventListener("resize", refit);
+      const unwatch = watchRoom(el, refit);
       decoded.then(() => !dead && grade());
 
       const masks = q("[data-hp-rise]");
@@ -775,6 +797,7 @@ function PosterColumn({ image, lines, accent, place, link, className = "" }: Inn
         dead = true;
         document.fonts?.removeEventListener?.("loadingdone", onFonts);
         window.removeEventListener("resize", refit);
+        unwatch();
         mm.revert();
       };
     },
@@ -813,7 +836,7 @@ function PosterColumn({ image, lines, accent, place, link, className = "" }: Inn
       data-hp-layer={copy ? "copy" : "ground"}
       aria-hidden={copy || undefined}
       data-hp-sheet=""
-      className={`absolute inset-0 flex flex-col px-sheet-margin pb-6 pt-8 md:pb-[3svh] md:pt-[4svh] ${copy ? "text-on-photo" : "text-ink"}`}
+      className={`absolute inset-0 flex flex-col px-sheet-margin pb-6 pt-[var(--hp-pt)] md:pb-[3svh] ${copy ? "text-on-photo" : "text-ink"}`}
     >
       <div className="flex-1" />
       <div data-hp-l1="" className="will-change-transform">
@@ -908,7 +931,7 @@ function PosterStack({ image, lines, accent, place, link, className = "" }: Inne
         const wide = W >= 768;
         const room = W - 2 * sideOf(el);
         const widest = Math.max(1, ...wordEls.map((w) => widthAt100(w, false)));
-        const free = H - (foot?.offsetHeight ?? 0) - (wide ? H * 0.1 : 72) - m * H * (wide ? 0.075 : 0.08);
+        const free = H - (foot?.offsetHeight ?? 0) - padsOf(el) - (wide ? H * 0.03 : 16) - m * H * (wide ? 0.075 : 0.08);
         return [Math.floor(Math.min((100 * room) / widest, free / (LEADING * n)))];
       };
 
@@ -930,6 +953,7 @@ function PosterStack({ image, lines, accent, place, link, className = "" }: Inne
       const onFonts = () => refit();
       document.fonts?.addEventListener?.("loadingdone", onFonts);
       window.addEventListener("resize", refit);
+      const unwatch = watchRoom(el, refit);
       for (const img of q("img") as HTMLImageElement[]) img.decode?.().catch(() => {});
 
       const masks = q("[data-hp-rise]");
@@ -1047,16 +1071,18 @@ function PosterStack({ image, lines, accent, place, link, className = "" }: Inne
         dead = true;
         document.fonts?.removeEventListener?.("loadingdone", onFonts);
         window.removeEventListener("resize", refit);
+        unwatch();
         mm.revert();
       };
     },
     { scope: stage, dependencies: [lines[0], lines[1], accent] },
   );
 
-  // The script-free estimate: the longest word over the width, capped so the rows and their windows fit the height.
+  // The script-free estimate: the longest word over the width, capped so the rows and their windows fit the height
+  // left under the sheet's top room (--hp-pt, which keeps the site's bar clear).
   const per = (longest * EM_PER_CHAR).toFixed(2);
-  const est = `min(calc(${INSIDE} / ${per}), calc((90svh - 2rem - ${m} * 7.5svh) / ${(n * LEADING).toFixed(2)}))`;
-  const estPhone = `min(calc(${INSIDE} / ${per}), calc((100svh - 7rem - ${m} * 8svh) / ${(n * LEADING).toFixed(2)}))`;
+  const est = `min(calc(${INSIDE} / ${per}), calc((96svh - var(--hp-pt) - 2rem - ${m} * 7.5svh) / ${(n * LEADING).toFixed(2)}))`;
+  const estPhone = `min(calc(${INSIDE} / ${per}), calc((100svh - var(--hp-pt) - 5rem - ${m} * 8svh) / ${(n * LEADING).toFixed(2)}))`;
 
   return (
     <section
@@ -1068,7 +1094,7 @@ function PosterStack({ image, lines, accent, place, link, className = "" }: Inne
       style={{ "--hp-e": est, "--hp-p": estPhone } as React.CSSProperties}
     >
       <h1 className="sr-only">{`${lines[0]} ${lines[1]}`}</h1>
-      <div data-hp-sheet="" className="relative flex h-full flex-col px-sheet-margin pb-6 pt-8 md:pb-[3svh] md:pt-[4svh]">
+      <div data-hp-sheet="" className="relative flex h-full flex-col px-sheet-margin pb-6 pt-[var(--hp-pt)] md:pb-[3svh]">
         {marked.map((w, i) => (
           <div key={i} className="contents">
             <div data-hp-row="" className="relative z-10 will-change-transform">

package/skills/struq/blocks/kit/HeroCanvas.tsx

@@ -108,7 +108,8 @@ export function HeroCanvas({ scene, image, grade = 0.25, scrim = 0, className =
 
       let renderer: import("three").WebGLRenderer;
       try {
-        renderer = new THREE.WebGLRenderer({ antialias: false, alpha: false, powerPreference: "high-performance" });
+        // alpha: a resized or discarded buffer is transparent, so the poster or the ground shows, never opaque black.
+        renderer = new THREE.WebGLRenderer({ antialias: false, alpha: true, powerPreference: "high-performance" });
       } catch {
         return; // no WebGL: the poster stays, which is the designed fallback
       }
@@ -121,6 +122,8 @@ export function HeroCanvas({ scene, image, grade = 0.25, scrim = 0, className =
       slot.appendChild(canvas);
 
       const palette = readPalette(el);
+      // An opaque clear in the page ground: a scene that does not set its own never paints black behind itself.
+      renderer.setClearColor(new THREE.Color(palette.surface), 1);
       let hero: Awaited<ReturnType<CreateScene>>;
       try {
         hero = await createScene({
@@ -220,7 +223,8 @@ export function HeroCanvas({ scene, image, grade = 0.25, scrim = 0, className =
 
       const ro = new ResizeObserver(() => {
         size();
-        if (still) draw();
+        // A resize clears the canvas: draw at once, in this task, even when the loop is paused off screen.
+        draw();
       });
       ro.observe(el);
 

package/skills/struq/blocks/kit/SplitHeadline.tsx

@@ -7,7 +7,8 @@
 //   Vis en groente, van het seizoen.
 // </SplitHeadline>
 //
-// Pass plain text (or text with <em>): SplitText needs text nodes, not components.
+// Pass plain text (or text with <em>): SplitText needs text nodes, not components. The accent helper's no-wrap unit
+// (the mark with the punctuation touching it, ./accent) is cut as one piece, so it always lands whole on one line.
 import { useRef } from "react";
 import { gsap, SplitText, useGSAP } from "./gsap";