@struq/skill 0.4.3 → 0.5.0

package/skills/struq/blocks/backgrounds/background-facets.tsx

@@ -8,9 +8,13 @@
 // and one link sit on the calm side, where the surface lies flat and is the page ground itself. The surface lies flat
 // into the ground over the bottom fifth of the hero, so the hand-over to the next section has no seam.
 //
-// <BackgroundFacets variant="shard" lines={["Ruimte die", "licht vangt"]}
+// <BackgroundFacets variant="shard" lines={["Ruimte die", "licht vangt"]} accent="licht"
 //   lead="Noord ontwerpt woningen en ateliers in 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, inside its line's mask, and the type's rect is measured again once that face is in. The
+// Statement and the Close carry the same word. Left out, or not in the lines, the hero is exactly as it was.
+//
 // Variants (different compositions and moves of the same surface, each in light and dark):
 //   shard   a few cut shards standing apart in the right third, each a pyramid of unequal planes on its own
 //           footprint, pointing out from the cluster, a light circling them; type on the calm left.
@@ -40,6 +44,7 @@
 // 2D canvas. No scripts: the composed
 // hero on the plain ground (blocks.css, "--- background-facets ---", with the 3 s fallback for the lines).
 import { useEffect, useRef } from "react";
+import { accentFaceReady, accentLines } from "../kit/accent";
 import { gsap } from "../kit/gsap";
 import { whenUncovered } from "../preloaders/preloader-slices-uncovered";
 
