@struq/skill 0.5.2 → 0.5.3

package/skills/struq/blocks/kit/subject/patterns.ts

@@ -0,0 +1,204 @@
+// components/struq/kit/subject/patterns.ts (Struq recipe)
+// The pattern pieces PatternPaper draws: five women's blocks at about a European size 38, in centimetres, each the
+// net piece (the stitching line) as straight and cubic segments, from which the cut line is offset outward. Drafted
+// the way a block is drafted, and checked against the anatomy every block shares:
+// - Bodice front: front neck 8.5 deep and 7 wide, a quarter curve that leaves the shoulder at a right angle and meets
+//   centre front square; shoulder sloping 20 degrees; the armhole scoops inward to the cross-front (17.6) before it
+//   swings out to the underarm; waist dart under the bust point; centre front on the fold.
+// - Bodice back: back neck only 2.2 deep; a longer shoulder; a shallower armhole (cross-back 18.8); waist dart;
+//   centre back on the fold.
+// - Sleeve: a set-in sleeve cap, an S curve each side (the underarm part scoops, the crown part swells), crown 14 high,
+//   the front side steeper than the back; underarm seams tapering to the wrist; a 3 cm hem.
+// - Skirt panel: an A-line front, the waist rising 1.5 to the side, a hip curve to 20 below the waist, a flared side
+//   seam, the hem curved to meet the side seam and the fold square; a 4 cm hem; centre front on the fold.
+// - Trouser front: the crotch curve scoops inward from the centre front line to the crotch point 27 below the
+//   waist; the crease line (grain) halfway across the hip; knee and hem narrower; a 4 cm hem.
+// Notches: one on a front armhole, two on a back armhole (and on the sleeve's back), as every commercial pattern marks
+// them. Each template ends where it starts, so the outline closes.
+import type { Outline, Pt } from "./draw";
+
+export type PieceName = "bodice-front" | "bodice-back" | "sleeve" | "skirt-panel" | "trouser-front";
+
+export type PatternTemplate = {
+  outline: Outline;
+  /** The seam allowance where a segment does not set its own. */
+  allowance: number;
+  /** The straight grain arrow, from and to. */
+  grain: [Pt, Pt];
+  /** A fold edge: the segment index lying on it and its bracket's span along it (two points on the fold). */
+  fold?: { side: "CF" | "CB"; from: Pt; to: Pt };
+  /** Notches: on segment `seg` at t (0 to 1); `count` 2 for a back notch. */
+  notches: { seg: number; t: number; count?: 1 | 2 }[];
+  /** Darts: the two legs on segment `seg` at t1 and t2, the apex. */
+  darts: { seg: number; t1: number; t2: number; apex: Pt }[];
+  /** The label block's top left corner and its width, in the piece's units. */
+  label: { at: Pt; width: number };
+  /** True when the piece is cut as a pair (no fold). */
+  pair: boolean;
+  /** Long pieces lie on their side on a wide sheet. */
+  long?: boolean;
+  /** Where the label block stands once a long piece is turned (turned coordinates). */
+  turnedLabel?: { at: Pt; width: number };
+};
+
+export const PATTERN_PIECES: Record<PieceName, PatternTemplate> = {
+  "bodice-front": {
+    outline: {
+      start: [0, 8.5],
+      segs: [
+        { to: [7, 0], c1: [3.86, 8.5], c2: [7, 4.69] },
+        { to: [19.5, 4.5] },
+        { to: [17.6, 14], c1: [18.9, 7.5], c2: [17.6, 10.5] },
+        { to: [23, 21], c1: [17.6, 18.5], c2: [19.8, 21] },
+        { to: [21.5, 38] },
+        { to: [0, 39.5], c1: [14, 38.8], c2: [6, 39.5] },
+        { to: [0, 8.5], fold: true },
+      ],
+    },
+    allowance: 1.5,
+    grain: [
+      [16.4, 23],
+      [16.4, 34],
+    ],
+    fold: { side: "CF", from: [0, 13], to: [0, 35] },
+    notches: [
+      { seg: 3, t: 0.18 },
+      { seg: 4, t: 0.45 },
+    ],
+    darts: [{ seg: 5, t1: 0.44, t2: 0.62, apex: [9.5, 26] }],
+    label: { at: [2, 11.2], width: 12.5 },
+    pair: false,
+  },
+  "bodice-back": {
+    outline: {
+      start: [0, 2.2],
+      segs: [
+        { to: [7.5, 0], c1: [4.2, 2.2], c2: [7.5, 1.2] },
+        { to: [20.5, 4.6] },
+        { to: [18.8, 15], c1: [19.7, 8], c2: [18.8, 11.5] },
+        { to: [23, 21.5], c1: [18.8, 18.8], c2: [20.3, 21.5] },
+        { to: [21.5, 38.5] },
+        { to: [0, 38], c1: [14, 38.4], c2: [6, 38] },
+        { to: [0, 2.2], fold: true },
+      ],
+    },
+    allowance: 1.5,
+    grain: [
+      [16.6, 23],
+      [16.6, 34],
+    ],
+    fold: { side: "CB", from: [0, 8], to: [0, 34] },
+    notches: [
+      { seg: 3, t: 0.22, count: 2 },
+      { seg: 4, t: 0.45 },
+    ],
+    darts: [{ seg: 5, t1: 0.43, t2: 0.59, apex: [10, 23] }],
+    label: { at: [2, 7.5], width: 13 },
+    pair: false,
+  },
+  sleeve: {
+    outline: {
+      start: [0, 14],
+      segs: [
+        { to: [8.5, 8], c1: [3.5, 14], c2: [6, 11.5] },
+        { to: [17, 0], c1: [11, 4.5], c2: [13.5, 0] },
+        { to: [25.8, 7.8], c1: [20.8, 0], c2: [23.3, 4.2] },
+        { to: [34, 14], c1: [28.2, 11.2], c2: [30.6, 14] },
+        { to: [29, 58] },
+        { to: [5, 58], allowance: 3 },
+        { to: [0, 14] },
+      ],
+    },
+    allowance: 1.5,
+    grain: [
+      [17, 34],
+      [17, 52],
+    ],
+    notches: [
+      { seg: 0, t: 0.62, count: 2 },
+      { seg: 1, t: 0.999 },
+      { seg: 3, t: 0.4 },
+    ],
+    darts: [],
+    label: { at: [8.6, 17.5], width: 16.8 },
+    pair: true,
+  },
+  "skirt-panel": {
+    outline: {
+      start: [0, 1.5],
+      segs: [
+        { to: [18, 0], c1: [6, 1.5], c2: [13, 1.1] },
+        { to: [22.5, 20], c1: [20.5, 6], c2: [21.8, 12] },
+        { to: [29, 62] },
+        { to: [0, 64], c1: [20, 63.4], c2: [10, 64], allowance: 4 },
+        { to: [0, 1.5], fold: true },
+      ],
+    },
+    allowance: 1.5,
+    grain: [
+      [17, 36],
+      [17, 56],
+    ],
+    fold: { side: "CF", from: [0, 10], to: [0, 58] },
+    notches: [
+      { seg: 2, t: 0.02 },
+      { seg: 0, t: 0.999 },
+    ],
+    darts: [{ seg: 0, t1: 0.455, t2: 0.585, apex: [9.75, 11] }],
+    label: { at: [2.5, 18], width: 14 },
+    pair: false,
+  },
+  "trouser-front": {
+    outline: {
+      start: [5.5, 0],
+      segs: [
+        { to: [23.5, 0.6] },
+        { to: [25.8, 18], c1: [25.2, 6], c2: [25.8, 12] },
+        { to: [23.4, 60], c1: [25.8, 36], c2: [23.4, 48] },
+        { to: [22.4, 95] },
+        { to: [3.4, 95], allowance: 4 },
+        { to: [2.4, 60] },
+        { to: [0, 27], c1: [2.4, 45], c2: [1.5, 34] },
+        { to: [4.5, 18], c1: [3, 26.6], c2: [4.5, 23] },
+        { to: [5.5, 0] },
+      ],
+    },
+    allowance: 1.5,
+    grain: [
+      [12.9, 50],
+      [12.9, 86],
+    ],
+    notches: [
+      { seg: 7, t: 0.999 },
+      { seg: 1, t: 0.999 },
+      { seg: 2, t: 0.999 },
+      { seg: 5, t: 0.999 },
+    ],
+    darts: [{ seg: 0, t1: 0.439, t2: 0.55, apex: [14.4, 9] }],
+    label: { at: [6.2, 30], width: 13.5 },
+    pair: true,
+    long: true,
+    turnedLabel: { at: [24, -22.5], width: 24 },
+  },
+};
+
+/** A template turned a quarter (waist to the left), for a long piece on a wide sheet. */
+export function turned(template: PatternTemplate): PatternTemplate {
+  const t = (p: Pt): Pt => [p[1], -p[0]];
+  return {
+    ...template,
+    outline: {
+      start: t(template.outline.start),
+      segs: template.outline.segs.map((seg) => ({
+        ...seg,
+        to: t(seg.to),
+        c1: seg.c1 ? t(seg.c1) : undefined,
+        c2: seg.c2 ? t(seg.c2) : undefined,
+      })),
+    },
+    grain: [t(template.grain[0]), t(template.grain[1])],
+    fold: template.fold ? { ...template.fold, from: t(template.fold.from), to: t(template.fold.to) } : undefined,
+    darts: template.darts.map((dart) => ({ ...dart, apex: t(dart.apex) })),
+    label: template.turnedLabel ?? { at: t([template.label.at[0] + template.label.width, template.label.at[1]]), width: template.label.width },
+  };
+}

