@struq/skill 0.2.2 → 0.3.0

package/skills/struq/cinematic/showpieces/README.md

@@ -0,0 +1,18 @@
+# Showpieces (toonstuk)
+
+The award-tier scenes the Build checklist picks from (SKILL.md, Step 8). One file per showpiece, named by its stable slug, the same slug the Struq MCP and the website library use. `scripts/recipes.mjs` copies them to `components/struq/showpieces/`.
+
+| Slug | Component | Lead for |
+|---|---|---|
+| `toonstuk-image-to-fullbleed` | `ImageToFullbleed` | product launch, a portfolio without project photos, anything else |
+| `toonstuk-panel-wipe` | `PanelWipe` | restaurant, hospitality, hotel |
+| `toonstuk-scrub-connector` | `ScrubConnector` | agency, creative brand |
+| `toonstuk-project-stack` | `ProjectStack` | architect or studio with real project photos |
+| `toonstuk-manifesto-scrub` | `ManifestoScrub` | editorial; the supporting move for hospitality |
+| `toonstuk-fill-rows` | `FillRows` | the supporting move for an agency |
+| `toonstuk-wordmark-finale` | `WordmarkFinale` | every site's footer |
+| `toonstuk-pixel-resolve` | `PixelResolve` | the supporting move for a product launch hero |
+
+Every recipe runs on the one clock (GSAP ScrollTrigger on Lenis), pins with `scrub` and never `anticipatePin`, holds on its key frames, and has a composed still for phones and reduced motion. The first key frame of the clip-based ones is set in `globals.css` (the motion gate), so nothing flashes before it.
+
+Learned from Roy's award-tier references (struq-assets/references/award-tier-2026-11); no layout, copy or image of a reference is in these files.

package/skills/struq/cinematic/showpieces/toonstuk-fill-rows.tsx

