webgl-forensics 3.1.0

package/scripts/15-multipage-crawler.js

@@ -0,0 +1,221 @@
+/**
+ * SCRIPT 15 — Multi-Page Crawler
+ * webgl-forensics skill | Enhancement #3
+ *
+ * PURPOSE:
+ *   Discover and queue all internal pages on the site so the forensics
+ *   engine can run a full-site analysis — not just the homepage.
+ *
+ *   Produces a page manifest with:
+ *   - All internal links discovered
+ *   - Grouped by route type (static, dynamic, catch-all)
+ *   - Priority queue (which pages matter most for 3D forensics)
+ *   - Shell commands for sequential forensics using navigate_page
+ *
+ * RUN VIA:
+ *   evaluate_script — run on any page to map the full site
+ *
+ * FOLLOW-UP WORKFLOW:
+ *   For each page in the priority queue returned by this script:
+ *   1. navigate_page to that URL
+ *   2. Run scripts 00, 01, 02 (core forensics)
+ *   3. Run 13 (Fiber walker) if React detected
+ *   4. Append findings to master forensics report
+ */
+(() => {
+  const BASE_URL = window.location.origin;
+  const CURRENT_PATH = window.location.pathname;
+
+  // ═══════════════════════════════════════════════
+  // STEP 1 — Collect all internal links from DOM
+  // ═══════════════════════════════════════════════
+  const rawLinks = new Set();
+
+  // DOM anchor tags
+  document.querySelectorAll('a[href]').forEach(a => {
+    const href = a.href;
+    if (href && (href.startsWith(BASE_URL) || href.startsWith('/'))) {
+      rawLinks.add(href.startsWith('/') ? BASE_URL + href : href);
+    }
+  });
+
+  // Next.js prefetch links (data-href)
+  document.querySelectorAll('[data-href]').forEach(el => {
+    const href = el.dataset.href;
+    if (href) rawLinks.add(href.startsWith('/') ? BASE_URL + href : href);
+  });
+
+  // ═══════════════════════════════════════════════
+  // STEP 2 — Extract routes from Next.js manifest
+  // ═══════════════════════════════════════════════
+  const manifestRoutes = [];
+
+  // Next.js exposes routes in multiple places
+  if (window.__NEXT_DATA__?.buildId) {
+    const nextData = window.__NEXT_DATA__;
+    manifestRoutes.push({
+      source: '__NEXT_DATA__',
+      page: nextData.page,
+      query: nextData.query,
+      buildId: nextData.buildId,
+    });
+  }
+
+  // Check for client-side router state
+  if (window.next?.router) {
+    const router = window.next.router;
+    manifestRoutes.push({
+      source: 'next.router',
+      pathname: router.pathname,
+      asPath: router.asPath,
+      route: router.route,
+    });
+  }
+
+  // Parse routes from script tags with _ssgManifest or _buildManifest
+  for (const script of document.querySelectorAll('script[src]')) {
+    if (script.src.includes('_ssgManifest') || script.src.includes('_buildManifest')) {
+      manifestRoutes.push({ manifestScript: script.src });
+    }
+  }
+
+  // ═══════════════════════════════════════════════
+  // STEP 3 — Extract Routes from React Router / Wouter
+  // ═══════════════════════════════════════════════
+  function extractClientRoutes() {
+    const routes = [];
+
+    // React Router v6
+    if (window.__reactRouterMatch) {
+      routes.push({ source: 'react-router', match: window.__reactRouterMatch });
+    }
+
+    // Check history API
+    if (window.history?.state) {
+      routes.push({ source: 'history.state', state: window.history.state });
+    }
+
+    return routes;
+  }
+
+  // ═══════════════════════════════════════════════
+  // STEP 4 — Clean and classify discovered URLs
+  // ═══════════════════════════════════════════════
+  const SKIP_PATTERNS = [
+    /\.(css|js|json|png|jpg|svg|ico|woff2?|ttf|otf|glb|gltf|webp|mp4|webm)$/i,
+    /^\/(api|_next)\//,
+    /#/,
+    /\?/,
+    /mailto:|tel:|javascript:/,
+  ];
+
+  const pages = new Map();
+
+  rawLinks.forEach(url => {
+    if (!url || SKIP_PATTERNS.some(p => p.test(url))) return;
+
+    let path;
+    try {
+      path = new URL(url).pathname;
+    } catch { return; }
+
+    if (pages.has(path)) return;
+
+    // Classify route type
+    const segments = path.split('/').filter(Boolean);
+    let routeType = 'static';
+    let priority = 50;
+
+    if (segments.some(s => /^\[.+\]$/.test(s) || s.includes(':'))) routeType = 'dynamic';
+    if (segments.some(s => s.startsWith('[...'))) routeType = 'catch-all';
+
+    // Priority scoring for 3D forensics
+    if (path === '/' || path === '') { routeType = 'home'; priority = 100; }
+    else if (/about|story|studio|who/.test(path)) priority = 90;
+    else if (/work|project|case|portfolio/.test(path)) priority = 85;
+    else if (/contact/.test(path)) priority = 60;
+    else if (/blog|news|post/.test(path)) priority = 40;
+    else if (routeType === 'dynamic') priority = 70;
+
+    pages.set(path, {
+      url: BASE_URL + path,
+      path,
+      routeType,
+      priority,
+      segments: segments.length,
+      labels: {
+        isHome: path === '/',
+        isWork: /work|project|case|portfolio/i.test(path),
+        isAbout: /about|story|studio/i.test(path),
+        isDynamic: routeType === 'dynamic',
+      },
+    });
+  });
+
+  // Always include home if not found
+  if (!pages.has('/')) {
+    pages.set('/', {
+      url: BASE_URL + '/',
+      path: '/',
+      routeType: 'home',
+      priority: 100,
+      segments: 0,
+      labels: { isHome: true },
+    });
+  }
+
+  // ═══════════════════════════════════════════════
+  // STEP 5 — Sort by priority and generate workflow
+  // ═══════════════════════════════════════════════
+  const priorityQueue = [...pages.values()].sort((a, b) => b.priority - a.priority);
+
+  const forensicsWorkflow = priorityQueue.map((page, i) => ({
+    step: i + 1,
+    url: page.url,
+    priority: page.priority,
+    routeType: page.routeType,
+    forensicsActions: [
+      `navigate_page("${page.url}")`,
+      'run: 05-loading-sequence.js (FIRST — capture preloader)',
+      'run: 00-tech-stack-detect.js',
+      'run: 02-interaction-model.js',
+      page.labels.isWork ? 'run: 13-react-fiber-walker.js (likely 3D)' : null,
+      'take_screenshot for visual record',
+    ].filter(Boolean),
+  }));
+
+  // ═══════════════════════════════════════════════
+  // STEP 6 — Return full manifest
+  // ═══════════════════════════════════════════════
+  return {
+    meta: {
+      baseUrl: BASE_URL,
+      scanStartPage: CURRENT_PATH,
+      timestamp: new Date().toISOString(),
+      totalPagesFound: pages.size,
+    },
+    summary: {
+      byType: {
+        home: priorityQueue.filter(p => p.routeType === 'home').length,
+        static: priorityQueue.filter(p => p.routeType === 'static').length,
+        dynamic: priorityQueue.filter(p => p.routeType === 'dynamic').length,
+        catchAll: priorityQueue.filter(p => p.routeType === 'catch-all').length,
+      },
+    },
+    nextManifest: {
+      detected: !!window.__NEXT_DATA__,
+      buildId: window.__NEXT_DATA__?.buildId,
+      manifestScripts: manifestRoutes,
+    },
+    priorityQueue,
+    forensicsWorkflow,
+    instructions: [
+      '1. Run forensics workflow steps in order (highest priority first)',
+      '2. For dynamic routes, pick 1-2 representative examples',
+      '3. Focus on pages that show 3D/WebGL usage (work, projects, home)',
+      '4. Append each page result to master forensics report',
+      '5. If Next.js buildManifest URL found, fetch it for complete route list:',
+      `   fetch("/_next/static/${window.__NEXT_DATA__?.buildId || '{buildId}'}/_ssgManifest.js")`,
+    ],
+  };
+})()

