@t7blocks/ui 0.0.6 → 0.0.7

package/dist/index.d.mts

@@ -18,6 +18,12 @@ interface DotlaunchbuttonProps {
 }
 declare function Dotlaunchbutton({ label, onClick, className, accentColor, btnColor, animationSpeed, }: DotlaunchbuttonProps): react_jsx_runtime.JSX.Element;
 
+interface ScrollimagePassProps {
+    passDuration?: number;
+    fontClassName?: string;
+}
+declare function ScrollimagePass({ passDuration, fontClassName }: ScrollimagePassProps): react_jsx_runtime.JSX.Element;
+
 declare const PopHero: () => react_jsx_runtime.JSX.Element;
 
-export { Button1, Dotlaunchbutton, PopHero };
+export { Button1, Dotlaunchbutton, PopHero, ScrollimagePass };

package/dist/index.d.ts

@@ -18,6 +18,12 @@ interface DotlaunchbuttonProps {
 }
 declare function Dotlaunchbutton({ label, onClick, className, accentColor, btnColor, animationSpeed, }: DotlaunchbuttonProps): react_jsx_runtime.JSX.Element;
 
+interface ScrollimagePassProps {
+    passDuration?: number;
+    fontClassName?: string;
+}
+declare function ScrollimagePass({ passDuration, fontClassName }: ScrollimagePassProps): react_jsx_runtime.JSX.Element;
+
 declare const PopHero: () => react_jsx_runtime.JSX.Element;
 
-export { Button1, Dotlaunchbutton, PopHero };
+export { Button1, Dotlaunchbutton, PopHero, ScrollimagePass };

package/dist/index.js

