@struq/skill 0.2.2 → 0.4.0

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

@@ -0,0 +1,128 @@
+"use client";
+// toonstuk-hero-opener (Struq showpiece recipe): the full-bleed cinematic opener
+// The first screen is the photo (or the WebGL scene over it), edge to edge, with the display line
+// set across it at 14 to 20vw: either one poster line along the held-clear bottom ("across"), or
+// the name split to the left and right edges with the photo between ("split"). One short lead and
+// one confident rectangular CTA sit above the line. On scroll the opener hands over with a real
+// move: it pins, scales down and darkens while the next section slides up over it.
+//
+// <HeroOpener image={images.hero[0]} title="Koken op" accent="vuur." lead="..." cta={{ href: "#reserveren", label: "Reserveer een tafel" }} header={<SiteHeader />} />
+// <HeroOpener image={images.hero[0]} split={["Vuur", "Noord"]} lead="..." cta={...} />
+//
+// The line is the display face at poster size, with at most one italic accent word. The flat scrim
+// keeps the copy at 4.5:1; never a gradient. Reduced motion and phones: the composed still, no pin.
+// The section after the opener slides over it: globals.css gives it a ground and a higher layer.
+import { useRef } from "react";
+import { HeroCanvas } from "../kit/HeroCanvas";
+import { MagneticButton } from "../kit/MagneticButton";
+import { SplitHeadline } from "../kit/SplitHeadline";
+import { gsap, useGSAP } from "../kit/gsap";
+import type { StruqImage } from "../kit/images";
+
+type Props = {
+  /** The beeldbank or client photo. Without one (imageFit "none"), the opener is typographic on the inverse ground over the dots scene. */
+  image?: StruqImage;
+  /** The poster line ("across"). */
+  title?: string;
+  /** One word in the display face's italic, after the title. */
+  accent?: string;
+  /** Two words for the split wordmark; replaces title. */
+  split?: [string, string];
+  lead: string;
+  cta: { href: string; label: string };
+  /** The site header (with the data-wordmark name), set over the photo. */
+  header?: React.ReactNode;
+  /** 0.2 to 0.5: the flat scrim under the copy. */
+  scrim?: number;
+  /**
+   * The photo's calm side, where the lead reads. Defaults to the image's own negativeSpace from the
+   * beeldbank. With no calm left or right side, the lead gets a fixed backing and a step up in size.
+   */
+  calm?: "left" | "right" | "none";
+  className?: string;
+};
+
+export function HeroOpener({ image, title, accent, split, lead, cta, header, scrim = 0.34, calm, className = "" }: Props) {
+  // 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");
+  const stage = useRef<HTMLElement>(null);
+
+  useGSAP(
+    () => {
+      const el = stage.current;
+      if (!el) return;
+      const q = gsap.utils.selector(el);
+      const mm = gsap.matchMedia();
+      mm.add("(prefers-reduced-motion: no-preference)", () => {
+        if (split) {
+          gsap.from(q("[data-split-word]"), { yPercent: 110, duration: 1.4, ease: "expo.out", stagger: 0.12, delay: 0.25 });
+        }
+        gsap.from(q("[data-opener-copy] > *"), { y: 32, autoAlpha: 0, duration: 1, ease: "expo.out", stagger: 0.1, delay: 0.7 });
+      });
+      mm.add("(min-width: 768px) and (prefers-reduced-motion: no-preference)", () => {
+        // The handover: the opener holds, then scales down and darkens under the next section.
+        gsap.timeline({
+          scrollTrigger: { trigger: el, start: "top top", end: "bottom top", pin: true, pinSpacing: false, scrub: true },
+        })
+          .to(q("[data-opener-inner]"), { scale: 0.84, yPercent: -4, ease: "none" }, 0)
+          .to(q("[data-opener-dim]"), { opacity: 0.6, ease: "none" }, 0);
+      });
+      return () => mm.revert();
+    },
+    { scope: stage },
+  );
+
+  // At poster size the words need air of their own: tight tracking pulls the letters together, and
+  // word spacing in em keeps the gap in step with the size for any face.
+  const poster = "font-display block text-[19vw] leading-[0.92] tracking-[-0.045em] [word-spacing:0.09em] md:text-[16vw]";
+  return (
+    <section ref={stage} data-showpiece="hero-opener" 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" />
+        {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-6 md:px-[3vw]">
+            {split.map((word) => (
+              <span key={word} className="block overflow-hidden pb-[0.06em]">
+                <span data-split-word="" data-quiet="" className={poster}>
+                  {word}
+                </span>
+              </span>
+            ))}
+          </h1>
+        ) : null}
+        <div className="absolute inset-x-0 bottom-0 z-10 flex flex-col gap-[3vh] px-6 pb-[3vh] md:px-[3vw]">
+          <div data-opener-copy="" className={`flex flex-col gap-6 md:flex-row md:items-end md:justify-between ${side === "right" ? "md:flex-row-reverse md:text-right" : ""}`}>
+            {side === "none" ? (
+              <p data-quiet="" className="relative isolate max-w-[30ch] text-h3">
+                <span aria-hidden className="absolute -inset-x-5 -inset-y-4 -z-10 bg-black opacity-55" />
+                {lead}
+              </p>
+            ) : (
+              <p data-quiet="" className="max-w-[32ch] text-lead">{lead}</p>
+            )}
+            <div>
+              <MagneticButton href={cta.href} size="lg">
+                {cta.label}
+              </MagneticButton>
+            </div>
+          </div>
+          {!split && title ? (
+            <SplitHeadline as="h1" className={poster}>
+              {title}
+              {accent ? (
+                <>
+                  {" "}
+                  <em className="font-accent font-light italic tracking-[-0.02em] [word-spacing:0.09em]">{accent}</em>
+                </>
+              ) : null}
+            </SplitHeadline>
+          ) : null}
+        </div>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,89 @@
+"use client";
+// toonstuk-image-to-fullbleed (Struq showpiece recipe)
+// A small image in the middle of the ground, the name split to either side of it. As you scroll
+// the stage pins, the image unclips to the full viewport while the two words travel apart and off
+// the edges, the photo settles from a push-in, and one closing line rises over it. Then it holds.
+// Lead for a product launch (with the hero scene) and for a studio portfolio.
+//
+// <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.
+import Image from "next/image";
+import { useRef } from "react";
+import { gsap, useGSAP } from "../kit/gsap";
+import type { StruqImage } from "../kit/images";
+
+type Props = {
+  image: StruqImage;
+  left: string;
+  right: string;
+  /** One closing line over the open photo. */
+  line?: string;
+  className?: string;
+};
+
+export function ImageToFullbleed({ image, left, right, line, className = "" }: Props) {
+  const stage = useRef<HTMLElement>(null);
+
+  useGSAP(
+    () => {
+      const el = stage.current;
+      if (!el) return;
+      const q = gsap.utils.selector(el);
+      const mm = gsap.matchMedia();
+      mm.add("(min-width: 768px) and (prefers-reduced-motion: no-preference)", () => {
+        el.dataset.motion = "1";
+        // The clip is driven from two numbers, never tweened as a string: the browser shortens a symmetric
+        // inset(31% 40% 31% 40%) to inset(31% 40%), GSAP then pairs two start numbers with four end numbers,
+        // and two edges jump open in one frame while the other two slide.
+        const frame = q("[data-frame]")[0] as HTMLElement;
+        const clip = { y: 31, x: 40 };
+        const paint = () => {
+          frame.style.clipPath = `inset(${clip.y}% ${clip.x}% ${clip.y}% ${clip.x}%)`;
+        };
+        paint();
+        gsap.set(q("[data-photo]"), { scale: 1.35 });
+        gsap.set(q("[data-line]"), { yPercent: 100, autoAlpha: 0 });
+        gsap.set(q("[data-scrim]"), { autoAlpha: 0 }); // the scrim ends at its class opacity, never solid
+        const tl = gsap.timeline({
+          defaults: { ease: "none" },
+          scrollTrigger: { trigger: el, start: "top top", end: "+=220%", pin: true, scrub: 1 },
+        });
+        tl.to({}, { duration: 0.12 }) // hold on the small frame
+          .to(clip, { y: 0, x: 0, duration: 1, ease: "power2.inOut", onUpdate: paint })
+          .to(q("[data-photo]"), { scale: 1, duration: 1, ease: "power2.inOut" }, "<")
+          .to(q("[data-left]"), { xPercent: -120, duration: 0.9, ease: "power2.in" }, "<")
+          .to(q("[data-right]"), { xPercent: 120, duration: 0.9, ease: "power2.in" }, "<")
+          .to(q("[data-scrim]"), { autoAlpha: 0.3, duration: 0.4 }, "-=0.3")
+          .to(q("[data-line]"), { yPercent: 0, autoAlpha: 1, duration: 0.45, ease: "expo.out" }, "-=0.2")
+          .to({}, { duration: 0.35 }); // hold on the open frame
+        return () => {
+          delete el.dataset.motion;
+          frame.style.clipPath = "";
+        };
+      });
+      return () => mm.revert();
+    },
+    { scope: stage },
+  );
+
+  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">
+        <div data-photo="" className="absolute inset-0">
+          <Image src={image.src} alt={image.alt} fill sizes="100vw" unoptimized={image.unoptimized} className="object-cover" />
+        </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>
+      {line ? (
+        <p data-line="" className="font-display text-h2 absolute bottom-[10vh] left-6 max-w-[18ch] text-on-photo md:left-[8vw]">
+          {line}
+        </p>
+      ) : null}
+    </section>
+  );
+}

