@struq/skill 0.2.2 → 0.4.0

package/skills/struq/blocks/sections/sticky-chapters.tsx

@@ -0,0 +1,256 @@
+"use client";
+// sticky-chapters (Struq section recipe)
+// A process or a story told in chapters, with the camera holding still. One large photograph stands on
+// the left while the chapters scroll past on the right; it stays put with plain CSS (position sticky),
+// so nothing pins and nothing jumps. As a chapter climbs toward the middle of the screen its photograph
+// rises over the last from the bottom edge of the frame, out of a slight push-in, and the chapter comes
+// forward while the others step back. A hairline beside the frame fills as you read on, the only measure
+// of how far you are.
+//
+// The swaps are tied to the scroll, not fired by it: each chapter after the first owns one short stretch
+// of scroll (its top travelling from 70% to 45% of the screen) and its photograph's mask follows that
+// stretch, lightly smoothed. So the frame always matches the chapter you are reading, a fast flick scrubs
+// straight through, scrolling back simply lowers the photograph again, and the stretches never overlap,
+// so the frame never holds more than two photographs. The emphasis follows the same positions, so text
+// and photograph change together. Every photograph loads at the frame's size and is decoded before it
+// shows; every mask is written from plain numbers.
+//
+// <StickyChapters title="Van plek tot huis." chapters={[
+//   { title: "Eerst kijken.", text: "...", image: images.column[1] },
+//   ...
+// ]} />
+//
+// Without scripts and on phones: each chapter carries its photograph inline, above its text on phones
+// and beside it on desktop. Reduced motion: the sticky frame with hard cuts and no push-in.
+import Image from "next/image";
+import { useRef } from "react";
+import { gsap, useGSAP } from "../kit/gsap";
+import type { StruqImage } from "../kit/images";
+
+type Chapter = {
+  title: string;
+  /** Two or three sentences. */
+  text: string;
+  image: StruqImage;
+};
+
+type Props = {
+  /** An optional heading above the chapters. */
+  title?: string;
+  chapters: Chapter[];
+  className?: string;
+};
+
+/** Each chapter's stretch of scroll: from its top at this share of the screen to its top at that one. */
+const FROM = "top 70%";
+const TO = "top 45%";
+/** The smoothing on the scrub, in seconds: enough to feel like a camera, never enough to lag the text. */
+const SMOOTH = 0.4;
+/** A rising photograph settles out of this push-in. */
+const PUSH = 1.12;
+
+export function StickyChapters({ title, chapters, className = "" }: Props) {
+  const stage = useRef<HTMLElement>(null);
+
+  useGSAP(
+    () => {
+      const el = stage.current;
+      if (!el) return;
+      const frame = el.querySelector<HTMLElement>("[data-frame]");
+      const fill = el.querySelector<HTMLElement>("[data-fill]");
+      const list = el.querySelector<HTMLElement>("[data-chapters]");
+      const items = Array.from(el.querySelectorAll<HTMLElement>("[data-chapter]"));
+      const layers = Array.from(el.querySelectorAll<HTMLElement>("[data-layer]"));
+      const pics = layers.map((l) => l.querySelector<HTMLElement>("[data-pic]"));
+      const imgs = layers.map((l) => l.querySelector<HTMLImageElement>("img"));
+      if (!frame || !list || items.length === 0 || layers.length === 0) return;
+
+      const mm = gsap.matchMedia();
+      mm.add({ wide: "(min-width: 1024px)", reduce: "(prefers-reduced-motion: reduce)" }, (ctx) => {
+        const { wide, reduce } = ctx.conditions as { wide: boolean; reduce: boolean };
+        if (!wide) return;
+
+        // Every photograph loads now, at the frame's size. A layer stays hidden until its photograph is
+        // decoded, so an undecoded one can only ever show the photograph beneath it, never an empty frame.
+        imgs.forEach((img, i) => {
+          if (!img || i === 0) return;
+          layers[i].style.visibility = "hidden";
+          img.loading = "eager";
+          const loaded = img.complete
+            ? Promise.resolve()
+            : new Promise<void>((res) => {
+                img.addEventListener("load", () => res(), { once: true });
+                img.addEventListener("error", () => res(), { once: true });
+              });
+          loaded
+            .then(() => img.decode())
+            .catch(() => undefined)
+            .then(() => {
+              layers[i].style.visibility = "";
+            });
+        });
+        if (imgs[0]) imgs[0].loading = "eager";
+
+        // Each layer's progress (0 hidden below the frame's bottom edge, 1 whole), and the mask and push-in
+        // written from it. Layers stack in chapter order, so the newest is always on top.
+        const prog = layers.map((_, i) => ({ p: i === 0 ? 1 : 0 }));
+        const rise = gsap.parseEase("power2.inOut");
+        const settle = gsap.parseEase("power3.out");
+        const paint = (i: number) => {
+          const p = prog[i].p;
+          const shown = reduce ? (p >= 0.5 ? 1 : 0) : rise(p);
+          layers[i].style.clipPath = `inset(${((1 - shown) * 100).toFixed(2)}% 0% 0% 0%)`;
+          const pic = pics[i];
+          if (pic && !reduce && i > 0) {
+            const k = 1 + (PUSH - 1) * (1 - settle(p));
+            pic.style.transform = `translate3d(0, ${((1 - settle(p)) * 4).toFixed(2)}%, 0) scale(${k.toFixed(4)})`;
+          }
+        };
+
+        // The chapter in front is the last one whose photograph has risen past half way.
+        let active = -1;
+        const mark = () => {
+          let a = 0;
+          for (let i = 1; i < prog.length; i += 1) if (prog[i].p >= 0.5) a = i;
+          if (a === active) return;
+          active = a;
+          items.forEach((c, j) => {
+            if (j === a) delete c.dataset.back;
+            else c.dataset.back = "";
+          });
+        };
+
+        layers.forEach((l, i) => {
+          l.style.zIndex = String(i + 1);
+          paint(i);
+        });
+        mark();
+
+        const tweens = items.slice(1).map((item, k) => {
+          const i = k + 1;
+          return gsap.to(prog[i], {
+            p: 1,
+            ease: "none",
+            onUpdate: () => {
+              paint(i);
+              mark();
+            },
+            scrollTrigger: { trigger: item, start: FROM, end: TO, scrub: reduce ? true : SMOOTH },
+          });
+        });
+
+        // The hairline beside the frame fills from the first chapter to the last.
+        const line = fill
+          ? gsap.fromTo(
+              fill,
+              { scaleY: 0 },
+              {
+                scaleY: 1,
+                ease: "none",
+                scrollTrigger: { trigger: list, start: "top 52%", end: "bottom 52%", scrub: reduce ? true : SMOOTH },
+              },
+            )
+          : null;
+
+        return () => {
+          for (const t of tweens) {
+            t.scrollTrigger?.kill();
+            t.kill();
+          }
+          line?.scrollTrigger?.kill();
+          line?.kill();
+          items.forEach((c) => delete c.dataset.back);
+          for (const l of layers) {
+            l.style.clipPath = "";
+            l.style.zIndex = "";
+            l.style.visibility = "";
+          }
+          for (const p of pics) if (p) p.style.transform = "";
+          if (fill) fill.style.transform = "";
+        };
+      });
+      return () => mm.revert();
+    },
+    { scope: stage, dependencies: [chapters.length] },
+  );
+
+  // With scripts on desktop the sticky frame stands in the left column and the chapters lose their inline
+  // photographs; without scripts (or on phones) every chapter keeps its own. The pre-paint class is `js` in a
+  // client project and `sq-js` on struq.nl.
+  const withFrame = "hidden lg:[.js_&]:block lg:[.sq-js_&]:block";
+  const inlineOnly = "lg:[.js_&]:hidden lg:[.sq-js_&]:hidden";
+
+  return (
+    <section
+      ref={stage}
+      data-section="sticky-chapters"
+      aria-labelledby={title ? "sticky-chapters-title" : undefined}
+      className={`relative bg-surface-0 px-6 py-20 lg:px-[4vw] lg:py-[10svh] ${className}`}
+    >
+      {title ? (
+        <h2 id="sticky-chapters-title" className="font-display mb-12 max-w-[16ch] text-h2 text-ink lg:mb-[4svh]">
+          {title}
+        </h2>
+      ) : null}
+
+      <div className="lg:grid lg:grid-cols-[minmax(0,1.08fr)_minmax(0,1fr)] lg:gap-x-[6vw]">
+        {/* The frame: it holds still while the chapters move past it. */}
+        <div className={withFrame}>
+          <div className="sticky top-[10svh] flex h-[80svh] gap-[1.4vw]">
+            <div data-frame="" className="relative h-full flex-1 overflow-hidden rounded-[0.2rem] bg-surface-2">
+              {chapters.map((c, i) => (
+                <div
+                  key={c.title}
+                  data-layer=""
+                  className="absolute inset-0 overflow-hidden"
+                  style={{ clipPath: i === 0 ? "inset(0% 0% 0% 0%)" : "inset(100% 0% 0% 0%)" }}
+                >
+                  <div data-pic="" className="absolute inset-0">
+                    <Image
+                      src={c.image.src}
+                      alt={c.image.alt}
+                      fill
+                      loading="lazy"
+                      sizes="(min-width: 1024px) 48vw, 1px"
+                      unoptimized={c.image.unoptimized}
+                      className="object-cover"
+                    />
+                  </div>
+                </div>
+              ))}
+            </div>
+            {/* How far through the chapters: a hairline that fills, never a number. */}
+            <div aria-hidden className="relative h-full w-px bg-line">
+              <div data-fill="" className="absolute inset-0 origin-top scale-y-0 bg-ink" />
+            </div>
+          </div>
+        </div>
+
+        <ol data-chapters="" className="grid gap-16 lg:block">
+          {chapters.map((c) => (
+            <li
+              key={c.title}
+              data-chapter=""
+              className="group/item lg:grid lg:grid-cols-2 lg:items-center lg:gap-x-[4vw] lg:py-[8svh] lg:[.js_&]:flex lg:[.js_&]:min-h-[80svh] lg:[.js_&]:py-0 lg:[.sq-js_&]:flex lg:[.sq-js_&]:min-h-[80svh] lg:[.sq-js_&]:py-0"
+            >
+              <span className={`relative mb-6 block aspect-[4/5] w-full overflow-hidden rounded-[0.2rem] bg-surface-2 sm:aspect-[4/3] lg:mb-0 lg:aspect-[4/5] ${inlineOnly}`}>
+                <Image
+                  src={c.image.src}
+                  alt={c.image.alt}
+                  fill
+                  sizes="(min-width: 1024px) 44vw, 100vw"
+                  unoptimized={c.image.unoptimized}
+                  className="object-cover"
+                />
+              </span>
+              <div className="max-w-[30rem] transition-[opacity,translate] duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] group-data-[back]/item:-translate-x-[0.8vw] group-data-[back]/item:opacity-[0.24]">
+                <h3 className="font-display text-h2 text-ink">{c.title}</h3>
+                <p className="mt-5 text-lead text-ink-muted">{c.text}</p>
+              </div>
+            </li>
+          ))}
+        </ol>
+      </div>
+    </section>
+  );
+}

