@struq/skill 0.4.3 → 0.5.0

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

@@ -22,6 +22,10 @@
 //
 // <HeroIndex items={[{ title: "Olijfhof", place: "Alentejo", year: "2025", image: images.hero[2], href: "/werk/olijfhof" }, ...]} />
 //
+// `accent` (optional) is the site's one accent word: the names are this hero's headline, and where the word first
+// stands in one of them it is set in the pairing's italic accent face, inside the name's mask, as the Statement and
+// the Close set the same word. Left out, or in no name, the list is exactly as it was.
+//
 // The photo box carries data-stack-target, so preloader-stack and page-transition-stack land on the first photograph.
 // Keyboard: focus swaps like hover; one focus ring, on the link. Phones and touch: the list over the first photograph,
 // a tap follows the link. Reduced motion: swaps are hard cuts, no drift, the names simply stand. Without scripts: the
@@ -37,6 +41,7 @@
 //   Reduced motion: the same stretches, cuts instead of wipes.
 import Image from "next/image";
 import { useRef } from "react";
+import { accentLines } from "../kit/accent";
 import { ScrollTrigger, gsap, useGSAP } from "../kit/gsap";
 import type { StruqImage } from "../kit/images";
 import { photoLuminances, type PhotoBox } from "../kit/photo-read";