package/skills/struq/blocks/showpieces/manifesto-scrub.tsx

@@ -0,0 +1,48 @@
+"use client";
+// toonstuk-manifesto-scrub (Struq showpiece recipe)
+// One large statement paragraph that fills word by word as it scrolls through the screen, from a
+// faint ink to full ink. Type only: the photos that used to open inside the line were dropped on
+// 2026-11-06 (Roy: they read as glitchy), so the statement carries the move on its own.
+// Lead for editorial sites; the supporting move for restaurants and hospitality.
+//
+// <ManifestoScrub text="Wij koken met wat de zee en het land die week geven, en verder niets." />
+//
+// Reduced motion and phones: the composed still, the whole paragraph in full ink.
+import { useRef } from "react";
+import { gsap, useGSAP } from "../kit/gsap";
+
+type Props = { text: string; className?: string };
+
+export function ManifestoScrub({ text, className = "" }: Props) {
+  const stage = useRef<HTMLElement>(null);
+
+  useGSAP(
+    () => {
+      const el = stage.current;
+      if (!el) return;
+      const q = gsap.utils.selector(el);
+      const mm = gsap.matchMedia();
+      mm.add("(min-width: 768px) and (prefers-reduced-motion: no-preference)", () => {
+        gsap.set(q("[data-word]"), { opacity: 0.16 });
+        const tl = gsap.timeline({
+          defaults: { ease: "none" },
+          scrollTrigger: { trigger: el, start: "top top", end: "+=200%", pin: true, scrub: 1 },
+        });
+        q("[data-word]").forEach((node: Element, i: number) => {
+          tl.to(node, { opacity: 1, duration: 0.3 }, i * 0.12);
+        });
+        tl.to({}, { duration: 0.6 });
+      });
+      return () => mm.revert();
+    },
+    { scope: stage },
+  );
+
+  return (
+    <section ref={stage} data-showpiece="manifesto-scrub" className={`relative flex items-center bg-surface-0 px-6 py-32 md:min-h-svh md:px-[8vw] md:py-0 ${className}`}>
+      <p className="font-display max-w-[22ch] text-[9vw] leading-[1.02] tracking-[-0.025em] md:text-[5.2vw]">
+        {text.split(/(\s+)/).map((w, j) => (w.trim() ? <span key={j} data-word="">{w}</span> : w))}
+      </p>
+    </section>
+  );
+}

