@struq/skill 0.2.1 → 0.3.0

package/skills/struq/cinematic/showpieces/toonstuk-project-stack.tsx

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

package/skills/struq/cinematic/showpieces/toonstuk-scrub-connector.tsx

@@ -0,0 +1,78 @@
+"use client";
+// toonstuk-scrub-connector (Struq showpiece recipe)
+// Two words on either side of an empty ground and one bar of the accent between them. As you
+// scroll the stage pins and the bar rotates, stretches and travels: it swings up from under the
+// first word, crosses the screen on a steep diagonal, turns the other way, and lands as a level
+// line joining the two words. Each word carries one short line of copy under it.
+// Lead for an agency or a creative brand (or toonstuk-fill-rows instead).
+//
+// <ScrubConnector left="Kijken" right="Maken" leftText="Elk project begint met wat er al staat." rightText="Daarna tekenen we pas." />
+//
+// Reduced motion and phones: the composed still, the two words joined by the level bar.
+import { useRef } from "react";
+import { gsap, useGSAP } from "@/lib/gsap";
+
+type Props = {
+  left: string;
+  right: string;
+  leftText?: string;
+  rightText?: string;
+  className?: string;
+};
+
+export function ScrubConnector({ left, right, leftText, rightText, 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)", () => {
+        const bar = q("[data-bar]");
+        gsap.set(bar, { rotate: -62, scaleX: 0.18, xPercent: -95, yPercent: 900 });
+        gsap.set(q("[data-word-text]"), { autoAlpha: 0, y: 24 });
+        const tl = gsap.timeline({
+          defaults: { ease: "none" },
+          scrollTrigger: { trigger: el, start: "top top", end: "+=280%", pin: true, scrub: 1.2 },
+        });
+        tl.to(bar, { rotate: -38, scaleX: 0.9, xPercent: -10, yPercent: 0, duration: 1, ease: "power2.inOut" })
+          .to({}, { duration: 0.2 })
+          .to(bar, { rotate: 41, scaleX: 1.05, xPercent: 4, duration: 1, ease: "power2.inOut" })
+          .to({}, { duration: 0.2 })
+          .to(bar, { rotate: 0, scaleX: 1, xPercent: 0, yPercent: 0, duration: 1, ease: "power3.inOut" })
+          .to(q("[data-word-text]"), { autoAlpha: 1, y: 0, stagger: 0.15, duration: 0.4, ease: "expo.out" }, "-=0.4")
+          .to({}, { duration: 0.4 });
+      });
+      return () => mm.revert();
+    },
+    { scope: stage },
+  );
+
+  // One fluid size, no breakpoint ladder and no px: the words scale with clamp(), and the bar's
+  // thickness and its line-up with the words follow the same size, so they stay in step at any width.
+  const word = "font-display block text-[length:var(--connector-word)] leading-[0.9] tracking-[-0.03em]";
+  return (
+    <section
+      ref={stage}
+      data-showpiece="scrub-connector"
+      style={{ "--connector-word": "clamp(2.75rem, 1.2rem + 7vw, 9.5rem)" } as React.CSSProperties}
+      className={`relative flex items-center overflow-hidden bg-surface-0 px-6 py-24 md:h-svh md:px-[5vw] md:py-0 ${className}`}
+    >
+      <div className="relative grid w-full grid-cols-[auto_1fr_auto] items-start gap-4">
+        <div className="flex flex-col gap-4">
+          <span className={`${word} text-accent`}>{left}</span>
+          {leftText ? <p data-word-text="" className="max-w-[24ch] text-small text-ink-muted">{leftText}</p> : null}
+        </div>
+        <div className="relative mt-[calc(var(--connector-word)*0.42)] h-[calc(var(--connector-word)*0.16)] min-h-2">
+          <div data-bar="" aria-hidden className="absolute inset-0 origin-center bg-ink" />
+        </div>
+        <div className="flex flex-col items-end gap-4 text-right">
+          <span className={`${word} text-accent`}>{right}</span>
+          {rightText ? <p data-word-text="" className="max-w-[24ch] text-small text-ink-muted">{rightText}</p> : null}
+        </div>
+      </div>
+    </section>
+  );
+}

package/skills/struq/cinematic/showpieces/toonstuk-wordmark-finale.tsx

