create_production_pattern

Instructions

Implementation Reference

• index.ts:1322-1479 (registration)

  The tool 'create_production_pattern' is registered in the ListToolsRequestSchema handler at line 1457-1476, with its input schema (pattern_type and industry parameters).

  const server = new Server(
    {
      name: 'gsap-mcp',
      version: '1.1.0',
    },
    {
      capabilities: {
        tools: {},
      },
    }
  );
  
  // Define all tools
  server.setRequestHandler(ListToolsRequestSchema, async () => {
    return {
      tools: [
        {
          name: 'understand_and_create_animation',
          description: 'The main AI engine - understands any animation request and generates perfect GSAP code with surgical precision',
          inputSchema: {
            type: 'object',
            properties: {
              request: {
                type: 'string',
                description: 'Natural language description of the animation you want (e.g., "fade in cards one by one when scrolling", "create a hero entrance with staggered text")'
              },
              context: {
                type: 'string',
                description: 'Development context and requirements',
                enum: ['react', 'vanilla', 'nextjs', 'vue', 'performance-critical', 'mobile-optimized'],
                default: 'react'
              },
              complexity: {
                type: 'string',
                description: 'Animation complexity level',
                enum: ['simple', 'intermediate', 'advanced', 'expert'],
                default: 'intermediate'
              }
            },
            required: ['request']
          }
        },
        {
          name: 'get_gsap_api_expert',
          description: 'Deep dive into any GSAP method, plugin, or property with expert-level knowledge',
          inputSchema: {
            type: 'object',
            properties: {
              api_element: {
                type: 'string',
                description: 'GSAP API element (e.g., "gsap.to", "ScrollTrigger", "SplitText", "drawSVG", "morphSVG")'
              },
              level: {
                type: 'string',
                description: 'Detail level needed',
                enum: ['basic', 'intermediate', 'advanced', 'expert'],
                default: 'advanced'
              }
            },
            required: ['api_element']
          }
        },
        {
          name: 'generate_complete_setup',
          description: 'Generate complete GSAP environment setup with all plugins and optimizations',
          inputSchema: {
            type: 'object',
            properties: {
              framework: {
                type: 'string',
                description: 'Target framework',
                enum: ['react', 'nextjs', 'vue', 'nuxt', 'svelte', 'vanilla'],
                default: 'react'
              },
              plugins: {
                type: 'array',
                description: 'Specific plugins needed',
                items: {
                  type: 'string',
                  enum: ['ScrollTrigger', 'SplitText', 'DrawSVGPlugin', 'MorphSVGPlugin', 'MotionPathPlugin', 'Draggable', 'InertiaPlugin', 'Flip', 'Observer', 'CustomEase', 'GSDevTools', 'Lenis']
                }
              },
              performance_level: {
                type: 'string',
                description: 'Performance optimization level',
                enum: ['basic', 'optimized', '60fps-guaranteed', 'mobile-first'],
                default: 'optimized'
              }
            },
            required: ['framework']
          }
        },
        {
          name: 'debug_animation_issue',
          description: 'Expert debugging for GSAP animation problems with solutions',
          inputSchema: {
            type: 'object',
            properties: {
              issue: {
                type: 'string',
                description: 'Description of the animation problem or unexpected behavior'
              },
              code: {
                type: 'string',
                description: 'Problematic animation code (optional but helpful)'
              },
              expected_behavior: {
                type: 'string',
                description: 'What should happen vs what is happening'
              }
            },
            required: ['issue']
          }
        },
        {
          name: 'optimize_for_performance',
          description: 'Transform any animation into 60fps smoothness with expert optimizations',
          inputSchema: {
            type: 'object',
            properties: {
              animation_code: {
                type: 'string',
                description: 'Existing GSAP animation code to optimize'
              },
              target: {
                type: 'string',
                description: 'Optimization target',
                enum: ['60fps-desktop', 'mobile-smooth', 'battery-efficient', 'memory-optimized'],
                default: '60fps-desktop'
              }
            },
            required: ['animation_code']
          }
        },
        {
          name: 'create_production_pattern',
          description: 'Generate battle-tested, production-ready animation patterns',
          inputSchema: {
            type: 'object',
            properties: {
              pattern_type: {
                type: 'string',
                description: 'Type of production pattern needed',
                enum: ['hero-section', 'scroll-system', 'text-effects', 'interactive-ui', 'loading-sequence', 'page-transitions', 'micro-interactions', 'data-visualization']
              },
              industry: {
                type: 'string',
                description: 'Industry or use case',
                enum: ['portfolio', 'ecommerce', 'saas', 'agency', 'blog', 'app', 'game'],
                default: 'portfolio'
              }
            },
            required: ['pattern_type']
          }
        }
      ]
    };
  });

