tweenlabs 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 TweenLabs
+
+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, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS 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.

package/README.md

@@ -0,0 +1,168 @@
+<!-- SEO Meta Block — paste this in your Next.js layout.tsx or head -->
+<!--
+title: TweenLabs — Premium Open Source GSAP Component Library for Next.js
+description: A free, open-source GSAP animation component library and UI template sandbox built with Next.js 16, React 19, and Lenis. Learn and build modern web animations with reusable, copy-paste ready components.
+keywords: TweenLabs, GSAP component library, GSAP Next.js, GSAP animations React, open source animation library, web animation components, Lenis smooth scroll, GSAP ScrollTrigger components, Next.js animation library
+-->
+
+# <img src="public/logo.svg" alt="TweenLabs Logo" width="40" height="40" align="center" /> TweenLabs
+
+
+> The open-source **GSAP animation component library** for Next.js developers — learn, copy, and contribute modern web animation patterns built with **GSAP 3.15**, **Next.js 16**, and **Lenis**.
+
+**[Live Demo](https://tweenlabs.xyz)** • **[Contributing Guide](#contributing)** • **[Roadmap](#roadmap)**  
+
+![Next.js](https://img.shields.io/badge/Next.js-16-black?style=flat-square)
+![GSAP](https://img.shields.io/badge/GSAP-3.15-88CE02?style=flat-square)
+![React](https://img.shields.io/badge/React-19-61DAFB?style=flat-square)
+![License](https://img.shields.io/badge/license-MIT-blue?style=flat-square)
+
+<!-- [Contributors](https://img.shields.io/github/contributors/TweenLabs/TweenLabs?style=flat-square) -->
+
+---
+
+## What is TweenLabs?
+
+**TweenLabs** is a community-driven, open-source collection of reusable GSAP animation components for Next.js and React. Every component is production-ready, well-documented, and built to help developers understand *how* advanced web animations work — not just copy code blindly.
+
+No paid plugins. No locked content. Just clean, modern animation patterns anyone can learn from and build on.
+
+> 🔍 **Looking for a GSAP component library for Next.js?** You found it.
+
+---
+
+## ✨ Animation Components
+
+| Component | Description | GSAP Features Used |
+|-----------|-------------|-------------------|
+| **Gravity Drop** | Physics-based falling animations with realistic bounce | `gsap.to`, `ease`, stagger |
+| **Scroll-Triggered Assemblies** | Content reveals synced with scroll position | ScrollTrigger |
+| **Border Reveal Effects** | Inward/outward border animations | Timeline, `clipPath` |
+| **Horizontal Card Showcase** | Smooth carousel and card transitions | ScrollTrigger, `x` transforms |
+| **Page Transitions** | Seamless route change animations | Timeline, Next.js router |
+| **Smooth Scrolling** | Native-feel smooth scroll | Lenis + GSAP ticker |
+
+> More components added with every contribution. [See full list →](https://tweenlabs.xyz)
+
+---
+
+## 🛠 Tech Stack
+
+- **[Next.js 16](https://nextjs.org/)** – React framework with SSR and App Router
+- **[GSAP 3.15](https://gsap.com/)** – Industry-standard JavaScript animation library
+- **[React 19](https://react.dev/)** – Modern component-based UI
+- **[Lenis 1.3](https://github.com/darkroom-digital/lenis)** – Buttery smooth scroll
+- **[Tailwind CSS 4](https://tailwindcss.com/)** – Utility-first styling
+- **[TypeScript](https://www.typescriptlang.org/)** – Full type safety
+
+---
+
+## 🚀 Quick Start
+
+```bash
+# Install pnpm if you don't have it
+npm install -g pnpm
+
+# Clone and run
+git clone https://github.com/TweenLabs/TweenLabs.git
+cd TweenLabs
+pnpm install
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) — pick any animation card and start exploring.
+
+---
+
+## 🤝 Contributing
+
+TweenLabs grows with the community. We welcome new components, bug fixes, docs, performance improvements, and accessibility enhancements.
+
+### Steps
+
+```bash
+# 1. Fork the repo, then clone your fork
+git clone https://github.com/YOUR_USERNAME/TweenLabs.git
+
+# 2. Create a branch
+git checkout -b feat/your-animation-name
+
+# 3. Install & run
+pnpm install && pnpm dev
+
+# 4. Make changes, then commit
+git commit -m "feat: add [animation name]"
+
+# 5. Push and open a PR
+git push origin feat/your-animation-name
+```
+
+### Adding a New Component
+
+- Follow the folder pattern: `src/app/XX-component-name/`
+- Include a `page.tsx` with your animation
+- Add inline comments explaining the GSAP logic
+- Reference `gsapskills.md` for best practices
+
+### Good First Contributions
+
+- ✅ Add explanatory comments to existing animations
+- ✅ Test on mobile/tablet and report issues
+- ✅ Create animation variants with different easing curves
+- ✅ Improve accessibility (`prefers-reduced-motion`, ARIA)
+- ✅ Write or improve docs
+
+### Code Guidelines
+
+- Use CSS transforms (`x`, `y`, `scale`) — never layout properties
+- Always respect `prefers-reduced-motion`
+- TypeScript only — no `any` types
+- Write descriptive commit messages
+
+---
+
+## 🗺 Roadmap
+
+- [ ] Export as npm package (`@tweenlabs/components`)
+- [ ] Storybook integration for isolated component previews
+- [ ] Unit tests for animation logic
+- [ ] FLIP, Draggable, MorphSVG animation patterns
+- [ ] Community showcase gallery
+- [ ] Animation starter templates for common use cases
+
+---
+
+## 📚 Learn More
+
+New to GSAP? These resources pair perfectly with this repo:
+
+- [GSAP Official Docs](https://gsap.com/docs/) — start here
+- [GSAP + React Guide](https://gsap.com/resources/React/) — useGSAP hook
+- [ScrollTrigger Docs](https://gsap.com/docs/v3/Plugins/ScrollTrigger/) — scroll animations
+- [Next.js Docs](https://nextjs.org/docs) — framework reference
+- [Lenis Docs](https://lenis.studiofreight.com/) — smooth scroll setup
+
+---
+
+## 📜 License
+
+[MIT](LICENSE) — free to use in personal and commercial projects.
+
+---
+
+## 🌟 Contributors
+
+Thanks to everyone building this together. ❤️
+
+<!-- Add contributor grid here once you have 5+ contributors -->
+
+---
+
+**Built in public. Animated with love. Open to all. 🚀**
+
+<!-- 
+SEARCH TAGS (do not remove — improves GitHub discoverability):
+tweenlabs, gsap animation library, gsap component library, gsap nextjs, gsap react components,
+open source animation, web animation components, lenis smooth scroll, scrolltrigger examples,
+next.js animation, gsap copy paste components, gsap learning, gsap playground
+-->

package/bin/cli.js

@@ -0,0 +1,226 @@
+#!/usr/bin/env node
+
+const fs = require("fs");
+const path = require("path");
+const { execSync } = require("child_process");
+const https = require("https");
+const readline = require("readline");
+
+// Simple Terminal Colors
+const colors = {
+  reset: "\x1b[0m",
+  bold: "\x1b[1m",
+  green: "\x1b[32m",
+  cyan: "\x1b[36m",
+  yellow: "\x1b[33m",
+  red: "\x1b[31m",
+  gray: "\x1b[90m",
+};
+
+// Help text
+const helpText = `
+${colors.bold}${colors.cyan}TweenLabs CLI${colors.reset} - Install premium GSAP components directly into your codebase.
+
+${colors.bold}Usage:${colors.reset}
+  npx tweenlabs list                  List all available components
+  npx tweenlabs add <component-slug>  Install a specific component
+  npx tweenlabs add all               Install all components
+
+${colors.bold}Examples:${colors.reset}
+  npx tweenlabs list
+  npx tweenlabs add 11-magnetic-dock
+  npx tweenlabs add magnetic-dock
+  npx tweenlabs add all
+
+${colors.bold}Options:${colors.reset}
+  --help, -h     Show this help message
+  --version, -v  Show version
+`;
+
+// Helper to make GET requests without external dependencies
+function fetchJson(url) {
+  return new Promise((resolve, reject) => {
+    const client = url.startsWith("https") ? https : require("http");
+    client.get(url, {
+      headers: { "User-Agent": "tweenlabs-cli" }
+    }, (res) => {
+      if (res.statusCode !== 200) {
+        reject(new Error(`Server returned status code ${res.statusCode}`));
+        return;
+      }
+      let data = "";
+      res.on("data", (chunk) => { data += chunk; });
+      res.on("end", () => {
+        try {
+          resolve(JSON.parse(data));
+        } catch (err) {
+          reject(err);
+        }
+      });
+    }).on("error", reject);
+  });
+}
+
+// Helper for interactive user input
+function askQuestion(query) {
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  });
+  return new Promise((resolve) =>
+    rl.question(query, (ans) => {
+      rl.close();
+      resolve(ans.trim());
+    })
+  );
+}
+
+// Detect client's package manager
+function detectPackageManager() {
+  if (fs.existsSync(path.join(process.cwd(), "pnpm-lock.yaml"))) return "pnpm";
+  if (fs.existsSync(path.join(process.cwd(), "yarn.lock"))) return "yarn";
+  if (fs.existsSync(path.join(process.cwd(), "bun.lockb"))) return "bun";
+  return "npm";
+}
+
+async function main() {
+  const args = process.argv.slice(2);
+
+  if (args.length === 0 || args.includes("--help") || args.includes("-h")) {
+    console.log(helpText);
+    process.exit(0);
+  }
+
+  if (args.includes("--version") || args.includes("-v")) {
+    console.log("1.0.0");
+    process.exit(0);
+  }
+
+  if (args[0] === "list") {
+    console.log(`\n${colors.cyan}🔍 Fetching available components list...${colors.reset}`);
+    const domain = process.env.TWEENLABS_REGISTRY_URL || "https://tweenlabs.xyz";
+    const url = `${domain}/api/registry/list`;
+    try {
+      const data = await fetchJson(url);
+      console.log(`\n${colors.bold}${colors.green}Available TweenLabs Components:${colors.reset}\n`);
+      for (const comp of data.components) {
+        console.log(`  ${colors.bold}${colors.cyan}* ${comp.name}${colors.reset}`);
+        console.log(`    Slug:       ${comp.slug} (or ${comp.cleanSlug})`);
+        console.log(`    Desc:       ${comp.description}\n`);
+      }
+      process.exit(0);
+    } catch (err) {
+      console.error(`\n${colors.red}❌ Failed to fetch components list.${colors.reset}`);
+      console.error(colors.gray + `Details: ${err.message}` + colors.reset);
+      process.exit(1);
+    }
+  }
+
+  if (args[0] !== "add") {
+    console.log(`${colors.red}Error: Unknown command "${args[0]}". Did you mean "add" or "list"?${colors.reset}`);
+    console.log(helpText);
+    process.exit(1);
+  }
+
+  const componentSlug = args[1];
+  if (!componentSlug) {
+    console.log(`${colors.red}Error: Please specify a component slug to add.${colors.reset}`);
+    console.log(colors.gray + "Example: npx tweenlabs add 11-magnetic-dock" + colors.reset);
+    process.exit(1);
+  }
+
+  console.log(`\n${colors.cyan}🔍 Fetching ${colors.bold}${componentSlug}${colors.reset}${colors.cyan} registry data...${colors.reset}`);
+
+  // Determine registry domain (allow local testing via env variable)
+  const domain = process.env.TWEENLABS_REGISTRY_URL || "https://tweenlabs.xyz";
+  const url = `${domain}/api/registry/${componentSlug}`;
+
+  let componentData;
+  try {
+    componentData = await fetchJson(url);
+  } catch (err) {
+    console.error(`\n${colors.red}❌ Failed to fetch component. Make sure the slug is correct and the server is running.${colors.reset}`);
+    console.error(colors.gray + `Details: ${err.message}` + colors.reset);
+    process.exit(1);
+  }
+
+  console.log(`${colors.green}✓ Component found: ${colors.bold}${componentData.className}${colors.reset}`);
+
+  // Resolve target directory
+  let targetDir = path.join(process.cwd(), "src", "components");
+  if (!fs.existsSync(path.join(process.cwd(), "src"))) {
+    targetDir = path.join(process.cwd(), "components");
+  }
+
+  const userPathAnswer = await askQuestion(
+    `📁 Where should the component be installed? ${colors.gray}(default: ${targetDir})${colors.reset}: `
+  );
+  if (userPathAnswer) {
+    targetDir = path.resolve(process.cwd(), userPathAnswer);
+  }
+
+  // Create target directory if it doesn't exist
+  if (!fs.existsSync(targetDir)) {
+    fs.mkdirSync(targetDir, { recursive: true });
+  }
+
+  // Write component files
+  console.log(`\n${colors.cyan}💾 Writing component files...${colors.reset}`);
+  for (const file of componentData.files) {
+    const filePath = path.join(targetDir, file.name);
+    fs.writeFileSync(filePath, file.content, "utf-8");
+    console.log(`${colors.green}  → Created: ${colors.bold}${path.relative(process.cwd(), filePath)}${colors.reset}`);
+  }
+
+  // Check and install dependencies
+  const dependencies = componentData.dependencies || [];
+  if (dependencies.length > 0) {
+    // Read package.json to see if dependencies are already installed
+    let pkgJson = {};
+    try {
+      pkgJson = JSON.parse(fs.readFileSync(path.join(process.cwd(), "package.json"), "utf-8"));
+    } catch (err) {
+      // Ignore
+    }
+
+    const allDeps = { ...pkgJson.dependencies, ...pkgJson.devDependencies };
+    const missingDeps = dependencies.filter((dep) => !allDeps[dep]);
+
+    if (missingDeps.length > 0) {
+      const pm = detectPackageManager();
+      console.log(`\n${colors.yellow}📦 Missing dependencies: ${colors.bold}${missingDeps.join(", ")}${colors.reset}`);
+      
+      const installConfirm = await askQuestion(
+        `Do you want to install them using ${colors.bold}${pm}${colors.reset}? (y/n) ${colors.gray}[y]${colors.reset}: `
+      );
+
+      if (!installConfirm || installConfirm.toLowerCase() === "y" || installConfirm.toLowerCase() === "yes") {
+        console.log(`${colors.cyan}Installing dependencies using ${pm}...${colors.reset}`);
+        let installCmd = "";
+        if (pm === "pnpm") installCmd = `pnpm add ${missingDeps.join(" ")}`;
+        else if (pm === "yarn") installCmd = `yarn add ${missingDeps.join(" ")}`;
+        else if (pm === "bun") installCmd = `bun add ${missingDeps.join(" ")}`;
+        else installCmd = `npm install ${missingDeps.join(" ")}`;
+
+        try {
+          execSync(installCmd, { stdio: "inherit" });
+          console.log(`${colors.green}✓ Dependencies installed successfully!${colors.reset}`);
+        } catch (err) {
+          console.error(`${colors.red}❌ Failed to install dependencies. Please run "${installCmd}" manually.${colors.reset}`);
+        }
+      } else {
+        console.log(`${colors.yellow}⚠️ Skipping installation. Please make sure to install ${missingDeps.join(", ")} manually.${colors.reset}`);
+      }
+    } else {
+      console.log(`\n${colors.green}✓ All dependencies (${dependencies.join(", ")}) already installed.${colors.reset}`);
+    }
+  }
+
+  console.log(`\n${colors.green}${colors.bold}🎉 Installation complete!${colors.reset}`);
+  console.log(`You can now import and use the ${colors.bold}${componentData.className}${colors.reset} component in your project.\n`);
+}
+
+main().catch((err) => {
+  console.error("CLI unexpected error:", err);
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "tweenlabs",
+  "version": "0.1.0",
+  "bin": {
+    "tweenlabs": "bin/cli.js"
+  },
+  "files": [
+    "bin",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "dev": "next dev",
+    "build": "node scripts/generate-llms-full.js && next build",
+    "vercel-build": "convex deploy --cmd \"node scripts/generate-llms-full.js && next build\"",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@convex-dev/better-auth": "^0.12.4",
+    "@gsap/react": "^2.1.2",
+    "better-auth": "^1.6.19",
+    "convex": "^1.41.0",
+    "gsap": "^3.15.0",
+    "lenis": "^1.3.23",
+    "next": "16.2.7",
+    "react": "19.2.4",
+    "react-dom": "19.2.4"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.5.0",
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.2.7",
+    "sharp": "^0.35.1",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  },
+  "pnpm": {
+    "ignoredBuiltDependencies": [
+      "sharp",
+      "unrs-resolver"
+    ],
+    "overrides": {
+      "postcss": "^8.5.10"
+    }
+  }
+}