package/skills/struq/blocks/showpieces/panel-wipe.tsx

@@ -0,0 +1,89 @@
+"use client";
+// toonstuk-panel-wipe (Struq showpiece recipe)
+// Two ground-colour panels meet in the middle, each carrying one word of the headline. As you
+// scroll the stage pins, the panels part to the edges and reveal a full-bleed photo behind them,
+// the photo settling from a push-in; the panels then close again over it, so the headline carries
+// you into the next scene. A scene change by mask, never a fade between boxes.
+// Lead for restaurants and hospitality (with toonstuk-manifesto-scrub as the supporting move).
+//
+// <PanelWipe image={images.band[0]} left="Vuur" right="Zout" caption="De oven brandt vanaf vier uur." />
+//
+// Reduced motion and phones: the composed still, both words above the full-bleed photo.
+import Image from "next/image";
+import { useRef } from "react";
+import { gsap, useGSAP } from "../kit/gsap";
+import type { StruqImage } from "../kit/images";
+
+type Props = {
+  image: StruqImage;
+  left: string;
+  right: string;
+  /** One quiet line on the open photo. */
+  caption?: string;
+  /** Close the panels again at the end (default), or leave the photo open. */
+  close?: boolean;
+  className?: string;
+};
+
+export function PanelWipe({ image, left, right, caption, close = true, className = "" }: Props) {
+  const stage = useRef<HTMLElement>(null);
+
+  useGSAP(
+    () => {
+      const el = stage.current;
+      if (!el) return;
+      const q = gsap.utils.selector(el);
+      const mm = gsap.matchMedia();
+      mm.add("(min-width: 768px) and (prefers-reduced-motion: no-preference)", () => {
+        gsap.set(q("[data-photo]"), { scale: 1.25 });
+        gsap.set(q("[data-caption]"), { autoAlpha: 0, yPercent: 60 });
+        const tl = gsap.timeline({
+          defaults: { ease: "none" },
+          scrollTrigger: { trigger: el, start: "top top", end: close ? "+=260%" : "+=170%", pin: true, scrub: 1 },
+        });
+        tl.to({}, { duration: 0.15 })
+          .to(q("[data-panel-left]"), { xPercent: -100, duration: 1, ease: "power3.inOut" })
+          .to(q("[data-panel-right]"), { xPercent: 100, duration: 1, ease: "power3.inOut" }, "<")
+          .to(q("[data-photo]"), { scale: 1, duration: 1.2, ease: "power2.out" }, "<")
+          .to(q("[data-caption]"), { autoAlpha: 1, yPercent: 0, duration: 0.4, ease: "expo.out" }, "-=0.3")
+          .to({}, { duration: 0.5 });
+        if (close) {
+          tl.to(q("[data-caption]"), { autoAlpha: 0, duration: 0.2 })
+            .to(q("[data-panel-left]"), { xPercent: 0, duration: 1, ease: "power3.inOut" }, "<")
+            .to(q("[data-panel-right]"), { xPercent: 0, duration: 1, ease: "power3.inOut" }, "<")
+            .to({}, { duration: 0.15 });
+        }
+      });
+      return () => mm.revert();
+    },
+    { scope: stage },
+  );
+
+  const word = "font-display block text-[15vw] leading-[0.85] tracking-[-0.04em] md:text-[11vw]";
+  return (
+    <section ref={stage} data-showpiece="panel-wipe" className={`relative overflow-hidden bg-surface-0 motion-safe:md:h-svh ${className}`}>
+      {/* Still layout (phones, reduced motion): the words, then the photo. */}
+      <div className="flex justify-between px-6 pb-8 pt-24 md:hidden motion-reduce:md:flex">
+        <span className={word}>{left}</span>
+        <span className={word}>{right}</span>
+      </div>
+      <div className="relative aspect-[4/5] overflow-hidden motion-safe:md:absolute motion-safe:md:inset-0 motion-safe:md:aspect-auto motion-reduce:md:aspect-[16/9]">
+        <div data-photo="" className="absolute inset-0">
+          <Image src={image.src} alt={image.alt} fill sizes="100vw" unoptimized={image.unoptimized} className="object-cover" />
+        </div>
+        {caption ? (
+          <p data-caption="" className="absolute z-10 bottom-[8vh] left-6 max-w-[34ch] text-lead text-on-photo md:left-[8vw]">
+            <span aria-hidden className="absolute -inset-x-4 -inset-y-3 -z-10 bg-black opacity-35" />
+            {caption}
+          </p>
+        ) : null}
+      </div>
+      <div data-panel-left="" className="absolute inset-y-0 left-0 hidden w-[calc(50%+1px)] items-center justify-end bg-surface-0 pr-[1.5vw] motion-safe:md:flex">
+        <span className={word}>{left}</span>
+      </div>
+      <div data-panel-right="" className="absolute inset-y-0 right-0 hidden w-[calc(50%+1px)] items-center justify-start bg-surface-0 pl-[1.5vw] motion-safe:md:flex">
+        <span className={word}>{right}</span>
+      </div>
+    </section>
+  );
+}

