@struq/skill 0.2.2 → 0.3.0

package/skills/struq/recipes/components/struq/HeroCanvas.tsx

@@ -0,0 +1,278 @@
+"use client";
+// components/struq/HeroCanvas.tsx (Struq recipe): the WebGL hero layer
+// A three.js layer behind the hero, with everything a production hero needs built in:
+// - three.js loads in its own chunk after the page paints, never in the first-load bundle;
+// - the poster (the hero photo, or the flat page surface) shows first and stays when WebGL is
+//   missing; the canvas fades in over it only after its first frame;
+// - device pixel ratio capped at 1.75, plus a pixel budget for large screens;
+// - rendering pauses when the hero leaves the viewport or the tab is hidden;
+// - prefers-reduced-motion and phones render ONE composed still frame (a computed poster) and never
+//   run the loop, so a phone spends no battery on it;
+// - the copy stays readable: mark the headline and lead with data-quiet and the field hushes
+//   behind them (a soft ceiling, not a dark box);
+// - the pointer is a gentle modulation that eases in and out (presence), never a spotlight;
+// - colours come from the site tokens on :root (--surface-0, --surface-2, --ink, --accent), so the
+//   scene is recoloured to the palette automatically;
+// - it runs on gsap.ticker, the same clock as Lenis and ScrollTrigger.
+//
+// Place it as the first child of a `relative` hero section:
+// <section className="relative min-h-svh">
+//   <HeroCanvas scene="contours" />                      (no photo needed)
+//   <HeroCanvas scene="ripple" image={images.hero[0]} /> (the hero photo, liquid under the pointer)
+//   <HeroCanvas scene="dots" />                          (a field of points, for tech and mobility)
+//   <div className="relative z-10"><h1 data-quiet>...</h1><p data-quiet>...</p></div>
+// </section>
+//
+// A scene from the Struq MCP (struq_achtergrond) or one of your own: write it as
+// components/struq/scenes/<name>.ts exporting createScene (see scenes/types.ts) and add it to SCENES.
+import Image from "next/image";
+import { useEffect, useRef } from "react";
+import { gsap } from "@/lib/gsap";
+import type { StruqImage } from "@/lib/struq-images";
+import type { CreateScene, Palette } from "./scenes/types";
+
+const SCENES: Record<string, () => Promise<{ createScene: CreateScene }>> = {
+  contours: () => import("./scenes/contours"),
+  ripple: () => import("./scenes/ripple"),
+  dots: () => import("./scenes/dots"),
+};
+
+export type HeroSceneName = keyof typeof SCENES;
+
+type Props = {
+  scene: HeroSceneName;
+  /** The poster, and the texture for "ripple". Use the same image as the hero photo. */
+  image?: StruqImage;
+  /** 0 to 1: how strongly the palette grade covers the photo (ripple only). */
+  grade?: number;
+  /** 0 to 0.6: a flat black scrim over the layer, so type set in text-on-photo reads on a photo. */
+  scrim?: number;
+  className?: string;
+  /** Set when the poster image is the page's LCP element. */
+  priority?: boolean;
+};
+
+/**
+ * A token as an rgb() string three.js can parse, whatever it was written in: hex, oklch() or
+ * color-mix(). The browser resolves the variable on a probe element, a 2D canvas turns the result
+ * into sRGB bytes.
+ */
+function pick(name: string, fallback: string, host: HTMLElement) {
+  const probe = document.createElement("span");
+  probe.style.color = `var(${name}, ${fallback})`;
+  host.appendChild(probe); // resolved where the canvas sits, so a contrast scene recolours it
+  const computed = getComputedStyle(probe).color;
+  probe.remove();
+  const ctx = document.createElement("canvas").getContext("2d", { willReadFrequently: true });
+  if (!ctx) return fallback;
+  ctx.fillStyle = fallback;
+  ctx.fillStyle = computed; // an unparseable value leaves the fallback in place
+  ctx.fillRect(0, 0, 1, 1);
+  const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
+  return `rgb(${r}, ${g}, ${b})`;
+}
+
+/** Relative luminance of an rgb() string, 0 to 1. */
+function luminance(rgb: string) {
+  const [r, g, b] = (rgb.match(/[0-9]+/g) ?? ["255", "255", "255"]).slice(0, 3).map((n) => Number(n) / 255);
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+
+function readPalette(host: HTMLElement): Palette {
+  return {
+    surface: pick("--surface-0", "#f4efe6", host),
+    surface2: pick("--surface-2", "#e2d7c4", host),
+    ink: pick("--ink", "#1c1a17", host),
+    accent: pick("--accent", "#8a3b22", host),
+  };
+}
+
+export function HeroCanvas({ scene, image, grade = 0.25, scrim = 0, className = "", priority = false }: Props) {
+  const host = useRef<HTMLDivElement>(null);
+  const canvasSlot = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const el = host.current;
+    const slot = canvasSlot.current;
+    if (!el || !slot) return;
+    let disposed = false;
+    let cleanup = () => {};
+
+    const start = async () => {
+      const load = SCENES[scene];
+      if (!load) return;
+      const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      const { createScene } = await load();
+      const THREE = await import("three");
+      if (disposed) return;
+
+      let renderer: import("three").WebGLRenderer;
+      try {
+        renderer = new THREE.WebGLRenderer({ antialias: false, alpha: false, powerPreference: "high-performance" });
+      } catch {
+        return; // no WebGL: the poster stays, which is the designed fallback
+      }
+      const phone = window.matchMedia("(max-width: 767px), (pointer: coarse)").matches;
+      const still = reduce || phone;
+      const dprCap = Math.min(window.devicePixelRatio || 1, phone ? 1.5 : 1.75);
+      const canvas = renderer.domElement;
+      canvas.style.cssText = "position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0";
+      canvas.setAttribute("aria-hidden", "true");
+      slot.appendChild(canvas);
+
+      const palette = readPalette(el);
+      let hero: Awaited<ReturnType<CreateScene>>;
+      try {
+        hero = await createScene({
+          THREE,
+          renderer,
+          palette,
+          dark: luminance(palette.surface) < 0.4,
+          image: image ? { src: image.src, width: image.width, height: image.height } : undefined,
+          grade,
+        });
+      } catch (error) {
+        console.warn("[HeroCanvas] scene failed, keeping the poster:", error);
+        renderer.dispose();
+        canvas.remove();
+        return;
+      }
+      if (disposed) {
+        canvas.remove();
+        hero.dispose();
+        renderer.dispose();
+        return;
+      }
+
+      const state = {
+        time: 0,
+        pointer: { x: 0.3, y: 0 },
+        target: { x: 0.3, y: 0 },
+        presence: 0,
+        wanted: 0,
+        scroll: 0,
+        velocity: 0,
+        quiet: new Float32Array(16),
+        feather: 48,
+      };
+      // The copy the field hushes behind: up to four [data-quiet] elements in the hero section.
+      const measureQuiet = () => {
+        const pr = renderer.getPixelRatio();
+        const box = el.getBoundingClientRect();
+        const section = el.parentElement ?? el;
+        state.quiet.fill(0);
+        Array.from(section.querySelectorAll<HTMLElement>("[data-quiet]"))
+          .slice(0, 4)
+          .forEach((node, i) => {
+            const r = node.getBoundingClientRect();
+            state.quiet[i * 4] = (r.left - box.left) * pr;
+            state.quiet[i * 4 + 1] = (box.bottom - r.bottom) * pr;
+            state.quiet[i * 4 + 2] = (r.right - box.left) * pr;
+            state.quiet[i * 4 + 3] = (box.bottom - r.top) * pr;
+          });
+        state.feather = 64 * pr;
+      };
+      const size = () => {
+        const w = el.clientWidth || window.innerWidth;
+        const h = el.clientHeight || window.innerHeight;
+        // DPR cap, then a pixel budget: a full-screen shader on a 4K or ultrawide screen renders at
+        // most about 2.4 million pixels. The fields are soft, so the drop in resolution is invisible.
+        renderer.setPixelRatio(Math.min(dprCap, Math.sqrt(2_400_000 / Math.max(1, w * h))));
+        renderer.setSize(w, h, false);
+        hero.resize(w, h);
+        measureQuiet();
+      };
+      size();
+      // Webfonts and the headline's split change the copy's box once after mount.
+      const remeasure = window.setTimeout(measureQuiet, 900);
+
+      const draw = () => {
+        hero.update(state);
+        if (hero.render) hero.render(renderer);
+        else renderer.render(hero.scene, hero.camera);
+      };
+
+      let visible = true;
+      const io = new IntersectionObserver(([entry]) => (visible = entry.isIntersecting), { threshold: 0 });
+      io.observe(el);
+
+      const onPointer = (e: PointerEvent) => {
+        const r = el.getBoundingClientRect();
+        const x = ((e.clientX - r.left) / r.width) * 2 - 1;
+        const y = -(((e.clientY - r.top) / r.height) * 2 - 1);
+        state.velocity = Math.min(1, state.velocity + Math.hypot(x - state.target.x, y - state.target.y) * 2);
+        state.target.x = x;
+        state.target.y = y;
+        state.wanted = Math.abs(x) <= 1 && Math.abs(y) <= 1 ? 1 : 0;
+      };
+      const onLeave = () => (state.wanted = 0);
+
+      const tick = (time: number) => {
+        if (!visible || document.hidden) return;
+        state.time = time;
+        state.pointer.x += (state.target.x - state.pointer.x) * 0.05;
+        state.pointer.y += (state.target.y - state.pointer.y) * 0.05;
+        state.presence += (state.wanted - state.presence) * (state.wanted ? 0.04 : 0.015);
+        state.velocity *= 0.95;
+        state.scroll = Math.min(1, Math.max(0, window.scrollY / Math.max(1, el.clientHeight)));
+        draw();
+      };
+
+      const ro = new ResizeObserver(() => {
+        size();
+        if (still) draw();
+      });
+      ro.observe(el);
+
+      if (still) {
+        state.time = 40; // one composed still frame: the computed poster
+        draw();
+      } else {
+        window.addEventListener("pointermove", onPointer, { passive: true });
+        document.documentElement.addEventListener("pointerleave", onLeave);
+        gsap.ticker.add(tick);
+        draw();
+      }
+      gsap.to(canvas, { opacity: 1, duration: 1.2, ease: "power2.out", delay: 0.1 });
+
+      cleanup = () => {
+        gsap.ticker.remove(tick);
+        window.clearTimeout(remeasure);
+        window.removeEventListener("pointermove", onPointer);
+        document.documentElement.removeEventListener("pointerleave", onLeave);
+        io.disconnect();
+        ro.disconnect();
+        hero.dispose();
+        renderer.dispose();
+        canvas.remove();
+      };
+    };
+
+    // Start after the page has painted, so the canvas never competes with the LCP.
+    const idle = window.setTimeout(() => void start(), 120);
+    return () => {
+      disposed = true;
+      window.clearTimeout(idle);
+      cleanup();
+    };
+  }, [scene, image, grade]);
+
+  return (
+    <div ref={host} aria-hidden className={`pointer-events-none absolute inset-0 overflow-hidden bg-surface-0 ${className}`}>
+      {image ? (
+        <Image
+          src={image.src}
+          alt=""
+          fill
+          sizes="100vw"
+          loading={priority ? "eager" : "lazy"}
+          fetchPriority={priority ? "high" : "auto"}
+          unoptimized={image.unoptimized}
+          className="object-cover"
+        />
+      ) : null}
+      <div ref={canvasSlot} className="absolute inset-0" />
+      {scrim > 0 ? <div className="absolute inset-0 bg-black" style={{ opacity: Math.min(0.6, scrim) }} /> : null}
+    </div>
+  );
+}