@@ -33,7 +33,8 @@ var index_exports = {};
 __export(index_exports, {
   Button1: () => Button1,
   Dotlaunchbutton: () => Dotlaunchbutton,
-  PopHero: () => PopHero
+  PopHero: () => PopHero,
+  ScrollimagePass: () => ScrollimagePass
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -194,9 +195,152 @@ function Dotlaunchbutton({
   );
 }
 
-// src/hero/PopHero/PopHero.tsx
+// src/components/scroll/ScrollimagePass/ScrollimagePass.tsx
 var import_react3 = require("react");
 var import_gsap = __toESM(require("gsap"));
+var import_ScrollTrigger = require("gsap/dist/ScrollTrigger");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+import_gsap.default.registerPlugin(import_ScrollTrigger.ScrollTrigger);
+var IMAGES = [
+  { url: "https://pub-30f77b34698b4af9acb780d4dfe7ee4d.r2.dev/good_one/good_assets/ferrari.png", x: "0%", y: "10%", size: "360px" },
+  { url: "https://pub-30f77b34698b4af9acb780d4dfe7ee4d.r2.dev/good_one/good_assets/art2.png", x: "35%", y: "25%", size: "360px" },
+  { url: "https://pub-30f77b34698b4af9acb780d4dfe7ee4d.r2.dev/good_one/good_assets/side_model.png", x: "-32%", y: "105%", size: "360px" },
+  { url: "https://pub-30f77b34698b4af9acb780d4dfe7ee4d.r2.dev/good_one/good_assets/model5.png", x: "18%", y: "-40%", size: "360px" },
+  { url: "https://pub-30f77b34698b4af9acb780d4dfe7ee4d.r2.dev/good_one/good_assets/model6.png", x: "-20%", y: "45%", size: "360px" },
+  { url: "https://pub-30f77b34698b4af9acb780d4dfe7ee4d.r2.dev/good_one/good_assets/wallart.png", x: "21%", y: "-15%", size: "360px" }
+];
+var STAGGER_TIME = 0.6;
+function ScrollimagePass({
+  passDuration = 2.5,
+  fontClassName = ""
+}) {
+  const sectionRef = (0, import_react3.useRef)(null);
+  const titleRef = (0, import_react3.useRef)(null);
+  const contentWrapperRef = (0, import_react3.useRef)(null);
+  const imageRefs = (0, import_react3.useRef)([]);
+  (0, import_react3.useEffect)(() => {
+    if (!sectionRef.current || !titleRef.current || !contentWrapperRef.current) return;
+    const tl = import_gsap.default.timeline({
+      scrollTrigger: {
+        trigger: sectionRef.current,
+        start: "top top",
+        end: "+=2500",
+        pin: true,
+        scrub: 1.2
+      }
+    });
+    import_gsap.default.set(titleRef.current, { opacity: 1, scale: 1, y: 0 });
+    imageRefs.current.forEach((img, index) => {
+      if (!img || index === IMAGES.length - 1) return;
+      tl.fromTo(
+        img,
+        { y: "120vh" },
+        { y: "-120vh", duration: passDuration, ease: "none" },
+        index * STAGGER_TIME
+      );
+    });
+    const lastIndex = IMAGES.length - 1;
+    const lastImg = imageRefs.current[lastIndex];
+    const lastStart = lastIndex * STAGGER_TIME;
+    if (lastImg) {
+      tl.fromTo(
+        lastImg,
+        { y: "120vh" },
+        { y: "0vh", duration: passDuration / 2, ease: "none" },
+        lastStart
+      );
+      tl.to(
+        contentWrapperRef.current,
+        { y: "-120vh", duration: passDuration / 2, ease: "none" },
+        "+=0"
+      );
+    }
+    tl.to(
+      titleRef.current,
+      { scale: 8 / 14, duration: tl.duration(), ease: "none" },
+      0
+    );
+    return () => {
+      import_ScrollTrigger.ScrollTrigger.getAll().forEach((t) => t.kill());
+    };
+  }, [passDuration]);
+  const handleMouseMove = (e, index) => {
+    const el = imageRefs.current[index];
+    if (!el) return;
+    const { left, top, width, height } = el.getBoundingClientRect();
+    const x = (e.clientX - left - width / 2) * 0.1;
+    const y = (e.clientY - top - height / 2) * 0.1;
+    import_gsap.default.to(el.querySelector("img"), { x, y, duration: 0.6, ease: "power2.out" });
+  };
+  const handleMouseLeave = (index) => {
+    const el = imageRefs.current[index];
+    if (!el) return;
+    import_gsap.default.to(el.querySelector("img"), { x: 0, y: 0, duration: 0.6, ease: "power2.out" });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative bg-white selection:bg-black selection:text-white", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "h-screen w-full flex flex-col items-center justify-center relative z-[60] bg-white overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "h1",
+      {
+        className: `text-[8vw] font-normal tracking-tighter text-black select-none leading-none text-center px-10 ${fontClassName}`,
+        children: "Scroll \u2022 Explore"
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: sectionRef, className: "relative h-screen w-full overflow-hidden bg-white", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { ref: contentWrapperRef, className: "absolute inset-0 w-full h-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative w-full h-full flex items-center justify-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "h2",
+          {
+            ref: titleRef,
+            className: `text-[14vw] font-normal tracking-tighter text-black select-none z-10 leading-none ${fontClassName}`,
+            children: "Works"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute inset-0 z-20 pointer-events-none w-full h-full", children: IMAGES.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "div",
+          {
+            ref: (el) => {
+              imageRefs.current[i] = el;
+            },
+            onMouseMove: (e) => handleMouseMove(e, i),
+            onMouseLeave: () => handleMouseLeave(i),
+            className: "absolute pointer-events-auto group cursor-pointer overflow-hidden rounded-sm z-30 transition-shadow duration-500 hover:shadow-2xl",
+            style: {
+              left: `calc(50% + ${item.x})`,
+              top: "0",
+              width: item.size,
+              height: "auto",
+              aspectRatio: "3/4",
+              transform: "translate(-50%, 0)"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "img",
+                {
+                  src: item.url,
+                  alt: `Work ${i + 1}`,
+                  className: "w-full h-full object-cover scale-[1.1]"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute inset-0 bg-black/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-white text-[9px] uppercase tracking-[0.4em] font-medium transform translate-y-2 group-hover:translate-y-0 transition-transform duration-500", children: "View" }) })
+            ]
+          },
+          i
+        )) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute top-full left-0 w-full h-full flex flex-col items-center justify-center bg-white", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "p",
+        {
+          className: `text-[8vw] font-normal tracking-tighter text-black/90 select-none leading-none text-center px-10 ${fontClassName}`,
+          children: "Animation End"
+        }
+      ) })
+    ] }) })
+  ] });
+}
+
+// src/hero/PopHero/PopHero.tsx
+var import_react4 = require("react");
+var import_gsap2 = __toESM(require("gsap"));
 
 // #style-inject:#style-inject
 function styleInject(css, { insertAt } = {}) {
@@ -224,21 +368,21 @@ function styleInject(css, { insertAt } = {}) {
 styleInject(':root {\n  --font-display: "Instrument Serif", serif;\n}\n::-webkit-scrollbar {\n  display: none;\n}\nhtml {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n.pop-hero-main {\n  font-family: var(--font-display), serif;\n}\n');
 
 // src/hero/PopHero/PopHero.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var PopHero = () => {
-  const containerRef = (0, import_react3.useRef)(null);
-  const imageWrapperRef = (0, import_react3.useRef)(null);
-  const navbarRef = (0, import_react3.useRef)(null);
-  const centerTextRef = (0, import_react3.useRef)(null);
-  (0, import_react3.useEffect)(() => {
+  const containerRef = (0, import_react4.useRef)(null);
+  const imageWrapperRef = (0, import_react4.useRef)(null);
+  const navbarRef = (0, import_react4.useRef)(null);
+  const centerTextRef = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
     if (!imageWrapperRef.current || !navbarRef.current || !centerTextRef.current) return;
-    const mm = import_gsap.default.matchMedia();
+    const mm = import_gsap2.default.matchMedia();
     mm.add({
       isMobile: "(max-width: 768px)",
       isDesktop: "(min-width: 769px)"
     }, (context) => {
       const { isMobile } = context.conditions;
-      import_gsap.default.set(imageWrapperRef.current, {
+      import_gsap2.default.set(imageWrapperRef.current, {
         y: "100vh",
         rotation: isMobile ? 8 : 15,
         scale: isMobile ? 0.7 : 0.5,
@@ -248,16 +392,16 @@ var PopHero = () => {
         borderRadius: isMobile ? "1.5rem" : "2rem",
         transformOrigin: "center center"
       });
-      import_gsap.default.set(centerTextRef.current, {
+      import_gsap2.default.set(centerTextRef.current, {
         opacity: 0,
         y: 20
       });
-      import_gsap.default.fromTo(
+      import_gsap2.default.fromTo(
         navbarRef.current,
         { opacity: 0, y: -20 },
         { opacity: 1, y: 0, duration: 1, delay: 0.5, ease: "power2.out" }
       );
-      const tl = import_gsap.default.timeline({
+      const tl = import_gsap2.default.timeline({
         defaults: { ease: "power2.out" }
       });
       tl.to(imageWrapperRef.current, {
@@ -282,34 +426,34 @@ var PopHero = () => {
     });
     return () => mm.revert();
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "main",
     {
       ref: containerRef,
       className: "pop-hero-main relative min-h-screen bg-black text-white overflow-hidden selection:bg-[#EBDCCB] selection:text-black",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
           "nav",
           {
             ref: navbarRef,
             className: "fixed top-0 left-0 w-full z-50 px-6 py-8 md:p-10 flex justify-between items-center pointer-events-auto",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "text-base md:text-2xl font-normal tracking-tighter uppercase opacity-90 drop-shadow-sm", children: "Waves.studios" }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex gap-4 md:gap-16 text-[10px] md:text-[11px] uppercase tracking-widest md:tracking-[0.4em] font-normal opacity-70", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href: "#", className: "hover:opacity-100 transition-opacity", children: "Work" }),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href: "#", className: "hover:opacity-100 transition-opacity", children: "About" }),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href: "#", className: "hover:opacity-100 transition-opacity", children: "Contact" })
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "text-base md:text-2xl font-normal tracking-tighter uppercase opacity-90 drop-shadow-sm", children: "Waves.studios" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex gap-4 md:gap-16 text-[10px] md:text-[11px] uppercase tracking-widest md:tracking-[0.4em] font-normal opacity-70", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("a", { href: "#", className: "hover:opacity-100 transition-opacity", children: "Work" }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("a", { href: "#", className: "hover:opacity-100 transition-opacity", children: "About" }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("a", { href: "#", className: "hover:opacity-100 transition-opacity", children: "Contact" })
               ] })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "relative h-screen w-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "relative h-screen w-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
           "div",
           {
             ref: imageWrapperRef,
             className: "relative overflow-hidden shadow-2xl z-10 will-change-transform",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "video",
                 {
                   src: "https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260228_065522_522e2295-ba22-457e-8fdb-fbcd68109c73.mp4",
@@ -320,21 +464,21 @@ var PopHero = () => {
                   className: "absolute inset-0 w-full h-full object-cover transition-all duration-1000"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "div",
                 {
                   ref: centerTextRef,
                   className: "absolute inset-0 flex flex-col items-center justify-center z-20 pointer-events-none px-6 -translate-y-6 md:-translate-y-12",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("h1", { className: "text-4xl md:text-[9rem] tracking-tight text-[#fdfcfb] drop-shadow-[0_10px_30px_rgba(0,0,0,0.5)] leading-[1.1] md:leading-[0.9] text-center", children: [
+                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("h1", { className: "text-4xl md:text-[9rem] tracking-tight text-[#fdfcfb] drop-shadow-[0_10px_30px_rgba(0,0,0,0.5)] leading-[1.1] md:leading-[0.9] text-center", children: [
                     "Nature's ",
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "italic block mt-0 md:mt-[-0.1em] opacity-90", children: "Quiet Pulse" })
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "italic block mt-0 md:mt-[-0.1em] opacity-90", children: "Quiet Pulse" })
                   ] })
                 }
               )
             ]
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute inset-0 pointer-events-none -z-10 text-white/5 flex items-center justify-center text-[20vw] font-bold opacity-10 blur-3xl", children: "WAVES" })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute inset-0 pointer-events-none -z-10 text-white/5 flex items-center justify-center text-[20vw] font-bold opacity-10 blur-3xl", children: "WAVES" })
       ]
     }
   );
@@ -343,6 +487,7 @@ var PopHero = () => {
 0 && (module.exports = {
   Button1,
   Dotlaunchbutton,
-  PopHero
+  PopHero,
+  ScrollimagePass
 });
 //# sourceMappingURL=index.js.map

package/dist/index.mjs

@@ -157,9 +157,152 @@ function Dotlaunchbutton({
   );
 }
 
-// src/hero/PopHero/PopHero.tsx
+// src/components/scroll/ScrollimagePass/ScrollimagePass.tsx
 import { useEffect as useEffect2, useRef as useRef3 } from "react";
 import gsap from "gsap";
+import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+gsap.registerPlugin(ScrollTrigger);
+var IMAGES = [
+  { url: "https://pub-30f77b34698b4af9acb780d4dfe7ee4d.r2.dev/good_one/good_assets/ferrari.png", x: "0%", y: "10%", size: "360px" },
+  { url: "https://pub-30f77b34698b4af9acb780d4dfe7ee4d.r2.dev/good_one/good_assets/art2.png", x: "35%", y: "25%", size: "360px" },
+  { url: "https://pub-30f77b34698b4af9acb780d4dfe7ee4d.r2.dev/good_one/good_assets/side_model.png", x: "-32%", y: "105%", size: "360px" },
+  { url: "https://pub-30f77b34698b4af9acb780d4dfe7ee4d.r2.dev/good_one/good_assets/model5.png", x: "18%", y: "-40%", size: "360px" },
+  { url: "https://pub-30f77b34698b4af9acb780d4dfe7ee4d.r2.dev/good_one/good_assets/model6.png", x: "-20%", y: "45%", size: "360px" },
+  { url: "https://pub-30f77b34698b4af9acb780d4dfe7ee4d.r2.dev/good_one/good_assets/wallart.png", x: "21%", y: "-15%", size: "360px" }
+];
+var STAGGER_TIME = 0.6;
+function ScrollimagePass({
+  passDuration = 2.5,
+  fontClassName = ""
+}) {
+  const sectionRef = useRef3(null);
+  const titleRef = useRef3(null);
+  const contentWrapperRef = useRef3(null);
+  const imageRefs = useRef3([]);
+  useEffect2(() => {
+    if (!sectionRef.current || !titleRef.current || !contentWrapperRef.current) return;
+    const tl = gsap.timeline({
+      scrollTrigger: {
+        trigger: sectionRef.current,
+        start: "top top",
+        end: "+=2500",
+        pin: true,
+        scrub: 1.2
+      }
+    });
+    gsap.set(titleRef.current, { opacity: 1, scale: 1, y: 0 });
+    imageRefs.current.forEach((img, index) => {
+      if (!img || index === IMAGES.length - 1) return;
+      tl.fromTo(
+        img,
+        { y: "120vh" },
+        { y: "-120vh", duration: passDuration, ease: "none" },
+        index * STAGGER_TIME
+      );
+    });
+    const lastIndex = IMAGES.length - 1;
+    const lastImg = imageRefs.current[lastIndex];
+    const lastStart = lastIndex * STAGGER_TIME;
+    if (lastImg) {
+      tl.fromTo(
+        lastImg,
+        { y: "120vh" },
+        { y: "0vh", duration: passDuration / 2, ease: "none" },
+        lastStart
+      );
+      tl.to(
+        contentWrapperRef.current,
+        { y: "-120vh", duration: passDuration / 2, ease: "none" },
+        "+=0"
+      );
+    }
+    tl.to(
+      titleRef.current,
+      { scale: 8 / 14, duration: tl.duration(), ease: "none" },
+      0
+    );
+    return () => {
+      ScrollTrigger.getAll().forEach((t) => t.kill());
+    };
+  }, [passDuration]);
+  const handleMouseMove = (e, index) => {
+    const el = imageRefs.current[index];
+    if (!el) return;
+    const { left, top, width, height } = el.getBoundingClientRect();
+    const x = (e.clientX - left - width / 2) * 0.1;
+    const y = (e.clientY - top - height / 2) * 0.1;
+    gsap.to(el.querySelector("img"), { x, y, duration: 0.6, ease: "power2.out" });
+  };
+  const handleMouseLeave = (index) => {
+    const el = imageRefs.current[index];
+    if (!el) return;
+    gsap.to(el.querySelector("img"), { x: 0, y: 0, duration: 0.6, ease: "power2.out" });
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: "relative bg-white selection:bg-black selection:text-white", children: [
+    /* @__PURE__ */ jsx3("div", { className: "h-screen w-full flex flex-col items-center justify-center relative z-[60] bg-white overflow-hidden", children: /* @__PURE__ */ jsx3(
+      "h1",
+      {
+        className: `text-[8vw] font-normal tracking-tighter text-black select-none leading-none text-center px-10 ${fontClassName}`,
+        children: "Scroll \u2022 Explore"
+      }
+    ) }),
+    /* @__PURE__ */ jsx3("div", { ref: sectionRef, className: "relative h-screen w-full overflow-hidden bg-white", children: /* @__PURE__ */ jsxs2("div", { ref: contentWrapperRef, className: "absolute inset-0 w-full h-full", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "relative w-full h-full flex items-center justify-center", children: [
+        /* @__PURE__ */ jsx3(
+          "h2",
+          {
+            ref: titleRef,
+            className: `text-[14vw] font-normal tracking-tighter text-black select-none z-10 leading-none ${fontClassName}`,
+            children: "Works"
+          }
+        ),
+        /* @__PURE__ */ jsx3("div", { className: "absolute inset-0 z-20 pointer-events-none w-full h-full", children: IMAGES.map((item, i) => /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            ref: (el) => {
+              imageRefs.current[i] = el;
+            },
+            onMouseMove: (e) => handleMouseMove(e, i),
+            onMouseLeave: () => handleMouseLeave(i),
+            className: "absolute pointer-events-auto group cursor-pointer overflow-hidden rounded-sm z-30 transition-shadow duration-500 hover:shadow-2xl",
+            style: {
+              left: `calc(50% + ${item.x})`,
+              top: "0",
+              width: item.size,
+              height: "auto",
+              aspectRatio: "3/4",
+              transform: "translate(-50%, 0)"
+            },
+            children: [
+              /* @__PURE__ */ jsx3(
+                "img",
+                {
+                  src: item.url,
+                  alt: `Work ${i + 1}`,
+                  className: "w-full h-full object-cover scale-[1.1]"
+                }
+              ),
+              /* @__PURE__ */ jsx3("div", { className: "absolute inset-0 bg-black/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex items-center justify-center", children: /* @__PURE__ */ jsx3("span", { className: "text-white text-[9px] uppercase tracking-[0.4em] font-medium transform translate-y-2 group-hover:translate-y-0 transition-transform duration-500", children: "View" }) })
+            ]
+          },
+          i
+        )) })
+      ] }),
+      /* @__PURE__ */ jsx3("div", { className: "absolute top-full left-0 w-full h-full flex flex-col items-center justify-center bg-white", children: /* @__PURE__ */ jsx3(
+        "p",
+        {
+          className: `text-[8vw] font-normal tracking-tighter text-black/90 select-none leading-none text-center px-10 ${fontClassName}`,
+          children: "Animation End"
+        }
+      ) })
+    ] }) })
+  ] });
+}
+
+// src/hero/PopHero/PopHero.tsx
+import { useEffect as useEffect3, useRef as useRef4 } from "react";
+import gsap2 from "gsap";
 
 // #style-inject:#style-inject
 function styleInject(css, { insertAt } = {}) {
@@ -187,21 +330,21 @@ function styleInject(css, { insertAt } = {}) {
 styleInject(':root {\n  --font-display: "Instrument Serif", serif;\n}\n::-webkit-scrollbar {\n  display: none;\n}\nhtml {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n.pop-hero-main {\n  font-family: var(--font-display), serif;\n}\n');
 
 // src/hero/PopHero/PopHero.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var PopHero = () => {
-  const containerRef = useRef3(null);
-  const imageWrapperRef = useRef3(null);
-  const navbarRef = useRef3(null);
-  const centerTextRef = useRef3(null);
-  useEffect2(() => {
+  const containerRef = useRef4(null);
+  const imageWrapperRef = useRef4(null);
+  const navbarRef = useRef4(null);
+  const centerTextRef = useRef4(null);
+  useEffect3(() => {
     if (!imageWrapperRef.current || !navbarRef.current || !centerTextRef.current) return;
-    const mm = gsap.matchMedia();
+    const mm = gsap2.matchMedia();
     mm.add({
       isMobile: "(max-width: 768px)",
       isDesktop: "(min-width: 769px)"
     }, (context) => {
       const { isMobile } = context.conditions;
-      gsap.set(imageWrapperRef.current, {
+      gsap2.set(imageWrapperRef.current, {
         y: "100vh",
         rotation: isMobile ? 8 : 15,
         scale: isMobile ? 0.7 : 0.5,
@@ -211,16 +354,16 @@ var PopHero = () => {
         borderRadius: isMobile ? "1.5rem" : "2rem",
         transformOrigin: "center center"
       });
-      gsap.set(centerTextRef.current, {
+      gsap2.set(centerTextRef.current, {
         opacity: 0,
         y: 20
       });
-      gsap.fromTo(
+      gsap2.fromTo(
         navbarRef.current,
         { opacity: 0, y: -20 },
         { opacity: 1, y: 0, duration: 1, delay: 0.5, ease: "power2.out" }
       );
-      const tl = gsap.timeline({
+      const tl = gsap2.timeline({
         defaults: { ease: "power2.out" }
       });
       tl.to(imageWrapperRef.current, {
@@ -245,34 +388,34 @@ var PopHero = () => {
     });
     return () => mm.revert();
   }, []);
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "main",
     {
       ref: containerRef,
       className: "pop-hero-main relative min-h-screen bg-black text-white overflow-hidden selection:bg-[#EBDCCB] selection:text-black",
       children: [
-        /* @__PURE__ */ jsxs2(
+        /* @__PURE__ */ jsxs3(
           "nav",
           {
             ref: navbarRef,
             className: "fixed top-0 left-0 w-full z-50 px-6 py-8 md:p-10 flex justify-between items-center pointer-events-auto",
             children: [
-              /* @__PURE__ */ jsx3("div", { className: "text-base md:text-2xl font-normal tracking-tighter uppercase opacity-90 drop-shadow-sm", children: "Waves.studios" }),
-              /* @__PURE__ */ jsxs2("div", { className: "flex gap-4 md:gap-16 text-[10px] md:text-[11px] uppercase tracking-widest md:tracking-[0.4em] font-normal opacity-70", children: [
-                /* @__PURE__ */ jsx3("a", { href: "#", className: "hover:opacity-100 transition-opacity", children: "Work" }),
-                /* @__PURE__ */ jsx3("a", { href: "#", className: "hover:opacity-100 transition-opacity", children: "About" }),
-                /* @__PURE__ */ jsx3("a", { href: "#", className: "hover:opacity-100 transition-opacity", children: "Contact" })
+              /* @__PURE__ */ jsx4("div", { className: "text-base md:text-2xl font-normal tracking-tighter uppercase opacity-90 drop-shadow-sm", children: "Waves.studios" }),
+              /* @__PURE__ */ jsxs3("div", { className: "flex gap-4 md:gap-16 text-[10px] md:text-[11px] uppercase tracking-widest md:tracking-[0.4em] font-normal opacity-70", children: [
+                /* @__PURE__ */ jsx4("a", { href: "#", className: "hover:opacity-100 transition-opacity", children: "Work" }),
+                /* @__PURE__ */ jsx4("a", { href: "#", className: "hover:opacity-100 transition-opacity", children: "About" }),
+                /* @__PURE__ */ jsx4("a", { href: "#", className: "hover:opacity-100 transition-opacity", children: "Contact" })
               ] })
             ]
           }
         ),
-        /* @__PURE__ */ jsx3("div", { className: "relative h-screen w-full flex items-center justify-center", children: /* @__PURE__ */ jsxs2(
+        /* @__PURE__ */ jsx4("div", { className: "relative h-screen w-full flex items-center justify-center", children: /* @__PURE__ */ jsxs3(
           "div",
           {
             ref: imageWrapperRef,
             className: "relative overflow-hidden shadow-2xl z-10 will-change-transform",
             children: [
-              /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsx4(
                 "video",
                 {
                   src: "https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260228_065522_522e2295-ba22-457e-8fdb-fbcd68109c73.mp4",
@@ -283,21 +426,21 @@ var PopHero = () => {
                   className: "absolute inset-0 w-full h-full object-cover transition-all duration-1000"
                 }
               ),
-              /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsx4(
                 "div",
                 {
                   ref: centerTextRef,
                   className: "absolute inset-0 flex flex-col items-center justify-center z-20 pointer-events-none px-6 -translate-y-6 md:-translate-y-12",
-                  children: /* @__PURE__ */ jsxs2("h1", { className: "text-4xl md:text-[9rem] tracking-tight text-[#fdfcfb] drop-shadow-[0_10px_30px_rgba(0,0,0,0.5)] leading-[1.1] md:leading-[0.9] text-center", children: [
+                  children: /* @__PURE__ */ jsxs3("h1", { className: "text-4xl md:text-[9rem] tracking-tight text-[#fdfcfb] drop-shadow-[0_10px_30px_rgba(0,0,0,0.5)] leading-[1.1] md:leading-[0.9] text-center", children: [
                     "Nature's ",
-                    /* @__PURE__ */ jsx3("span", { className: "italic block mt-0 md:mt-[-0.1em] opacity-90", children: "Quiet Pulse" })
+                    /* @__PURE__ */ jsx4("span", { className: "italic block mt-0 md:mt-[-0.1em] opacity-90", children: "Quiet Pulse" })
                   ] })
                 }
               )
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx3("div", { className: "absolute inset-0 pointer-events-none -z-10 text-white/5 flex items-center justify-center text-[20vw] font-bold opacity-10 blur-3xl", children: "WAVES" })
+        /* @__PURE__ */ jsx4("div", { className: "absolute inset-0 pointer-events-none -z-10 text-white/5 flex items-center justify-center text-[20vw] font-bold opacity-10 blur-3xl", children: "WAVES" })
       ]
     }
   );
@@ -305,6 +448,7 @@ var PopHero = () => {
 export {
   Button1,
   Dotlaunchbutton,
-  PopHero
+  PopHero,
+  ScrollimagePass
 };
 //# sourceMappingURL=index.mjs.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@t7blocks/ui",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -14,7 +14,8 @@
   },
   "peerDependencies": {
     "framer-motion": "^11.0.0 || ^12.0.0",
-    "react": "^18.0.0 || ^19.0.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "gsap": "^3.14.2"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.2.2",
@@ -24,6 +25,7 @@
     "gsap": "^3.14.2",
     "postcss": "^8.5.9",
     "tailwindcss": "^4.2.2",
+    "next": "16.2.2",
     "tsup": "^8.0.0",
     "typescript": "^5.0.0",
     "@t7blocks/typescript-config": "0.0.1"