package/skills/struq/blocks/showpieces/pixel-resolve.tsx

@@ -0,0 +1,107 @@
+"use client";
+// toonstuk-pixel-resolve (Struq showpiece recipe)
+// The hero photo arrives as coarse pixels and resolves to sharp in a few held steps, on a stepped
+// 2D canvas over the real image (no WebGL needed). When the last step lands, the canvas is hidden
+// and the plain next/image is what stays, so the page always ends on the real photo.
+// A supporting move for a product launch or a creative brand's hero.
+//
+// <PixelResolve image={images.hero[0]} priority className="h-svh" />
+//
+// Reduced motion, phones and any failure: the plain image, immediately.
+import Image from "next/image";
+import { useEffect, useRef } from "react";
+import type { StruqImage } from "../kit/images";
+
+/** Pixel sizes in CSS pixels, coarse to fine. */
+const STEPS = [64, 40, 24, 14, 8, 4];
+
+type Props = {
+  image: StruqImage;
+  className?: string;
+  priority?: boolean;
+  sizes?: string;
+  /** Milliseconds each step holds. */
+  hold?: number;
+};
+
+export function PixelResolve({ image, className = "", priority = false, sizes = "100vw", hold = 170 }: Props) {
+  const box = useRef<HTMLDivElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const el = box.current;
+    const canvas = canvasRef.current;
+    if (!el || !canvas) return;
+    // React owns the canvas, so it is hidden, never removed.
+    const hideCanvas = () => {
+      canvas.style.display = "none";
+    };
+    const still = window.matchMedia("(prefers-reduced-motion: reduce), (max-width: 767px)").matches;
+    if (still) {
+      hideCanvas();
+      return;
+    }
+    let cancelled = false;
+    const timers: number[] = [];
+    const img = new window.Image();
+    img.decoding = "async";
+    img.src = image.src;
+    img.onerror = () => hideCanvas();
+    img.onload = () => {
+      if (cancelled) return;
+      const w = el.clientWidth;
+      const h = el.clientHeight;
+      const dpr = Math.min(window.devicePixelRatio || 1, 2);
+      canvas.width = Math.round(w * dpr);
+      canvas.height = Math.round(h * dpr);
+      const ctx = canvas.getContext("2d");
+      const small = document.createElement("canvas");
+      const sctx = small.getContext("2d");
+      if (!ctx || !sctx) return hideCanvas();
+      // object-fit: cover, by hand
+      const scale = Math.max(w / img.naturalWidth, h / img.naturalHeight);
+      const sw = w / scale;
+      const sh = h / scale;
+      const sx = (img.naturalWidth - sw) / 2;
+      const sy = (img.naturalHeight - sh) / 2;
+      const draw = (px: number) => {
+        small.width = Math.max(1, Math.round(w / px));
+        small.height = Math.max(1, Math.round(h / px));
+        sctx.drawImage(img, sx, sy, sw, sh, 0, 0, small.width, small.height);
+        ctx.imageSmoothingEnabled = false;
+        ctx.drawImage(small, 0, 0, canvas.width, canvas.height);
+      };
+      STEPS.forEach((px, i) => timers.push(window.setTimeout(() => !cancelled && draw(px), 120 + i * hold)));
+      timers.push(
+        window.setTimeout(() => {
+          if (cancelled) return;
+          canvas.style.transition = "opacity 400ms cubic-bezier(0.16, 1, 0.3, 1)";
+          canvas.style.opacity = "0";
+          timers.push(window.setTimeout(() => hideCanvas(), 450));
+        }, 120 + STEPS.length * hold),
+      );
+      draw(STEPS[0]);
+      canvas.style.opacity = "1";
+    };
+    return () => {
+      cancelled = true;
+      timers.forEach((t) => window.clearTimeout(t));
+    };
+  }, [image.src, hold]);
+
+  return (
+    <div ref={box} data-showpiece="pixel-resolve" className={`relative overflow-hidden bg-surface-2 ${className}`}>
+      <Image
+        src={image.src}
+        alt={image.alt}
+        fill
+        sizes={sizes}
+        loading={priority ? "eager" : "lazy"}
+        fetchPriority={priority ? "high" : "auto"}
+        unoptimized={image.unoptimized}
+        className="object-cover"
+      />
+      <canvas ref={canvasRef} aria-hidden className="pointer-events-none absolute inset-0 h-full w-full opacity-0" />
+    </div>
+  );
+}