@@ -62,6 +67,9 @@ type Props = {
   side?: Side;
   /** Five or six projects; the first is the photograph at rest. */
   items: Item[];
+  /** The site's one accent word: where it first stands in the list of names it is set in the pairing's italic accent
+   * face (--face-accent), as the Statement and the Close set it. A word no name holds changes nothing. */
+  accent?: string;
   /** The composition; the first is the default. */
   variant?: HeroIndexVariant;
   className?: string;
@@ -101,6 +109,8 @@ const WIPE = 0.85;
 const RETURN = 0.45;
 
 const FINE = "(hover: hover) and (pointer: fine) and (min-width: 1024px)";
+/** A name's size, set on the name and on its mask (the mask's room for accents and descenders is in its own em). */
+const NAME_SIZE = "text-[min(11.5vw,7.6svh)] md:text-[min(clamp(2.75rem,1rem_+_5.2vw,7.5rem),8.4svh)]";
 
 const linear = (c: number) =>
   c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
@@ -162,8 +172,12 @@ function texture(
   return Math.sqrt(at(ys, 0.75)) - Math.sqrt(at(ys, 0.25));
 }
 
-export function HeroIndex({ items, side, variant = "lijst", className = "" }: Props) {
+export function HeroIndex({ items, side, accent, variant = "lijst", className = "" }: Props) {
   const root = useRef<HTMLElement>(null);
+  const names = accentLines(
+    items.map((item) => item.title),
+    accent,
+  );
   // Over a photograph the names need a measured ink; in the window they stand on the ground.
   const overPhoto = variant !== "venster";
   const walks = variant === "doorlopen";
@@ -236,9 +250,12 @@ export function HeroIndex({ items, side, variant = "lijst", className = "" }: Pr
         return rows.map((row) => {
           const name = row.querySelector<HTMLElement>("[data-name]")!;
           const meta = row.querySelector<HTMLElement>("[data-meta]")!;
-          const mask = row
-            .querySelector<HTMLElement>(".struq-line-mask")!
-            .getBoundingClientRect();
+          // Where the line stands: the mask's box less its room for accents and descenders (blocks.css), read as
+          // laid out, so the rise in flight does not move it.
+          const maskEl = row.querySelector<HTMLElement>(".struq-line-mask")!;
+          const box = maskEl.getBoundingClientRect();
+          const cs = getComputedStyle(maskEl);
+          const mask = { top: box.top + parseFloat(cs.paddingTop), bottom: box.bottom - parseFloat(cs.paddingBottom) };
           const range = document.createRange();
           range.selectNodeContents(name);
           const g = range.getBoundingClientRect();
@@ -745,8 +762,10 @@ export function HeroIndex({ items, side, variant = "lijst", className = "" }: Pr
   // The window stands on the side away from the list: wide screens beside it, phones above it.
   const windowBox =
     listSide === "left"
-      ? "absolute inset-x-6 top-6 h-[38svh] overflow-hidden md:inset-x-auto md:top-[7svh] md:bottom-[7svh] md:left-[54vw] md:right-[4vw] md:h-auto"
-      : "absolute inset-x-6 top-6 h-[38svh] overflow-hidden md:inset-x-auto md:top-[7svh] md:bottom-[7svh] md:left-[4vw] md:right-[54vw] md:h-auto";
+      ? // sheet-allow: the window's inner edge at 54vw leaves the list its half
+        "absolute inset-x-sheet-margin top-6 h-[38svh] overflow-hidden md:inset-x-auto md:top-[7svh] md:bottom-[7svh] md:left-[54vw] md:right-sheet-margin md:h-auto"
+      : // sheet-allow: the window's inner edge at 54vw leaves the list its half
+        "absolute inset-x-sheet-margin top-6 h-[38svh] overflow-hidden md:inset-x-auto md:top-[7svh] md:bottom-[7svh] md:left-sheet-margin md:right-[54vw] md:h-auto";
 
   return (
     <section
@@ -797,8 +816,8 @@ export function HeroIndex({ items, side, variant = "lijst", className = "" }: Pr
         aria-label="Werk"
         className={
           walks
-            ? "absolute inset-0 z-10 flex flex-col items-center justify-center px-6 md:px-[4vw]"
-            : "absolute inset-x-0 bottom-0 z-10 px-6 pb-[7svh] md:px-[4vw] md:pb-[6svh]"
+            ? "absolute inset-0 z-10 flex flex-col items-center justify-center px-sheet-margin"
+            : "absolute inset-x-0 bottom-0 z-10 px-sheet-margin pb-[7svh] md:pb-[6svh]"
         }
       >
         <ul
@@ -817,7 +836,9 @@ export function HeroIndex({ items, side, variant = "lijst", className = "" }: Pr
                 href={item.href}
                 className="group/row block w-fit rounded-[0.15rem] py-[0.2svh] outline-offset-[0.35rem] transition-opacity duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-current group-data-[active]/list:not-data-[current]:opacity-80"
               >
-                <span className="struq-line-mask block overflow-x-visible overflow-y-clip">
+                {/* The shared line mask carries the name's size, so its room is the name's; leading 0 keeps the
+                    line box to the name and its place line. */}
+                <span className={`struq-line-mask block leading-[0] ${NAME_SIZE}`}>
                   <span data-rise="" className="block">
                     {/* The place line stands right-aligned under its name. */}
                     <span
@@ -826,9 +847,9 @@ export function HeroIndex({ items, side, variant = "lijst", className = "" }: Pr
                     >
                       <span
                         data-name=""
-                        className="font-display whitespace-nowrap text-[min(11.5vw,7.6svh)] leading-[0.98] tracking-[-0.035em] md:text-[min(clamp(2.75rem,1rem_+_5.2vw,7.5rem),8.4svh)]"
+                        className={`font-display whitespace-nowrap leading-[0.98] tracking-[-0.035em] ${NAME_SIZE}`}
                       >
-                        {item.title}
+                        {names[i]}
                       </span>
                       <span
                         data-meta=""

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

@@ -22,6 +22,11 @@
 // <HeroPoster image={images.hero[1]} lines={["Noord bouwt", "met daglicht"]} place="Architectuur en bouw, Rotterdam"
 //   link={{ label: "Bekijk het werk", href: "#werk" }} />
 //
+// `accent` (optional) is the site's one accent word: where it first stands in the two lines it is set in the pairing's
+// italic accent face, as the Statement and the Close set the same word. The fit measures each line with the mark in
+// place and waits for the accent face as it waits for the display face, so a wider italic is fitted, never spilled.
+// Left out, or not in the lines, the poster is exactly as it was.
+//
 // 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).
 //
@@ -36,6 +41,7 @@
 //   slides to registration and opens to the full screen, so the crops merge into one photograph.
 import Image from "next/image";
 import { useRef } from "react";
+import { accentFaceReady, accentLines } from "../kit/accent";
 import { gsap, useGSAP } from "../kit/gsap";
 import type { StruqImage } from "../kit/images";
 import { covered, whenUncovered } from "../preloaders/preloader-slices-uncovered";
@@ -58,6 +64,9 @@ type Inner = {
   image: StruqImage;
   /** The two lines of the poster: the studio's name, or its line split in two. */
   lines: [string, string];
+  /** The site's one accent word: where it first stands in the lines it is set in the pairing's italic accent face
+   * (--face-accent), as the Statement and the Close set it. A word the lines do not hold changes nothing. */
+  accent?: string;
   /** The foot line: place, discipline. */
   place?: string;
   /** One link in the foot line. */
@@ -73,6 +82,13 @@ const EM_PER_CHAR = 0.66;
 const LEADING = 0.84;
 
 const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
+/** The poster's side margin as laid out: the sheet margin on its padded box ([data-hp-sheet]), read in px. */
+const sideOf = (el: HTMLElement) => {
+  const pad = el.querySelector<HTMLElement>("[data-hp-sheet]");
+  return pad ? parseFloat(getComputedStyle(pad).paddingLeft) || 0 : 0;
+};
+/** 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))";
 
 export function HeroPoster({ variant = "window", ...rest }: Props) {
   if (variant === "column") return <PosterColumn {...rest} />;
@@ -80,9 +96,10 @@ export function HeroPoster({ variant = "window", ...rest }: Props) {
   return <PosterWindow {...rest} />;
 }
 
-function PosterWindow({ image, lines, place, link, className = "" }: Inner) {
+function PosterWindow({ image, lines, accent, place, link, className = "" }: Inner) {
   const stage = useRef<HTMLElement>(null);
   const words = lines.map((l) => l.split(" "));
+  const marked = markWords(words, accent);
   const longest = (ws: string[]) => Math.max(...ws.map((w) => w.length));
 
   useGSAP(
@@ -113,7 +130,7 @@ function PosterWindow({ image, lines, place, link, className = "" }: Inner) {
         const W = el.clientWidth;
         const H = el.clientHeight;
         const wide = W >= 768;
-        const room = W - (wide ? W * 0.08 : 48);
+        const room = W - 2 * sideOf(el);
         const widthOf = (w: HTMLElement) => {
           const c = w.cloneNode(true) as HTMLElement;
           Object.assign(c.style, { position: "absolute", left: "0", top: "0", visibility: "hidden", fontSize: "100px" });
@@ -198,7 +215,7 @@ function PosterWindow({ image, lines, place, link, className = "" }: Inner) {
       };
       // With the face in, or on what there is after FONT_WAIT; and again whenever a face arrives later than that. The
       // poster counts as shown once the entrance has started (or the fallback did it), so a late face eases in.
-      const faceIn = Promise.race([document.fonts?.ready ?? Promise.resolve(), new Promise((r) => setTimeout(r, FONT_WAIT))]);
+      const faceIn = faceReady(el);
       settle(frame);
       faceIn.then(() => {
         refit();
@@ -318,23 +335,23 @@ function PosterWindow({ image, lines, place, link, className = "" }: Inner) {
         mm.revert();
       };
     },
-    { scope: stage, dependencies: [lines[0], lines[1]] },
+    { scope: stage, dependencies: [lines[0], lines[1], accent] },
   );
 
   // The script-free estimate per line: the width over its characters, and on wide screens a height cap so two lines
   // and a window always fit. Phones stack one word per line, so the longest word sets it.
   const est = (i: 0 | 1) =>
-    `min(18vw, calc(92vw / ${(lines[i].length * EM_PER_CHAR).toFixed(2)}), 30svh)`;
-  const estPhone = (i: 0 | 1) => `calc((100vw - 48px) / ${(longest(words[i]) * EM_PER_CHAR).toFixed(2)})`;
+    `min(18vw, calc(${INSIDE} / ${(lines[i].length * EM_PER_CHAR).toFixed(2)}), 30svh)`;
+  const estPhone = (i: 0 | 1) => `calc(${INSIDE} / ${(longest(words[i]) * EM_PER_CHAR).toFixed(2)})`;
 
   // The line's box is LEADING of its size per row; the mask carries the descender room in the display em.
   const word = "font-display block w-fit whitespace-nowrap leading-[0.84] tracking-[-0.045em] text-ink";
-  const mask = "block overflow-hidden pb-[0.24em] -mb-[0.24em]";
-  const small = "block overflow-hidden pb-[0.15em] -mb-[0.15em]";
+  const mask = "struq-line-mask block";
+  const small = "struq-line-mask block";
   // Inline, because the kit balances display type (text-wrap), which would let a poster line wrap; and no transition,
   // or a page that transitions every property hands the fit a size from mid-change.
   const nowrap = { whiteSpace: "nowrap", textWrap: "nowrap", transition: "none" } as React.CSSProperties;
-  const stack = (parts: string[]) =>
+  const stack = (parts: React.ReactNode[]) =>
     parts.map((part, i) => (
       <span key={i} data-hp-part="" className="inline-block max-md:block">
         {part}
@@ -360,7 +377,7 @@ function PosterWindow({ image, lines, place, link, className = "" }: Inner) {
       <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 className="relative flex h-full flex-col px-6 pb-6 pt-8 md:px-[4vw] md:pb-[3svh] md:pt-[4svh]">
+      <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-top="" className="relative z-10 will-change-transform">
           <p aria-hidden className="m-0">
             <span
@@ -368,7 +385,7 @@ function PosterWindow({ image, lines, place, link, className = "" }: Inner) {
             >
               <span data-hp-rise="" data-hp-line="" className="block">
                 <span data-hp-word="" className={word} style={nowrap}>
-                  {stack(words[0])}
+                  {stack(marked[0])}
                 </span>
               </span>
             </span>
@@ -384,7 +401,7 @@ function PosterWindow({ image, lines, place, link, className = "" }: Inner) {
           >
             <div
               data-stack-photo=""
-              className="absolute inset-0 md:inset-auto md:left-[-4vw] 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(-4svh_-_0.84_*_var(--hp-s1,var(--hp-e1))_-_1.2svh)] md:h-svh md:w-screen"
             >
               <Image
                 src={image.src}
@@ -406,7 +423,7 @@ function PosterWindow({ image, lines, place, link, className = "" }: Inner) {
             >
               <span data-hp-rise="" data-hp-line="" className="block">
                 <span data-hp-word="" className={`${word} ml-auto text-right`} style={nowrap}>
-                  {stack(words[1])}
+                  {stack(marked[1])}
                 </span>
               </span>
             </span>
@@ -504,13 +521,26 @@ function sizer(el: HTMLElement, names: string[], onScreen: () => number[], shown
   };
 }
 
-/** The display face in, or what there is after FONT_WAIT. */
-const faceReady = () =>
-  Promise.race([document.fonts?.ready ?? Promise.resolve(), new Promise((r) => setTimeout(r, FONT_WAIT))]);
+/** The display face in (and the accent face, when a word is marked), or what there is after FONT_WAIT. */
+const faceReady = (el: HTMLElement) =>
+  Promise.race([
+    Promise.all([document.fonts?.ready ?? Promise.resolve(), accentFaceReady(el)]),
+    new Promise((r) => setTimeout(r, FONT_WAIT)),
+  ]);
+
+/**
+ * The poster's words (one list per line) with the accent marked on the first word that holds it, so a block that
+ * sets one word per part or per row marks the same word the line would.
+ */
+function markWords(words: string[][], accent?: string): React.ReactNode[][] {
+  const flat = accentLines(words.flat(), accent);
+  let at = 0;
+  return words.map((ws) => flat.slice(at, (at += ws.length)));
+}
 
 const WORD = "font-display block w-fit whitespace-nowrap leading-[0.84] tracking-[-0.045em]";
-const MASK = "block overflow-hidden pb-[0.24em] -mb-[0.24em]";
-const SMALL = "block overflow-hidden pb-[0.15em] -mb-[0.15em]";
+const MASK = "struq-line-mask block";
+const SMALL = "struq-line-mask block";
 // Inline, because the kit balances display type (text-wrap), which would let a poster line wrap; and no transition,
 // or a page that transitions every property hands the fit a size from mid-change.
 const NOWRAP = { whiteSpace: "nowrap", textWrap: "nowrap", transition: "none" } as React.CSSProperties;
@@ -560,9 +590,10 @@ function Foot({ place, link, copy = false }: { place?: string; link?: Inner["lin
  * first scroll (pin 150%) it opens sideways by registration while the upper line leaves left, the lower line right
  * and the foot down. Phones: one word per row, the same slit, the entrance only.
  */
-function PosterColumn({ image, lines, place, link, className = "" }: Inner) {
+function PosterColumn({ image, lines, accent, place, link, className = "" }: Inner) {
   const stage = useRef<HTMLElement>(null);
   const words = lines.map((l) => l.split(" "));
+  const marked = markWords(words, accent);
   const longest = (ws: string[]) => Math.max(...ws.map((w) => w.length));
 
   useGSAP(
@@ -586,7 +617,7 @@ function PosterColumn({ image, lines, place, link, className = "" }: Inner) {
         const W = el.clientWidth;
         const H = el.clientHeight;
         const wide = W >= 768;
-        const room = W - (wide ? W * 0.08 : 48);
+        const room = W - 2 * sideOf(el);
         const sizes = lineWords.map((w) => {
           const width = widthAt100(w, !wide);
           return width > 0 ? (100 * room) / width : 100;
@@ -650,7 +681,7 @@ function PosterColumn({ image, lines, place, link, className = "" }: Inner) {
         sizes.set(fit(), frame);
         decoded.then(() => !dead && grade());
       };
-      const faceIn = faceReady();
+      const faceIn = faceReady(el);
       sizes.set(fit(), frame);
       faceIn.then(() => {
         refit();
@@ -747,13 +778,13 @@ function PosterColumn({ image, lines, place, link, className = "" }: Inner) {
         mm.revert();
       };
     },
-    { scope: stage, dependencies: [lines[0], lines[1]] },
+    { scope: stage, dependencies: [lines[0], lines[1], accent] },
   );
 
-  const est = (i: 0 | 1) => `min(18vw, calc(92vw / ${(lines[i].length * EM_PER_CHAR).toFixed(2)}), 26svh)`;
-  const estPhone = (i: 0 | 1) => `calc((100vw - 48px) / ${(longest(words[i]) * EM_PER_CHAR).toFixed(2)})`;
+  const est = (i: 0 | 1) => `min(18vw, calc(${INSIDE} / ${(lines[i].length * EM_PER_CHAR).toFixed(2)}), 26svh)`;
+  const estPhone = (i: 0 | 1) => `calc(${INSIDE} / ${(longest(words[i]) * EM_PER_CHAR).toFixed(2)})`;
   // The space stands between the words, outside them: a space at the end of an inline block is dropped.
-  const parts = (ps: string[]) =>
+  const parts = (ps: React.ReactNode[]) =>
     ps.map((part, i) => (
       <span key={i}>
         <span data-hp-part="" className="inline-block max-md:block">
@@ -770,7 +801,7 @@ function PosterColumn({ image, lines, place, link, className = "" }: Inner) {
       >
         <span data-hp-rise="" data-hp-line="" className="block">
           <span data-hp-word="" className={`${WORD} ${i === 1 ? "ml-auto text-right" : ""}`} style={NOWRAP}>
-            {parts(words[i])}
+            {parts(marked[i])}
           </span>
         </span>
       </span>
@@ -781,7 +812,8 @@ function PosterColumn({ image, lines, place, link, className = "" }: Inner) {
     <div
       data-hp-layer={copy ? "copy" : "ground"}
       aria-hidden={copy || undefined}
-      className={`absolute inset-0 flex flex-col px-6 pb-6 pt-8 md:px-[4vw] md:pb-[3svh] md:pt-[4svh] ${copy ? "text-on-photo" : "text-ink"}`}
+      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"}`}
     >
       <div className="flex-1" />
       <div data-hp-l1="" className="will-change-transform">
@@ -845,9 +877,10 @@ function PosterColumn({ image, lines, place, link, className = "" }: Inner) {
  * Phones: the same stack, each window its own crop, the entrance only. Without scripts or under reduced motion the
  * composed poster shows with every crop in place.
  */
-function PosterStack({ image, lines, place, link, className = "" }: Inner) {
+function PosterStack({ image, lines, accent, place, link, className = "" }: Inner) {
   const stage = useRef<HTMLElement>(null);
   const rows = lines.flatMap((l) => l.split(" ")).filter(Boolean);
+  const marked = accentLines(rows, accent);
   const n = rows.length;
   const m = Math.max(0, n - 1);
   const middle = Math.floor((m - 1) / 2);
@@ -873,7 +906,7 @@ function PosterStack({ image, lines, place, link, className = "" }: Inner) {
         const W = el.clientWidth;
         const H = el.clientHeight;
         const wide = W >= 768;
-        const room = W - (wide ? W * 0.08 : 48);
+        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);
         return [Math.floor(Math.min((100 * room) / widest, free / (LEADING * n)))];
@@ -888,7 +921,7 @@ function PosterStack({ image, lines, place, link, className = "" }: Inner) {
         if (dead) return;
         sizes.set(fit(), frame);
       };
-      const faceIn = faceReady();
+      const faceIn = faceReady(el);
       sizes.set(fit(), frame);
       faceIn.then(() => {
         refit();
@@ -1017,13 +1050,13 @@ function PosterStack({ image, lines, place, link, className = "" }: Inner) {
         mm.revert();
       };
     },
-    { scope: stage, dependencies: [lines[0], lines[1]] },
+    { 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.
   const per = (longest * EM_PER_CHAR).toFixed(2);
-  const est = `min(calc(92vw / ${per}), calc((90svh - 2rem - ${m} * 7.5svh) / ${(n * LEADING).toFixed(2)}))`;
-  const estPhone = `min(calc((100vw - 48px) / ${per}), calc((100svh - 7rem - ${m} * 8svh) / ${(n * LEADING).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)}))`;
 
   return (
     <section
@@ -1035,8 +1068,8 @@ function PosterStack({ image, lines, place, link, className = "" }: Inner) {
       style={{ "--hp-e": est, "--hp-p": estPhone } as React.CSSProperties}
     >
       <h1 className="sr-only">{`${lines[0]} ${lines[1]}`}</h1>
-      <div className="relative flex h-full flex-col px-6 pb-6 pt-8 md:px-[4vw] md:pb-[3svh] md:pt-[4svh]">
-        {rows.map((w, i) => (
+      <div data-hp-sheet="" className="relative flex h-full flex-col px-sheet-margin pb-6 pt-8 md:pb-[3svh] md:pt-[4svh]">
+        {marked.map((w, i) => (
           <div key={i} className="contents">
             <div data-hp-row="" className="relative z-10 will-change-transform">
               <p aria-hidden className="m-0">

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

@@ -14,6 +14,11 @@
 // <HeroSplit name="Noord" lead="Wij bouwen" items={[{ word: "huizen.", image }, { word: "interieurs.", image }, ...]}
 //   line="Aan de Maashaven in Rotterdam." link={{ href: "/werk", label: "Bekijk het werk" }} />
 //
+// `accent` (optional) is the site's one accent word: where it first stands in the headline (the lead, then the
+// cycling words) it is set in the pairing's italic accent face in every copy of the line, as the Statement and the
+// Close set the same word. The fit measures with the mark in place and refits once the accent face is in, so the
+// wider italic never pushes the line past its span. Left out, or not in the headline, the hero is exactly as it was.
+//
 // One clock: the words (in every copy) and the photos are tweens in one looping timeline, so they can never drift; it
 // starts once every photograph is decoded and pauses off screen or in a hidden tab. The cycling words share one grid
 // cell, so a change of word never moves anything; the headline is fitted with the loaded face and refit when it lands
@@ -35,6 +40,7 @@
 //   the edge passes under it; scrolling back closes it. Phones, reduced motion and no scripts: the split.
 import Image from "next/image";
 import { useRef } from "react";
+import { accentFaceReady, accentLines } from "../kit/accent";
 import { ScrollTrigger, gsap, useGSAP } from "../kit/gsap";
 import type { StruqImage } from "../kit/images";
 import { photoLuminances } from "../kit/photo-read";
@@ -54,6 +60,10 @@ type Props = {
   lead: string;
   /** Two to five disciplines, each with its photograph. */
   items: Item[];
+  /** The site's one accent word: where it first stands in the headline (the lead, then the cycling words) it is set in
+   * the pairing's italic accent face (--face-accent), as the Statement and the Close set it. A word the headline does
+   * not hold changes nothing. */
+  accent?: string;
   /** One short line at the foot of the type side. */
   line?: string;
   link: { href: string; label: string };
@@ -121,8 +131,10 @@ function veilFor(under: number, ink: number, veilS: number): number {
   return hi;
 }
 
-export function HeroSplit({ name, lead, items, line, link, photo = "right", variant = "naad", className = "" }: Props) {
+export function HeroSplit({ name, lead, items, accent, line, link, photo = "right", variant = "naad", className = "" }: Props) {
   const root = useRef<HTMLElement>(null);
+  // The headline is the lead and the cycling words: the accent is marked where it first stands in that order.
+  const [leadShown, ...wordsShown] = accentLines([lead, ...items.map((item) => item.word)], accent);
   const left = photo === "left";
   const flat = variant === "liggend";
   const opening = variant === "opening";
@@ -242,7 +254,8 @@ export function HeroSplit({ name, lead, items, line, link, photo = "right", vari
       gsap.set(rise, { y: 0, yPercent: shown ? 0 : 115 });
       el.dataset.ready = "";
       const refit = () => fit(true);
-      document.fonts?.ready.then(() => {
+      // The accent face too, when a word is marked: the fit measures the italic as it will stand.
+      document.fonts?.ready.then(() => accentFaceReady(el)).then(() => {
         refit();
         ScrollTrigger.refresh();
       });
@@ -514,11 +527,11 @@ export function HeroSplit({ name, lead, items, line, link, photo = "right", vari
         wide.removeEventListener("change", onWide);
       };
     },
-    { scope: root, dependencies: [variant] },
+    { scope: root, dependencies: [variant, accent] },
   );
 
   const mask = (child: React.ReactNode, key?: number | string) => (
-    <span key={key} className="struq-line-mask block overflow-hidden">
+    <span key={key} className="struq-line-mask block">
       <span data-rise="" className="block">
         {child}
       </span>
@@ -530,12 +543,12 @@ export function HeroSplit({ name, lead, items, line, link, photo = "right", vari
     <>
       {mask(
         <span data-fit="" className="inline-block whitespace-nowrap">
-          {lead}
+          {leadShown}
         </span>,
         `${copy}-lead`,
       )}
       {mask(
-        <span data-fit="" className="struq-line-mask inline-grid overflow-hidden whitespace-nowrap align-top">
+        <span data-fit="" className="struq-line-mask inline-grid whitespace-nowrap align-top">
           {items.map((item, i) => (
             <span
               key={item.word}
@@ -544,7 +557,7 @@ export function HeroSplit({ name, lead, items, line, link, photo = "right", vari
               className="[grid-area:1/1]"
               style={i === 0 ? undefined : { transform: `translateY(${AWAY}%)` }}
             >
-              {item.word}
+              {wordsShown[i]}
             </span>
           ))}
         </span>,
@@ -556,7 +569,7 @@ export function HeroSplit({ name, lead, items, line, link, photo = "right", vari
   // Lying down the headline stands on the seam (58% down) and the seam cuts the cycling word through its middle.
   const headClass = `font-display absolute ${
     flat ? "top-[calc(58%-1.45em)]" : "bottom-[calc(5vh+5.5rem)]"
-  } leading-[0.92] tracking-[-0.035em] text-[length:var(--hsp-size,9vw)] px-[4vw] left-0`;
+  } leading-[0.92] tracking-[-0.035em] text-[length:var(--hsp-size,9vw)] px-sheet-margin left-0`;
 
   const grid = flat
     ? "md:grid-cols-1 md:grid-rows-[58fr_42fr]"
@@ -612,7 +625,7 @@ export function HeroSplit({ name, lead, items, line, link, photo = "right", vari
           Lying down, the name, the line and the link share one row at the foot. */}
       <div
         data-type=""
-        className={`row-start-2 flex flex-col justify-between gap-8 px-6 pb-8 pt-7 md:px-[4vw] md:pb-[5vh] md:pt-[4vh] ${
+        className={`row-start-2 flex flex-col justify-between gap-8 px-sheet-margin pb-8 pt-7 md:pb-[5vh] md:pt-[4vh] ${
           flat ? "md:col-start-1 md:row-start-2 md:flex-row md:items-end" : `md:row-start-1 ${left ? "md:col-start-2" : "md:col-start-1"}`
         }`}
       >