@struq/skill 0.5.2 → 0.5.3

package/skills/struq/blocks/kit/motion/ScrubLine.tsx

@@ -0,0 +1,108 @@
+"use client";
+// components/struq/kit/motion/ScrubLine.tsx (Struq recipe)
+// A rule or a drawn path that draws itself as the reader scrolls and undraws going back. Use it for a divider that
+// grows into a section, a timeline's spine, a route on a map, an underline under a statement. Extracted from
+// sections/approach's thread (a line drawn by scroll progress, linear, with the in-flow smoothing).
+//
+// <ScrubLine className="my-16" />
+// <ScrubLine path="M2 40 C 120 0, 240 80, 398 30" viewBox="0 0 400 80" className="h-20 w-full text-accent" />
+//
+// Props
+// - path: an SVG path's d. Without it, a straight rule.
+// - viewBox: the path's viewBox (default "0 0 100 100"). strokeWidth: in the viewBox's units (default 1.5).
+// - axis: the rule's direction, "x" (default, drawn left to right) or "y" (top to bottom; give it a height).
+// - thickness: the rule's weight in px (default 1).
+// - start, end: ScrollTrigger positions for the line's own top (default "top 85%" to "top 35%").
+// - className: on the rule or the svg. It draws in currentColor.
+//
+// Motion: progress follows the scroll, linear, with the feel's scrub.flow smoothing; a path draws along its length
+// (one dash as long as the measured path, so any path draws at an even pace). Reduced motion, no scripts or the server render: fully drawn.
+import { useRef } from "react";
+import { feel, prefersReduced } from "../feel";
+import { gsap, useGSAP } from "../gsap";
+
+type Props = {
+  path?: string;
+  viewBox?: string;
+  strokeWidth?: number;
+  axis?: "x" | "y";
+  thickness?: number;
+  start?: string;
+  end?: string;
+  className?: string;
+};
+
+export function ScrubLine({
+  path,
+  viewBox = "0 0 100 100",
+  strokeWidth = 1.5,
+  axis = "x",
+  thickness = 1,
+  start = "top 85%",
+  end = "top 35%",
+  className = "",
+}: Props) {
+  const ref = useRef<HTMLSpanElement & SVGSVGElement>(null);
+
+  useGSAP(
+    () => {
+      const el = ref.current;
+      if (!el) return;
+      if (prefersReduced()) {
+        el.dataset.ready = "1";
+        return;
+      }
+      const f = feel(el);
+      const scrollTrigger = { trigger: el, start, end, scrub: f.scrub.flow };
+      const line = path ? el.querySelector("path") : el;
+      if (!line) return;
+      if (path) {
+        // The path's own measured length: one dash as long as the path, offset by all of it, then by none.
+        const length = (line as SVGPathElement).getTotalLength();
+        gsap.set(line, { attr: { "stroke-dasharray": `${length} ${length}` } });
+        gsap.fromTo(
+          line,
+          { attr: { "stroke-dashoffset": length } },
+          { attr: { "stroke-dashoffset": 0 }, ease: f.ease.scrub, scrollTrigger },
+        );
+      } else {
+        gsap.fromTo(
+          line,
+          axis === "x" ? { scaleX: 0 } : { scaleY: 0 },
+          { ...(axis === "x" ? { scaleX: 1 } : { scaleY: 1 }), ease: f.ease.scrub, scrollTrigger },
+        );
+      }
+      el.dataset.ready = "1";
+    },
+    { scope: ref, dependencies: [path, axis, start, end] },
+  );
+
+  if (path) {
+    return (
+      <svg
+        ref={ref}
+        data-scrub-line="path"
+        viewBox={viewBox}
+        fill="none"
+        aria-hidden
+        className={`block ${className}`}
+      >
+        <path
+          d={path}
+          stroke="currentColor"
+          strokeWidth={strokeWidth}
+          strokeLinecap="butt"
+        />
+      </svg>
+    );
+  }
+  return (
+    <span
+      ref={ref}
+      aria-hidden
+      data-scrub-line={axis}
+      className={`block bg-current ${className}`}
+      style={axis === "x" ? { height: thickness } : { width: thickness }}
+    />
+  );
+}

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