package/skills/struq/blocks/preloaders/preloader-stack.tsx

@@ -29,6 +29,14 @@
 // (one number, --stack-n), which the script takes over when it hydrates. If the bundle never arrives, that CSS hides
 // the armed cover at 2.3 seconds and the hold lets go at 2.4; once the script runs, its own ceiling does the same.
 // `always` plays it on every load (the lab).
+//
+// An opening without a photo (hero-opener without an image, a background-* block): pass opening="photoless", or no
+// hero at all. The stack then never shows a photo the page does not have. The frame flips through panels in the
+// palette's own grounds (a raised surface, the field, the inverse), each with the name's first letter in the display
+// face, held and counted the same way, and the last panel is the opening's own ground, read from the page at the
+// target (or, without one, from what stands at the middle of the screen). The frame grows on that ground to the
+// target's box (the full screen without one), so the cover lands on the opening's first frame and simply goes.
+//   <PreloaderStack name="Noord" opening="photoless" />
 import Image from "next/image";
 import { useRef, useState } from "react";
 import { gsap, useGSAP } from "../kit/gsap";
@@ -56,8 +64,8 @@ const T = {
 /** Runs while the browser parses the cover, before the first paint. Never throws. */
 const ARM = `(function(){try{var e=document.currentScript.parentElement;if(matchMedia("(prefers-reduced-motion: reduce)").matches)return;if(!e.hasAttribute("data-always")&&sessionStorage.getItem("${SEEN_KEY}")==="1")return;e.setAttribute("data-t0",String(performance.now()));e.setAttribute("data-armed","");document.documentElement.setAttribute("data-curtain","closed");if(!location.hash){history.scrollRestoration="manual";scrollTo(0,0)}var k={" ":1,PageDown:1,PageUp:1,ArrowDown:1,ArrowUp:1,Home:1,End:1},o={capture:true,passive:false},s=function(v){v.preventDefault();v.stopImmediatePropagation()},d=function(v){if(k[v.key])v.preventDefault()},r=function(){removeEventListener("wheel",s,o);removeEventListener("touchmove",s,o);removeEventListener("keydown",d,true);window.__preloaderStackHold=null};addEventListener("wheel",s,o);addEventListener("touchmove",s,o);addEventListener("keydown",d,true);window.__preloaderStackHold=r;setTimeout(r,${BUDGET * 1000})}catch(x){}})()`;
 
-/** Runs after the frame is parsed: marks the cover data-first once the first print is loaded and decoded. */
-const FIRST = `(function(){try{var r=document.currentScript.closest("[data-preloader]"),i=r&&r.querySelector("[data-cut] img");if(!i)return;var s=function(){r.setAttribute("data-first","")},g=function(){i.decode?i.decode().then(s,function(){}):s()};i.complete?g():i.addEventListener("load",g,{once:true})}catch(x){}})()`;
+/** Runs after the frame is parsed: marks the cover data-first once the first print is loaded and decoded (a panel at once). */
+const FIRST = `(function(){try{var r=document.currentScript.closest("[data-preloader]"),c=r&&r.querySelector("[data-cut]"),i=c&&c.querySelector("img");if(!c)return;var s=function(){r.setAttribute("data-first","")};if(!i)return s();var g=function(){i.decode?i.decode().then(s,function(){}):s()};i.complete?g():i.addEventListener("load",g,{once:true})}catch(x){}})()`;
 
 /** Runs after the caption is parsed: marks the cover data-fonts once the caption's own faces are loaded. */
 const FONTS = `(function(){var r;try{r=document.currentScript.closest("[data-preloader]");var f=document.fonts,d=function(){r.setAttribute("data-fonts","")};if(!f)return d();Promise.all([].map.call(r.querySelectorAll("[data-caption] p"),function(p){var c=getComputedStyle(p);return f.load(c.fontStyle+" "+c.fontWeight+" 16px "+c.fontFamily)})).then(d,d)}catch(x){r&&r.setAttribute("data-fonts","")}})()`;
@@ -81,16 +89,33 @@ function flipPlan(count: number, room: number): number[] {
   return [];
 }
 
+/** The photoless panels, in order: the palette's own grounds, each in its own ink. */
+const PANELS = ["bg-surface-2 text-ink", "scene-field", "bg-surface-1 text-ink", "scene-inverse"] as const;
+
+/** The first colour behind a point that is not see-through, walking up from an element; null when there is none. */
+function groundOf(start: Element | null): string | null {
+  for (let n = start; n; n = n.parentElement) {
+    const c = getComputedStyle(n).backgroundColor;
+    if (c && c !== "transparent" && !/^rgba\([^)]*,\s*0\)$/.test(c)) return c;
+  }
+  return null;
+}
+
 /** Set once the cover has played in this document, so a remount never replays it. */
 let playedThisDocument = false;
 /** A teardown's lift, held back one task so a remount in the same commit (strict mode) can take it back. */
 let pendingTeardown = 0;
 
 type Props = {
-  /** The flip-through, in order: four to six photos of the client's work. */
-  photos: StruqImage[];
-  /** The hero's own photo, the one the page shows in its [data-stack-target] box. */
-  hero: StruqImage;
+  /** The flip-through, in order: four to six photos of the client's work. Not used when the opening is photoless. */
+  photos?: StruqImage[];
+  /** The hero's own photo, the one the page shows in its [data-stack-target] box. Left out, the opening is photoless. */
+  hero?: StruqImage;
+  /**
+   * "photoless" when the opening shows no photo (hero-opener without an image, a background-* block): the frame flips
+   * through palette panels and lands on the opening's own ground. "photo" (the default) needs `hero`.
+   */
+  opening?: "photo" | "photoless";
   /** The hero image's box on the page; the frame lands on it. Without one it lands on the full screen. */
   target?: string;
   /** The client's name, under the frame. */
@@ -102,8 +127,19 @@ type Props = {
   className?: string;
 };
 
-export function PreloaderStack({ photos, hero, target = "[data-stack-target]", name, always = false, onReveal, className = "" }: Props) {
+export function PreloaderStack({
+  photos = [],
+  hero,
+  opening = "photo",
+  target = "[data-stack-target]",
+  name,
+  always = false,
+  onReveal,
+  className = "",
+}: Props) {
   const root = useRef<HTMLDivElement>(null);
+  const photoless = opening === "photoless" || !hero;
+  const mono = name ? (Array.from(name.trim())[0] ?? "") : "";
   const [done, setDone] = useState(false);
 
   useGSAP(
@@ -150,18 +186,19 @@ export function PreloaderStack({ photos, hero, target = "[data-stack-target]", n
       const frame = q("[data-frame]")[0] as HTMLElement;
       const cuts = q("[data-cut]") as HTMLElement[];
       const layer = q("[data-hero-layer]")[0] as HTMLElement;
-      const box = q("[data-hero-box]")[0] as HTMLElement;
-      const heroImg = box.querySelector("img") as HTMLImageElement;
+      const box = q("[data-hero-box]")[0] as HTMLElement | undefined;
+      const fill = q("[data-hero-fill]")[0] as HTMLElement | undefined;
+      const heroImg = box?.querySelector("img") ?? null;
       const caption = q("[data-caption]")[0] as HTMLElement | undefined;
 
-      // Decode everything up front: a cut never shows a half-drawn photo.
-      const decoded = cuts.map(() => false);
-      let heroReady = false;
+      // Decode everything up front: a cut never shows a half-drawn photo. A panel has nothing to decode.
+      const decoded = cuts.map((c) => !c.querySelector("img"));
+      let heroReady = !heroImg;
       cuts.forEach((c, i) => {
         const img = c.querySelector("img");
         img?.decode().then(() => (decoded[i] = true), () => undefined);
       });
-      heroImg.decode().then(() => (heroReady = true), () => undefined);
+      heroImg?.decode().then(() => (heroReady = true), () => undefined);
 
       const begin = () => {
         if (cancelled) return;
@@ -189,8 +226,13 @@ export function PreloaderStack({ photos, hero, target = "[data-stack-target]", n
         const vh = el.clientHeight;
         const S = boxOf(frame.getBoundingClientRect());
         const R = found ? boxOf(found.getBoundingClientRect()) : { x: 0, y: 0, w: vw, h: vh };
-        const iw = heroImg.naturalWidth || hero.width;
-        const ih = heroImg.naturalHeight || hero.height;
+        // Photoless: the landing panel is the opening's own ground, at the target or at the middle of the screen.
+        if (fill) {
+          const under = found ?? document.elementsFromPoint(vw / 2, vh / 2).find((n) => !el.contains(n)) ?? null;
+          fill.style.backgroundColor = groundOf(under) ?? getComputedStyle(ground).backgroundColor;
+        }
+        const iw = heroImg?.naturalWidth || hero?.width || 1;
+        const ih = heroImg?.naturalHeight || hero?.height || 1;
         // A hero whose window shows a larger registered photo marks that photo's box (data-stack-photo, inside the
         // target): the print is then laid as object-cover of that box, while the frame still lands on the target.
         const photoEl = found?.querySelector<HTMLElement>("[data-stack-photo]");
@@ -198,7 +240,7 @@ export function PreloaderStack({ photos, hero, target = "[data-stack-target]", n
         // The photo at its own aspect, scaled and centred exactly as object-cover shows it in P. Seen through R it
         // is the page's hero, pixel for pixel; seen through a smaller frame, scaled to cover that frame.
         const s1 = Math.max(P.w / iw, P.h / ih);
-        Object.assign(box.style, {
+        if (box) Object.assign(box.style, {
           left: `${P.x + P.w / 2 - (iw * s1) / 2}px`,
           top: `${P.y + P.h / 2 - (ih * s1) / 2}px`,
           width: `${iw * s1}px`,
@@ -231,7 +273,7 @@ export function PreloaderStack({ photos, hero, target = "[data-stack-target]", n
             dx = lerp(S.x + S.w / 2, P.x + P.w / 2, grown.p) - (P.x + P.w / 2);
             dy = lerp(S.y + S.h / 2, P.y + P.h / 2, grown.p) - (P.y + P.h / 2);
           }
-          box.style.transform = `translate(${dx}px, ${dy}px) scale(${k})`;
+          if (box) box.style.transform = `translate(${dx}px, ${dy}px) scale(${k})`;
           layer.style.clipPath = `inset(${F.y}px ${vw - F.x - F.w}px ${vh - F.y - F.h}px ${F.x}px)`;
         };
         paint();
@@ -326,7 +368,13 @@ export function PreloaderStack({ photos, hero, target = "[data-stack-target]", n
       <div data-ground="" className="absolute inset-0 bg-surface-0 text-ink">
         <div className="absolute left-1/2 top-[45%] w-[44vw] -translate-x-1/2 -translate-y-1/2 md:w-[19vw]">
           <div data-frame="" className="relative aspect-[3/4] w-full overflow-hidden">
-            {photos.map((photo, i) => (
+            {photoless
+              ? PANELS.map((panel) => (
+                  <div key={panel} data-cut="" className={`invisible absolute inset-0 grid place-items-center ${panel}`}>
+                    {mono ? <span className="font-display text-[24vw] leading-none md:text-[10vw]">{mono}</span> : null}
+                  </div>
+                ))
+              : photos.map((photo, i) => (
               <div key={photo.src} data-cut="" className="invisible absolute inset-0">
                 {/* The first print shows from the first paint (blocks.css), so it is fetched first. */}
                 <Image
@@ -339,7 +387,7 @@ export function PreloaderStack({ photos, hero, target = "[data-stack-target]", n
                   className="object-cover"
                 />
               </div>
-            ))}
+                ))}
           </div>
           {/* Parsed right after the frame: the first print shows (blocks.css) only once it is loaded and decoded. */}
           <script dangerouslySetInnerHTML={{ __html: FIRST }} />
@@ -361,9 +409,14 @@ export function PreloaderStack({ photos, hero, target = "[data-stack-target]", n
       </div>
       {/* The hero's photo over everything, seen through the growing frame. Same file and sizes as the page's hero. */}
       <div data-hero-layer="" className="invisible absolute inset-0">
-        <div data-hero-box="" className="absolute origin-center">
-          <Image src={hero.src} alt="" fill sizes="100vw" priority unoptimized={hero.unoptimized} className="object-cover" />
-        </div>
+        {hero && !photoless ? (
+          <div data-hero-box="" className="absolute origin-center">
+            <Image src={hero.src} alt="" fill sizes="100vw" priority unoptimized={hero.unoptimized} className="object-cover" />
+          </div>
+        ) : (
+          // Photoless: the opening's own ground, set from the page as the flip begins.
+          <div data-hero-fill="" className="absolute inset-0 bg-surface-0" />
+        )}
       </div>
     </div>
   );

package/skills/struq/blocks/showpieces/hero-opener.tsx

@@ -10,6 +10,17 @@
 // <HeroOpener image={images.hero[0]} split={["Vuur", "Noord"]} lead="..." cta={...} />
 //
 // <HeroOpener image={images.hero[0]} title="Koken op vuur." accent="vuur" lead="..." cta={...} />
+// <HeroOpener title="Getijden" backdrop={<TideLines />} lead="..." cta={...} />
+//
+// Without a photo the opener is type on the inverse ground, over the site's own motif. `backdrop` takes the builder's
+// own drawing (an SVG or a small canvas from the site's world), set behind the display line; it wins over `scene`.
+// `scene` picks a stock WebGL field instead ("dots", "contours") or nothing at all ("none": the ground and the type).
+// The dots are the default only so earlier pages keep working: a fallback, not a choice. Every photoless site that
+// leaves it on opens on the same dot wave, so give it a backdrop of its own or pick a scene that fits.
+//
+// The section says its ground to the header bar (data-bar-tone): "photo" over a photo, "inverse" without one, and
+// "ground" when a className sets a page surface (bg-surface-*). Any other ground a className brings needs `barTone`.
+// The scrim and the handover's dim are data-veil, so the bar reads the photo under it as the page shows it.
 //
 // The line is the display face at poster size, with at most one italic accent word: the site's one accent word, marked
 // in place when the title holds it (the same mark as the Statement and the Close, kept whole by SplitText's line cut),
@@ -20,7 +31,7 @@
 // The entrance (the line rising through its masks, the split words, the lead and the CTA) waits for
 // any preloader or page transition to start leaving (whenUncovered, from the helper the frames share),
 // and plays at once when nothing covers the page.
-import { useRef } from "react";
+import { useRef, type ReactNode } from "react";
 import { findAccent, withAccent } from "../kit/accent";
 import { HeroCanvas } from "../kit/HeroCanvas";
 import { MagneticButton } from "../kit/MagneticButton";
@@ -29,7 +40,7 @@ import type { StruqImage } from "../kit/images";
 import { whenUncovered } from "../preloaders/preloader-slices-uncovered";
 
 type Props = {
-  /** The beeldbank or client photo. Without one (imageFit "none"), the opener is typographic on the inverse ground over the dots scene. */
+  /** The beeldbank or client photo. Without one, the opener is typographic on the inverse ground, over `backdrop` or `scene`. */
   image?: StruqImage;
   /** The poster line ("across"). */
   title?: string;
@@ -52,10 +63,34 @@ type Props = {
    * beeldbank. With no calm left or right side, the lead gets a fixed backing and a step up in size.
    */
   calm?: "left" | "right" | "none";
+  /**
+   * Without a photo: the stock WebGL field behind the type, or "none" for the ground alone. "dots" by default, kept
+   * only so earlier pages keep working; a backdrop wins over it.
+   */
+  scene?: "dots" | "contours" | "none";
+  /** Without a photo: the builder's own motif (an SVG or a small canvas), drawn behind the display line. Wins over scene. */
+  backdrop?: ReactNode;
+  /** The ground the header bar reads here, when a className turns it to one the block cannot tell from its classes. */
+  barTone?: "ground" | "photo" | "inverse";
   className?: string;
 };
 
-export function HeroOpener({ image, title, accent, split, lead, cta, header, scrim = 0.34, calm, className = "" }: Props) {
+export function HeroOpener({
+  image,
+  title,
+  accent,
+  split,
+  lead,
+  cta,
+  header,
+  scrim = 0.34,
+  calm,
+  scene = "dots",
+  backdrop,
+  barTone,
+  className = "",
+}: Props) {
+  const tone = barTone ?? (image ? "photo" : /(^|\s)bg-surface-\d(\s|$)/.test(className) ? "ground" : "inverse");
   // The lead goes on the photo's calm side; the CTA takes the other. Over a busy frame (no calm
   // side known) the lead gets a flat backing at a fixed opacity and is set a step larger.
   const side = calm ?? (image?.negativeSpace === "left" || image?.negativeSpace === "right" ? image.negativeSpace : image ? "none" : "left");
@@ -129,11 +164,24 @@ export function HeroOpener({ image, title, accent, split, lead, cta, header, scr
   const size = "text-[19vw] md:text-[16vw]";
   const poster = `font-display block ${size} leading-[0.92] tracking-[-0.045em] [word-spacing:0.09em]`;
   return (
-    <section ref={stage} data-showpiece="hero-opener" className={`relative h-svh overflow-hidden ${image ? "bg-black text-on-photo" : "scene-inverse"} ${className}`}>
+    <section
+      ref={stage}
+      data-showpiece="hero-opener"
+      data-bar-tone={tone}
+      className={`relative h-svh overflow-hidden ${image ? "bg-black text-on-photo" : "scene-inverse"} ${className}`}
+    >
       <div data-opener-inner="" className="absolute inset-0 origin-top">
-        {image ? <HeroCanvas scene="ripple" image={image} grade={0.15} priority /> : <HeroCanvas scene="dots" />}
-        {image ? <div aria-hidden className="absolute inset-0 bg-black" style={{ opacity: scrim }} /> : null}
-        <div data-opener-dim="" aria-hidden className="absolute inset-0 bg-black opacity-0" />
+        {image ? (
+          <HeroCanvas scene="ripple" image={image} grade={0.15} priority />
+        ) : backdrop ? (
+          <div data-opener-backdrop="" aria-hidden className="absolute inset-0 overflow-hidden">
+            {backdrop}
+          </div>
+        ) : scene !== "none" ? (
+          <HeroCanvas scene={scene} />
+        ) : null}
+        {image ? <div data-veil="" aria-hidden className="absolute inset-0 bg-black" style={{ opacity: scrim }} /> : null}
+        <div data-opener-dim="" data-veil="" aria-hidden className="absolute inset-0 bg-black opacity-0" />
         {header ? <div className="absolute inset-x-0 top-0 z-20">{header}</div> : null}
         {split ? (
           <h1 aria-label={split.join(" ")} className="absolute inset-x-0 top-1/2 z-10 flex -translate-y-1/2 justify-between px-sheet-margin">

package/skills/struq/blocks/showpieces/image-to-fullbleed.tsx

@@ -8,8 +8,15 @@
 // <ImageToFullbleed image={images.hero[0]} left="Zout" right="Noord" line="Koken met wat het seizoen geeft." />
 //
 // Reduced motion and phones: the composed still, the photo full bleed with both words and the line.
+//
+// Each word fits its own column at every width, however long it is (a Dutch compound such as "Vakmanschap"): the
+// first paint sizes the pair from the longer word's letter count against its column (half the row on a phone, the
+// room beside the small frame on a wide screen), then the script measures both words in the loaded face and sets
+// the pair one size down until the longer one fits, again on a resize. Without scripts a word that still overflows
+// breaks with a hyphen in the document's language, never past its column. Nothing clips the words, so no descender is
+// ever cut.
 import Image from "next/image";
-import { useRef } from "react";
+import { useRef, type CSSProperties } from "react";
 import { gsap, useGSAP } from "../kit/gsap";
 import type { StruqImage } from "../kit/images";
 
@@ -22,8 +29,13 @@ type Props = {
   className?: string;
 };
 
+/** The share of an em a letter of a display face takes on average: the first paint's estimate, measured after. */
+const LETTER_EM = 0.6;
+
 export function ImageToFullbleed({ image, left, right, line, className = "" }: Props) {
   const stage = useRef<HTMLElement>(null);
+  // The longer word's width in em, estimated from its letters, for the first paint's fit.
+  const letters = Math.max(1, Array.from(left).length, Array.from(right).length) * LETTER_EM;
 
   useGSAP(
     () => {
@@ -62,11 +74,53 @@ export function ImageToFullbleed({ image, left, right, line, className = "" }: P
           frame.style.clipPath = "";
         };
       });
-      return () => mm.revert();
+      // The pair one size, set so the longer word fits its column: half the row, less the small frame and a gap on
+      // either side of it while the frame waits between the words (data-motion).
+      const row = q("[data-name]")[0] as HTMLElement;
+      const words = q("[data-left], [data-right]") as HTMLElement[];
+      let frame = 0;
+      const fit = () => {
+        if (!row) return;
+        words.forEach((w) => (w.style.fontSize = ""));
+        const cs = getComputedStyle(row);
+        const inner = row.clientWidth - (parseFloat(cs.paddingLeft) || 0) - (parseFloat(cs.paddingRight) || 0);
+        const gap = parseFloat(cs.columnGap) || 0;
+        const hole = el.dataset.motion ? el.clientWidth * 0.2 : 0;
+        const col = (inner - hole - gap * (hole ? 2 : 1)) / 2;
+        let k = 1;
+        for (const w of words) {
+          w.style.whiteSpace = "nowrap";
+          const range = document.createRange();
+          range.selectNodeContents(w);
+          const width = range.getBoundingClientRect().width;
+          w.style.whiteSpace = "";
+          if (width > col && col > 0) k = Math.min(k, col / width);
+        }
+        if (k >= 1) return;
+        const size = parseFloat(getComputedStyle(words[0]).fontSize);
+        words.forEach((w) => (w.style.fontSize = `${Math.floor(size * k * 10) / 10}px`));
+      };
+      const later = () => {
+        cancelAnimationFrame(frame);
+        frame = requestAnimationFrame(fit);
+      };
+      fit();
+      document.fonts?.ready.then(later);
+      window.addEventListener("resize", later);
+      return () => {
+        cancelAnimationFrame(frame);
+        window.removeEventListener("resize", later);
+        words.forEach((w) => (w.style.fontSize = ""));
+        mm.revert();
+      };
     },
     { scope: stage },
   );
 
+  // Never larger than the column: half the row on a phone; on a wide screen the room beside the small frame (20vw).
+  const word =
+    "font-display block min-w-0 break-words hyphens-auto leading-[0.85] tracking-[-0.04em] text-[length:min(18vw,calc((100vw_-_3rem_-_4vw)/2/var(--itf-letters)))] md:text-[length:min(12vw,calc(32vw/var(--itf-letters)))]";
+
   return (
     <section ref={stage} data-showpiece="image-to-fullbleed" className={`relative h-svh overflow-hidden bg-surface-0 ${className}`}>
       <div data-frame="" className="absolute inset-0 overflow-hidden">
@@ -75,12 +129,16 @@ export function ImageToFullbleed({ image, left, right, line, className = "" }: P
         </div>
         <div data-scrim="" aria-hidden className="absolute inset-0 bg-black opacity-30" />
       </div>
-      <div className="pointer-events-none absolute inset-x-0 top-1/2 flex -translate-y-1/2 items-center justify-between px-6 text-on-photo md:px-[4vw] motion-safe:md:text-ink">
-        <span data-left="" className="font-display block text-[18vw] leading-[0.85] tracking-[-0.04em] md:text-[12vw]">{left}</span>
-        <span data-right="" className="font-display block text-[18vw] leading-[0.85] tracking-[-0.04em] md:text-[12vw]">{right}</span>
+      <div
+        data-name=""
+        className="pointer-events-none absolute inset-x-0 top-1/2 flex -translate-y-1/2 items-center justify-between gap-[4vw] px-6 text-on-photo md:px-[4vw] motion-safe:md:text-ink"
+        style={{ "--itf-letters": letters.toFixed(2) } as CSSProperties}
+      >
+        <span data-left="" className={word}>{left}</span>
+        <span data-right="" className={`${word} text-right`}>{right}</span>
       </div>
       {line ? (
-        <p data-line="" className="font-display text-h2 absolute bottom-[10vh] left-6 max-w-[18ch] text-on-photo md:left-[8vw]">
+        <p data-line="" className="font-display text-h2 absolute bottom-[10vh] left-6 right-6 max-w-[18ch] break-words hyphens-auto text-on-photo md:left-[8vw] md:right-[8vw]">
           {line}
         </p>
       ) : null}