• index.ts:2227-2655 (handler)

  The handler logic for 'create_production_pattern' in the CallToolRequestSchema handler. It parses pattern_type and industry, generates production-ready animation code for hero-section, scroll-system, text-effects, and loading-sequence patterns, and returns formatted result with code, HTML structure, CSS, and industry customizations.

        case 'create_production_pattern': {
          const patternType = args?.pattern_type as string;
          const industry = args?.industry as string || 'portfolio';
          
          if (!patternType) {
            throw new Error('Pattern type is required');
          }
  
          let result = `# 🎨 Production Pattern: ${patternType.toUpperCase()}\n\n`;
          result += `**Industry**: ${industry} | **Pattern**: ${patternType}\n\n`;
  
          const patterns = {
            'hero-section': {
              description: 'Epic hero section with layered animations and scroll effects',
              code: `// Hero Section Master Pattern
  const heroTimeline = gsap.timeline({ 
    defaults: { ease: "power3.out" } 
  });
  
  // Staggered hero entrance
  heroTimeline
    .from(".hero-bg", { 
      scale: 1.2, 
      opacity: 0, 
      duration: 2, 
      ease: "power2.out" 
    })
    .from(".hero-title", { 
      y: 100, 
      opacity: 0, 
      duration: 1.2,
      force3D: true 
    }, "-=1.5")
    .from(".hero-subtitle", { 
      y: 50, 
      opacity: 0, 
      duration: 1 
    }, "-=0.8")
    .from(".hero-cta", { 
      scale: 0, 
      opacity: 0, 
      duration: 0.8, 
      ease: "back.out(1.7)" 
    }, "-=0.5")
    .from(".hero-scroll-indicator", { 
      y: 20, 
      opacity: 0, 
      repeat: -1, 
      yoyo: true, 
      duration: 1.5 
    }, "-=0.3");
  
  // Parallax scroll effect
  gsap.to(".hero-bg", {
    yPercent: -50,
    ease: "none",
    scrollTrigger: {
      trigger: ".hero-section",
      start: "top top",
      end: "bottom top",
      scrub: 1
    }
  });`,
              features: ['Layered entrance animations', 'Parallax background', 'Floating CTA button', 'Scroll indicator pulse']
            },
            
            'scroll-system': {
              description: 'Complete scroll-based animation system with performance optimization',
              code: `// Production Scroll System
  class ScrollAnimationSystem {
    constructor() {
      this.initScrollAnimations();
      this.initParallax();
      this.initProgressIndicator();
    }
  
    initScrollAnimations() {
      // Batch process for performance
      ScrollTrigger.batch(".scroll-reveal", {
        onEnter: (elements) => {
          gsap.fromTo(elements, 
            { 
              y: 100, 
              opacity: 0, 
              scale: 0.8 
            },
            {
              y: 0,
              opacity: 1,
              scale: 1,
              duration: 1.2,
              stagger: 0.15,
              ease: "power3.out",
              force3D: true,
              clearProps: "transform,opacity"
            }
          );
        },
        onLeave: (elements) => {
          gsap.to(elements, { 
            opacity: 0.7, 
            scale: 0.95, 
            duration: 0.3 
          });
        },
        onEnterBack: (elements) => {
          gsap.to(elements, { 
            opacity: 1, 
            scale: 1, 
            duration: 0.3 
          });
        },
        start: "top 80%",
        end: "bottom 20%"
      });
    }
  
    initParallax() {
      gsap.utils.toArray(".parallax").forEach(element => {
        const speed = element.dataset.speed || 0.5;
        gsap.to(element, {
          yPercent: -50 * speed,
          ease: "none",
          scrollTrigger: {
            trigger: element.closest("section"),
            start: "top bottom",
            end: "bottom top",
            scrub: 1,
            refreshPriority: -1
          }
        });
      });
    }
  
    initProgressIndicator() {
      gsap.to(".progress-bar", {
        scaleX: 1,
        ease: "none",
        scrollTrigger: {
          trigger: "body",
          start: "top top",
          end: "bottom bottom",
          scrub: 1
        }
      });
    }
  }
  
  // Initialize system
  new ScrollAnimationSystem();`,
              features: ['Batch processing for performance', 'Multiple parallax speeds', 'Progress indicator', 'Memory cleanup']
            },
  
            'text-effects': {
              description: 'Advanced text animation system with multiple reveal types',
              code: `// Advanced Text Effects System
  class TextAnimationMaster {
    constructor() {
      this.animateHeaders();
      this.animateParagraphs();
      this.createTypewriter();
    }
  
    animateHeaders() {
      gsap.utils.toArray("h1, h2, h3").forEach(heading => {
        const split = new SplitText(heading, { 
          type: "chars", 
          charsClass: "char-animate" 
        });
        
        gsap.fromTo(split.chars,
          {
            y: 100,
            opacity: 0,
            rotation: 10,
            scale: 0.8
          },
          {
            y: 0,
            opacity: 1,
            rotation: 0,
            scale: 1,
            duration: 0.8,
            ease: "back.out(1.7)",
            stagger: {
              amount: 0.8,
              from: "random"
            },
            scrollTrigger: {
              trigger: heading,
              start: "top 85%",
              toggleActions: "play none none reverse"
            }
          }
        );
      });
    }
  
    animateParagraphs() {
      gsap.utils.toArray("p.animate-text").forEach(paragraph => {
        const split = new SplitText(paragraph, { type: "lines" });
        
        gsap.from(split.lines, {
          y: 50,
          opacity: 0,
          duration: 1,
          stagger: 0.1,
          ease: "power3.out",
          scrollTrigger: {
            trigger: paragraph,
            start: "top 90%"
          }
        });
      });
    }
  
    createTypewriter() {
      gsap.utils.toArray(".typewriter").forEach(element => {
        const text = element.textContent;
        const split = new SplitText(element, { type: "chars" });
        
        gsap.set(split.chars, { opacity: 0 });
        
        const tl = gsap.timeline({
          scrollTrigger: {
            trigger: element,
            start: "top 80%"
          }
        });
        
        tl.to(split.chars, {
          opacity: 1,
          duration: 0.05,
          stagger: 0.05,
          ease: "none"
        })
        .to(element, {
          borderRight: "0px",
          duration: 0.5,
          repeat: -1,
          yoyo: true
        });
      });
    }
  }
  
  new TextAnimationMaster();`,
              features: ['Character-by-character reveals', 'Line-based animations', 'Typewriter effects', 'Random stagger patterns']
            },
  
            'loading-sequence': {
              description: 'Sophisticated loading sequence with progress indication',
              code: `// Master Loading Sequence
  class LoadingSequence {
    constructor() {
      this.progress = 0;
      this.timeline = gsap.timeline({ paused: true });
      this.setupSequence();
    }
  
    setupSequence() {
      // Loading bar animation
      this.timeline
        .to(".loading-progress", {
          scaleX: 1,
          duration: 2,
          ease: "power2.inOut",
          onUpdate: () => {
            this.progress = Math.round(this.timeline.progress() * 100);
            document.querySelector(".loading-percentage").textContent = this.progress + "%";
          }
        })
        .to(".loading-text", {
          opacity: 0,
          y: -20,
          duration: 0.5
        })
        .to(".loading-container", {
          y: "-100%",
          duration: 1,
          ease: "power3.inOut"
        })
        .from(".main-content", {
          y: 30,
          opacity: 0,
          duration: 1,
          ease: "power3.out"
        }, "-=0.5");
    }
  
    start() {
      // Simulate loading with realistic progress
      const loadingSteps = [
        { progress: 0.2, delay: 200, text: "Loading assets..." },
        { progress: 0.5, delay: 400, text: "Preparing interface..." },
        { progress: 0.8, delay: 300, text: "Almost ready..." },
        { progress: 1, delay: 200, text: "Complete!" }
      ];
  
      let currentStep = 0;
      
      const nextStep = () => {
        if (currentStep < loadingSteps.length) {
          const step = loadingSteps[currentStep];
          
          gsap.to(this.timeline, {
            progress: step.progress,
            duration: 0.5,
            ease: "power2.out"
          });
          
          document.querySelector(".loading-text").textContent = step.text;
          
          setTimeout(() => {
            currentStep++;
            nextStep();
          }, step.delay);
        } else {
          this.complete();
        }
      };
      
      nextStep();
    }
  
    complete() {
      setTimeout(() => {
        this.timeline.play();
      }, 500);
    }
  }
  
  // Auto-start loading sequence
  window.addEventListener('load', () => {
    new LoadingSequence().start();
  });`,
              features: ['Realistic progress simulation', 'Smooth transitions', 'Text updates', 'Reveal main content']
            }
          };
  
          const pattern = (patterns as any)[patternType];
          
          if (!pattern) {
            result += `Pattern "${patternType}" not found. Available patterns:\n`;
            result += Object.keys(patterns).map(p => `- ${p}`).join('\n');
            return { content: [{ type: 'text', text: result }] };
          }
  
          result += `## 📋 Pattern Description\n`;
          result += `${pattern.description}\n\n`;
  
          result += `## 🚀 Production Code\n\n`;
          result += `\`\`\`javascript\n${pattern.code}\n\`\`\`\n\n`;
  
          result += `## ✨ Features Included\n`;
          pattern.features.forEach((feature: string) => {
            result += `- ✅ ${feature}\n`;
          });
  
          result += `\n## 🎨 Required HTML Structure\n\n`;
          
          // Generate HTML structure based on pattern
          const htmlStructures = {
            'hero-section': `<section class="hero-section">
    <div class="hero-bg"></div>
    <div class="hero-content">
      <h1 class="hero-title">Amazing Hero Title</h1>
      <p class="hero-subtitle">Compelling subtitle text</p>
      <button class="hero-cta">Get Started</button>
    </div>
    <div class="hero-scroll-indicator">↓</div>
  </section>`,
            'scroll-system': `<div class="progress-bar"></div>
  <section class="parallax" data-speed="0.5">
    <div class="scroll-reveal">Content 1</div>
    <div class="scroll-reveal">Content 2</div>
  </section>`,
            'text-effects': `<h1>Animated Header</h1>
  <p class="animate-text">Paragraph with line animation</p>
  <div class="typewriter">Typewriter effect text</div>`,
            'loading-sequence': `<div class="loading-container">
    <div class="loading-progress"></div>
    <div class="loading-percentage">0%</div>
    <div class="loading-text">Loading...</div>
  </div>
  <main class="main-content">
    <!-- Your main content -->
  </main>`
          };
  
          result += `\`\`\`html\n${(htmlStructures as any)[patternType] || '<!-- HTML structure for ' + patternType + ' -->'}\n\`\`\`\n\n`;
  
          result += `## 💅 Required CSS\n\n`;
          result += `\`\`\`css\n/* Essential styles for ${patternType} */\n`;
          result += `.animated-element {\n`;
          result += `  will-change: transform, opacity;\n`;
          result += `  backface-visibility: hidden;\n`;
          result += `}\n\n`;
          
          if (patternType === 'hero-section') {
            result += `.hero-section { height: 100vh; position: relative; overflow: hidden; }\n`;
            result += `.hero-bg { position: absolute; inset: 0; z-index: -1; }\n`;
            result += `.hero-content { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; }\n`;
          }
          
          result += `\`\`\`\n\n`;
  
          result += `## 🎯 Industry Customization (${industry})\n\n`;
          
          const industryCustomizations = {
            portfolio: ['Add personal branding colors', 'Include work showcase animations', 'Focus on visual impact'],
            ecommerce: ['Add product hover effects', 'Include cart animations', 'Optimize for conversion'],
            saas: ['Add feature demonstrations', 'Include data visualizations', 'Focus on user onboarding'],
            agency: ['Bold, creative animations', 'Portfolio showcases', 'Client testimonials'],
            blog: ['Reading progress indicators', 'Content reveal animations', 'Typography focus'],
            app: ['Touch-friendly interactions', 'Loading states', 'Micro-interactions']
          };
  
          const customizations = (industryCustomizations as any)[industry] || industryCustomizations.portfolio;
          customizations.forEach((custom: string) => {
            result += `- ${custom}\n`;
          });
  
          result += `\n🎉 **Production-ready pattern for ${industry} industry!**`;
  
          return {
            content: [{ type: 'text', text: result }]
          };
        }

• index.ts:1459-1476 (schema)

  Input schema definition for the create_production_pattern tool, specifying pattern_type (required, from 8 enum values) and industry (optional, from 7 enum values).

    inputSchema: {
      type: 'object',
      properties: {
        pattern_type: {
          type: 'string',
          description: 'Type of production pattern needed',
          enum: ['hero-section', 'scroll-system', 'text-effects', 'interactive-ui', 'loading-sequence', 'page-transitions', 'micro-interactions', 'data-visualization']
        },
        industry: {
          type: 'string',
          description: 'Industry or use case',
          enum: ['portfolio', 'ecommerce', 'saas', 'agency', 'blog', 'app', 'game'],
          default: 'portfolio'
        }
      },
      required: ['pattern_type']
    }
  }