@t7blocks/ui 0.0.4 → 0.0.6

package/LICENSE.md

@@ -0,0 +1,77 @@
+MIT + Commons Clause License Condition v1.0
+
+Copyright (c) 2026 Ashirwad Singh (T7blocks)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, and distribute the Software **as part of
+an application, website, or product**, subject to the following conditions:
+
+
+
+## 1. Attribution Requirement
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+If you use these components in a **public-facing project**, you must include
+visible credit in at least one [Optional] of the following ways:
+
+- A "Built with T7blocks" notice in your site footer, README, or credits page
+- A link to [t7blocks.xyz](https://t7blocks.xyz) in your project documentation
+
+Removing, hiding, or obfuscating authorship information to avoid this
+requirement is a violation of this license.
+
+
+
+## 2. Commons Clause Restriction
+
+You may use this Software, including for any commercial purpose, **so long as
+you do not**:
+
+- Sell, sublicense, or redistribute the components themselves — whether alone,
+  in a bundle, as a port, or in any modified form — as a standalone product,
+  template kit, or component library
+- White-label, rename, or repackage the components and publish them as your
+  own original work, regardless of how much the source has been modified
+- Compile, minify, obfuscate, or transform the components into another format
+  for the purpose of redistribution or resale
+- Use the components as the core offering of a paid tool, SaaS product, or
+  AI training dataset where the components themselves are the primary value
+  being sold or distributed
+
+
+
+## 3. Permitted Uses
+
+For clarity, the following are explicitly permitted:
+
+- Using components in personal, client, or commercial websites and applications
+- Modifying components to fit your project's needs
+- Including components in open source projects that are not component libraries
+- Deploying projects that use these components for commercial purposes
+
+
+
+## 4. AI and Automated Systems
+
+You may not use the source code of these components, in whole or in part, to
+train, fine-tune, or build machine learning models, AI code generation tools,
+or automated component generation systems that are distributed or sold to
+third parties.
+
+
+## 5. No Warranty
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL ASHIRWAD SINGH
+BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+---
+
+For licensing inquiries: hello.t7labs@gmail.com

package/dist/index.d.mts

@@ -18,4 +18,6 @@ interface DotlaunchbuttonProps {
 }
 declare function Dotlaunchbutton({ label, onClick, className, accentColor, btnColor, animationSpeed, }: DotlaunchbuttonProps): react_jsx_runtime.JSX.Element;
 
-export { Button1, Dotlaunchbutton };
+declare const PopHero: () => react_jsx_runtime.JSX.Element;
+
+export { Button1, Dotlaunchbutton, PopHero };

package/dist/index.d.ts

@@ -18,4 +18,6 @@ interface DotlaunchbuttonProps {
 }
 declare function Dotlaunchbutton({ label, onClick, className, accentColor, btnColor, animationSpeed, }: DotlaunchbuttonProps): react_jsx_runtime.JSX.Element;
 
-export { Button1, Dotlaunchbutton };
+declare const PopHero: () => react_jsx_runtime.JSX.Element;
+
+export { Button1, Dotlaunchbutton, PopHero };

package/dist/index.js

@@ -1,7 +1,10 @@
+"use client";
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,13 +18,22 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
   Button1: () => Button1,
-  Dotlaunchbutton: () => Dotlaunchbutton
+  Dotlaunchbutton: () => Dotlaunchbutton,
+  PopHero: () => PopHero
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -181,9 +193,156 @@ function Dotlaunchbutton({
     }
   );
 }
+
+// src/hero/PopHero/PopHero.tsx
+var import_react3 = require("react");
+var import_gsap = __toESM(require("gsap"));
+
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// src/hero/PopHero/PopHero.css
+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 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)(() => {
+    if (!imageWrapperRef.current || !navbarRef.current || !centerTextRef.current) return;
+    const mm = import_gsap.default.matchMedia();
+    mm.add({
+      isMobile: "(max-width: 768px)",
+      isDesktop: "(min-width: 769px)"
+    }, (context) => {
+      const { isMobile } = context.conditions;
+      import_gsap.default.set(imageWrapperRef.current, {
+        y: "100vh",
+        rotation: isMobile ? 8 : 15,
+        scale: isMobile ? 0.7 : 0.5,
+        opacity: 0,
+        width: isMobile ? "85vw" : "60vw",
+        height: isMobile ? "65vh" : "75vh",
+        borderRadius: isMobile ? "1.5rem" : "2rem",
+        transformOrigin: "center center"
+      });
+      import_gsap.default.set(centerTextRef.current, {
+        opacity: 0,
+        y: 20
+      });
+      import_gsap.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({
+        defaults: { ease: "power2.out" }
+      });
+      tl.to(imageWrapperRef.current, {
+        y: "0%",
+        scale: isMobile ? 0.85 : 0.7,
+        opacity: 1,
+        duration: 1.2
+      }).to(imageWrapperRef.current, {
+        rotation: 0,
+        scale: 1,
+        width: "100vw",
+        height: "100vh",
+        borderRadius: "0px",
+        duration: 1.4,
+        ease: "expo.out"
+      }, "-=0.1").to(centerTextRef.current, {
+        opacity: 1,
+        y: 0,
+        duration: 1.5,
+        ease: "power3.out"
+      }, "-=0.5");
+    });
+    return () => mm.revert();
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.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)(
+          "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_runtime3.jsx)("div", { className: "relative h-screen w-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "div",
+          {
+            ref: imageWrapperRef,
+            className: "relative overflow-hidden shadow-2xl z-10 will-change-transform",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "video",
+                {
+                  src: "https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260228_065522_522e2295-ba22-457e-8fdb-fbcd68109c73.mp4",
+                  autoPlay: true,
+                  loop: true,
+                  muted: true,
+                  playsInline: true,
+                  className: "absolute inset-0 w-full h-full object-cover transition-all duration-1000"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.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: [
+                    "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_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" })
+      ]
+    }
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button1,
-  Dotlaunchbutton
+  Dotlaunchbutton,
+  PopHero
 });
 //# sourceMappingURL=index.js.map

