@struq/skill 0.3.0 → 0.4.1

package/skills/struq/{recipes/components/struq → blocks/kit}/Cursor.tsx

@@ -11,7 +11,7 @@
 //
 // 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";
+import { gsap, useGSAP } from "./gsap";
 
 export function Cursor() {
   const root = useRef<HTMLDivElement>(null);

package/skills/struq/{recipes/components/struq → blocks/kit}/HeroCanvas.tsx

@@ -23,12 +23,12 @@
 //   <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.
+// A scene of your own: write it as
+// components/struq/kit/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 { gsap } from "./gsap";
+import type { StruqImage } from "./images";
 import type { CreateScene, Palette } from "./scenes/types";
 
 const SCENES: Record<string, () => Promise<{ createScene: CreateScene }>> = {

package/skills/struq/{recipes/components/struq → blocks/kit}/HorizontalGallery.tsx

@@ -11,8 +11,8 @@
 // />
 import Image from "next/image";
 import { useRef } from "react";
-import { gsap, useGSAP } from "@/lib/gsap";
-import type { StruqImage } from "@/lib/struq-images";
+import { gsap, useGSAP } from "./gsap";
+import type { StruqImage } from "./images";
 
 type Item = { image: StruqImage; title: string; text?: string };
 

package/skills/struq/{recipes/components/struq → blocks/kit}/MagneticButton.tsx

@@ -7,7 +7,7 @@
 //
 // <MagneticButton href="#reserveren">Reserveer een tafel</MagneticButton>
 import { useRef } from "react";
-import { gsap, useGSAP } from "@/lib/gsap";
+import { gsap, useGSAP } from "./gsap";
 
 type Props = {
   children: React.ReactNode;

package/skills/struq/{recipes/components/struq → blocks/kit}/MediaFrame.tsx

@@ -11,8 +11,8 @@
 // <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";
+import { gsap, useGSAP } from "./gsap";
+import type { StruqImage } from "./images";
 
 type Props = {
   image: StruqImage;

package/skills/struq/{recipes/components/struq → blocks/kit}/PinnedZoom.tsx

@@ -11,8 +11,8 @@
 // />
 import Image from "next/image";
 import { useRef } from "react";
-import { gsap, useGSAP } from "@/lib/gsap";
-import type { StruqImage } from "@/lib/struq-images";
+import { gsap, useGSAP } from "./gsap";
+import type { StruqImage } from "./images";
 
 type Props = {
   image: StruqImage;
@@ -31,16 +31,26 @@ export function PinnedZoom({ image, statement, closing, className = "" }: Props)
       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%)" });
+        // Two numbers drive the clip, never a tweened string: the browser shortens a symmetric inset to two
+        // values, GSAP pairs them with four end values, and two edges jump open in one frame.
+        const frame = q("[data-zoom-frame]")[0] as HTMLElement;
+        const clip = { y: 22, x: 30 };
+        const paint = () => {
+          frame.style.clipPath = `inset(${clip.y}% ${clip.x}% ${clip.y}% ${clip.x}%)`;
+        };
+        paint();
         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)
+        tl.to(clip, { y: 0, x: 0, duration: 1, onUpdate: paint }, 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);
+        return () => {
+          frame.style.clipPath = "";
+        };
       });
       // Still version: the photo is full bleed from the start, so the statement turns light.
       mm.add("(prefers-reduced-motion: reduce)", () => {

package/skills/struq/{recipes/components/struq → blocks/kit}/Reveal.tsx

@@ -11,7 +11,7 @@
 // Before hydration the children are hidden only when JavaScript runs (the `js` class from the
 // layout), and a CSS failsafe shows them after 3s if hydration never comes (globals.css).
 import { useRef } from "react";
-import { gsap, useGSAP } from "@/lib/gsap";
+import { gsap, useGSAP } from "./gsap";
 
 type Props = {
   children: React.ReactNode;

package/skills/struq/{recipes/components/struq → blocks/kit}/SmoothScroll.tsx

@@ -12,7 +12,7 @@
 import Lenis from "lenis";
 import "lenis/dist/lenis.css";
 import { useEffect } from "react";
-import { gsap, ScrollTrigger } from "@/lib/gsap";
+import { gsap, ScrollTrigger } from "./gsap";
 
 let current: Lenis | null = null;
 

package/skills/struq/{recipes/components/struq → blocks/kit}/SplitHeadline.tsx

@@ -9,7 +9,7 @@
 //
 // Pass plain text (or text with <em>): SplitText needs text nodes, not components.
 import { useRef } from "react";
-import { gsap, SplitText, useGSAP } from "@/lib/gsap";
+import { gsap, SplitText, useGSAP } from "./gsap";
 
 type Props = {
   children: React.ReactNode;