package/skills/struq/blocks/sections/velocity-type.tsx

@@ -0,0 +1,269 @@
+"use client";
+// velocity-type (Struq section recipe)
+// Two lines of display type on a moving belt. At rest they turn over slowly on their own, the first one way
+// and the second the other; as you scroll they travel with it and answer its speed: the faster you go, the
+// faster they run, the more they lean and the more they stretch; when you stop they settle back upright within about
+// 0.4 seconds. Between the phrases small photographs can sit in the line as their own frames at cap height,
+// travelling with the type; they are never masked into the letters.
+//
+// The travel is a running drift (following the way you last scrolled, gathering a flick) plus the scroll. The velocity is read on the GSAP ticker from the
+// scroll position itself (so it falls to zero when the page stops, unlike a velocity that only updates on
+// scroll events), clamped, and smoothed on a short time constant so it never jitters. One loop, transforms
+// only, nothing pinned. Each line repeats its copy enough times to fill the screen twice and wraps by
+// exactly one copy's width, measured after the fonts land and on every resize, so the loop has no seam.
+//
+// <VelocityType lines={[
+//   ["Huizen", images.card[0], "Interieurs", images.card[1], "Tuinen"],
+//   ["Licht eerst", images.column[0], "dan pas muren"],
+// ]} />
+//
+// A hidden plain copy of each line is read by screen readers; the belt is aria-hidden. Reduced motion and pages
+// without scripts: the lines stand still, set as composed type. Phones: the same travel with half the lean.
+import Image from "next/image";
+import { useRef } from "react";
+import { gsap, ScrollTrigger, useGSAP } from "../kit/gsap";
+import type { StruqImage } from "../kit/images";
+
+type Piece = string | StruqImage;
+
+type Props = {
+  /** Two lines (one works too): phrases, with photographs between them where wanted. */
+  lines: Piece[][];
+  className?: string;
+};
+
+/** Sideways travel per pixel scrolled: a normal pass carries two or three phrases by. */
+const RATE = 1.1;
+/** The belt turns over on its own at this speed (px/s), and runs faster by this share of the scroll speed.
+ * Both accumulate into the drift, so a fast flick carries the belt on and nothing ever slides back. */
+const DRIFT = 75;
+const BOOST = 0.25;
+/** Scroll speed (px/s) at which the lean and the stretch are full; anything faster is clamped. */
+const FAST = 600;
+/** The most the type leans (degrees) and stretches (share of its width), desktop and phone. */
+const LEAN = { wide: 12, narrow: 6 };
+const STRETCH = 0.06;
+/** The time constant of the smoothing (s): settled to under 5% within 0.4s of stopping. */
+const TAU = 0.12;
+/** Copies of each line: enough to cover the screen twice whatever the copy's length. */
+const COPIES = 4;
+
+const isImage = (p: Piece): p is StruqImage => typeof p !== "string";
+
+export function VelocityType({ lines, className = "" }: Props) {
+  const stage = useRef<HTMLElement>(null);
+
+  useGSAP(
+    () => {
+      const el = stage.current;
+      if (!el) return;
+      const belts = Array.from(el.querySelectorAll<HTMLElement>("[data-belt]"));
+      const lenses = belts.map((b) => b.parentElement);
+      if (belts.length === 0) return;
+
+      // Each inline frame stays unseen until its photograph is decoded, so an empty box never reaches the
+      // screen (the pre-paint gate hides it, and shows it after 3s whatever happens).
+      for (const frame of Array.from(
+        el.querySelectorAll<HTMLElement>("[data-inline]"),
+      )) {
+        const img = frame.querySelector("img");
+        if (!img) continue;
+        const loaded = img.complete
+          ? Promise.resolve()
+          : new Promise<void>((res) => {
+              img.addEventListener("load", () => res(), { once: true });
+              img.addEventListener("error", () => res(), { once: true });
+            });
+        loaded
+          .then(() => img.decode())
+          .catch(() => undefined)
+          .then(() => {
+            frame.style.visibility = "visible";
+          });
+      }
+
+      const mm = gsap.matchMedia();
+      mm.add(
+        {
+          motion: "(prefers-reduced-motion: no-preference)",
+          wide: "(min-width: 768px)",
+        },
+        (ctx) => {
+          const { motion, wide } = ctx.conditions as {
+            motion: boolean;
+            wide: boolean;
+          };
+          // The belt is held unseen until it stands where the loop puts it (see the gate on it below).
+          const release = () => {
+            for (const b of belts) b.style.visibility = "visible";
+          };
+          if (!motion) {
+            release();
+            return;
+          }
+          const lean = wide ? LEAN.wide : LEAN.narrow;
+
+          // One copy's width, the distance the belt wraps by. Measured after the fonts land and on resize.
+          const widths = belts.map(() => 1);
+          const measure = () => {
+            belts.forEach((b, i) => {
+              const first = b.querySelector<HTMLElement>("[data-copy]");
+              widths[i] = Math.max(1, first?.offsetWidth ?? 1);
+            });
+          };
+          measure();
+          document.fonts?.ready.then(measure);
+          const ro = new ResizeObserver(measure);
+          belts.forEach((b) => {
+            const first = b.querySelector<HTMLElement>("[data-copy]");
+            if (first) ro.observe(first);
+          });
+
+          // Only while the section is near the screen does the loop do any work.
+          let near = false;
+          const watch = ScrollTrigger.create({
+            trigger: el,
+            start: "top bottom+=200",
+            end: "bottom top-=200",
+            onToggle: (self) => {
+              near = self.isActive;
+            },
+          });
+          near = watch.isActive;
+
+          let lastY = window.scrollY;
+          let v = 0;
+          let drift = 0;
+          let sense = 1;
+          const tick = (_time: number, deltaMs: number) => {
+            const y = window.scrollY;
+            const dt = Math.max(0.001, Math.min(0.1, deltaMs / 1000));
+            const raw = gsap.utils.clamp(-FAST * 2, FAST * 2, (y - lastY) / dt);
+            lastY = y;
+            // Smoothed on a short time constant: no jitter, and back to zero soon after the page stops.
+            v += (raw - v) * (1 - Math.exp(-dt / TAU));
+            if (Math.abs(v) < 0.5) v = 0;
+            if (!near) return;
+            // The drift follows the way the reader last scrolled, as a velocity marquee does, and gathers the
+            // extra speed of a flick, so the belt keeps turning at rest and never runs back after a flick.
+            if (Math.abs(raw) > 1) sense = raw > 0 ? 1 : -1;
+            drift += sense * (DRIFT + Math.abs(v) * BOOST) * dt;
+            place(y);
+          };
+
+          // Where each belt stands for the current scroll and drift, with its lean and stretch.
+          const place = (y: number) => {
+            const top = el.getBoundingClientRect().top + y;
+            const travel = (y - top) * RATE + drift;
+            const k = gsap.utils.clamp(-1, 1, v / FAST);
+            belts.forEach((b, i) => {
+              const dir = i % 2 === 0 ? -1 : 1;
+              const w = widths[i];
+              // Wrapped by exactly one copy, so the loop never shows a seam.
+              const x = gsap.utils.wrap(-w, 0, dir * travel);
+              // The type leans back against the way it is dragged (its top lags), and stretches with the speed.
+              const skew = k * lean * dir;
+              const sx = 1 + Math.abs(k) * STRETCH;
+              b.style.transform = `translate3d(${x.toFixed(2)}px, 0, 0)`;
+              // The lean and the stretch sit on a screen-wide lens around the belt, pivoting on the screen's
+              // centre, so the stretch never slides the visible type sideways.
+              const lens = lenses[i];
+              if (lens)
+                lens.style.transform = `skewX(${skew.toFixed(3)}deg) scaleX(${sx.toFixed(4)})`;
+            });
+          };
+          gsap.ticker.add(tick);
+
+          // Released only once the display face has landed and the belt is measured and placed with it, so the
+          // first frame anyone sees is already the loop's own; never a jump from the resting layout, never a
+          // fallback face's widths. The pre-paint gate shows it after 3s whatever happens.
+          let live = true;
+          Promise.race([
+            document.fonts?.ready ?? Promise.resolve(),
+            new Promise((r) => setTimeout(r, 1500)),
+          ]).then(() => {
+            if (!live) return;
+            measure();
+            place(window.scrollY);
+            release();
+          });
+
+          return () => {
+            live = false;
+            gsap.ticker.remove(tick);
+            watch.kill();
+            ro.disconnect();
+            for (const b of belts) b.style.transform = "";
+            for (const l of lenses) if (l) l.style.transform = "";
+          };
+        },
+      );
+      return () => mm.revert();
+    },
+    { scope: stage, dependencies: [lines.length] },
+  );
+
+  return (
+    <section
+      ref={stage}
+      data-section="velocity-type"
+      className={`relative overflow-hidden bg-surface-0 py-[18vw] md:py-[20svh] ${className}`}
+    >
+      {lines.map((line, li) => (
+        // One readable copy per row, for screen readers only; every copy on the belt is decoration and hidden.
+        // The row clips sideways only, so descenders below the tight leading are never cut.
+        <p
+          key={li}
+          className={`[overflow-x:clip] ${li > 0 ? "mt-[1.4vw]" : ""} ${li % 2 === 1 ? "pl-[18vw] motion-safe:pl-0" : "pl-[4vw] motion-safe:pl-0"}`}
+        >
+          <span className="sr-only">
+            {line.filter((p): p is string => !isImage(p)).join(", ")}
+          </span>
+          <span data-lens="" className="block origin-center">
+            <span
+              data-belt=""
+              className="flex w-max motion-safe:[.js_&]:invisible motion-safe:[.sq-js_&]:invisible motion-safe:[.js_&]:animate-[struq-show_0s_3s_forwards] motion-safe:[.sq-js_&]:animate-[struq-show_0s_3s_forwards]"
+            >
+              {Array.from({ length: COPIES }, (_, c) => (
+                <span
+                  key={c}
+                  data-copy={c === 0 ? "" : undefined}
+                  aria-hidden
+                  className={`flex shrink-0 items-center whitespace-nowrap pr-[0.32em] font-display text-[22vw] leading-[0.92] tracking-[-0.04em] text-ink md:text-[15vw] ${
+                    li % 2 === 1
+                      ? "font-accent font-light italic tracking-[-0.03em]"
+                      : ""
+                  }`}
+                >
+                  {line.map((piece, pi) =>
+                    isImage(piece) ? (
+                      <span
+                        key={pi}
+                        data-inline=""
+                        className="relative mx-[0.32em] inline-block aspect-[4/3] h-[0.62em] shrink-0 overflow-hidden rounded-[0.06em] not-italic [.js_&]:invisible [.sq-js_&]:invisible [.js_&]:animate-[struq-show_0s_3s_forwards] [.sq-js_&]:animate-[struq-show_0s_3s_forwards]"
+                      >
+                        <Image
+                          src={piece.src}
+                          alt=""
+                          fill
+                          loading="eager"
+                          sizes="(min-width: 768px) 13vw, 18vw"
+                          unoptimized={piece.unoptimized}
+                          className="object-cover"
+                        />
+                      </span>
+                    ) : (
+                      <span key={pi} className="px-[0.12em]">
+                        {piece}
+                      </span>
+                    ),
+                  )}
+                </span>
+              ))}
+            </span>
+          </span>
+        </p>
+      ))}
+    </section>
+  );
+}

package/skills/struq/blocks/showpieces/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 "../kit/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>
+  );
+}