@@ -0,0 +1,105 @@
+"use client";
+// toonstuk-wordmark-finale (Struq showpiece recipe)
+// The footer as a finale: the brand name set edge to edge at the full width of the page, its
+// letters rising out of a mask as the footer arrives, with one closing line and a live local clock
+// (or just the line) above it. The name is measured and fitted to the width, so it never wraps or
+// falls short, whatever the face.
+// Every site can close with it; it pairs with any lead showpiece.
+//
+// <WordmarkFinale name="Zout" line="Tot vanavond." place="Amsterdam" timeZone="Europe/Amsterdam" />
+//
+// Reduced motion and phones: the name stands still at full width; the clock still ticks.
+import { useEffect, useRef, useState } from "react";
+import { gsap, SplitText, useGSAP } from "@/lib/gsap";
+
+type Props = {
+  name: string;
+  /** One closing line. */
+  line?: string;
+  /** With a time zone, a live local clock: "Amsterdam 21:42". */
+  place?: string;
+  timeZone?: string;
+  children?: React.ReactNode;
+  className?: string;
+};
+
+function useClock(timeZone?: string) {
+  const [now, setNow] = useState<string | null>(null);
+  useEffect(() => {
+    if (!timeZone) return;
+    const format = new Intl.DateTimeFormat("nl-NL", { hour: "2-digit", minute: "2-digit", second: "2-digit", timeZone });
+    const tick = () => setNow(format.format(new Date()));
+    tick();
+    const id = window.setInterval(tick, 1000);
+    return () => window.clearInterval(id);
+  }, [timeZone]);
+  return now;
+}
+
+export function WordmarkFinale({ name, line, place, timeZone, children, className = "" }: Props) {
+  const root = useRef<HTMLElement>(null);
+  const mark = useRef<HTMLParagraphElement>(null);
+  const now = useClock(timeZone);
+
+  // Fit the name to the full width: measure once at 100px, then scale.
+  useEffect(() => {
+    const el = mark.current;
+    const box = root.current;
+    if (!el || !box) return;
+    const fit = () => {
+      el.style.fontSize = "100px";
+      const width = el.scrollWidth || 1;
+      const style = getComputedStyle(box);
+      const avail = box.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
+      el.style.fontSize = `${Math.floor((100 * avail) / width)}px`;
+    };
+    fit();
+    document.fonts?.ready.then(fit);
+    const ro = new ResizeObserver(fit);
+    ro.observe(box);
+    return () => ro.disconnect();
+  }, [name]);
+
+  useGSAP(
+    () => {
+      const el = mark.current;
+      if (!el) return;
+      const mm = gsap.matchMedia();
+      mm.add("(min-width: 768px) and (prefers-reduced-motion: no-preference)", () => {
+        const split = SplitText.create(el, {
+          type: "chars",
+          mask: "chars",
+          onSplit(self) {
+            return gsap.from(self.chars, {
+              yPercent: 105,
+              duration: 1.4,
+              ease: "expo.out",
+              stagger: 0.05,
+              scrollTrigger: { trigger: el, start: "top 95%", once: true },
+            });
+          },
+        });
+        return () => split.revert();
+      });
+      return () => mm.revert();
+    },
+    { scope: root },
+  );
+
+  return (
+    <footer ref={root} data-showpiece="wordmark-finale" className={`overflow-hidden bg-surface-0 px-6 pb-6 pt-24 md:px-[3vw] ${className}`}>
+      <div className="flex flex-col gap-6 border-t border-line pt-6 md:flex-row md:items-end md:justify-between">
+        {line ? <p className="font-display text-h3 max-w-[24ch]">{line}</p> : <span />}
+        {children}
+        {place && timeZone ? (
+          <p className="text-small tabular-nums text-ink-muted">
+            {place} {now ?? ""}
+          </p>
+        ) : null}
+      </div>
+      <p ref={mark} data-wordmark="" aria-label={name} className="font-display mt-10 inline-block whitespace-nowrap leading-[0.8] tracking-[-0.04em]">
+        {name}
+      </p>
+    </footer>
+  );
+}

package/skills/struq/recipes/app/fonts.ts

@@ -0,0 +1,22 @@
+// app/fonts.ts (Struq recipe)
+// Exactly two faces: a display face and a text face. Swap these two imports for the pairing you
+// picked in SKILL.md ("Pick the two faces"); keep the variable names --face-display and --face-body,
+// globals.css maps them to font-display and font-body.
+// Default: S2, Fraunces (soft serif display) over Urbanist (round geometric text).
+import { Fraunces, Urbanist } from "next/font/google";
+
+export const display = Fraunces({
+  subsets: ["latin"],
+  axes: ["SOFT", "opsz"],
+  variable: "--face-display",
+  display: "swap",
+});
+
+export const body = Urbanist({
+  subsets: ["latin"],
+  variable: "--face-body",
+  display: "swap",
+});
+
+/** Every face's CSS variable, for the <html> className in app/layout.tsx. */
+export const fontVariables = [display, body].map((f) => f.variable).join(" ");