@@ -0,0 +1,11 @@
+// components/struq/kit/motion/index.ts (Struq recipe)
+// The motion primitives: the house moves with the craft built in (reduced motion, cleanup, descender-safe masks, no
+// layout shift), timed by the site's temperament (../feel, data-temperament on <body>). Use these instead of writing
+// GSAP for a reveal, a block rising, a wipe, a curtain, a link hover, a button press or a scroll-drawn line.
+export { HoverLink } from "./HoverLink";
+export { ImageCurtain } from "./ImageCurtain";
+export { MaskWipe } from "./MaskWipe";
+export { Pressable } from "./Pressable";
+export { RevealText } from "./RevealText";
+export { Rise, riseFrom, riseTo } from "./Rise";
+export { ScrubLine } from "./ScrubLine";

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

@@ -1,72 +1,198 @@
 "use client";
 // components/struq/kit/quiet/Close.tsx (Struq recipe)
-// The page's last call: one line of type at the sheet's moment size from the grid's first column, and one link at the
-// far end of the line under it, so the eye crosses the page once, from the big line to the small way out. An optional
-// hairline frame around the line is the frame motif's last echo; an optional caption sits at the start of the link's
-// line, a label in the margin columns beside the line.
+// The page's last scene before the footer, built from the motion primitives (../motion) and timed by the site's
+// temperament. Three shapes; none of them is the site's name at full width, which is never a close.
 //
-// <Close line="Kom kijken in de werkplaats." accent="werkplaats" link={{ href: "/contact", label: "Maak een afspraak" }}
-//   caption="Open op zaterdag, 10 tot 16 uur" frame />
+// - "idea": the idea's last line rises out of its masks (RevealText), a ScrubLine draws the motif's line under it as
+//   the reader arrives, and the doors sit below. For a site whose last word is the idea itself.
+// - "echo": the opening comes back smaller. Its first line wipes in (MaskWipe) or its photo is uncovered
+//   (ImageCurtain), at a fraction of its first size, with the doors beside or under it. For a film that ends where it
+//   began.
+// - "door": the brief gave real ways in (an address, a phone number, an email, a booking or shop URL) and they are the
+//   close: set large, each a HoverLink (or a Pressable for a booking or a shop), with the idea in one line above. For
+//   a place people visit, call or book.
+//
+// <Close shape="idea" line="Grown slowly, poured by hand." accent="slowly" motif={{ path: "M2 40 C 120 0, 240 80, 398 30", viewBox: "0 0 400 80" }}
+//   doors={[{ kind: "email", href: "mailto:hello@kiln.studio", label: "hello@kiln.studio" }]} />
+// <Close shape="echo" echo={{ media: <img src="/hero.jpg" alt="The kiln at dawn" className="h-full w-full object-cover" /> }} line="Back to the kiln." />
+// <Close shape="door" line="Bread from four in the morning." doors={[
+//   { kind: "address", href: "https://maps.app.goo.gl/...", label: "Oudegracht 12, Utrecht" },
+//   { kind: "phone", href: "tel:+31301234567", label: "030 123 45 67" },
+//   { kind: "booking", href: "https://book.example/table", label: "Book a table" },
+// ]} credit="Bakkerij Oud, since 1962" />
 //
 // Props
