@hustle-together/api-dev-tools 2.0.0 → 2.0.1

package/demo/workflow-demo.html

@@ -711,6 +711,140 @@
       font-size: 1.1rem;
     }
 
+    /* ============================================
+       HUSTLE BRAND TITLE
+       ============================================ */
+    .hustle-brand {
+      display: flex;
+      justify-content: center;
+      gap: 20px;
+      margin-bottom: 20px;
+      flex-wrap: wrap;
+    }
+
+    .hustle-word {
+      font-size: 4rem;
+      font-weight: bold;
+      letter-spacing: 8px;
+      opacity: 0;
+      transform: translateY(30px);
+    }
+
+    .hustle-highlight {
+      color: var(--accent-red);
+      text-shadow: 0 0 30px var(--accent-red-glow), 0 0 60px var(--accent-red-glow);
+    }
+
+    .text-red {
+      color: var(--accent-red);
+    }
+
+    /* ============================================
+       PHASE FLOW - LIGHTING UP SEQUENCE
+       ============================================ */
+    .phase-flow {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 15px;
+      margin-top: 50px;
+      flex-wrap: wrap;
+      opacity: 0;
+    }
+
+    .phase-node {
+      position: relative;
+      border: 2px solid var(--dark-grey);
+      padding: 20px 25px;
+      text-align: center;
+      min-width: 100px;
+      transition: all 0.4s ease;
+      opacity: 0;
+      transform: translateY(20px);
+    }
+
+    .phase-node .phase-glow {
+      position: absolute;
+      top: -2px;
+      left: -2px;
+      right: -2px;
+      bottom: -2px;
+      border: 2px solid var(--accent-red);
+      opacity: 0;
+      box-shadow: 0 0 20px var(--accent-red-glow), inset 0 0 20px var(--accent-red-glow);
+      transition: opacity 0.4s ease;
+    }
+
+    .phase-node.active {
+      border-color: var(--accent-red);
+      background: rgba(186, 12, 47, 0.1);
+    }
+
+    .phase-node.active .phase-glow {
+      opacity: 1;
+    }
+
+    .phase-node.active .phase-icon {
+      color: var(--accent-red);
+      text-shadow: 0 0 10px var(--accent-red);
+    }
+
+    .phase-node.active .phase-label {
+      color: var(--white);
+    }
+
+    .phase-icon {
+      display: block;
+      font-size: 1.8rem;
+      font-weight: bold;
+      margin-bottom: 8px;
+      color: var(--grey);
+      transition: all 0.4s ease;
+    }
+
+    .phase-label {
+      font-size: 0.7rem;
+      text-transform: uppercase;
+      letter-spacing: 2px;
+      color: var(--dark-grey);
+      transition: all 0.4s ease;
+    }
+
+    .phase-connector-arrow {
+      color: var(--dark-grey);
+      font-size: 1.5rem;
+      opacity: 0;
+      transition: all 0.3s ease;
+    }
+
+    .phase-connector-arrow.active {
+      color: var(--accent-red);
+      text-shadow: 0 0 10px var(--accent-red-glow);
+    }
+
+    @media (max-width: 768px) {
+      .hustle-word {
+        font-size: 2.5rem;
+        letter-spacing: 4px;
+      }
+      .hustle-brand {
+        gap: 10px;
+      }
+      .phase-flow {
+        gap: 10px;
+      }
+      .phase-node {
+        padding: 15px 18px;
+        min-width: 70px;
+      }
+      .phase-icon {
+        font-size: 1.4rem;
+      }
+      .phase-connector-arrow {
+        font-size: 1rem;
+      }
+    }
+
     .intro-text {
       max-width: 700px;
       margin: 40px auto 0;
@@ -1432,48 +1566,56 @@
        ============================================ -->
   <section id="intro">
     <div class="ascii-border">
-      <h1 id="titleText">INTERVIEW-DRIVEN API DEVELOPMENT</h1>
+      <div class="hustle-brand" id="hustleBrand">
+        <span class="hustle-word">HUSTLE</span>
+        <span class="hustle-word hustle-highlight">DEV</span>
+        <span class="hustle-word">TOOLS</span>
+      </div>
       <div class="package-name" id="packageName">@hustle-together/api-dev-tools</div>
-      <div class="version" id="versionText">v1.9.0</div>
+      <div class="version" id="versionText">v2.0.0</div>
       <p class="tagline">"Interview first, test first, document always"<span class="cursor"></span></p>
 
       <div class="intro-text">
         <p>
-          This tool helps you build APIs the right way by <strong>enforcing a structured workflow</strong>.
-          Instead of letting AI assistants jump straight to code, it ensures they first research,
-          then ask YOU questions with <strong>multiple-choice options</strong> based on what they found.
+          Build APIs the <span class="text-red">right way</span> with <strong>enforced workflows</strong>.
+          No more AI shortcuts. Research first, then structured interviews with
+          <strong>multiple-choice options</strong> based on real findings.
         </p>
         <p style="margin-top: 20px;">
-          <strong>Scroll down</strong> to see how it works, step by step, using a real example:
-          creating a <strong>Brandfetch API endpoint</strong> from scratch.
+          <strong>Scroll down</strong> to see the 5-phase workflow in action.
         </p>
       </div>
 
-      <!-- Visual Quick Overview -->
-      <div class="data-flow" style="margin-top: 40px; opacity: 0;" id="introFlow">
-        <div class="data-node glow-border">
-          <span class="data-node-icon">[R]</span>
-          <span class="data-node-label">Research</span>
+      <!-- Visual Quick Overview - Phases Light Up -->
+      <div class="phase-flow" id="introFlow">
+        <div class="phase-node" data-phase="research">
+          <span class="phase-icon">R</span>
+          <span class="phase-label">Research</span>
+          <div class="phase-glow"></div>
         </div>
-        <span class="data-arrow">→</span>
-        <div class="data-node glow-border">
-          <span class="data-node-icon">[?]</span>
-          <span class="data-node-label">Interview</span>
+        <span class="phase-connector-arrow">→</span>
+        <div class="phase-node" data-phase="interview">
+          <span class="phase-icon">?</span>
+          <span class="phase-label">Interview</span>
+          <div class="phase-glow"></div>
         </div>
-        <span class="data-arrow">→</span>
-        <div class="data-node glow-border">
-          <span class="data-node-icon">[T]</span>
-          <span class="data-node-label">Test</span>
+        <span class="phase-connector-arrow">→</span>
+        <div class="phase-node" data-phase="test">
+          <span class="phase-icon">T</span>
+          <span class="phase-label">Test</span>
+          <div class="phase-glow"></div>
         </div>
-        <span class="data-arrow">→</span>
-        <div class="data-node glow-border">
-          <span class="data-node-icon">[C]</span>
-          <span class="data-node-label">Code</span>
+        <span class="phase-connector-arrow">→</span>
+        <div class="phase-node" data-phase="code">
+          <span class="phase-icon">C</span>
+          <span class="phase-label">Code</span>
+          <div class="phase-glow"></div>
         </div>
-        <span class="data-arrow">→</span>
-        <div class="data-node glow-border">
-          <span class="data-node-icon">[D]</span>
-          <span class="data-node-label">Docs</span>
+        <span class="phase-connector-arrow">→</span>
+        <div class="phase-node" data-phase="docs">
+          <span class="phase-icon">D</span>
+          <span class="phase-label">Docs</span>
+          <div class="phase-glow"></div>
         </div>
       </div>
 
@@ -2222,7 +2364,7 @@
     });
 
     // ============================================