package/skills/struq/recipes/components/struq/HorizontalGallery.tsx

@@ -0,0 +1,106 @@
+"use client";
+// components/struq/HorizontalGallery.tsx (Struq recipe): SHOWPIECE
+// A pinned section whose track of images slides sideways as you scroll down, each photo panning
+// inside its frame (containerAnimation). Place it at an act break: after the first proof, before
+// the invitation. On phones and under reduced motion it becomes a native swipe row, no pin.
+//
+// <HorizontalGallery
+//   title={<>De kaart volgt<br />de markt.</>}
+//   intro="Wat de vissers en telers die week brengen, staat zaterdag op tafel."
+//   items={[{ image: images.card[0], title: "Zeebaars", text: "Uit de Noordzee, op de huid gebakken." }, ...]}
+// />
+import Image from "next/image";
+import { useRef } from "react";
+import { gsap, useGSAP } from "@/lib/gsap";
+import type { StruqImage } from "@/lib/struq-images";
+
+type Item = { image: StruqImage; title: string; text?: string };
+
+type Props = {
+  title: React.ReactNode;
+  intro?: string;
+  items: Item[];
+  className?: string;
+};
+
+export function HorizontalGallery({ title, intro, items, className = "" }: Props) {
+  const section = useRef<HTMLElement>(null);
+  const track = useRef<HTMLDivElement>(null);
+
+  useGSAP(
+    () => {
+      const el = section.current;
+      const row = track.current;
+      if (!el || !row) return;
+      const mm = gsap.matchMedia();
+      mm.add("(min-width: 768px) and (prefers-reduced-motion: no-preference)", () => {
+        const distance = () => Math.max(0, row.scrollWidth - window.innerWidth);
+        const slide = gsap.to(row, {
+          x: () => -distance(),
+          ease: "none",
+          scrollTrigger: {
+            trigger: el,
+            start: "top top",
+            end: () => `+=${distance()}`,
+            pin: true,
+            scrub: 1, // no pin anticipation: with smooth scroll it jerks the pin on engage
+            invalidateOnRefresh: true,
+          },
+        });
+        // Each photo pans against the slide, which gives the row depth.
+        gsap.utils.toArray<HTMLElement>("[data-pan]", el).forEach((photo) => {
+          gsap.fromTo(
+            photo,
+            { xPercent: -6 },
+            {
+              xPercent: 6,
+              ease: "none",
+              scrollTrigger: { trigger: photo, containerAnimation: slide, start: "left right", end: "right left", scrub: true },
+            },
+          );
+        });
+      });
+      return () => mm.revert();
+    },
+    { scope: section },
+  );
+
+  return (
+    <section ref={section} className={`relative overflow-hidden bg-surface-1 ${className}`}>
+      <div className="flex min-h-svh flex-col justify-center gap-12 py-24 md:py-0">
+        <div
+          ref={track}
+          className="flex snap-x snap-mandatory gap-6 overflow-x-auto px-6 md:w-max md:snap-none md:gap-10 md:overflow-visible md:px-[8vw]"
+        >
+          <div className="flex w-[80vw] shrink-0 snap-start flex-col justify-end gap-6 md:w-[34vw] md:pr-[4vw]">
+            <h2 className="font-display text-h2">{title}</h2>
+            {intro ? <p className="max-w-[40ch] text-lead text-ink-muted">{intro}</p> : null}
+          </div>
+          {items.map((item, i) => (
+            <figure
+              key={item.image.src}
+              className={`flex shrink-0 snap-start flex-col gap-4 ${i % 2 ? "w-[72vw] md:w-[26vw] md:pt-[12vh]" : "w-[80vw] md:w-[34vw]"}`}
+            >
+              <div className="relative overflow-hidden bg-surface-2" style={{ aspectRatio: i % 2 ? "4/5" : "3/2" }}>
+                <div data-pan="" className="absolute inset-[-8%]">
+                  <Image
+                    src={item.image.src}
+                    alt={item.image.alt}
+                    fill
+                    sizes="(min-width: 768px) 34vw, 80vw"
+                    unoptimized={item.image.unoptimized}
+                    className="object-cover"
+                  />
+                </div>
+              </div>
+              <figcaption className="flex flex-col gap-1">
+                <span className="font-display text-h3">{item.title}</span>
+                {item.text ? <span className="max-w-[36ch] text-small text-ink-muted">{item.text}</span> : null}
+              </figcaption>
+            </figure>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

package/skills/struq/recipes/components/struq/MagneticButton.tsx

@@ -0,0 +1,92 @@
+"use client";
+// components/struq/MagneticButton.tsx (Struq recipe)
+// The page's primary call to action. It leans toward the pointer (the label leans further, which
+// reads as depth), a fill rises from the bottom edge on hover, and it springs back on leave.
+// quickTo runs on gsap.ticker, the page's one clock. Touch screens and reduced motion get a still
+// button with the same fill.
+//
+// <MagneticButton href="#reserveren">Reserveer een tafel</MagneticButton>
+import { useRef } from "react";
+import { gsap, useGSAP } from "@/lib/gsap";
+
+type Props = {
+  children: React.ReactNode;
+  href?: string;
+  onClick?: () => void;
+  className?: string;
+  /** "solid" is the accent button; "line" is ink on a hairline. */
+  variant?: "solid" | "line";
+  /** "lg" for the hero opener: a confident rectangle, never a pill. */
+  size?: "md" | "lg";
+  strength?: number;
+};
+
+export function MagneticButton({ children, href, onClick, className = "", variant = "solid", size = "md", strength = 0.3 }: Props) {
+  const ref = useRef<HTMLElement>(null);
+
+  useGSAP(
+    () => {
+      const el = ref.current;
+      if (!el) return;
+      const mm = gsap.matchMedia();
+      mm.add("(hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference)", () => {
+        const label = el.querySelector<HTMLElement>("[data-label]");
+        const x = gsap.quickTo(el, "x", { duration: 0.6, ease: "power3.out" });
+        const y = gsap.quickTo(el, "y", { duration: 0.6, ease: "power3.out" });
+        const lx = label ? gsap.quickTo(label, "x", { duration: 0.6, ease: "power3.out" }) : null;
+        const ly = label ? gsap.quickTo(label, "y", { duration: 0.6, ease: "power3.out" }) : null;
+        const move = (e: PointerEvent) => {
+          const r = el.getBoundingClientRect();
+          const dx = e.clientX - (r.left + r.width / 2);
+          const dy = e.clientY - (r.top + r.height / 2);
+          x(dx * strength);
+          y(dy * strength);
+          lx?.(dx * strength * 0.5);
+          ly?.(dy * strength * 0.5);
+        };
+        const leave = () => {
+          gsap.to(label ? [el, label] : el, { x: 0, y: 0, duration: 0.9, ease: "elastic.out(1, 0.4)" });
+        };
+        el.addEventListener("pointermove", move);
+        el.addEventListener("pointerleave", leave);
+        return () => {
+          el.removeEventListener("pointermove", move);
+          el.removeEventListener("pointerleave", leave);
+        };
+      });
+      return () => mm.revert();
+    },
+    { scope: ref },
+  );
+
+  const look =
+    variant === "solid"
+      ? "bg-accent text-accent-ink"
+      : "text-ink shadow-[inset_0_0_0_1px_var(--line)]";
+  // The hover fill is the ink on both variants; the label turns to the page surface over it.
+  const inner = (
+    <>
+      <span
+        aria-hidden
+        className="absolute inset-0 origin-bottom scale-y-0 bg-ink transition-transform duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:scale-y-100"
+      />
+      <span data-label="" className="relative inline-block transition-colors duration-500 group-hover:text-surface-0">
+        {children}
+      </span>
+    </>
+  );
+  const base = `group relative inline-flex items-center overflow-hidden ${size === "lg" ? "px-10 py-5 text-lead md:px-12 md:py-6" : "px-8 py-4 text-small"} font-medium ${look} ${className}`;
+
+  if (href) {
+    return (
+      <a ref={ref as React.RefObject<HTMLAnchorElement>} href={href} className={base}>
+        {inner}
+      </a>
+    );
+  }
+  return (
+    <button ref={ref as React.RefObject<HTMLButtonElement>} type="button" onClick={onClick} className={base}>
+      {inner}
+    </button>
+  );
+}

package/skills/struq/recipes/components/struq/MediaFrame.tsx

@@ -0,0 +1,96 @@
+"use client";
+// components/struq/MediaFrame.tsx (Struq recipe)
+// The only way an image goes on the page. It always holds a real image from lib/struq-images.ts
+// (written by scripts/images.mjs), so a frame can never ship empty.
+//
+// - reveal "scroll": the frame opens bottom-up like a curtain as it enters, the photo settles from 1.3x.
+// - reveal "load": the same curtain on mount, for the hero.
+// - parallax: the photo pans inside the frame while the frame scrolls past (scrubbed).
+//
+// <MediaFrame image={images.hero[0]} ratio="16/9" priority sizes="100vw" reveal="load" />
+// <MediaFrame image={images.card[2]} ratio="3/2" sizes="(min-width: 768px) 40vw, 100vw" />
+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;
+  /** CSS aspect ratio, for example "16/9", "3/2", "4/5", "1/1", "21/9". Defaults to the file's own. */
+  ratio?: string;
+  className?: string;
+  sizes?: string;
+  /** The page's one LCP image (the hero). Exactly one per page. */
+  priority?: boolean;
+  reveal?: "scroll" | "load" | "none";
+  parallax?: boolean;
+  /** Override the alt, for example a translation on a non-Dutch site. "" marks it decorative. */
+  alt?: string;
+};
+
+export function MediaFrame({
+  image,
+  ratio,
+  className = "",
+  sizes = "100vw",
+  priority = false,
+  reveal = "scroll",
+  parallax = true,
+  alt,
+}: Props) {
+  const frame = useRef<HTMLElement>(null);
+  const inner = useRef<HTMLDivElement>(null);
+
+  useGSAP(
+    () => {
+      const el = frame.current;
+      const photo = inner.current;
+      if (!el || !photo) return;
+      const mm = gsap.matchMedia();
+      mm.add("(prefers-reduced-motion: no-preference)", () => {
+        if (reveal !== "none") {
+          const trigger = reveal === "scroll" ? { trigger: el, start: "top 88%", once: true } : undefined;
+          gsap.fromTo(
+            el,
+            { clipPath: "inset(100% 0% 0% 0%)" },
+            { clipPath: "inset(0% 0% 0% 0%)", duration: 1.4, ease: "power4.inOut", delay: reveal === "load" ? 0.2 : 0, scrollTrigger: trigger },
+          );
+          gsap.fromTo(photo, { scale: 1.3 }, { scale: parallax ? 1.12 : 1, duration: 1.8, ease: "expo.out", delay: reveal === "load" ? 0.2 : 0, scrollTrigger: trigger });
+        }
+        if (parallax) {
+          gsap.fromTo(
+            photo,
+            { yPercent: -5 },
+            { yPercent: 5, ease: "none", scrollTrigger: { trigger: el, start: "top bottom", end: "bottom top", scrub: true } },
+          );
+        }
+      });
+      el.dataset.ready = "1";
+      return () => mm.revert();
+    },
+    { scope: frame },
+  );
+
+  return (
+    <figure
+      ref={frame}
+      data-frame={reveal === "none" ? "still" : "mask"}
+      className={`relative overflow-hidden bg-surface-2 ${className}`}
+      style={{ aspectRatio: ratio ?? `${image.width}/${image.height}` }}
+    >
+      <div ref={inner} className="absolute inset-0" style={{ scale: parallax ? "1.12" : undefined }}>
+        <Image
+          src={image.src}
+          alt={alt ?? image.alt}
+          fill
+          sizes={sizes}
+          // eager + high fetch priority works on every Next.js major ("priority" is deprecated in 16).
+          loading={priority ? "eager" : "lazy"}
+          fetchPriority={priority ? "high" : "auto"}
+          unoptimized={image.unoptimized}
+          className="object-cover"
+        />
+      </div>
+    </figure>
+  );
+}

package/skills/struq/recipes/components/struq/PinnedZoom.tsx

@@ -0,0 +1,79 @@
+"use client";
+// components/struq/PinnedZoom.tsx (Struq recipe): SHOWPIECE
+// The stage pins; a small framed photo opens to full bleed while the statement above it lifts
+// away and a closing line arrives over the photo. One scrubbed timeline, so it plays with the
+// scroll in both directions. Under reduced motion it is a still full-bleed photo with the text.
+//
+// <PinnedZoom
+//   image={images.band[0]}
+//   statement="Veertig plekken, één kaart."
+//   closing="Reserveer voor vanavond, of voor zaterdag."
+// />
+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;
+  statement: string;
+  closing?: string;
+  className?: string;
+};
+
+export function PinnedZoom({ image, statement, closing, 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("(prefers-reduced-motion: no-preference)", () => {
+        gsap.set(q("[data-zoom-frame]"), { clipPath: "inset(22% 30% 22% 30%)" });
+        gsap.set(q("[data-zoom-closing]"), { autoAlpha: 0, yPercent: 40 });
+        const tl = gsap.timeline({
+          defaults: { ease: "none" },
+          scrollTrigger: { trigger: el, start: "top top", end: "+=160%", pin: true, scrub: 1 },
+        });
+        tl.to(q("[data-zoom-frame]"), { clipPath: "inset(0% 0% 0% 0%)", duration: 1 }, 0)
+          .fromTo(q("[data-zoom-photo]"), { scale: 1.35 }, { scale: 1, duration: 1 }, 0)
+          .to(q("[data-zoom-statement]"), { yPercent: -60, autoAlpha: 0, duration: 0.45 }, 0)
+          .to(q("[data-zoom-closing]"), { yPercent: 0, autoAlpha: 1, duration: 0.35 }, 0.62);
+      });
+      // Still version: the photo is full bleed from the start, so the statement turns light.
+      mm.add("(prefers-reduced-motion: reduce)", () => {
+        gsap.set(q("[data-zoom-statement]"), { color: "var(--on-photo)" });
+      });
+      return () => mm.revert();
+    },
+    { scope: stage },
+  );
+
+  return (
+    <section ref={stage} className={`relative h-svh overflow-hidden bg-surface-0 ${className}`}>
+      <div data-zoom-frame="" className="absolute inset-0 overflow-hidden">
+        <div data-zoom-photo="" className="absolute inset-0">
+          <Image src={image.src} alt={image.alt} fill sizes="100vw" unoptimized={image.unoptimized} className="object-cover" />
+        </div>
+        {/* A flat black scrim, so the closing line reads on any photo, on light and dark palettes. */}
+        <div aria-hidden className="absolute inset-0 bg-black opacity-35" />
+      </div>
+      <p
+        data-zoom-statement=""
+        className="font-display text-h2 absolute inset-x-6 top-[9vh] mx-auto max-w-[22ch] text-center text-ink md:inset-x-[8vw]"
+      >
+        {statement}
+      </p>
+      {closing ? (
+        <p
+          data-zoom-closing=""
+          className="font-display text-h2 absolute inset-x-6 bottom-[12vh] max-w-[20ch] text-on-photo md:left-[8vw]"
+        >
+          {closing}
+        </p>
+      ) : null}
+    </section>
+  );
+}