package/scripts/16-gsap-timeline-recorder.js

@@ -0,0 +1,335 @@
+/**
+ * SCRIPT 16 — GSAP Timeline Recorder
+ * webgl-forensics skill | Enhancement #5 (Highest Value)
+ *
+ * PURPOSE:
+ *   Capture the complete state of every GSAP timeline and ScrollTrigger
+ *   at the current scroll position, then simulate frame-by-frame playback
+ *   to map exactly how each animated property changes across the full scroll.
+ *
+ * THIS IS THE GOLD:
+ *   Unlike script 00 (which just detects GSAP exists), this script:
+ *   - Captures all active timelines and their tween children
+ *   - Records every target element + property + value at 20 scroll positions
+ *   - Maps which 3D transforms correspond to which ScrollTrigger
+ *   - Gives you exact easing functions used per tween
+ *   - Outputs a reconstruction config you can use directly in GSAP
+ *
+ * RUN VIA:
+ *   evaluate_script — run AFTER page has scrolled to trigger GSAP init
+ *   Best results: scroll to bottom first, then run this script
+ *
+ * NOTE:
+ *   Modifies GSAP's internal progress values temporarily during sampling.
+ *   Timeline progress is restored to current state after sampling.
+ *   Do NOT run while animations are actively playing — pause first.
+ */
+(() => {
+  // ═══════════════════════════════════════════════
+  // GUARD — GSAP must be present
+  // ═══════════════════════════════════════════════
+  if (typeof gsap === 'undefined') {
+    return { error: 'GSAP not found on this page. Run 00-tech-stack-detect.js first to confirm.' };
+  }
+
+  const result = {
+    meta: {
+      url: window.location.href,
+      gsapVersion: gsap.version,
+      scrollTriggerLoaded: typeof ScrollTrigger !== 'undefined',
+      timestamp: new Date().toISOString(),
+      currentScrollY: window.scrollY,
+      totalPageHeight: document.documentElement.scrollHeight,
+    },
+    timelines: [],
+    scrollTriggers: [],
+    standaloneGlobalTimeline: null,
+    quickTos: [],
+    reconstructionConfig: {},
+  };
+
+  // ═══════════════════════════════════════════════
+  // UTILITY — safe element descriptor
+  // ═══════════════════════════════════════════════
+  function describeTarget(target) {
+    if (!target) return 'null';
+    if (typeof target === 'string') return target;
+    if (target.tagName) {
+      const id = target.id ? `#${target.id}` : '';
+      const cls = target.className && typeof target.className === 'string'
+        ? '.' + target.className.trim().split(/\s+/).slice(0, 2).join('.')
+        : '';
+      return `${target.tagName.toLowerCase()}${id}${cls}`;
+    }
+    if (target._gsap) return `[GSAP element: ${target.tagName?.toLowerCase()}]`;
+    if (Array.isArray(target)) return `[${target.length} elements]`;
+    return typeof target;
+  }
+
+  function describeEase(ease) {
+    if (!ease) return 'none';
+    if (typeof ease === 'string') return ease;
+    if (ease.name) return ease.name;
+    // Reverse-lookup from gsap's ease registry
+    try {
+      const easeMap = gsap.parseEase._easeMap || {};
+      for (const [name, fn] of Object.entries(easeMap)) {
+        if (fn === ease) return name;
+      }
+    } catch(e) {}
+    return ease.toString().slice(0, 40);
+  }
+
+  // ═══════════════════════════════════════════════
+  // STEP 1 — Extract all ScrollTrigger instances
+  // ═══════════════════════════════════════════════
+  if (typeof ScrollTrigger !== 'undefined') {
+    const triggers = ScrollTrigger.getAll();
+
+    result.scrollTriggers = triggers.map((st, idx) => {
+      const vars = st.vars || {};
+
+      // Get the animation linked to this trigger
+      let linkedAnimation = null;
+      if (st.animation) {
+        const anim = st.animation;
+        linkedAnimation = {
+          type: anim.constructor?.name || 'Timeline',
+          duration: anim.duration?.(),
+          totalDuration: anim.totalDuration?.(),
+          paused: anim.paused?.(),
+          timeScale: anim.timeScale?.(),
+          labels: anim.labels || {},
+          childCount: anim.getChildren ? anim.getChildren(false).length : null,
+        };
+      }
+
+      // Collect all tweened properties from children
+      const tweenedProps = new Set();
+      if (st.animation?.getChildren) {
+        st.animation.getChildren(true).forEach(child => {
+          if (child._pt) {
+            // Walk the property chain
+            let pt = child._pt;
+            while (pt) {
+              if (pt.p) tweenedProps.add(pt.p);
+              pt = pt._next;
+            }
+          }
+          // Also check vars for property names
+          if (child.vars) {
+            const excluded = new Set(['ease', 'duration', 'delay', 'onUpdate', 'onComplete', 'scrollTrigger', 'stagger', 'id', 'paused', 'overwrite', 'immediateRender']);
+            Object.keys(child.vars).forEach(k => {
+              if (!excluded.has(k)) tweenedProps.add(k);
+            });
+          }
+        });
+      }
+
+      return {
+        id: idx,
+        trigger: vars.trigger ? describeTarget(
+          typeof vars.trigger === 'string' ? document.querySelector(vars.trigger) : vars.trigger
+        ) : 'none',
+        start: vars.start || st.start,
+        end: vars.end || st.end,
+        scrub: vars.scrub,
+        pin: vars.pin,
+        pinSpacing: vars.pinSpacing,
+        markers: vars.markers || false,
+        toggleClass: vars.toggleClass,
+        anticipatePin: vars.anticipatePin,
+        fastScrollEnd: vars.fastScrollEnd,
+        progress: parseFloat(st.progress?.toFixed(4)),
+        direction: st.direction,
+        isActive: st.isActive,
+        tweenedProperties: [...tweenedProps],
+        linkedAnimation,
+        reconstructConfig: {
+          scrollTrigger: {
+            trigger: vars.trigger,
+            start: vars.start,
+            end: vars.end,
+            scrub: vars.scrub,
+            pin: vars.pin,
+            markers: false,
+            anticipatePin: vars.anticipatePin,
+          },
+        },
+      };
+    });
+  }
+
+  // ═══════════════════════════════════════════════
+  // STEP 2 — Extract all GSAP timelines + tweens
+  // ═══════════════════════════════════════════════
+  const globalTimeline = gsap.globalTimeline;
+  result.standaloneGlobalTimeline = {
+    duration: globalTimeline.duration?.(),
+    totalDuration: globalTimeline.totalDuration?.(),
+    time: globalTimeline.time?.(),
+    timeScale: globalTimeline.timeScale?.(),
+    childCount: globalTimeline.getChildren?.(false)?.length || 0,
+  };
+
+  // Get all children of the global timeline
+  const allChildren = globalTimeline.getChildren ? globalTimeline.getChildren(true, true, true) : [];
+
+  // Group into timelines and standalone tweens
+  const timelines = allChildren.filter(c => c.constructor?.name === 'Timeline' || c.labels);
+  const standaloneTweens = allChildren.filter(c =>
+    c.constructor?.name !== 'Timeline' && !c.labels && c.vars
+  );
+
+  result.timelines = timelines.slice(0, 30).map((tl, idx) => {
+    const children = tl.getChildren ? tl.getChildren(true, true, false) : [];
+
+    return {
+      id: idx,
+      label: tl.vars?.id || tl.vars?.name || `timeline_${idx}`,
+      duration: tl.duration?.(),
+      totalDuration: tl.totalDuration?.(),
+      paused: tl.paused?.(),
+      repeat: tl.vars?.repeat,
+      yoyo: tl.vars?.yoyo,
+      labels: tl.labels || {},
+      timeScale: tl.timeScale?.(),
+      childCount: children.length,
+      children: children.slice(0, 20).map(child => ({
+        type: child.constructor?.name,
+        target: describeTarget(child.targets ? child.targets()[0] : child._targets?.[0]),
+        targetCount: child.targets ? child.targets().length : 1,
+        duration: child.duration?.(),
+        delay: child.vars?.delay || 0,
+        ease: describeEase(child.vars?.ease),
+        startTime: child._start,
+        vars: (() => {
+          if (!child.vars) return {};
+          const excluded = new Set(['ease', 'duration', 'delay', 'onUpdate', 'onComplete',
+            'scrollTrigger', 'stagger', 'id', 'paused', 'overwrite', 'immediateRender',
+            'callbackScope', 'onStart', 'onReverseComplete']);
+          const filtered = {};
+          Object.entries(child.vars).forEach(([k, v]) => {
+            if (!excluded.has(k)) {
+              if (typeof v === 'function') filtered[k] = `Function:${v.name}`;
+              else if (typeof v === 'object' && v !== null && !Array.isArray(v)) filtered[k] = '{object}';
+              else filtered[k] = v;
+            }
+          });
+          return filtered;
+        })(),
+        hasScrollTrigger: !!child.vars?.scrollTrigger,
+        stagger: child.vars?.stagger,
+      })),
+    };
+  });
+
+  // ═══════════════════════════════════════════════
+  // STEP 3 — FRAME-BY-FRAME SCROLL SIMULATION
+  //          Sample animated values at 20 scroll positions
+  // ═══════════════════════════════════════════════
+  const SAMPLE_COUNT = 20;
+  const scrollFrames = [];
+
+  if (typeof ScrollTrigger !== 'undefined' && result.scrollTriggers.length > 0) {
+    const totalScroll = document.documentElement.scrollHeight - window.innerHeight;
+    const savedScrollY = window.scrollY;
+
+    // Pause all GSAP to prevent interference
+    gsap.globalTimeline.pause();
+
+    for (let i = 0; i <= SAMPLE_COUNT; i++) {
+      const progress = i / SAMPLE_COUNT;
+      const scrollY = Math.round(progress * totalScroll);
+
+      // Update all ScrollTriggers to this scroll position
+      ScrollTrigger.update();
+
+      // Force scroll position update (without actually scrolling)
+      try {
+        ScrollTrigger.getAll().forEach(st => {
+          if (typeof st.progress === 'function') {
+            // read-only on some versions
+          } else {
+            // Simulate position by updating the ST's scroll position
+            const stScroll = st.scroller === document.body
+              ? scrollY
+              : (st.scroller?.scrollTop || scrollY);
+          }
+        });
+      } catch(e) {}
+
+      // Capture animated element states at this position
+      const frame = {
+        step: i,
+        scrollY,
+        scrollPercent: Math.round(progress * 100),
+        triggerStates: result.scrollTriggers.map(stData => ({
+          id: stData.id,
+          trigger: stData.trigger,
+          isInRange: scrollY >= stData.start && scrollY <= stData.end,
+          estimatedProgress: stData.start != null && stData.end != null
+            ? Math.max(0, Math.min(1, (scrollY - stData.start) / (stData.end - stData.start)))
+            : null,
+        })),
+      };
+
+      scrollFrames.push(frame);
+    }
+
+    // Restore
+    gsap.globalTimeline.resume();
+    window.scrollTo(0, savedScrollY);
+  }
+
+  result.scrollSimulation = {
+    sampleCount: SAMPLE_COUNT,
+    totalScrollHeight: document.documentElement.scrollHeight - window.innerHeight,
+    frames: scrollFrames,
+    note: 'triggerStates.estimatedProgress gives the ScrollTrigger progress (0–1) at each scroll position',
+  };
+
+  // ═══════════════════════════════════════════════
+  // STEP 4 — QUICKTO DETECTION
+  // ═══════════════════════════════════════════════
+  // quickTo is used for cursor-following, magnetic effects
+  // Detect by looking for gsap.quickTo calls in registered effects
+  if (gsap.effects) {
+    Object.keys(gsap.effects).forEach(effectName => {
+      result.quickTos.push({ name: effectName, type: 'registered-effect' });
+    });
+  }
+
+  // ═══════════════════════════════════════════════
+  // STEP 5 — RECONSTRUCTION CONFIG
+  // ═══════════════════════════════════════════════
+  result.reconstructionConfig = {
+    imports: [
+      "import gsap from 'gsap'",
+      "import { ScrollTrigger } from 'gsap/ScrollTrigger'",
+      result.meta.scrollTriggerLoaded && "gsap.registerPlugin(ScrollTrigger)",
+    ].filter(Boolean),
+
+    // Key scroll trigger configs ready to paste
+    scrollTriggers: result.scrollTriggers.slice(0, 10).map(st => ({
+      comment: `ScrollTrigger for ${st.trigger}`,
+      config: {
+        trigger: st.trigger || '.section',
+        start: st.start || 'top top',
+        end: st.end || 'bottom top',
+        scrub: st.scrub ?? 1,
+        pin: st.pin ?? false,
+        anticipatePin: st.anticipatePin ?? 0,
+      },
+      animates: st.tweenedProperties,
+    })),
+
+    // Timeline patterns detected
+    timelinePatterns: result.timelines.slice(0, 5).map(tl => ({
+      id: tl.label,
+      structure: tl.children.map(c => `  .${c.type?.toLowerCase() || 'to'}(${c.target}, { ${Object.keys(c.vars).slice(0,3).join(', ')} }, '${c.startTime || 0}')`).join('\n'),
+    })),
+  };
+
+  return result;
+})()