package/dist/index.mjs

@@ -1,3 +1,5 @@
+"use client";
+
 // src/components/button/button-1/Button1.tsx
 import { motion } from "framer-motion";
 import { useRef } from "react";
@@ -154,8 +156,155 @@ function Dotlaunchbutton({
     }
   );
 }
+
+// src/hero/PopHero/PopHero.tsx
+import { useEffect as useEffect2, useRef as useRef3 } from "react";
+import gsap from "gsap";
+
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// src/hero/PopHero/PopHero.css
+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";
+var PopHero = () => {
+  const containerRef = useRef3(null);
+  const imageWrapperRef = useRef3(null);
+  const navbarRef = useRef3(null);
+  const centerTextRef = useRef3(null);
+  useEffect2(() => {
+    if (!imageWrapperRef.current || !navbarRef.current || !centerTextRef.current) return;
+    const mm = gsap.matchMedia();
+    mm.add({
+      isMobile: "(max-width: 768px)",
+      isDesktop: "(min-width: 769px)"
+    }, (context) => {
+      const { isMobile } = context.conditions;
+      gsap.set(imageWrapperRef.current, {
+        y: "100vh",
+        rotation: isMobile ? 8 : 15,
+        scale: isMobile ? 0.7 : 0.5,
+        opacity: 0,
+        width: isMobile ? "85vw" : "60vw",
+        height: isMobile ? "65vh" : "75vh",
+        borderRadius: isMobile ? "1.5rem" : "2rem",
+        transformOrigin: "center center"
+      });
+      gsap.set(centerTextRef.current, {
+        opacity: 0,
+        y: 20
+      });
+      gsap.fromTo(
+        navbarRef.current,
+        { opacity: 0, y: -20 },
+        { opacity: 1, y: 0, duration: 1, delay: 0.5, ease: "power2.out" }
+      );
+      const tl = gsap.timeline({
+        defaults: { ease: "power2.out" }
+      });
+      tl.to(imageWrapperRef.current, {
+        y: "0%",
+        scale: isMobile ? 0.85 : 0.7,
+        opacity: 1,
+        duration: 1.2
+      }).to(imageWrapperRef.current, {
+        rotation: 0,
+        scale: 1,
+        width: "100vw",
+        height: "100vh",
+        borderRadius: "0px",
+        duration: 1.4,
+        ease: "expo.out"
+      }, "-=0.1").to(centerTextRef.current, {
+        opacity: 1,
+        y: 0,
+        duration: 1.5,
+        ease: "power3.out"
+      }, "-=0.5");
+    });
+    return () => mm.revert();
+  }, []);
+  return /* @__PURE__ */ jsxs2(
+    "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(
+          "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__ */ jsx3("div", { className: "relative h-screen w-full flex items-center justify-center", children: /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            ref: imageWrapperRef,
+            className: "relative overflow-hidden shadow-2xl z-10 will-change-transform",
+            children: [
+              /* @__PURE__ */ jsx3(
+                "video",
+                {
+                  src: "https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260228_065522_522e2295-ba22-457e-8fdb-fbcd68109c73.mp4",
+                  autoPlay: true,
+                  loop: true,
+                  muted: true,
+                  playsInline: true,
+                  className: "absolute inset-0 w-full h-full object-cover transition-all duration-1000"
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                "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: [
+                    "Nature's ",
+                    /* @__PURE__ */ jsx3("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" })
+      ]
+    }
+  );
+};
 export {
   Button1,
-  Dotlaunchbutton
+  Dotlaunchbutton,
+  PopHero
 };
 //# sourceMappingURL=index.mjs.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@t7blocks/ui",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -9,17 +9,19 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
-    }
+    },
+    "./dist/index.css": "./dist/index.css"
   },
   "peerDependencies": {
-    "framer-motion": "^11.0.0",
-    "react": "^18.0.0"
+    "framer-motion": "^11.0.0 || ^12.0.0",
+    "react": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.2.2",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^19.2.3",
+    "@types/react": "^18.0.0 || ^19.0.0",
+    "@types/react-dom": "^18.0.0 || ^19.0.0",
     "framer-motion": "^12.38.0",
+    "gsap": "^3.14.2",
     "postcss": "^8.5.9",
     "tailwindcss": "^4.2.2",
     "tsup": "^8.0.0",