-// - line: the closing sentence, plain text, short (it sets in two or three lines at moment size).
-// - accent: the site's one accent word, again: where it first stands in the line it is set in the pairing's italic
-//   accent face (--face-accent), as in the opening and the Statement (../accent). A word the line does not hold
-//   changes nothing.
-// - link: { href, label }, the one way out. Rendered as a plain <a>; wrap your own Link around it if you route.
-// - frame: draws a hairline from --line around the line, one gutter inside it. Use it only when the site's motif is the
-//   frame (it echoes the hero's or the centerpiece's frame).
-// - caption: small, at the start of the link's line. label: small, beside the line in the margin columns.
+// - shape: "idea" (default), "echo" or "door".
+// - line: the idea's line, plain text. idea: the line itself (short, two or three lines at h2). door: one line above
+//   the doors. echo: optional, a short lead beside the echo.
+// - accent: the site's one accent word, again: set in the pairing's italic accent face where it first stands in line
+//   or echo.line (../accent). A word the line does not hold changes nothing.
+// - echo (shape "echo"): { line?: string; media?: ReactNode; reveal?: "wipe" | "curtain"; className?: string }. line is
+//   the opening's first line, set at h2 (not the opening's poster size); media is the opening's photo (an img, a
+//   next/image with fill), shown at about half the page's width, sized by className (default aspect-[4/3]). reveal:
+//   "curtain" (default for media) or "wipe" (always for a line).
+// - motif (shape "idea"): { path?: string; viewBox?: string }, the ScrubLine under the line. A path echoes a drawn
+//   motif; without one it is a straight rule.
+// - doors: the real ways in, from the brief only: { label, href?, kind? } with kind "address" | "phone" | "email" |
+//   "booking" | "shop" | "link". With an href a door is a HoverLink, or a Pressable when it is a booking or a shop;
+//   an address without an href is plain text. With no doors given nothing is rendered for them: never a placeholder,
+//   never an invitation without a destination.
+// - credit: a small line at the foot (credit, legal, year). wordmark: the name at text size in the foot, if at all.
+// - look: the HoverLink look, the site's one ("draw" default, "slide", "color").
 // - className: on the root, for example "scene-inverse" or "scene-field".
 //
-// Mounting: the last section before the footer. The root carries data-scene="close" and data-energy="1".
-// Motion: it enters once. The line's rows rise through their masks (SplitHeadline), the caption and the link follow
-// (Reveal). No pin, no scrub, no hover motion: the link is underlined at rest and stays so. Reduced motion: a short
-// fade. Without scripts: the composed scene. Phones: the line, the label, then the link with the caption under it.
+// Mounting: the last section before the footer. The root carries data-scene="close", data-energy="1" and
+// data-close-shape. Motion: it enters once, from the primitives: RevealText on the line, ScrubLine scrubbed under it,
+// MaskWipe or ImageCurtain on the echo; doors answer hover and press by the feel. No pin. Reduced motion, no scripts
+// or the server render: every primitive shows its final state. Phones: one column, the doors stacked.
+import type { ReactNode } from "react";
 import { withAccent } from "../accent";
-import { Reveal } from "../Reveal";
-import { SplitHeadline } from "../SplitHeadline";
+import { HoverLink } from "../motion/HoverLink";
+import { ImageCurtain } from "../motion/ImageCurtain";
+import { MaskWipe } from "../motion/MaskWipe";
+import { Pressable } from "../motion/Pressable";
+import { RevealText } from "../motion/RevealText";
+import { ScrubLine } from "../motion/ScrubLine";
 import { LABEL, SCENE_SPACE, SHEET_GRID } from "./sheet";
 
+export type CloseShape = "idea" | "echo" | "door";
+
+export type Door = {
+  label: string;
+  href?: string;
+  kind?: "address" | "phone" | "email" | "booking" | "shop" | "link";
+};
+
 type Props = {
-  line: string;
+  shape?: CloseShape;
+  line?: string;
   accent?: string;
-  link: { href: string; label: string };
-  frame?: boolean;
-  caption?: string;
-  label?: string;
+  echo?: { line?: string; media?: ReactNode; reveal?: "wipe" | "curtain"; className?: string };
+  motif?: { path?: string; viewBox?: string };
+  doors?: readonly Door[];
+  credit?: string;
+  wordmark?: string;
+  look?: "draw" | "slide" | "color";
   className?: string;
 };
 
