@struq/skill 0.2.2 → 0.4.0

package/skills/struq/blocks/kit/Cursor.tsx

@@ -0,0 +1,117 @@
+"use client";
+// components/struq/Cursor.tsx (Struq recipe)
+// A small dot that follows the pointer exactly and a ring that trails it, inverted against
+// whatever is under it (mix-blend difference), so it reads on light and dark sections alike.
+// The ring grows over links and buttons. Over anything marked data-cursor="Bekijk" (media, project
+// cards) it becomes a round label in the accent with that word: a round cursor label, never a pill.
+// Mounted once in the layout.
+// It stays hidden until a real pointer moves, and rests out of sight when the pointer rests.
+// Only on a fine pointer with motion allowed: touch screens and reduced motion keep the
+// native cursor and render nothing.
+//
+// Leave it out for a genre where a custom cursor fights the job (a booking flow, a dense shop).
+import { useRef } from "react";
+import { gsap, useGSAP } from "./gsap";
+
+export function Cursor() {
+  const root = useRef<HTMLDivElement>(null);
+
+  useGSAP(
+    () => {
+      const el = root.current;
+      if (!el) return;
+      const dot = el.querySelector<HTMLElement>("[data-dot]");
+      const ring = el.querySelector<HTMLElement>("[data-ring]");
+      const tag = el.querySelector<HTMLElement>("[data-tag]");
+      const tagText = el.querySelector<HTMLElement>("[data-tag-text]");
+      if (!dot || !ring || !tag || !tagText) return;
+      const mm = gsap.matchMedia();
+      mm.add("(hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference)", () => {
+        const html = document.documentElement;
+        const dx = gsap.quickTo(dot, "x", { duration: 0.08, ease: "power2.out" });
+        const dy = gsap.quickTo(dot, "y", { duration: 0.08, ease: "power2.out" });
+        const rx = gsap.quickTo(ring, "x", { duration: 0.5, ease: "power3.out" });
+        const ry = gsap.quickTo(ring, "y", { duration: 0.5, ease: "power3.out" });
+        const tx = gsap.quickTo(tag, "x", { duration: 0.45, ease: "power3.out" });
+        const ty = gsap.quickTo(tag, "y", { duration: 0.45, ease: "power3.out" });
+        gsap.set(tag, { scale: 0 });
+        let labelled = false;
+        // Hidden until a real hand moves the pointer: a first event, a parked pointer or a
+        // scripted jump never shows it. It appears after 24px of actual travel, and it fades out
+        // again when the pointer rests, so a still pointer never leaves a ring mid-screen.
+        let shown = false;
+        let travel = 0;
+        let last: { x: number; y: number } | null = null;
+        let rest: ReturnType<typeof setTimeout> | undefined;
+        const hide = () => {
+          shown = false;
+          travel = 0;
+          html.classList.remove("has-cursor");
+          gsap.to([dot, ring], { autoAlpha: 0, duration: 0.4 });
+          gsap.to(tag, { scale: 0, autoAlpha: 0, duration: 0.3 });
+        };
+        const move = (e: PointerEvent) => {
+          if (e.pointerType && e.pointerType !== "mouse") return;
+          if (last) travel += Math.hypot(e.clientX - last.x, e.clientY - last.y);
+          last = { x: e.clientX, y: e.clientY };
+          dx(e.clientX);
+          dy(e.clientY);
+          rx(e.clientX);
+          ry(e.clientY);
+          tx(e.clientX);
+          ty(e.clientY);
+          if (!shown && travel > 24) {
+            shown = true;
+            html.classList.add("has-cursor");
+            gsap.to([dot, ring], { autoAlpha: labelled ? 0 : 1, duration: 0.3 });
+            if (labelled) gsap.to(tag, { scale: 1, autoAlpha: 1, duration: 0.5, ease: "expo.out" });
+          }
+          clearTimeout(rest);
+          rest = setTimeout(hide, 2200);
+        };
+        const over = (e: PointerEvent) => {
+          const target = e.target as Element | null;
+          const media = target?.closest<HTMLElement>("[data-cursor]");
+          const word = media?.dataset.cursor?.trim();
+          labelled = Boolean(word);
+          if (word) tagText.textContent = word;
+          if (shown) {
+            gsap.to(tag, { scale: labelled ? 1 : 0, autoAlpha: labelled ? 1 : 0, duration: labelled ? 0.5 : 0.3, ease: labelled ? "expo.out" : "power2.in" });
+            gsap.to([dot, ring], { autoAlpha: labelled ? 0 : 1, duration: 0.25 });
+          }
+          const hit = target?.closest("a, button");
+          gsap.to(ring, { scale: hit && !labelled ? 1.8 : 1, duration: 0.4, ease: "power3.out" });
+        };
+        const out = () => {
+          clearTimeout(rest);
+          last = null;
+          hide();
+        };
+        window.addEventListener("pointermove", move, { passive: true });
+        window.addEventListener("pointerover", over, { passive: true });
+        document.addEventListener("pointerleave", out);
+        return () => {
+          clearTimeout(rest);
+          html.classList.remove("has-cursor");
+          window.removeEventListener("pointermove", move);
+          window.removeEventListener("pointerover", over);
+          document.removeEventListener("pointerleave", out);
+        };
+      });
+      return () => mm.revert();
+    },
+    { scope: root },
+  );
+
+  return (
+    <div ref={root} aria-hidden className="pointer-events-none fixed inset-0 z-[90]">
+      <div className="absolute inset-0 mix-blend-difference">
+        <div data-dot="" className="invisible absolute left-0 top-0 -ml-1 -mt-1 size-2 rounded-full bg-white opacity-0" />
+        <div data-ring="" className="invisible absolute left-0 top-0 -ml-5 -mt-5 size-10 rounded-full border border-white opacity-0" />
+      </div>
+      <div data-tag="" className="invisible absolute left-0 top-0 -ml-12 -mt-12 flex size-24 items-center justify-center rounded-full bg-accent text-small text-accent-ink opacity-0">
+        <span data-tag-text="">Bekijk</span>
+      </div>
+    </div>
+  );
+}

package/skills/struq/blocks/kit/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 "./gsap";
+import type { StruqImage } from "./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/blocks/kit/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 "./gsap";
+import type { StruqImage } from "./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/blocks/kit/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 "./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>
+  );
+}