@@ -0,0 +1,74 @@
+"use client";
+// toonstuk-fill-rows (Struq showpiece recipe)
+// A list of services or chapters set as large hairline rows. On hover and on keyboard focus a row
+// floods with the accent from the bottom edge, its title turns to the accent's ink and nudges in,
+// and its detail slides in beside it. The rows enter with a staggered rise as the list arrives.
+// Lead for an agency or a creative brand (or toonstuk-scrub-connector instead).
+//
+// <FillRows rows={[{ title: "Identiteit", text: "Een merk dat zich in een oogopslag laat herkennen.", href: "#identiteit" }]} />
+//
+// Reduced motion: the fill changes without travel. Phones: the detail sits under each title.
+import Link from "next/link";
+import { useRef } from "react";
+import { gsap, useGSAP } from "@/lib/gsap";
+
+type Row = { title: string; text: string; href?: string };
+
+export function FillRows({ rows, className = "" }: { rows: Row[]; className?: string }) {
+  const list = useRef<HTMLUListElement>(null);
+
+  useGSAP(
+    () => {
+      const el = list.current;
+      if (!el) return;
+      const mm = gsap.matchMedia();
+      mm.add("(prefers-reduced-motion: no-preference)", () => {
+        gsap.from(el.children, {
+          yPercent: 40,
+          autoAlpha: 0,
+          duration: 1,
+          ease: "expo.out",
+          stagger: 0.08,
+          scrollTrigger: { trigger: el, start: "top 85%", once: true },
+        });
+      });
+      return () => mm.revert();
+    },
+    { scope: list },
+  );
+
+  return (
+    <ul ref={list} data-showpiece="fill-rows" className={`border-t border-line ${className}`}>
+      {rows.map((row) => {
+        const inner = (
+          <>
+            <span
+              aria-hidden
+              className="absolute inset-0 origin-bottom scale-y-0 bg-accent transition-transform duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:scale-y-100 group-focus-visible:scale-y-100 motion-reduce:transition-none"
+            />
+            <span className="font-display relative block text-[11vw] leading-[1] tracking-[-0.03em] transition-[color,translate] duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:translate-x-[1.5vw] group-hover:text-accent-ink group-focus-visible:translate-x-[1.5vw] group-focus-visible:text-accent-ink motion-reduce:transition-none md:text-[6vw]">
+              {row.title}
+            </span>
+            <span className="relative block max-w-[34ch] text-body text-ink-muted transition-[color,opacity,translate] duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:text-accent-ink group-focus-visible:text-accent-ink motion-reduce:transition-none md:translate-y-4 md:opacity-0 md:group-hover:translate-y-0 md:group-hover:opacity-100 md:group-focus-visible:translate-y-0 md:group-focus-visible:opacity-100">
+              {row.text}
+            </span>
+          </>
+        );
+        const cls = "group relative grid gap-3 overflow-hidden px-6 py-8 outline-none md:grid-cols-[1fr_auto] md:items-end md:px-[5vw] md:py-[3vw]";
+        return (
+          <li key={row.title} className="border-b border-line">
+            {row.href ? (
+              <Link href={row.href} className={cls}>
+                {inner}
+              </Link>
+            ) : (
+              <div tabIndex={0} className={cls}>
+                {inner}
+              </div>
+            )}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

package/skills/struq/cinematic/showpieces/toonstuk-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 "@/components/struq/HeroCanvas";
+import { MagneticButton } from "@/components/struq/MagneticButton";
+import { SplitHeadline } from "@/components/struq/SplitHeadline";
+import { gsap, useGSAP } from "@/lib/gsap";
+import type { StruqImage } from "@/lib/struq-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/cinematic/showpieces/toonstuk-image-to-fullbleed.tsx

@@ -0,0 +1,78 @@
+"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 "@/lib/gsap";
+import type { StruqImage } from "@/lib/struq-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";
+        gsap.set(q("[data-frame]"), { clipPath: "inset(31% 40% 31% 40%)" });
+        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(q("[data-frame]"), { clipPath: "inset(0% 0% 0% 0%)", duration: 1, ease: "power2.inOut" })
+          .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;
+      });
+      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/cinematic/showpieces/toonstuk-manifesto-scrub.tsx

@@ -0,0 +1,81 @@
+"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, with small photos set into the line that open as their place is reached.
+// Write the text with {0}, {1} where a photo goes: "We koken {0} wat de markt brengt en {1} niets meer."
+// The inline photos are a word's size, so they need a subject (card, column, hero photos): a texture
+// (detail, backdrop) reads as a grey swatch at that size, and check.mjs fails it.
+// Lead for editorial sites; the supporting move for restaurants and hospitality.
+//
+// <ManifestoScrub text="Wij koken {0} met wat de zee en het land die week geven, {1} en verder niets." images={[images.detail[3], images.card[1]]} />
+//
+// Reduced motion and phones: the composed still, the whole paragraph in full ink with its photos.
+import Image from "next/image";
+import { Fragment, useRef } from "react";
+import { gsap, useGSAP } from "@/lib/gsap";
+import type { StruqImage } from "@/lib/struq-images";
+
+type Props = { text: string; images?: StruqImage[]; className?: string };
+
+export function ManifestoScrub({ text, images = [], 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 });
+        gsap.set(q("[data-inline]"), { width: 0 });
+        const tl = gsap.timeline({
+          defaults: { ease: "none" },
+          scrollTrigger: { trigger: el, start: "top top", end: "+=200%", pin: true, scrub: 1 },
+        });
+        q("[data-word], [data-inline]").forEach((node: Element, i: number) => {
+          const at = i * 0.12;
+          if ((node as HTMLElement).dataset.inline !== undefined) {
+            tl.to(node, { width: "1.9em", duration: 0.5, ease: "power2.inOut" }, at);
+          } else {
+            tl.to(node, { opacity: 1, duration: 0.3 }, at);
+          }
+        });
+        tl.to({}, { duration: 0.6 });
+      });
+      return () => mm.revert();
+    },
+    { scope: stage },
+  );
+
+  const parts = text.split(/(\{\d+\})/);
+  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]">
+        {parts.map((part, i) => {
+          const slot = part.match(/^\{(\d+)\}$/);
+          if (slot) {
+            const image = images[Number(slot[1])];
+            if (!image) return null;
+            return (
+              <span
+                key={i}
+                data-inline=""
+                className="relative mx-[0.12em] inline-block h-[0.82em] w-[1.9em] translate-y-[0.08em] overflow-hidden align-baseline"
+              >
+                <Image src={image.src} alt={image.alt} fill sizes="12vw" loading="eager" unoptimized={image.unoptimized} className="object-cover" />
+              </span>
+            );
+          }
+          return (
+            <Fragment key={i}>
+              {part
+                .split(/(\s+)/)
+                .map((w, j) => (w.trim() ? <span key={j} data-word="">{w}</span> : w))}
+            </Fragment>
+          );
+        })}
+      </p>
+    </section>
+  );
+}

package/skills/struq/cinematic/showpieces/toonstuk-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 "@/lib/gsap";
+import type { StruqImage } from "@/lib/struq-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/cinematic/showpieces/toonstuk-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 "@/lib/struq-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>
+  );
+}