-export function Close({ line, accent, link, frame = false, caption, label, className = "" }: Props) {
+/** One door: a Pressable for a booking or a shop, a HoverLink for any other link, plain text without an href. */
+function DoorItem({ door, size, look }: { door: Door; size: "large" | "small"; look: Props["look"] }) {
+  const type = size === "large" ? "font-display text-h2" : "font-body text-h3 font-medium";
+  if (!door.href) return <p className={`m-0 text-ink ${type}`}>{door.label}</p>;
+  if (door.kind === "booking" || door.kind === "shop") {
+    return (
+      <Pressable
+        href={door.href}
+        press="fill"
+        className={`w-fit px-8 py-4 text-ink shadow-[inset_0_0_0_1px_var(--line)] ${size === "large" ? "font-body text-h3 font-medium" : "font-body text-lead font-medium"}`}
+      >
+        {door.label}
+      </Pressable>
+    );
+  }
   return (
-    <section data-scene="close" data-energy="1" className={`text-ink ${SCENE_SPACE} ${className}`}>
-      <div className={`items-start gap-y-10 md:items-baseline md:gap-y-20 ${SHEET_GRID}`}>
-        {/* The frame's inset is in the line's own em, so it holds the mask's room for accents and descenders at any
-            size and the hairline never crosses a letter. */}
-        <div className={`col-span-12 md:col-span-10 ${frame ? "border border-line p-[0.35em] text-sheet-moment" : ""}`}>
-          <SplitHeadline as="h2" on="scroll" className="m-0 text-sheet-moment">
-            {withAccent(line, accent)}
-          </SplitHeadline>
-        </div>
-        {label ? (
-          <Reveal y={16} className="col-span-8 md:col-span-2 md:col-start-11">
-            <p className={LABEL}>{label}</p>
-          </Reveal>
+    <HoverLink href={door.href} look={look} className={`w-fit text-ink ${type}`}>
+      {door.label}
+    </HoverLink>
+  );
+}
+
+function Doors({ doors, size, look, className = "" }: { doors?: readonly Door[]; size: "large" | "small"; look: Props["look"]; className?: string }) {
+  if (!doors || doors.length === 0) return null;
+  return (
+    <ul className={`m-0 flex list-none flex-col items-start p-0 ${size === "large" ? "gap-6 md:gap-8" : "gap-4"} ${className}`}>
+      {doors.map((door) => (
+        <li key={`${door.kind ?? "link"}:${door.label}`}>
+          <DoorItem door={door} size={size} look={look} />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function Foot({ credit, wordmark }: { credit?: string; wordmark?: string }) {
+  if (!credit && !wordmark) return null;
+  return (
+    <div className="col-span-12 flex flex-col gap-1 border-t border-line pt-5 md:flex-row md:items-baseline md:justify-between">
+      {wordmark ? <p className="m-0 font-body text-body font-medium text-ink">{wordmark}</p> : null}
+      {credit ? <p className={LABEL}>{credit}</p> : null}
+    </div>
+  );
+}
+
+export function Close({
+  shape = "idea",
+  line,
+  accent,
+  echo,
+  motif,
+  doors,
+  credit,
+  wordmark,
+  look = "draw",
+  className = "",
+}: Props) {
+  return (
+    <section data-scene="close" data-energy="1" data-close-shape={shape} className={`text-ink ${SCENE_SPACE} ${className}`}>
+      <div className={`items-start gap-y-12 md:gap-y-20 ${SHEET_GRID}`}>
+        {shape === "idea" ? (
+          <>
+            {line ? (
+              <RevealText as="h2" by="lines" className="col-span-12 m-0 max-w-[20ch] font-display text-h2 md:col-span-9">
+                {withAccent(line, accent)}
+              </RevealText>
+            ) : null}
+            <div className="col-span-12 text-accent">
+              {motif?.path ? (
+                <ScrubLine path={motif.path} viewBox={motif.viewBox ?? "0 0 400 80"} className="h-16 w-full md:h-24" />
+              ) : (
+                <ScrubLine />
+              )}
+            </div>
+            <Doors doors={doors} size="small" look={look} className="col-span-12 md:col-span-6 md:col-start-7" />
+          </>
         ) : null}
-        {/* The link first in reading order; on wide screens it takes the far end and the caption the start. */}
-        <Reveal
-          y={16}
-          className="col-span-12 flex flex-col items-start gap-4 md:flex-row-reverse md:items-baseline md:justify-between md:gap-10"
-        >
-          <a
-            href={link.href}
-            className="font-body text-h3 font-medium text-ink underline decoration-1 underline-offset-[0.22em]"
-          >
-            {link.label}
-          </a>
-          {caption ? <p className={`${LABEL} max-w-[40ch]`}>{caption}</p> : null}
-        </Reveal>
+
+        {shape === "echo" ? (
+          <>
+            {echo?.media ? (
+              (echo.reveal ?? "curtain") === "curtain" ? (
+                <ImageCurtain className={`col-span-12 md:col-span-6 ${echo.className ?? "aspect-[4/3]"}`}>{echo.media}</ImageCurtain>
+              ) : (
+                <MaskWipe from="left" settle className={`relative col-span-12 overflow-hidden md:col-span-6 ${echo.className ?? "aspect-[4/3]"}`}>
+                  {echo.media}
+                </MaskWipe>
+              )
+            ) : null}
+            {echo?.line ? (
+              <MaskWipe from="left" className={`col-span-12 ${echo.media ? "md:col-span-6" : "md:col-span-9"}`}>
+                <p className="m-0 max-w-[20ch] font-display text-h2">{withAccent(echo.line, accent)}</p>
+              </MaskWipe>
+            ) : null}
+            <div className={`col-span-12 flex flex-col gap-8 ${echo?.media && !echo.line ? "md:col-span-5 md:col-start-8 md:self-end" : "md:col-span-6 md:col-start-7"}`}>
+              {line ? (
+                <RevealText as="p" by="lines" className="m-0 max-w-[32ch] font-body text-lead text-ink-muted">
+                  {withAccent(line, accent)}
+                </RevealText>
+              ) : null}
+              <Doors doors={doors} size="small" look={look} />
+            </div>
+          </>
+        ) : null}
+
+        {shape === "door" ? (
+          <>
+            {line ? (
+              <RevealText as="p" by="lines" className="col-span-12 m-0 max-w-[40ch] font-body text-lead text-ink-muted md:col-span-8">
+                {withAccent(line, accent)}
+              </RevealText>
+            ) : null}
+            <Doors doors={doors} size="large" look={look} className="col-span-12" />
+          </>
+        ) : null}
+
+        <Foot credit={credit} wordmark={wordmark} />
       </div>
     </section>
   );

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

@@ -12,8 +12,9 @@
 // Props
 // - children: the sentence, plain text. Two to five lines at moment size on a wide screen.
 // - accent: one word of the sentence, set in the pairing's italic accent face (--face-accent) where it first stands
-//   (whole word, any case; punctuation stays outside). The site's one accent word: the opening and the Close carry it
-//   too (../accent). A word the sentence does not hold changes nothing.
+//   (whole word, any case; punctuation stays outside the mark but on its line, so a phone never sets the full stop
+//   alone). The site's one accent word: the opening and the Close carry it too (../accent). A word the sentence does
+//   not hold changes nothing.
 // - label: small, sentence case, body face. Beside the first line (wide screens), under the sentence (phones).
 // - image: a StruqImage, shown upright (4/5) and small: two columns wide, five on a phone.
 // - as: "h2" (default) or "p" when the page already has its heading here.