🔮 GSAP Lab & Motion Workspace

A premium, interactive playground and development catalog for high-performance frontend animations, visual effects, and AI-assisted workspace creations. Built using React 19, Next.js 16, and Tailwind CSS v4, this repository showcases advanced animation techniques using GSAP Core + ScrollTrigger, Framer Motion, and Three.js.

---

---

⚡ Core Features

🌌 Visual Effects Catalog

• Interactive Demos: High-fidelity examples of scroll-driven animations, mouse-magnetic hover overlays, SVG vector morphing, custom text split reveals, and 3D floating canvas elements.
• Three.js Particle Sphere: Interactive 3D particle systems responding to cursor coordinates with a glassmorphic React controller card.

🎭 AI Chat Workspace (AI Copilot)

• Artifact Creator: Live execution playground for React component and standalone HTML templates. Features client-side Babel transpile compilation and CDN dependency resolution.
• GSAP Scrubber Sync: Seamless GSDevTools timeline binder allowing play, pause, speed scales, and seek tracking for sandbox animations.
• Prompt Creator: Synthesizes and edits markdown prompts, AI guidelines, and .cursorrules configurations.
• Skill Creator: Designs and structures multi-file agent skills (with Python scripts, reference briefs, and YAML descriptors).

🛠️ Developer Playground

• Monaco Playground: Multi-tab live editor supporting full HTML, CSS, and JS compilation with full undo/redo state preservation and detailed auto-comment generation.
• Full History Persist: Secure user authorization (NextAuth) and database storage (SQLite + Prisma) to save conversations and versioned copy history logs.

---

📁 Repository Architecture

gsap/
├── .agents/                 # AI Model configuration and registry skills
├── prisma/                  # Database schema definitions and migrations
│   ├── schema.prisma        # Prisma schema mapped to SQLite
│   └── db/                  # SQLite storage directory
├── public/                  # Static assets and reference documentation
└── src/
    ├── app/                 # Next.js App Router (Pages, APIs, auth routes)
    │   ├── chat/            # AI Chat Workspace
    │   ├── playground/      # Monaco Sandbox Playground
    │   ├── motion/          # Motion Catalog
    │   └── api/             # API Proxy endpoints (Z.AI completions, Vercel deploys)
    ├── components/          # Reusable UI component elements
    │   ├── gsap/            # GSAP UI components & timeline controllers
    │   ├── motion/          # Framer Motion components (tooltips, sheets, inputs)
    │   └── chat/            # Chat-specific panels and menus
    ├── hooks/               # Custom hooks (Persistence, recently viewed)
    └── lib/                 # Core utilities, registry, and system prompts

---

🚀 Getting Started

📋 Prerequisites

Ensure you have Bun installed.

⚙️ Installation

1. Clone the repository and install dependencies:

   bun install

2. Configure your environment variables: Create a .env file in the root directory:

   DATABASE_URL="file:./db/custom.db"
   NEXTAUTH_SECRET="your-nextauth-secret-key"
   NEXTAUTH_URL="http://localhost:3000"
   GLM_API_KEY="your-glm-api-key"

3. Initialize the SQLite Database:

   bun run db:push
   bun run db:generate

4. Start the Development Server:

   bun run dev

   Open http://localhost:3000 to access the workspace.

---

🛠️ Developer Scripts

Run these tasks using Bun:

Script	Command	Description
dev	bun run dev	Runs the Next.js development server on port 3000
build	bun run build	Builds the optimized production server bundles
start	bun run start	Starts the production server using the standalone bundle
lint	bun run lint	Inspects code for ESLint rule violations (100% clean check)
db:push	bun run db:push	Syncs database structure directly with the schema
db:generate	bun run db:generate	Generates the Prisma client typings
mcp:server	bun run mcp:server	Launches the Model Context Protocol (MCP) server

---

🎨 Animation Best Practices (GSAP + ScrollTrigger)

When creating scroll-linked animations inside the Artifact sandboxes, ensure the following patterns:

1. Body Scrolling: Avoid locking height parameters to viewport size (h-full or absolute flex centering). Always configure layouts to grow organically (min-h-screen) to allow viewport scrolls.
2. Context Cleanup: Clean up animations when unmounting using gsap.context:

   useEffect(() => {
     const ctx = gsap.context(() => {
       gsap.to(".box", { scrollTrigger: { trigger: ".box", scrub: true } });
     });
     return () => ctx.revert();
   }, []);

---

🛡️ License

Private repository. All rights reserved.