webgl-forensics 3.1.0

package/scripts/00-tech-stack-detect.js

@@ -0,0 +1,185 @@
+/**
+ * SCRIPT 00 — Universal Tech Stack Detection
+ * webgl-forensics skill | Phase 0
+ *
+ * Run via: evaluate_script (paste entire IIFE)
+ * Returns: full tech stack report object
+ */
+(() => {
+  const report = {
+    url: window.location.href,
+    timestamp: new Date().toISOString(),
+    framework: null,
+    rendering: { webgl: false, webgpu: false, canvas2d: false, svg: false, css3d: false },
+    libraries: {},
+    animations: {},
+    scroll: {},
+    pageTransitions: {},
+    audio: {},
+    accessibility: {},
+    fonts: [],
+    meta: {},
+    scripts: [],
+  };
+
+  // ═══ FRAMEWORK DETECTION ═══
+  if (window.__NEXT_DATA__) {
+    report.framework = { name: 'Next.js', router: window.__NEXT_DATA__?.page ? 'pages' : 'app', buildId: window.__NEXT_DATA__?.buildId };
+  } else if (window.__NUXT__) {
+    report.framework = { name: 'Nuxt', version: window.__NUXT__?.config?.public?.version || 'detected' };
+  } else if (window.Remix || document.querySelector('[data-remix-route]')) {
+    report.framework = { name: 'Remix', version: 'detected' };
+  } else if (document.querySelector('[data-reactroot]') || document.querySelector('#__next') || document.querySelector('#root[data-reactroot]')) {
+    report.framework = { name: 'React', version: window.React?.version || 'detected' };
+  } else if (document.querySelector('[data-v-]') || window.Vue) {
+    report.framework = { name: 'Vue', version: window.Vue?.version || 'detected' };
+  } else if (document.querySelector('[data-svelte-h]') || window.__svelte) {
+    report.framework = { name: 'Svelte/SvelteKit', version: 'detected' };
+  } else if (window.ng || document.querySelector('[ng-version]')) {
+    report.framework = { name: 'Angular', version: document.querySelector('[ng-version]')?.getAttribute('ng-version') || 'detected' };
+  } else if (document.querySelector('[data-astro-cid]') || document.querySelector('astro-island')) {
+    report.framework = { name: 'Astro', version: 'detected' };
+  } else if (document.querySelector('meta[name="generator"][content*="Gatsby"]')) {
+    report.framework = { name: 'Gatsby', version: 'detected' };
+  } else if (document.querySelector('meta[name="generator"][content*="WordPress"]')) {
+    report.framework = { name: 'WordPress', version: document.querySelector('meta[name="generator"]')?.content?.match(/\d[\d.]*/)?.[0] || 'detected' };
+  } else if (document.querySelector('meta[name="generator"][content*="Webflow"]')) {
+    report.framework = { name: 'Webflow', version: 'detected' };
+  } else if (document.querySelector('meta[name="generator"][content*="Framer"]') || window.__framer) {
+    report.framework = { name: 'Framer', version: 'detected' };
+  } else if (document.querySelector('meta[name="generator"][content*="Squarespace"]')) {
+    report.framework = { name: 'Squarespace', version: 'detected' };
+  } else if (document.querySelector('meta[name="generator"][content*="Wix"]') || window.wixBiSession) {
+    report.framework = { name: 'Wix', version: 'detected' };
+  } else if (window.Shopify) {
+    report.framework = { name: 'Shopify', version: 'detected' };
+  } else {
+    report.framework = { name: 'Unknown/Vanilla', version: null };
+  }
+
+  // ═══ 3D / RENDERING DETECTION ═══
+  const canvases = [...document.querySelectorAll('canvas')];
+  canvases.forEach(c => {
+    const gl2 = c.getContext('webgl2');
+    const gl = gl2 || c.getContext('webgl');
+    if (gl) report.rendering.webgl = { version: gl2 ? 2 : 1, renderer: gl.getParameter(gl.RENDERER), vendor: gl.getParameter(gl.VENDOR) };
+    if (c.getContext('2d')) report.rendering.canvas2d = true;
+    if (c.__r$) report.libraries.r3f = true;
+  });
+  if (navigator.gpu) report.rendering.webgpu = { available: true };
+  if (document.querySelectorAll('svg').length > 2) report.rendering.svg = { count: document.querySelectorAll('svg').length };
+  const bodyCs = getComputedStyle(document.body);
+  if (bodyCs.perspective !== 'none' || document.querySelector('[style*="transform-style: preserve-3d"]') || document.querySelector('[style*="perspective"]'))
+    report.rendering.css3d = true;
+
+  // 3D Libraries
+  if (window.THREE) report.libraries.three = { version: window.THREE.REVISION, source: 'global' };
+  else {
+    const s = [...document.querySelectorAll('script[src]')].find(s => /three/i.test(s.src));
+    if (s) report.libraries.three = { version: 'bundled', bundleUrl: s.src };
+  }
+  if (window.BABYLON) report.libraries.babylon = { version: window.BABYLON.Engine?.Version || 'detected' };
+  if (window.pc) report.libraries.playcanvas = { version: window.pc.version || 'detected' };
+  if (window.AFRAME) report.libraries.aframe = { version: window.AFRAME.version || 'detected' };
+  if (window.unityInstance || document.querySelector('[data-unity-loader]') || document.querySelector('#unity-container')) report.libraries.unity = true;
+  if (window.PIXI) report.libraries.pixi = { version: window.PIXI.VERSION || 'detected' };
+  if (window.p5) report.libraries.p5 = 'detected';
+  if (document.querySelector('spline-viewer') || window.__spline) report.libraries.spline = true;
+  if (window.ogl) report.libraries.ogl = 'detected';
+
+  // ═══ ANIMATION LIBRARY DETECTION ═══
+  if (window.gsap) report.animations.gsap = { version: window.gsap.version };
+  if (window.ScrollTrigger) report.animations.scrollTrigger = true;
+  if (window.ScrollSmoother) report.animations.scrollSmoother = true;
+  if (document.querySelector('[data-framer-appear-id]') || document.querySelector('[style*="--framer"]')) report.animations.framerMotion = true;
+  if (window.anime) report.animations.anime = { version: window.anime.version || 'detected' };
+  if (window.lottie || document.querySelector('lottie-player') || document.querySelector('[data-lottie]')) report.animations.lottie = true;
+  if (window.rive || document.querySelector('canvas[data-rive]') || document.querySelector('rive-canvas')) report.animations.rive = true;
+  if (window.Motion || window.motion) report.animations.motionOne = 'detected';
+  if (window.popmotion) report.animations.popmotion = 'detected';
+  if (window.velocity) report.animations.velocity = 'detected';
+
+  const waapi = document.getAnimations?.();
+  if (waapi?.length > 0) report.animations.waapi = { count: waapi.length };
+
+  let cssAnimCount = 0, cssTransitionCount = 0;
+  const sample = [...document.querySelectorAll('*')].slice(0, 300);
+  sample.forEach(el => {
+    const s = getComputedStyle(el);
+    if (s.animationName !== 'none') cssAnimCount++;
+    if (s.transitionProperty !== 'all' && s.transitionProperty !== 'none' && s.transitionDuration !== '0s') cssTransitionCount++;
+  });
+  if (cssAnimCount > 0) report.animations.cssAnimations = cssAnimCount;
+  if (cssTransitionCount > 0) report.animations.cssTransitions = cssTransitionCount;
+
+  // ═══ SCROLL LIBRARY DETECTION ═══
+  if (window.__lenis || document.querySelector('[data-lenis-prevent]') || document.querySelector('.lenis')) report.scroll.lenis = true;
+  if (window.LocomotiveScroll || document.querySelector('[data-scroll-container]')) report.scroll.locomotive = true;
+  if (window.ScrollMagic) report.scroll.scrollMagic = true;
+  if (window.fullPage || window.fullpage_api) report.scroll.fullPage = true;
+  if (window.pagePiling) report.scroll.pagePiling = true;
+  if (CSS?.supports?.('animation-timeline', 'scroll()')) report.scroll.nativeScrollDriven = true;
+  if (getComputedStyle(document.documentElement).scrollBehavior === 'smooth') report.scroll.smoothScroll = 'css';
+
+  // ═══ PAGE TRANSITION DETECTION ═══
+  if (window.barba) report.pageTransitions.barba = { version: window.barba.version || 'detected' };
+  if (window.swup) report.pageTransitions.swup = { version: window.swup.version || 'detected' };
+  if (document.startViewTransition || CSS?.supports?.('view-transition-name', 'root')) report.pageTransitions.viewTransitionsAPI = true;
+  if (document.querySelector('[data-router-view]')) report.pageTransitions.customRouter = true;
+
+  // ═══ AUDIO / WEB AUDIO API DETECTION ═══
+  try {
+    if (window.AudioContext || window.webkitAudioContext) {
+      // Check if any AudioContext is instantiated
+      report.audio.webAudioAPI = true;
+      if (window.Howl || window.Howler) report.audio.howler = { version: window.Howler?.version || 'detected' };
+      if (window.Tone) report.audio.tone = { version: window.Tone.version || 'detected' };
+      // Check media elements
+      const audioEls = document.querySelectorAll('audio, video');
+      if (audioEls.length > 0) report.audio.mediaElements = audioEls.length;
+    }
+  } catch(e) {}
+
+  // ═══ ACCESSIBILITY / REDUCED MOTION ═══
+  report.accessibility.prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  report.accessibility.prefersColorScheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  report.accessibility.ariaLive = document.querySelectorAll('[aria-live]').length;
+  report.accessibility.skipLinks = document.querySelectorAll('[href="#main"], [href="#content"], .skip-link').length;
+
+  // ═══ CSS FRAMEWORK DETECTION ═══
+  const hasClass = (patterns) => patterns.some(p => document.querySelector(p));
+  if (hasClass(['[class*="tw-"]', '[class*="bg-gray"]', '[class*="text-gray"]']) ||
+    (() => { try { return [...document.styleSheets][0]?.cssRules?.[0]?.cssText?.includes('--tw-') } catch(e) { return false; }})())
+    report.libraries.tailwind = true;
+  if (hasClass(['[class*="chakra-"]', '[data-chakra-component]'])) report.libraries.chakra = true;
+  if (hasClass(['[class*="MuiButton"]', '[class*="MuiBox"]'])) report.libraries.mui = true;
+  if (hasClass(['[class*="mantine-"]'])) report.libraries.mantine = true;
+  if (hasClass(['[class*="ant-"]'])) report.libraries.antd = true;
+  if (hasClass(['[class*="shadcn"]', '[data-radix-popper-content-wrapper]'])) report.libraries.shadcnRadix = true;
+
+  // ═══ META / HEAD ═══
+  report.meta = {
+    title: document.title,
+    description: document.querySelector('meta[name="description"]')?.content,
+    viewport: document.querySelector('meta[name="viewport"]')?.content,
+    ogImage: document.querySelector('meta[property="og:image"]')?.content,
+    charset: document.characterSet,
+    lang: document.documentElement.lang,
+    themeColor: document.querySelector('meta[name="theme-color"]')?.content,
+    colorScheme: document.querySelector('meta[name="color-scheme"]')?.content,
+  };
+
+  // ═══ FONT DETECTION ═══
+  try {
+    const fonts = new Set();
+    document.fonts.forEach(f => fonts.add(`${f.family} (weight:${f.weight} style:${f.style} status:${f.status})`));
+    report.fonts = [...fonts];
+  } catch(e) { report.fonts = ['detection failed']; }
+
+  // ═══ SCRIPT INVENTORY ═══
+  report.scripts = [...document.querySelectorAll('script[src]')].map(s => s.src)
+    .filter(s => !/gtag|analytics|pixel|facebook|hotjar|clarity|cdn\.cookie|recaptcha/i.test(s))
+    .slice(0, 40);
+
+  return report;
+})()

