tweenlabs 0.1.3 → 0.1.5

package/README.md

@@ -1,168 +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="https://raw.githubusercontent.com/TweenLabs/TweenLabs/master/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
--->
+<!-- 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="https://raw.githubusercontent.com/TweenLabs/TweenLabs/master/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

@@ -95,16 +95,22 @@ async function main() {
     process.exit(0);
   }
 
+  let version = "0.1.4";
+  try {
+    const pkg = require("../package.json");
+    version = pkg.version;
+  } catch (_e) {}
+
   if (args.includes("--version") || args.includes("-v")) {
-    try {
-      const pkg = require("../package.json");
-      console.log(pkg.version);
-    } catch (_err) {
-      console.log("0.1.1");
-    }
+    console.log(version);
     process.exit(0);
   }
 
+  // Print CLI Header Banner
+  console.log(
+    `\n${colors.bold}${colors.cyan}▲  tweenlabs${colors.reset}  ${colors.gray}v${version}${colors.reset}\n`,
+  );
+
   // Parse flags
   const isYes = args.includes("-y") || args.includes("--yes");
   const isOverwrite = args.includes("-o") || args.includes("--overwrite");
@@ -140,28 +146,31 @@ async function main() {
   }
 
   if (cleanArgs[0] === "list") {
-    console.log(
-      `\n${colors.cyan}🔍 Fetching available components list...${colors.reset}`,
-    );
+    console.log(`${colors.cyan}🔍 Fetching registry...${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`,
+        `\n${colors.bold}${colors.green}Available Components:${colors.reset}\n`,
       );
-      for (const comp of data.components) {
+      const rows = data.components.map((comp) => ({
+        slug: comp.cleanSlug || comp.slug,
+        desc: comp.description || "",
+      }));
+      const maxSlugLen = Math.max(...rows.map((r) => r.slug.length), 10);
+      for (const row of rows) {
+        const paddedSlug = row.slug.padEnd(maxSlugLen + 4, " ");
         console.log(
-          `  ${colors.bold}${colors.cyan}* ${comp.name}${colors.reset}`,
+          `  ${colors.cyan}${paddedSlug}${colors.reset}${colors.gray}${row.desc}${colors.reset}`,
         );
-        console.log(`    Slug:       ${comp.slug} (or ${comp.cleanSlug})`);
-        console.log(`    Desc:       ${comp.description}\n`);
       }
+      console.log("");
       process.exit(0);
     } catch (err) {
       console.error(
-        `\n${colors.red}❌ Failed to fetch components list.${colors.reset}`,
+        `${colors.red}❌ Failed to fetch components list.${colors.reset}`,
       );
       console.error(`${colors.gray}Details: ${err.message}${colors.reset}`);
       process.exit(1);
@@ -176,41 +185,68 @@ async function main() {
     process.exit(1);
   }
 
-  const componentSlug = cleanArgs[1];
+  let componentSlug = cleanArgs[1];
   if (!componentSlug) {
+    console.log(`${colors.cyan}🔍 Fetching registry...${colors.reset}`);
+    const domain =
+      process.env.TWEENLABS_REGISTRY_URL || "https://tweenlabs.xyz";
+    const listUrl = `${domain}/api/registry/list`;
+    let listData;
+    try {
+      listData = await fetchJson(listUrl);
+    } catch (err) {
+      console.error(
+        `${colors.red}❌ Failed to fetch components list.${colors.reset}`,
+      );
+      console.error(`${colors.gray}Details: ${err.message}${colors.reset}`);
+      process.exit(1);
+    }
+
     console.log(
-      `${colors.red}Error: Please specify a component slug to add.${colors.reset}`,
+      `${colors.bold}${colors.green}Select a component to install:${colors.reset}\n`,
     );
-    console.log(
-      colors.gray +
-        "Example: npx tweenlabs add 11-magnetic-dock" +
-        colors.reset,
+    const components = listData.components;
+    const maxIndexLen = String(components.length + 1).length;
+    const maxSlugLen = Math.max(
+      ...components.map((c) => (c.cleanSlug || c.slug).length),
+      10,
     );
-    process.exit(1);
-  }
 
-  console.log(
-    `\n${colors.cyan}🔍 Fetching ${colors.bold}${componentSlug}${colors.reset}${colors.cyan} registry data...${colors.reset}`,
-  );
+    // Print "All Components" option first
+    const allIndexStr = "[1]".padStart(maxIndexLen + 2, " ");
+    const allSlugStr = ".".padEnd(maxSlugLen + 4, " ");
+    console.log(
+      `  ${colors.bold}${colors.cyan}${allIndexStr}${colors.reset}  ${colors.cyan}${allSlugStr}${colors.reset}${colors.gray}All Components${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}`;
+    for (let i = 0; i < components.length; i++) {
+      const indexStr = `[${i + 2}]`.padStart(maxIndexLen + 2, " ");
+      const slugStr = (components[i].cleanSlug || components[i].slug).padEnd(
+        maxSlugLen + 4,
+        " ",
+      );
+      console.log(
+        `  ${colors.bold}${colors.cyan}${indexStr}${colors.reset}  ${colors.cyan}${slugStr}${colors.reset}${colors.gray}${components[i].name}${colors.reset}`,
+      );
+    }
+    console.log("");
 
-  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}`,
+    const choiceStr = await askQuestion(
+      `👉 Enter the number of the component to add (1-${components.length + 1}): `,
     );
-    console.error(`${colors.gray}Details: ${err.message}${colors.reset}`);
-    process.exit(1);
-  }
+    const choice = parseInt(choiceStr, 10);
+    if (Number.isNaN(choice) || choice < 1 || choice > components.length + 1) {
+      console.log(`${colors.red}❌ Invalid choice. Exiting.${colors.reset}`);
+      process.exit(1);
+    }
 
-  console.log(
-    `${colors.green}✓ Component found: ${colors.bold}${componentData.className}${colors.reset}`,
-  );
+    if (choice === 1) {
+      componentSlug = ".";
+    } else {
+      componentSlug =
+        components[choice - 2].cleanSlug || components[choice - 2].slug;
+    }
+  }
 
   // Resolve target directory
   let targetDir = "";
@@ -258,26 +294,78 @@ async function main() {
     `📁 Target directory: ${colors.bold}${path.relative(process.cwd(), targetDir)}${colors.reset}`,
   );
 
-  // Check if any files already exist
-  let hasExistingFiles = false;
-  for (const file of componentData.files) {
-    const filePath = path.join(targetDir, file.name);
-    if (fs.existsSync(filePath)) {
-      hasExistingFiles = true;
-      break;
+  const domain = process.env.TWEENLABS_REGISTRY_URL || "https://tweenlabs.xyz";
+  let slugsToInstall = [];
+  if (componentSlug === "." || componentSlug === "all") {
+    console.log(
+      `${colors.cyan}🔍 Fetching all components list...${colors.reset}`,
+    );
+    const listUrl = `${domain}/api/registry/list`;
+    try {
+      const listData = await fetchJson(listUrl);
+      slugsToInstall = listData.components.map((c) => c.cleanSlug || c.slug);
+    } catch (err) {
+      console.error(
+        `${colors.red}❌ Failed to fetch components list.${colors.reset}`,
+      );
+      console.error(`${colors.gray}Details: ${err.message}${colors.reset}`);
+      process.exit(1);
     }
+  } else {
+    slugsToInstall = [componentSlug];
   }
 
-  if (hasExistingFiles && !isOverwrite && !isYes) {
+  // Gather files and check conflicts
+  const filesToWrite = [];
+  const conflicts = [];
+  const allRequiredDeps = new Set();
+
+  for (const slug of slugsToInstall) {
+    console.log(
+      `${colors.cyan}🔍 Fetching ${colors.bold}${slug}${colors.reset}${colors.cyan} registry data...${colors.reset}`,
+    );
+    const url = `${domain}/api/registry/${slug}`;
+    try {
+      const componentData = await fetchJson(url);
+      for (const file of componentData.files) {
+        const filePath = path.join(targetDir, file.name);
+        if (fs.existsSync(filePath)) {
+          conflicts.push(path.relative(process.cwd(), filePath));
+        }
+        filesToWrite.push({ path: filePath, content: file.content });
+      }
+      const dependencies = componentData.dependencies || [];
+      for (const dep of dependencies) {
+        allRequiredDeps.add(dep);
+      }
+    } catch (_err) {
+      console.error(
+        `${colors.red}❌ Failed to fetch component ${slug}. Skipping.${colors.reset}`,
+      );
+    }
+  }
+
+  if (filesToWrite.length === 0) {
+    console.log(`${colors.red}❌ No files to install. Exiting.${colors.reset}`);
+    process.exit(1);
+  }
+
+  if (conflicts.length > 0 && !isOverwrite && !isYes) {
+    console.log(
+      `\n${colors.yellow}⚠️ The following files already exist:${colors.reset}`,
+    );
+    for (const conflict of conflicts) {
+      console.log(`  → ${conflict}`);
+    }
     const overwriteConfirm = await askQuestion(
-      `⚠️ Component files already exist in ${colors.bold}${path.relative(process.cwd(), targetDir)}${colors.reset}. Overwrite? (y/n) ${colors.gray}[y]${colors.reset}: `,
+      `\nOverwrite these files? (y/n) ${colors.gray}[y]${colors.reset}: `,
     );
     if (
       overwriteConfirm &&
       overwriteConfirm.toLowerCase() !== "y" &&
       overwriteConfirm.toLowerCase() !== "yes"
     ) {
-      console.log(`${colors.yellow}Installation cancelled.${colors.reset}`);
+      console.log(`${colors.yellow}⚠ Installation cancelled.${colors.reset}`);
       process.exit(0);
     }
   }
@@ -288,19 +376,17 @@ async function main() {
   }
 
   // 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(`\n${colors.bold}💾 Writing component files...${colors.reset}`);
+  for (const file of filesToWrite) {
+    fs.writeFileSync(file.path, file.content, "utf-8");
     console.log(
-      `${colors.green}  → Created: ${colors.bold}${path.relative(process.cwd(), filePath)}${colors.reset}`,
+      `  ${colors.green}✔${colors.reset} Created ${colors.bold}${path.relative(process.cwd(), file.path)}${colors.reset}`,
     );
   }
 
   // Check and install dependencies
-  const dependencies = componentData.dependencies || [];
+  const dependencies = Array.from(allRequiredDeps);
   if (dependencies.length > 0) {
-    // Read package.json to see if dependencies are already installed
     let pkgJson = {};
     try {
       pkgJson = JSON.parse(
@@ -316,8 +402,12 @@ async function main() {
     if (missingDeps.length > 0) {
       const pm = detectPackageManager();
       console.log(
-        `\n${colors.cyan}📦 Installing missing dependencies: ${colors.bold}${missingDeps.join(", ")}${colors.reset} using ${pm}...`,
+        `\n${colors.bold}📦 Installing missing dependencies using ${pm}...${colors.reset}`,
       );
+      for (const dep of missingDeps) {
+        console.log(`  → ${dep}`);
+      }
+      console.log("");
 
       let installCmd = "";
       if (pm === "pnpm") installCmd = `pnpm add ${missingDeps.join(" ")}`;
@@ -328,26 +418,24 @@ async function main() {
       try {
         execSync(installCmd, { stdio: "inherit" });
         console.log(
-          `${colors.green}✓ Dependencies installed successfully!${colors.reset}`,
+          `\n${colors.green}✔ Dependencies installed successfully!${colors.reset}`,
         );
       } catch (_err) {
         console.error(
-          `${colors.red}❌ Failed to install dependencies. Please run "${installCmd}" manually.${colors.reset}`,
+          `\n${colors.red}❌ Failed to install dependencies. Please run "${installCmd}" manually.${colors.reset}`,
         );
       }
     } else {
       console.log(
-        `\n${colors.green}✓ All dependencies (${dependencies.join(", ")}) already installed.${colors.reset}`,
+        `\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`,
+    `\n${colors.bold}${colors.green}🎉 Done! All requested components installed successfully.${colors.reset}`,
   );
+  console.log(`You can now import and use them in your project.\n`);
 }
 
 main().catch((err) => {

package/package.json

@@ -1,60 +1,60 @@
-{
-  "name": "tweenlabs",
-  "version": "0.1.3",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/TweenLabs/TweenLabs.git"
-  },
-  "homepage": "https://tweenlabs.xyz",
-  "bugs": {
-    "url": "https://github.com/TweenLabs/TweenLabs/issues"
-  },
-  "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"
-    }
-  }
-}
+{
+  "name": "tweenlabs",
+  "version": "0.1.5",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TweenLabs/TweenLabs.git"
+  },
+  "homepage": "https://tweenlabs.xyz",
+  "bugs": {
+    "url": "https://github.com/TweenLabs/TweenLabs/issues"
+  },
+  "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"
+    }
+  }
+}