package/skills/struq/blocks/showpieces/project-stack.tsx

@@ -0,0 +1,86 @@
+"use client";
+// toonstuk-project-stack (Struq showpiece recipe)
+// The work, one project per screen. The stage pins, each next project slides up over the last
+// one full bleed, while the one beneath recedes (scale and a darker veil), so the stack reads as
+// layered rather than cut. Over the photos the cursor turns into a round "Bekijk" label
+// (data-cursor="Bekijk"; the Cursor recipe renders it). Names are set large, the meta small.
+// Lead for an architect or a studio portfolio.
+//
+// <ProjectStack items={[{ image: images.hero[0], title: "De Spinnerij", meta: "Transformatie, Charlois", href: "/werk/spinnerij" }]} />
+//
+// Only real projects from the brief, with the client's own photos. Beeldbank photos never stand in
+// for a client's project: without project photos, use a different showpiece.
+// Reduced motion and phones: the composed still, the projects one under the other.
+import Image from "next/image";
+import Link from "next/link";
+import { useRef } from "react";
+import { gsap, useGSAP } from "../kit/gsap";
+import type { StruqImage } from "../kit/images";
+
+type Item = { image: StruqImage; title: string; meta?: string; href?: string };
+
+export function ProjectStack({ items, label = "Bekijk", className = "" }: { items: Item[]; label?: string; className?: string }) {
+  const stage = useRef<HTMLElement>(null);
+
+  useGSAP(
+    () => {
+      const el = stage.current;
+      if (!el) return;
+      const cards = gsap.utils.toArray<HTMLElement>("[data-card]", el);
+      if (cards.length < 2) return;
+      const mm = gsap.matchMedia();
+      mm.add("(min-width: 768px) and (prefers-reduced-motion: no-preference)", () => {
+        gsap.set(cards.slice(1), { yPercent: 100 });
+        const tl = gsap.timeline({
+          defaults: { ease: "none" },
+          scrollTrigger: { trigger: el, start: "top top", end: () => `+=${(cards.length - 1) * 110}%`, pin: true, scrub: 1 },
+        });
+        cards.slice(1).forEach((card, i) => {
+          const below = cards[i];
+          tl.to({}, { duration: 0.25 }) // hold on each project
+            .to(card, { yPercent: 0, duration: 1, ease: "power2.inOut" })
+            .to(below, { scale: 0.9, duration: 1, ease: "power2.inOut" }, "<")
+            .to(below.querySelector("[data-veil]"), { opacity: 0.55, duration: 1 }, "<")
+            .fromTo(card.querySelector("[data-card-photo]"), { scale: 1.2 }, { scale: 1, duration: 1.2, ease: "power2.out" }, "<");
+        });
+        tl.to({}, { duration: 0.25 });
+      });
+      return () => mm.revert();
+    },
+    { scope: stage },
+  );
+
+  return (
+    <section
+      ref={stage}
+      data-showpiece="project-stack"
+      className={`relative flex flex-col gap-6 bg-ink px-6 py-24 motion-safe:md:block motion-safe:md:h-svh motion-safe:md:overflow-hidden motion-safe:md:p-0 ${className}`}
+    >
+      {items.map((item, i) => {
+        const body = (
+          <>
+            <div data-card-photo="" className="absolute inset-0">
+              <Image src={item.image.src} alt={item.image.alt} fill sizes="100vw" unoptimized={item.image.unoptimized} className="object-cover" />
+            </div>
+            <div aria-hidden className="absolute inset-0 bg-black opacity-25" />
+            <div data-veil="" aria-hidden className="absolute inset-0 bg-black opacity-0" />
+            <div className="absolute inset-x-6 bottom-8 flex flex-col gap-2 text-on-photo md:inset-x-[5vw] md:bottom-[8vh] md:flex-row md:items-end md:justify-between">
+              <span className="font-display block text-[12vw] leading-[0.9] tracking-[-0.03em] md:text-[9vw]">{item.title}</span>
+              {item.meta ? <span className="text-small md:pb-[1.2vw]">{item.meta}</span> : null}
+            </div>
+          </>
+        );
+        const cls = "relative block aspect-[4/5] overflow-hidden motion-safe:md:absolute motion-safe:md:inset-0 motion-safe:md:aspect-auto";
+        return item.href ? (
+          <Link key={item.title} href={item.href} data-card="" data-cursor={label} className={cls} style={{ zIndex: i + 1 }}>
+            {body}
+          </Link>
+        ) : (
+          <div key={item.title} data-card="" data-cursor={label} className={cls} style={{ zIndex: i + 1 }}>
+            {body}
+          </div>
+        );
+      })}
+    </section>
+  );
+}