@@ -68,6 +73,9 @@ type Props = {
   variant?: FacetsVariant;
   /** Two short display lines. */
   lines: [string, string];
+  /** The site's one accent word: where it first stands in the two 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;
   /** One lead sentence. */
   lead: string;
   /** One text link. */
@@ -980,7 +988,7 @@ function toRGB(probe: CanvasRenderingContext2D, color: string): RGB {
   return [r / 255, g / 255, b / 255];
 }
 
-export function BackgroundFacets({ variant = "shard", lines, lead, link, className = "" }: Props) {
+export function BackgroundFacets({ variant = "shard", lines, accent, lead, link, className = "" }: Props) {
   const root = useRef<HTMLElement>(null);
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
@@ -1216,8 +1224,8 @@ export function BackgroundFacets({ variant = "shard", lines, lead, link, classNa
     const frameEl = el.closest("[data-blocks]");
     if (frameEl) mo.observe(frameEl, { attributes: true, attributeFilter: ["style", "class", "data-theme"] });
     mo.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "data-theme", "style"] });
-    // The face arriving late moves the type: measure its rect again.
-    document.fonts?.ready.then(() => {
+    // The face arriving late moves the type: measure its rect again (with the accent face in, when a word is marked).
+    document.fonts?.ready.then(() => accentFaceReady(el)).then(() => {
       if (gone) return;
       measure();
       if (!raf) render();
@@ -1248,7 +1256,7 @@ export function BackgroundFacets({ variant = "shard", lines, lead, link, classNa
   }, [variant]);
 
   const mask = (child: React.ReactNode, key?: number) => (
-    <span key={key} className="struq-line-mask block overflow-hidden pb-[0.06em]">
+    <span key={key} className="struq-line-mask block">
       <span data-rise="" className="block">
         {child}
       </span>
@@ -1265,7 +1273,7 @@ export function BackgroundFacets({ variant = "shard", lines, lead, link, classNa
     >
       <canvas ref={canvasRef} data-bf-canvas="" aria-hidden="true" className="absolute inset-0 h-full w-full" />
       <div data-copy="" className="absolute">
-        <h1 className="m-0 font-display leading-[0.95] tracking-[-0.03em]">{lines.map((line, i) => mask(line, i))}</h1>
+        <h1 className="m-0 font-display leading-[0.95] tracking-[-0.03em]">{accentLines(lines, accent).map((line, i) => mask(line, i))}</h1>
         <div className="mt-6 md:mt-8">
           {/* Full ink: the muted ink measures about 4:1 on the lightest grounds, short of 4.5 for body text. */}
           {mask(<span className="text-body block max-w-[40ch] text-ink">{lead}</span>)}

package/skills/struq/blocks/backgrounds/background-silk.tsx

@@ -7,7 +7,11 @@
 // real normal and a low light instead of a halftone grid. Raw WebGL (GLSL ES 1.00, so a WebGL1 context runs it too),
 // no three.js, self-contained.
 //
-// <BackgroundSilk variant="fold" lines={["Zacht licht,", "zware stof."]} lead="..." link={{ href: "#werk", label: "Bekijk het werk" }} />
+// <BackgroundSilk variant="fold" lines={["Zacht licht,", "zware stof."]} accent="licht" lead="..." link={{ href: "#werk", label: "Bekijk het werk" }} />
+//
+// `accent` (optional) is the site's one accent word: where it first stands in the headline it is set in the pairing's
+// italic accent face, inside its line's mask, and the type's box is read once that face is in. The Statement and the
+// Close carry the same word. Left out, or not in the headline, the hero is exactly as it was.
 //
 // Three compositions of the same cloth:
 // - fold: one large diagonal fold through the right half; the type stands on the calm left. The pointer turns the
@@ -24,14 +28,17 @@
 // sheen. That measure is taken once (and again on a resize or a palette switch), at three moments of the wandering
 // light, and the cloth eases toward it.
 //
-// Entrance: the canvas is hidden until its first frame is drawn, then fades in while the folds rise from a flat sheet;
-// the type rises through masks. Performance: device pixel ratio capped at 1.5, the field drawn at 0.9 of that on a 1x
+// Entrance: the canvas is hidden until its first frame is drawn, then fades in; the folds rise from a flat sheet and the
+// type rises through masks once nothing covers the page (whenUncovered: a preloader or page transition has started to
+// leave, or there is none). Performance: device pixel ratio capped at 1.5, the field drawn at 0.9 of that on a 1x
 // screen and two thirds on a dense one (half on phones, with fewer noise octaves), paused off screen and in a hidden
 // tab, everything disposed on
 // unmount, context loss survived. Reduced motion: one still frame, held. No WebGL: the plain ground with the type.
 // No scripts: the composed hero on the plain ground (blocks.css, "--- background-silk ---").
 import { useRef } from "react";
+import { accentFaceReady, accentLines } from "../kit/accent";
 import { gsap, useGSAP } from "../kit/gsap";
+import { whenUncovered } from "../preloaders/preloader-slices-uncovered";
 
 export const SILK_VARIANTS = [
   { id: "fold", title: "Plooi" },
@@ -45,6 +52,9 @@ type Props = {
   variant?: SilkVariant;
   /** The headline, one entry per line. Two short lines read best. */
   lines: string[];
+  /** The site's one accent word: where it first stands in the headline 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 lead sentence under the headline. */
   lead: string;
   /** One text link. */
@@ -435,7 +445,9 @@ function silkField(
 
   // State the loop owns.
   let time = reduce ? STILL_T : 0;
-  let introAt = 0;
+  /** When the folds started to rise; -1 while a cover is still over the page, so the sheet waits flat under it. */
+  let introAt = -1;
+  let stopRise = () => {};
   let last = 0;
   let raf = 0;
   let onScreen = true;
@@ -545,6 +557,7 @@ function silkField(
 
   const intro = () => {
     if (reduce) return 1;
+    if (introAt < 0) return 0;
     const x = Math.min(1, Math.max(0, (time - introAt) / INTRO));
     return 1 - Math.pow(1 - x, 3);
   };
@@ -778,13 +791,18 @@ function silkField(
       document.addEventListener("visibilitychange", onVisibility);
       resizeObserver.observe(holder);
       io.observe(el);
-      document.fonts?.ready.then(onFonts);
-      introAt = time;
+      // The accent face too, when a word is marked: the type's box is read as it will stand.
+      document.fonts?.ready.then(() => accentFaceReady(el)).then(onFonts);
+      // The folds rise once nothing covers the page: at once, or as a preloader or page transition starts to leave.
+      stopRise = whenUncovered(() => {
+        introAt = time;
+      });
       if (reduce) still();
       else kick();
     },
     dispose() {
       disposed = true;
+      stopRise();
       cancelAnimationFrame(raf);
       cancelAnimationFrame(colourFrame);
       resizeObserver.disconnect();
@@ -806,7 +824,7 @@ function silkField(
   };
 }
 
-export function BackgroundSilk({ variant = "fold", lines, lead, link, className = "" }: Props) {
+export function BackgroundSilk({ variant = "fold", lines, accent, lead, link, className = "" }: Props) {
   const root = useRef<HTMLElement>(null);
 
   useGSAP(
@@ -831,15 +849,21 @@ export function BackgroundSilk({ variant = "fold", lines, lead, link, className
       gsap.set(rise, { y: 0, yPercent: shown ? 0 : 115 });
       el.dataset.ready = "";
 
-      let played = false;
       const play = contextSafe(() => {
-        if (played) return;
-        played = true;
         if (!shown) gsap.to(rise, { yPercent: 0, duration: 1.2, ease: "expo.out", stagger: 0.08, delay: 0.25 });
       });
+      // The type rises with the first frame of the cloth, and only once nothing covers the page (a preloader or page
+      // transition starting to leave, or none at all).
+      let asked = false;
+      let stop = () => {};
+      const ready = () => {
+        if (asked) return;
+        asked = true;
+        stop = whenUncovered(play);
+      };
       // The type never waits long on a slow shader compile.
-      const failsafe = window.setTimeout(play, 1400);
-      const field = silkField(el, holder, variant, reduce, play);
+      const failsafe = window.setTimeout(ready, 1400);
+      const field = silkField(el, holder, variant, reduce, ready);
       field.start();
 
       // The hand-over: the type leaves first; on fold and ripple the cloth drifts slower than the page, on drape it
@@ -857,6 +881,7 @@ export function BackgroundSilk({ variant = "fold", lines, lead, link, className
 
       return () => {
         window.clearTimeout(failsafe);
+        stop();
         field.dispose();
       };
     },
@@ -864,7 +889,7 @@ export function BackgroundSilk({ variant = "fold", lines, lead, link, className
   );
 
   const mask = (child: React.ReactNode, key?: number) => (
-    <span key={key} className="struq-line-mask block overflow-hidden pb-[0.06em]">
+    <span key={key} className="struq-line-mask block">
       <span data-rise="" className="block">
         {child}
       </span>
@@ -884,10 +909,10 @@ export function BackgroundSilk({ variant = "fold", lines, lead, link, className
       className={`relative h-svh min-h-[34rem] overflow-hidden bg-surface-0 text-ink ${className}`}
     >
       <div data-field="" aria-hidden="true" className="absolute inset-0" />
-      <div className={`relative flex h-full flex-col px-6 pb-[9vh] pt-[12vh] md:px-[5vw] md:pb-[11vh] ${place}`}>
+      <div className={`relative flex h-full flex-col px-sheet-margin pb-[9vh] pt-[12vh] md:pb-[11vh] ${place}`}>
         <div data-copy="" className="max-w-[min(100%,40rem)]">
           <h1 data-head="" className="font-display text-[clamp(2.75rem,12.5vw,4.5rem)] leading-[0.98] tracking-[-0.03em] md:text-[clamp(3.75rem,6.6vw,7.5rem)]">
-            {lines.map((line, i) => mask(line, i))}
+            {accentLines(lines, accent).map((line, i) => mask(line, i))}
           </h1>
           <div data-small="" className="mt-7 md:mt-9">
             {mask(<span className="block max-w-[34ch] text-[1.0625rem] leading-relaxed text-ink-muted md:text-lg">{lead}</span>)}