package/scripts/01-source-map-extractor.js

@@ -0,0 +1,73 @@
+/**
+ * SCRIPT 01 — Source Map & Bundle Analysis
+ * webgl-forensics skill | Phase 1 (NEW — Gap #1)
+ *
+ * Run via: evaluate_script (paste entire IIFE)
+ * Purpose: Find source maps and extract original un-minified shader + animation code
+ */
+(() => {
+  const result = {
+    bundler: null,
+    sourceMaps: [],
+    bundleUrls: [],
+    glslStrings: [],
+    gsapStrings: [],
+    threeStrings: [],
+    hasSourceMaps: false,
+  };
+
+  // ═══ COLLECT ALL JS BUNDLE URLS ═══
+  const scripts = [...document.querySelectorAll('script[src]')].map(s => s.src);
+  const moduleScripts = [...document.querySelectorAll('script[type="module"][src]')].map(s => s.src);
+  const allScripts = [...new Set([...scripts, ...moduleScripts])];
+
+  // Filter to likely app bundles (exclude CDNs and trackers)
+  result.bundleUrls = allScripts.filter(url =>
+    !/(gtag|analytics|pixel|facebook|hotjar|recaptcha|stripe|intercom|zendesk)/i.test(url)
+  );
+
+  // ═══ DETECT BUNDLER FROM CHUNK NAMING ═══
+  const urls = result.bundleUrls.join(' ');
+  if (/\/_next\/static\/chunks/.test(urls)) result.bundler = 'Next.js (webpack/turbopack)';
+  else if (/\/assets\/index-[a-z0-9]+\.js/.test(urls)) result.bundler = 'Vite';
+  else if (/\/static\/js\/(main|chunk)\.[a-z0-9]+\.js/.test(urls)) result.bundler = 'Create React App (webpack)';
+  else if (/\/dist\/[a-z0-9]+\.js/.test(urls)) result.bundler = 'webpack/rollup (generic)';
+  else if (/\.chunk\.js/.test(urls)) result.bundler = 'webpack (code splitting)';
+  else result.bundler = 'Unknown — check script URLs manually';
+
+  // ═══ CHECK FOR SOURCE MAP COMMENTS IN PERFORMANCE ENTRIES ═══
+  // Source maps are referenced via sourceMappingURL at end of each bundle
+  // We can't read bundle content from evaluate_script due to CORS/same-origin
+  // Instead, construct the map URLs and report them for manual fetch
+  result.sourceMaps = result.bundleUrls.map(url => ({
+    bundleUrl: url,
+    expectedMapUrl: url + '.map',
+    instruction: `Fetch ${url + '.map'} — if 200 OK, source map found. Parse with 'source-map' npm package.`,
+  }));
+
+  // ═══ SCAN INLINE SCRIPTS FOR SHADER CODE ═══
+  const inlineScripts = [...document.querySelectorAll('script:not([src])')];
+  const glslKeywords = /gl_Position|gl_FragColor|varying\s+|uniform\s+|attribute\s+|precision\s+(mediump|highp|lowp)|void\s+main\s*\(/g;
+  const gsapKeywords = /gsap\.(to|from|fromTo|timeline|set)|ScrollTrigger\.(create|getAll|batch)/g;
+  const threeKeywords = /new THREE\.|ShaderMaterial|RawShaderMaterial|vertexShader|fragmentShader|useFrame|useThree/g;
+
+  inlineScripts.forEach((script, i) => {
+    const content = script.textContent || '';
+    if (glslKeywords.test(content)) result.glslStrings.push({ scriptIndex: i, length: content.length, preview: content.slice(0, 200) });
+    if (gsapKeywords.test(content)) result.gsapStrings.push({ scriptIndex: i, length: content.length, preview: content.slice(0, 200) });
+    if (threeKeywords.test(content)) result.threeStrings.push({ scriptIndex: i, length: content.length, preview: content.slice(0, 200) });
+  });
+
+  result.hasSourceMaps = result.bundleUrls.length > 0;
+
+  // ═══ INSTRUCTIONS FOR NEXT STEPS ═══
+  result.nextSteps = [
+    '1. Use get_network_request to download each bundleUrl',
+    '2. Search downloaded content for: vertexShader, fragmentShader, ShaderMaterial, "gl_Position", "gl_FragColor"',
+    '3. For each bundleUrl, also fetch bundleUrl + ".map" to check for source maps',
+    '4. If source maps found, you have original component code — search for shader props',
+    `5. Bundler detected: ${result.bundler} — use this to understand chunk naming`,
+  ];
+
+  return result;
+})()

package/scripts/02-interaction-model.js

@@ -0,0 +1,129 @@
+/**
+ * SCRIPT 02 — Interaction Model Extraction
+ * webgl-forensics skill | Phase 7 (Gap #2)
+ *
+ * Run via: evaluate_script (paste entire IIFE)
+ * Purpose: Extract mouse parallax, magnetic cursor physics, touch/gesture handlers,
+ *          gyroscope bindings, and how interactions feed into 3D/animation systems.
+ */
+(() => {
+  const result = {
+    mouse: { parallax: [], magnetic: [], trails: [], blend: [] },
+    touch: { gestures: [], swipe: false, pinch: false },
+    gyroscope: { detected: false },
+    keyboard: { shortcuts: [] },
+    customCursor: null,
+    hoverEffects: [],
+    eventListenerSummary: {},
+  };
+
+  // ═══ CUSTOM CURSOR DETECTION ═══
+  const cursorEls = document.querySelectorAll('[class*="cursor"], [id*="cursor"], [data-cursor]');
+  if (cursorEls.length > 0) {
+    result.customCursor = {
+      elements: [...cursorEls].map(el => ({
+        tag: el.tagName,
+        className: el.className?.toString?.().slice(0, 80),
+        computedPosition: getComputedStyle(el).position,
+        computedMixBlend: getComputedStyle(el).mixBlendMode,
+        width: el.offsetWidth,
+        height: el.offsetHeight,
+      })),
+    };
+  }
+
+  // Check for mix-blend-mode: difference (inversion cursor pattern)
+  const inverseCursors = [...document.querySelectorAll('*')].filter(el => {
+    try { return getComputedStyle(el).mixBlendMode === 'difference'; } catch(e) { return false; }
+  }).slice(0, 5);
+  if (inverseCursors.length > 0) result.mouse.blend = inverseCursors.map(el => ({
+    tag: el.tagName,
+    className: el.className?.toString?.().slice(0, 60),
+    mixBlend: 'difference',
+  }));
+
+  // ═══ MAGNETIC ELEMENT DETECTION ═══
+  // Magnetic buttons typically have data attrs or class patterns
+  const magneticEls = document.querySelectorAll(
+    '[data-magnetic], [data-cursor-magnetic], [class*="magnetic"], [class*="attract"]'
+  );
+  result.mouse.magnetic = [...magneticEls].map(el => ({
+    tag: el.tagName,
+    text: el.textContent?.trim().slice(0, 40),
+    className: el.className?.toString?.().slice(0, 60),
+    magneticStrength: el.dataset.magnetic || el.dataset.cursorMagnetic || 'unknown',
+  }));
+
+  // ═══ PARALLAX ELEMENT DETECTION ═══
+  const parallaxEls = document.querySelectorAll(
+    '[data-parallax], [data-speed], [data-depth], [class*="parallax"], [data-mouse-parallax]'
+  );
+  result.mouse.parallax = [...parallaxEls].map(el => ({
+    tag: el.tagName,
+    speed: el.dataset.parallaxSpeed || el.dataset.speed || 'unknown',
+    depth: el.dataset.depth || el.dataset.parallaxDepth || 'unknown',
+    direction: el.dataset.parallaxDirection || 'both',
+  }));
+
+  // ═══ MOUSE TRAIL DETECTION ═══
+  const canvases = document.querySelectorAll('canvas');
+  canvases.forEach(c => {
+    // Small canvases overlaying full viewport = likely cursor trail
+    if (getComputedStyle(c).position === 'fixed' &&
+        (c.style.pointerEvents === 'none' || getComputedStyle(c).pointerEvents === 'none')) {
+      result.mouse.trails.push({
+        width: c.width, height: c.height,
+        note: 'Fixed, non-interactive canvas — likely cursor trail or background FX',
+      });
+    }
+  });
+
+  // ═══ TOUCH / GESTURE DETECTION ═══
+  // Look for touch-specific data attributes
+  const touchEls = document.querySelectorAll('[data-swipe], [data-touch], [class*="swiper"], [class*="slider"], [class*="carousel"]');
+  result.touch.swipe = touchEls.length > 0;
+
+  // Check for Swiper.js
+  if (window.Swiper) result.touch.swiper = { version: window.Swiper.version || 'detected' };
+  // Check for Embla
+  if (window.EmblaCarousel) result.touch.embla = true;
+  // Check for Hammer.js (gesture library)
+  if (window.Hammer) result.touch.hammer = 'detected';
+
+  // ═══ GYROSCOPE / DEVICE ORIENTATION ═══
+  // Can't confirm active listeners from JS, but check for device motion elements
+  result.gyroscope.detected = !!(window.DeviceOrientationEvent || window.DeviceMotionEvent);
+  result.gyroscope.hasPermission = typeof DeviceOrientationEvent?.requestPermission === 'function';
+  result.gyroscope.note = result.gyroscope.hasPermission
+    ? 'iOS 13+ — requires explicit user permission. Check for "requestPermission" calls on interaction.'
+    : 'Standard DeviceOrientation API available';
+
+  // ═══ KEYBOARD SHORTCUT DETECTION ═══
+  // Check if site adds custom keyboard handlers (common in portfolio sites)
+  result.keyboard.note = 'Keyboard listeners cannot be enumerated from JS. Check via event listener breakpoints in DevTools.';
+
+  // ═══ HOVER EFFECT CLASSIFICATION ═══
+  // Sample buttons and links to understand hover transform patterns
+  const interactiveEls = [...document.querySelectorAll('a, button, [role="button"]')].slice(0, 20);
+  result.hoverEffects = interactiveEls.map(el => {
+    const base = getComputedStyle(el);
+    return {
+      tag: el.tagName,
+      text: el.textContent?.trim().slice(0, 30),
+      cursor: base.cursor,
+      transition: base.transition?.slice(0, 100),
+      transform: base.transform,
+      overflow: base.overflow,
+      dataCursor: el.dataset.cursor || undefined,
+    };
+  });
+
+  // ═══ UNIFORMS THAT MIGHT BE DRIVEN BY MOUSE ═══
+  // Look for uniform names that suggest mouse input
+  result.mouseUniforms = {
+    commonNames: ['uMouse', 'uMousePos', 'mouse', 'mousePos', 'cursor', 'uCursor', 'pointer', 'uPointer'],
+    instruction: 'Search extracted shader uniforms for these names — they indicate mouse → GLSL binding',
+  };
+
+  return result;
+})()

package/scripts/03-responsive-analysis.js

@@ -0,0 +1,115 @@
+/**
+ * SCRIPT 03 — Responsive & Breakpoint Analysis
+ * webgl-forensics skill | Phase 8 (Gap #3)
+ *
+ * Run via: evaluate_script at multiple viewport widths
+ * Purpose: Detect how animations/3D changes at different breakpoints,
+ *          find mobile-kill switches for heavy effects, map responsive design tokens.
+ *
+ * USAGE: Run this at each breakpoint by resizing via resize_page tool:
+ *   - 375px (iPhone SE)
+ *   - 768px (iPad)
+ *   - 1024px (Laptop)
+ *   - 1440px (Desktop)
+ *   - 1920px (Wide)
+ */
+(() => {
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+
+  const result = {
+    viewport: { width: vw, height: vh, devicePixelRatio: window.devicePixelRatio },
+    breakpointCategory: vw < 768 ? 'mobile' : vw < 1024 ? 'tablet' : vw < 1440 ? 'laptop' : 'desktop',
+    visibleCanvases: 0,
+    hiddenCanvases: 0,
+    activeAnimations: 0,
+    pausedAnimations: 0,
+    reducedMotion: window.matchMedia('(prefers-reduced-motion: reduce)').matches,
+    cssBreakpoints: {},
+    mediaQueryMatches: {},
+    gridColumns: {},
+  };
+
+  // ═══ CANVAS VISIBILITY AT THIS VIEWPORT ═══
+  document.querySelectorAll('canvas').forEach(c => {
+    const rect = c.getBoundingClientRect();
+    const cs = getComputedStyle(c);
+    if (cs.display === 'none' || cs.visibility === 'hidden' || rect.width === 0) {
+      result.hiddenCanvases++;
+    } else {
+      result.visibleCanvases++;
+    }
+  });
+
+  // ═══ ANIMATION STATE AT THIS VIEWPORT ═══
+  if (document.getAnimations) {
+    const anims = document.getAnimations();
+    result.activeAnimations = anims.filter(a => a.playState === 'running').length;
+    result.pausedAnimations = anims.filter(a => a.playState === 'paused').length;
+  }
+
+  // GSAP kill/pause state at this viewport
+  if (window.gsap) {
+    const sts = window.ScrollTrigger?.getAll?.() || [];
+    result.scrollTriggersActive = sts.filter(st => !st.vars?.matchMedia).length;
+    result.scrollTriggersMediaQuery = sts.filter(st => !!st.vars?.matchMedia).length;
+
+    // Check for mm() matchMedia GSAP usage
+    result.gsapMatchMedia = !!window.ScrollTrigger?.matchMedia ||
+      !!window.gsap?.matchMedia;
+  }
+
+  // ═══ DETECT CSS BREAKPOINTS FROM STYLESHEETS ═══
+  try {
+    const mediaRules = [];
+    [...document.styleSheets].forEach(sheet => {
+      try {
+        [...sheet.cssRules].forEach(rule => {
+          if (rule instanceof CSSMediaRule) {
+            const condition = rule.conditionText || rule.media?.mediaText;
+            const widthMatch = condition.match(/(\d+)px/g);
+            if (widthMatch) mediaRules.push(condition);
+          }
+        });
+      } catch(e) {}
+    });
+    // Extract unique breakpoint values
+    const breakpointValues = new Set();
+    mediaRules.forEach(r => { r.match(/\d+/g)?.forEach(n => { if (n > 200 && n < 3000) breakpointValues.add(+n); }); });
+    result.cssBreakpoints.values = [...breakpointValues].sort((a, b) => a - b);
+    result.cssBreakpoints.mediaRules = [...new Set(mediaRules)].slice(0, 20);
+  } catch(e) {}
+
+  // ═══ COMMON BREAKPOINT TEST ═══
+  const breakpoints = { sm: 640, md: 768, lg: 1024, xl: 1280, '2xl': 1536 };
+  Object.entries(breakpoints).forEach(([name, width]) => {
+    result.mediaQueryMatches[name] = window.matchMedia(`(min-width: ${width}px)`).matches;
+  });
+
+  // ═══ LAYOUT GRID AT THIS VIEWPORT ═══
+  const gridContainers = [...document.querySelectorAll('[class*="grid"], [class*="container"], main, section')].slice(0, 10);
+  result.gridColumns = gridContainers.map(el => ({
+    tag: el.tagName,
+    className: el.className?.toString?.().slice(0, 60),
+    display: getComputedStyle(el).display,
+    gridTemplateColumns: getComputedStyle(el).gridTemplateColumns?.slice(0, 100),
+    width: el.offsetWidth,
+    maxWidth: getComputedStyle(el).maxWidth,
+  }));
+
+  // ═══ MOBILE PERFORMANCE KILL-SWITCHES ═══
+  // Look for elements hidden/simplified on mobile
+  const reducedEls = [...document.querySelectorAll('[class*="hidden"], [class*="mobile-hidden"], [data-mobile-disabled]')]
+    .filter(el => {
+      const cs = getComputedStyle(el);
+      return cs.display === 'none' || cs.visibility === 'hidden';
+    }).slice(0, 10);
+
+  result.mobileKillSwitches = {
+    hiddenElementCount: reducedEls.length,
+    elements: reducedEls.map(el => ({ tag: el.tagName, className: el.className?.toString?.().slice(0, 60) })),
+    note: 'Elements hidden at this viewport — compare across breakpoints to understand degradation strategy',
+  };
+
+  return result;
+})()

package/scripts/04-page-transitions.js

@@ -0,0 +1,128 @@
+/**
+ * SCRIPT 04 — Page Transition Extraction
+ * webgl-forensics skill | Phase 9 (Gap #4)
+ *
+ * Run via: evaluate_script (paste entire IIFE)
+ * Purpose: Detect SPA route transition systems — Barba.js, Swup, View Transitions API,
+ *          GSAP page wipes, custom transition overlays.
+ */
+(() => {
+  const result = {
+    detected: [],
+    transitionElements: [],
+    overlayElements: [],
+    viewTransitions: false,
+    nextjsTransitions: false,
+    navigationTiming: {},
+  };
+
+  // ═══ BARBA.JS ═══
+  if (window.barba) {
+    result.detected.push('Barba.js');
+    result.barba = {
+      version: window.barba.version || 'detected',
+      currentPageName: window.barba.wrapper?.dataset?.barbaNamespace || 'unknown',
+      containers: [...document.querySelectorAll('[data-barba="container"]')].map(el => ({
+        namespace: el.dataset.barbaNamaspace,
+        tag: el.tagName,
+      })),
+    };
+  }
+
+  // ═══ SWUP ═══
+  if (window.swup) {
+    result.detected.push('Swup');
+    result.swup = {
+      version: window.swup.version || 'detected',
+      containers: [...document.querySelectorAll('[id="swup"], [class*="swup"]')].map(el => el.id || el.className?.toString()?.slice(0, 40)),
+    };
+  }
+
+  // ═══ VIEW TRANSITIONS API ═══
+  if (document.startViewTransition) {
+    result.viewTransitions = true;
+    result.detected.push('View Transitions API (native)');
+    // Check CSS for view-transition-name declarations
+    try {
+      const vtElements = [];
+      [...document.querySelectorAll('*')].slice(0, 500).forEach(el => {
+        const vtn = getComputedStyle(el).getPropertyValue('view-transition-name');
+        if (vtn && vtn !== 'none') vtElements.push({ tag: el.tagName, name: vtn.trim() });
+      });
+      result.viewTransitionNames = vtElements;
+    } catch(e) {}
+  }
+
+  // ═══ NEXT.JS APP ROUTER TRANSITIONS ═══
+  if (window.__NEXT_DATA__ || document.querySelector('#__next')) {
+    result.nextjsTransitions = true;
+    result.detected.push('Next.js (built-in routing)');
+    // Check for next-view-transitions package
+    const vtScript = [...document.querySelectorAll('script[src]')].find(s => /view-transitions/i.test(s.src));
+    if (vtScript) result.nextjsViewTransitions = vtScript.src;
+  }
+
+  // ═══ TRANSITION OVERLAY ELEMENTS ═══
+  // Look for full-screen overlay elements used for page wipe transitions
+  const potentialOverlays = [...document.querySelectorAll('[class*="overlay"], [class*="transition"], [class*="curtain"], [class*="wipe"], [class*="cover"], [class*="loader"]')]
+    .filter(el => {
+      const cs = getComputedStyle(el);
+      return (cs.position === 'fixed' || cs.position === 'absolute') &&
+             parseFloat(cs.zIndex) > 10;
+    }).slice(0, 10);
+
+  result.overlayElements = potentialOverlays.map(el => ({
+    tag: el.tagName,
+    className: el.className?.toString?.().slice(0, 80),
+    position: getComputedStyle(el).position,
+    zIndex: getComputedStyle(el).zIndex,
+    backgroundColor: getComputedStyle(el).backgroundColor,
+    width: el.offsetWidth,
+    height: el.offsetHeight,
+    transform: getComputedStyle(el).transform,
+    opacity: getComputedStyle(el).opacity,
+    visibility: getComputedStyle(el).visibility,
+    display: getComputedStyle(el).display,
+    transition: getComputedStyle(el).transition?.slice(0, 100),
+    animation: getComputedStyle(el).animationName,
+  }));
+
+  // ═══ GSAP PAGE WIPE DETECTION ═══
+  // Look for GSAP timelines that target overlay-like elements
+  if (window.gsap) {
+    const sts = window.ScrollTrigger?.getAll?.() || [];
+    // Transitions that PIN the entire body or main element = page-level wipe
+    const pageLevelPins = sts.filter(st =>
+      st.vars?.pin && ['body', 'main', 'html', '#__next', '#app'].includes(st.trigger?.tagName?.toLowerCase() || '')
+    );
+    result.gsapPageWipes = pageLevelPins.map(st => ({
+      trigger: st.trigger?.tagName,
+      pin: st.vars.pin,
+      scrub: st.vars.scrub,
+      note: 'Page-level pin detected — likely a scroll-driven transition',
+    }));
+  }
+
+  // ═══ ANCHOR CLICK INTERCEPTION ═══
+  // Sites with custom transitions intercept anchor clicks
+  result.anchorInterception = {
+    note: 'Cannot enumerate click listeners from JS. Check DevTools Event Listeners panel on <a> tags.',
+    instruction: 'In DevTools: select any <a> element → Event Listeners panel → look for "click" handlers on parent elements',
+  };
+
+  // ═══ NAVIGATION PERFORMANCE TIMING ═══
+  try {
+    const nav = performance.getEntriesByType('navigation')[0];
+    result.navigationTiming = {
+      type: nav?.type, // 'navigate', 'reload', 'back_forward'
+      domContentLoaded: nav?.domContentLoadedEventEnd?.toFixed(0) + 'ms',
+      loadComplete: nav?.loadEventEnd?.toFixed(0) + 'ms',
+    };
+  } catch(e) {}
+
+  result.summary = result.detected.length > 0
+    ? `Detected: ${result.detected.join(', ')}`
+    : 'No standard page transition library detected. May use custom GSAP timelines or CSS transitions.';
+
+  return result;
+})()