-    // SECTION 1: INTRO ANIMATION
+    // SECTION 1: INTRO ANIMATION - HUSTLE BRAND + PHASE LIGHTING
     // ============================================
     const introTL = gsap.timeline({
       scrollTrigger: {
@@ -2232,15 +2374,69 @@
       }
     });
 
+    // Hustle brand title animation
     introTL
-      .to('#intro h1', { opacity: 1, duration: 0.6 })
-      .to('#packageName', { opacity: 1, duration: 0.5 }, '-=0.3')
+      .to('.hustle-word', {
+        opacity: 1,
+        y: 0,
+        duration: 0.5,
+        stagger: 0.15,
+        ease: 'back.out(1.7)'
+      })
+      .to('#packageName', { opacity: 1, duration: 0.4 }, '-=0.2')
       .to('#versionText', { opacity: 1, duration: 0.3 })
-      .to('.intro-text', { opacity: 1, duration: 0.6 }, '-=0.2')
-      .to('#introFlow', { opacity: 1, duration: 0.6 })
-      .to('#introFlow .data-node', { opacity: 1, y: 0, stagger: 0.15, duration: 0.4 }, '-=0.3')
-      .to('#introFlow .data-arrow', { opacity: 1, stagger: 0.1, duration: 0.2 }, '-=0.5')
-      .to('.scroll-hint', { opacity: 1, duration: 0.4 });
+      .to('.tagline', { opacity: 1, duration: 0.4 })
+      .to('.intro-text', { opacity: 1, duration: 0.5 }, '-=0.2')
+      .to('#introFlow', { opacity: 1, duration: 0.3 })
+      // Phase nodes appear one by one
+      .to('#introFlow .phase-node', {
+        opacity: 1,
+        y: 0,
+        duration: 0.3,
+        stagger: 0.12,
+        ease: 'power2.out'
+      })
+      // Arrows appear between nodes
+      .to('#introFlow .phase-connector-arrow', {
+        opacity: 1,
+        duration: 0.2,
+        stagger: 0.1
+      }, '-=0.4')
+      .to('.scroll-hint', { opacity: 1, duration: 0.4 }, '-=0.2');
+
+    // Phase lighting sequence - lights up each phase with red glow
+    const phaseNodes = document.querySelectorAll('#introFlow .phase-node');
+    const phaseArrows = document.querySelectorAll('#introFlow .phase-connector-arrow');
+
+    // Create a separate timeline for the lighting sequence that loops
+    const lightingTL = gsap.timeline({
+      repeat: -1,
+      repeatDelay: 1,
+      delay: 3 // Wait for intro animation to complete
+    });
+
+    phaseNodes.forEach((node, i) => {
+      lightingTL
+        .call(() => {
+          // Light up current node
+          node.classList.add('active');
+          // Light up the arrow before this node (if any)
+          if (i > 0 && phaseArrows[i-1]) {
+            phaseArrows[i-1].classList.add('active');
+          }
+        })
+        .to({}, { duration: 0.5 }); // Pause to show the lit state
+    });
+
+    // Keep all lit for a moment, then reset
+    lightingTL
+      .to({}, { duration: 1.5 })
+      .call(() => {
+        // Reset all
+        phaseNodes.forEach(node => node.classList.remove('active'));
+        phaseArrows.forEach(arrow => arrow.classList.remove('active'));
+      })
+      .to({}, { duration: 0.5 }); // Brief pause before restart
 
     // ============================================
     // SECTION 2: PROBLEMS ANIMATION

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hustle-together/api-dev-tools",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Interview-driven API development workflow for Claude Code - Automates research, testing, and documentation",
   "main": "bin/cli.js",
   "bin": {