package/skills/struq/recipes/app/globals.css

@@ -0,0 +1,185 @@
+@import "tailwindcss";
+
+/* ==========================================================================
+   STRUQ TOKENS. Set the values from the palette you chose in SKILL.md.
+   Keep the names: every recipe and the hero canvas read them.
+   ========================================================================== */
+:root {
+  --surface-0: #f5efe6; /* the page */
+  --surface-1: #ede4d6; /* one step: panels, the showpiece ground */
+  --surface-2: #e1d4bf; /* two steps: image wells, hover grounds */
+  --surface-3: #cdbb9f; /* three steps: hairline accents, never text */
+  --ink: #1e1a15; /* headlines and body */
+  --ink-muted: #5d5446; /* secondary text, at least 4.5:1 on surface-0 */
+  --accent: #8a3b22; /* the one accent: the key CTA, one highlight per screen */
+  --accent-ink: #fbf6ee; /* text on the accent */
+  --line: rgb(30 26 21 / 0.12); /* hairlines: the ink at low alpha, never a grey hex */
+  --on-photo: #f7f3ec; /* type set over a photo or the ripple hero, on light and dark presets alike */
+  --inverse: #1e1a15; /* the contrast scene's ground: the palette's inverse role, else the ink */
+  --on-inverse: #f5efe6; /* type on it: else the page ground */
+  --field: #8a3b22; /* a full-strength colour field: the palette's field role, else the accent */
+  --on-field: #fbf6ee; /* type on it */
+  --display-weight: 300; /* light display: 300, or 400 for a face without a 300 */
+}
+
+@theme inline {
+  --color-surface-0: var(--surface-0);
+  --color-surface-1: var(--surface-1);
+  --color-surface-2: var(--surface-2);
+  --color-surface-3: var(--surface-3);
+  --color-ink: var(--ink);
+  --color-ink-muted: var(--ink-muted);
+  --color-accent: var(--accent);
+  --color-accent-ink: var(--accent-ink);
+  --color-line: var(--line);
+  --color-on-photo: var(--on-photo);
+  --color-inverse: var(--inverse);
+  --color-on-inverse: var(--on-inverse);
+  --color-field: var(--field);
+  --color-on-field: var(--on-field);
+  --font-display: var(--face-display), ui-serif, Georgia, serif;
+  --font-body: var(--face-body), ui-sans-serif, system-ui, sans-serif;
+  --font-accent: var(--face-accent, var(--face-display)), ui-serif, Georgia, serif;
+  --font-sans: var(--face-body), ui-sans-serif, system-ui, sans-serif;
+}
+
+@theme {
+  /* Type roles: write text-display, text-h2, text-h3, text-lead, text-body, text-small. Never text-xl or text-5xl. */
+  --text-display: clamp(2.875rem, 1.2rem + 6.86vw, 8rem);
+  --text-display--line-height: 0.95;
+  --text-display--letter-spacing: -0.025em;
+  --text-h2: clamp(2.25rem, 1.3rem + 3.4vw, 4.75rem);
+  --text-h2--line-height: 1.04;
+  --text-h2--letter-spacing: -0.015em;
+  --text-h3: clamp(1.375rem, 1.15rem + 0.8vw, 1.875rem);
+  --text-h3--line-height: 1.2;
+  --text-lead: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
+  --text-lead--line-height: 1.5;
+  --text-body: 1.0625rem;
+  --text-body--line-height: 1.65;
+  --text-small: 0.875rem;
+  --text-small--line-height: 1.5;
+  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
+}
+
+/* ==========================================================================
+   THE CONTRAST SCENE. Every site has one, at most two: wrap a section in scene-inverse (the
+   palette's dark ground with light type) or scene-field (a full-strength colour field). The tokens
+   are remapped inside, so every recipe in it turns with it.
+   ========================================================================== */
+.scene-inverse {
+  --surface-0: var(--inverse);
+  --surface-1: color-mix(in oklch, var(--inverse), var(--on-inverse) 6%);
+  --surface-2: color-mix(in oklch, var(--inverse), var(--on-inverse) 12%);
+  --surface-3: color-mix(in oklch, var(--inverse), var(--on-inverse) 22%);
+  --ink: var(--on-inverse);
+  --ink-muted: color-mix(in oklch, var(--on-inverse) 72%, var(--inverse));
+  --line: color-mix(in oklch, var(--on-inverse) 18%, transparent);
+  background-color: var(--surface-0);
+  color: var(--ink);
+}
+.scene-field {
+  --surface-0: var(--field);
+  --surface-1: color-mix(in oklch, var(--field), var(--on-field) 8%);
+  --surface-2: color-mix(in oklch, var(--field), var(--on-field) 14%);
+  --surface-3: color-mix(in oklch, var(--field), var(--on-field) 24%);
+  --ink: var(--on-field);
+  --ink-muted: color-mix(in oklch, var(--on-field) 78%, var(--field));
+  --line: color-mix(in oklch, var(--on-field) 22%, transparent);
+  --accent: var(--on-field);
+  --accent-ink: var(--field);
+  background-color: var(--surface-0);
+  color: var(--ink);
+}
+
+@layer base {
+  /* The hero opener's handover: the section after it slides up over the pinned opener. */
+  [data-showpiece="hero-opener"] + *,
+  .pin-spacer:has(> [data-showpiece="hero-opener"]) + * {
+    position: relative;
+    z-index: 2;
+    background-color: var(--surface-0);
+  }
+  /* The one scaling knob: 16px at 390, about 17.6px at 1440, 18px from about 1640. */
+  html {
+    font-size: clamp(1rem, 0.92rem + 0.2vw, 1.125rem);
+    background: var(--surface-0);
+    color: var(--ink);
+  }
+  body {
+    font-family: var(--font-body);
+    font-size: var(--text-body);
+    line-height: 1.65;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+  }
+  h1, h2, h3, .font-display {
+    font-family: var(--font-display);
+    font-weight: var(--display-weight);
+    text-wrap: balance;
+  }
+  p {
+    text-wrap: pretty;
+  }
+  ::selection {
+    background: var(--accent);
+    color: var(--accent-ink);
+  }
+  :focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 3px;
+  }
+}
+
+/* ==========================================================================
+   STRUQ MOTION GATE. Do not edit.
+   With JavaScript on (the `js` class the layout sets before paint) the animated elements start
+   hidden, so nothing flashes before its entrance. Each recipe marks itself data-ready the moment
+   it has set its own start state. If the scripts never run, the failsafe shows everything after
+   3s, so no region can stay empty.
+   ========================================================================== */
+.js [data-split]:not([data-ready]) {
+  visibility: hidden;
+  animation: struq-show 0s 3s forwards;
+}
+.js [data-reveal]:not([data-ready]) > * {
+  opacity: 0;
+  animation: struq-fade 0s 3s forwards;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .js [data-frame="mask"]:not([data-ready]) {
+    clip-path: inset(100% 0 0 0);
+    animation: struq-open 0s 3s forwards;
+  }
+  .js [data-zoom-frame] {
+    clip-path: inset(22% 30% 22% 30%);
+  }
+}
+/* The cinematic showpieces start in their first key frame, so nothing flashes before it. */
+@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
+  .js [data-showpiece="image-to-fullbleed"] [data-frame] {
+    clip-path: inset(31% 40% 31% 40%);
+  }
+  .js [data-showpiece="pixel-resolve"] canvas {
+    opacity: 1;
+    background: var(--surface-2);
+    animation: struq-unveil 0s 4s forwards;
+  }
+}
+@keyframes struq-unveil { to { opacity: 0; visibility: hidden; } }
+@keyframes struq-show { to { visibility: visible; } }
+@keyframes struq-fade { to { opacity: 1; } }
+@keyframes struq-open { to { clip-path: inset(0 0 0 0); } }
+
+/* SplitText masks: room for descenders (g, j, p, y) inside each line's clip. */
+.struq-line-mask {
+  padding-block: 0.06em 0.16em;
+  margin-block: -0.06em -0.16em;
+}
+
+/* The custom cursor hides the native one only while it is active. */
+html.has-cursor,
+html.has-cursor * {
+  cursor: none;
+}

package/skills/struq/recipes/app/layout.tsx

@@ -0,0 +1,28 @@
+// app/layout.tsx (Struq recipe)
+// Replace SITE_TITLE and SITE_DESCRIPTION, and set lang to the site's language.
+// The inline script adds the `js` class before first paint: the motion gate in globals.css keys
+// off it, so animated elements never flash before their entrance and stay visible without JS.
+import type { Metadata } from "next";
+import { Cursor } from "@/components/struq/Cursor";
+import { SmoothScroll } from "@/components/struq/SmoothScroll";
+import { fontVariables } from "./fonts";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "SITE_TITLE",
+  description: "SITE_DESCRIPTION",
+};
+
+export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html lang="nl" className={fontVariables} suppressHydrationWarning>
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: "document.documentElement.classList.add('js')" }} />
+      </head>
+      <body>
+        <SmoothScroll>{children}</SmoothScroll>
+        <Cursor />
+      </body>
+    </html>
+  );
+}

package/skills/struq/recipes/components/struq/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 "@/lib/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>
+  );
+}