webgl-forensics 3.1.0

package/scripts/05-loading-sequence.js

@@ -0,0 +1,124 @@
+/**
+ * SCRIPT 05 — Loading Sequence & Preloader Analysis
+ * webgl-forensics skill | Phase 10 (Gap #5)
+ *
+ * Run via: evaluate_script immediately after page load (before scrolling)
+ * Purpose: Map the site's first-few-seconds experience:
+ *   - Preloader structure and animation
+ *   - Asset loading strategy (lazy, eager, priority)
+ *   - Suspense boundaries / loading states
+ *   - Progressive enhancement for 3D
+ *   - Performance budgets and timing
+ */
+(() => {
+  const result = {
+    preloader: null,
+    assetStrategy: {},
+    lazyLoadedElements: [],
+    suspenseBoundaries: [],
+    performanceTiming: {},
+    resourceHints: {},
+    criticalPath: {},
+  };
+
+  // ═══ PRELOADER DETECTION ═══
+  const preloaderSelectors = [
+    '[id*="preloader"]', '[id*="loader"]', '[id*="loading"]',
+    '[class*="preloader"]', '[class*="loader"]', '[class*="loading"]',
+    '[class*="intro"]', '[class*="splash"]', '[data-preloader]',
+  ];
+
+  const preloaderEl = document.querySelector(preloaderSelectors.join(', '));
+  if (preloaderEl) {
+    const cs = getComputedStyle(preloaderEl);
+    result.preloader = {
+      found: true,
+      tag: preloaderEl.tagName,
+      className: preloaderEl.className?.toString?.().slice(0, 100),
+      position: cs.position,
+      zIndex: cs.zIndex,
+      display: cs.display,
+      opacity: cs.opacity,
+      visibility: cs.visibility,
+      backgroundColor: cs.backgroundColor,
+      animationName: cs.animationName,
+      isCurrentlyVisible: cs.display !== 'none' && cs.visibility !== 'hidden' && cs.opacity !== '0',
+      children: [...preloaderEl.children].map(c => ({
+        tag: c.tagName,
+        className: c.className?.toString?.().slice(0, 60),
+        text: c.textContent?.trim().slice(0, 40),
+      })),
+    };
+  } else {
+    result.preloader = { found: false, note: 'No preloader detected — may have already completed or use inline JS logic' };
+  }
+
+  // ═══ RESOURCE HINTS ═══
+  result.resourceHints = {
+    preload: [...document.querySelectorAll('link[rel="preload"]')].map(l => ({ href: l.href, as: l.as, type: l.type })),
+    prefetch: [...document.querySelectorAll('link[rel="prefetch"]')].map(l => ({ href: l.href })),
+    preconnect: [...document.querySelectorAll('link[rel="preconnect"]')].map(l => l.href),
+    dnsPrefetch: [...document.querySelectorAll('link[rel="dns-prefetch"]')].map(l => l.href),
+  };
+
+  // ═══ LAZY LOADING ═══
+  result.lazyLoadedElements = [
+    ...[...document.querySelectorAll('img[loading="lazy"]')].map(el => ({ type: 'img', src: el.src?.slice(0, 80), loading: 'lazy' })),
+    ...[...document.querySelectorAll('[data-src], [data-lazy]')].map(el => ({ type: el.tagName, dataSrc: el.dataset.src?.slice(0, 80), lazy: true })),
+    ...[...document.querySelectorAll('iframe[loading="lazy"]')].map(el => ({ type: 'iframe', src: el.src?.slice(0, 80) })),
+  ].slice(0, 30);
+
+  // ═══ SUSPENSE / LOADING STATE BOUNDARIES ═══
+  // Next.js loading.tsx / Suspense boundaries
+  const loadingStates = [
+    ...document.querySelectorAll('[data-loading], [aria-busy="true"], [class*="skeleton"], [class*="shimmer"], [class*="placeholder"]'),
+  ];
+  result.suspenseBoundaries = loadingStates.map(el => ({
+    tag: el.tagName,
+    className: el.className?.toString?.().slice(0, 60),
+    ariaBusy: el.getAttribute('aria-busy'),
+  })).slice(0, 10);
+
+  // ═══ 3D PROGRESSIVE ENHANCEMENT ═══
+  // Does the site show a fallback when WebGL isn't available?
+  const fallbacks = document.querySelectorAll('[class*="fallback"], [class*="no-webgl"], [data-no-3d]');
+  result.progressiveEnhancement = {
+    fallbackElements: [...fallbacks].map(el => ({
+      tag: el.tagName,
+      className: el.className?.toString?.().slice(0, 60),
+      visible: getComputedStyle(el).display !== 'none',
+    })),
+    note: 'Compare fallback visibility with/without WebGL to understand degradation strategy',
+  };
+
+  // ═══ PERFORMANCE TIMING ═══
+  try {
+    const paint = performance.getEntriesByType('paint');
+    const fcp = paint.find(p => p.name === 'first-contentful-paint');
+    const fp = paint.find(p => p.name === 'first-paint');
+    const nav = performance.getEntriesByType('navigation')[0];
+
+    result.performanceTiming = {
+      firstPaint: fp?.startTime?.toFixed(0) + 'ms',
+      firstContentfulPaint: fcp?.startTime?.toFixed(0) + 'ms',
+      domInteractive: nav?.domInteractive?.toFixed(0) + 'ms',
+      domComplete: nav?.domComplete?.toFixed(0) + 'ms',
+      totalPageLoad: nav?.loadEventEnd?.toFixed(0) + 'ms',
+      transferSize: nav?.transferSize ? (nav.transferSize / 1024).toFixed(1) + 'KB' : 'unknown',
+    };
+
+    // Largest resources loaded
+    const resources = performance.getEntriesByType('resource');
+    result.heaviestResources = [...resources]
+      .sort((a, b) => b.transferSize - a.transferSize)
+      .slice(0, 10)
+      .map(r => ({
+        name: r.name.split('/').pop().slice(0, 60),
+        type: r.initiatorType,
+        size: (r.transferSize / 1024).toFixed(1) + 'KB',
+        duration: r.duration.toFixed(0) + 'ms',
+      }));
+  } catch(e) { result.performanceTiming = { error: e.message }; }
+
+  return result;
+})()

package/scripts/06-audio-extraction.js

@@ -0,0 +1,115 @@
+/**
+ * SCRIPT 06 — Audio & Web Audio API Extraction
+ * webgl-forensics skill | Phase 11 (Gap #6)
+ *
+ * Run via: evaluate_script (paste entire IIFE)
+ * Purpose: Map all audio systems — spatial audio in 3D scenes, scroll-triggered sound,
+ *          ambient soundscapes, Howler.js, Tone.js, raw Web Audio API graphs.
+ */
+(() => {
+  const result = {
+    webAudioAPI: { available: !!window.AudioContext || !!window.webkitAudioContext },
+    activeContexts: [],
+    libraries: {},
+    mediaElements: [],
+    scrollTriggeredAudio: [],
+    spatialAudio: false,
+  };
+
+  // ═══ WEB AUDIO CONTEXT DETECTION ═══
+  // Try to find any AudioContext instances attached to window or global scope
+  if (result.webAudioAPI.available) {
+
+    // Scan window for AudioContext instances
+    const ACInstanceKeys = Object.keys(window).filter(key => {
+      try {
+        const val = window[key];
+        return val instanceof AudioContext || val instanceof (window.webkitAudioContext || AudioContext);
+      } catch(e) { return false; }
+    });
+
+    result.activeContexts = ACInstanceKeys.map(key => {
+      const ctx = window[key];
+      return {
+        key,
+        state: ctx.state,        // 'running', 'suspended', 'closed'
+        sampleRate: ctx.sampleRate,
+        baseLatency: ctx.baseLatency?.toFixed(3),
+        currentTime: ctx.currentTime?.toFixed(2),
+        destination: {
+          channelCount: ctx.destination.channelCount,
+          maxChannelCount: ctx.destination.maxChannelCount,
+        },
+      };
+    });
+  }
+
+  // ═══ LIBRARY DETECTION ═══
+  if (window.Howl || window.Howler) {
+    result.libraries.howler = {
+      version: window.Howler?.codecs ? 'v2+' : 'detected',
+      globalVolume: window.Howler?.volume?.(),
+      ctx: window.Howler?.ctx?.state || 'unknown',
+      codecs: window.Howler?.codecs ? Object.keys(window.Howler.codecs) : [],
+    };
+  }
+
+  if (window.Tone) {
+    result.libraries.tone = {
+      version: window.Tone.version || 'detected',
+      context: window.Tone.getContext?.()?.state || 'unknown',
+      bpm: window.Tone.Transport?.bpm?.value,
+      transportState: window.Tone.Transport?.state,
+    };
+  }
+
+  if (window.buzz) result.libraries.buzz = 'detected';
+  if (window.SoundJS || window.createjs?.Sound) result.libraries.soundJS = 'detected';
+
+  // ═══ MEDIA ELEMENTS (audio/video) ═══
+  const mediaEls = [...document.querySelectorAll('audio, video')];
+  result.mediaElements = mediaEls.map(el => ({
+    tag: el.tagName,
+    src: el.src?.slice(0, 80) || el.currentSrc?.slice(0, 80),
+    autoplay: el.autoplay,
+    loop: el.loop,
+    muted: el.muted,
+    paused: el.paused,
+    readyState: el.readyState,
+    volume: el.volume,
+    className: el.className?.toString?.().slice(0, 60),
+    id: el.id || undefined,
+  }));
+
+  // ═══ AUDIO DATA ATTRIBUTES (scroll-triggered patterns) ═══
+  const audioTriggerEls = document.querySelectorAll('[data-audio], [data-sound], [data-sfx], [data-play], [class*="has-sound"]');
+  result.scrollTriggeredAudio = [...audioTriggerEls].map(el => ({
+    tag: el.tagName,
+    className: el.className?.toString?.().slice(0, 60),
+    dataAudio: el.dataset.audio,
+    dataSound: el.dataset.sound,
+    dataSfx: el.dataset.sfx,
+  }));
+
+  // ═══ SPATIAL AUDIO INDICATORS ═══
+  // PannerNode / AudioListener = spatial/positional audio (common in 3D scenes)
+  result.spatialAudio = Object.keys(window).some(key => {
+    try { return window[key] instanceof PannerNode || window[key] instanceof AudioListener; } catch(e) { return false; }
+  });
+
+  // ═══ AUDIO FEATURE SUMMARY ═══
+  result.summary = {
+    hasAudio: result.activeContexts.length > 0 || result.mediaElements.length > 0 || Object.keys(result.libraries).length > 0,
+    audioLibraries: Object.keys(result.libraries),
+    mediaCount: result.mediaElements.length,
+    contextCount: result.activeContexts.length,
+    spatialAudio: result.spatialAudio,
+    recommendation: result.activeContexts.length > 0
+      ? 'Active Web Audio contexts found — check for oscillators, filters, and gain nodes creating ambient sound.'
+      : result.mediaElements.length > 0
+      ? 'Standard media elements found — check autoplay/muted patterns for ambient video or audio tracks.'
+      : 'No obvious audio systems. Site may initialize audio on first user interaction (autoplay policy requirement).',
+  };
+
+  return result;
+})()

package/scripts/07-accessibility-reduced-motion.js

@@ -0,0 +1,133 @@
+/**
+ * SCRIPT 07 — Accessibility & Reduced Motion Mapping
+ * webgl-forensics skill | Phase 12 (Gap #7)
+ *
+ * Run via: evaluate_script twice — once normally, once with reduced-motion emulated
+ * Purpose: Map how the site degrades for users with motion sensitivity,
+ *          find CSS/JS reduced-motion kill-switches, ARIA patterns.
+ *
+ * To test with reduced motion active:
+ *   1. DevTools → Rendering tab → Emulate CSS media → prefers-reduced-motion: reduce
+ *   2. Re-run this script and compare output
+ */
+(() => {
+  const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  const prefersHighContrast = window.matchMedia('(prefers-contrast: more)').matches;
+
+  const result = {
+    userPreferences: {
+      prefersReducedMotion: prefersReduced,
+      prefersDarkMode: prefersDark,
+      prefersHighContrast: prefersHighContrast,
+    },
+    reducedMotion: {
+      cssRules: [],
+      jsKillSwitches: [],
+      activeAnimationsKilled: 0,
+    },
+    accessibility: {
+      ariaRoles: {},
+      ariaLive: 0,
+      skipLinks: 0,
+      focusVisible: false,
+      colorContrastNote: 'Manual check required — use axe DevTools or Lighthouse',
+    },
+    focusManagement: {},
+  };
+
+  // ═══ CSS REDUCED MOTION RULES ═══
+  try {
+    [...document.styleSheets].forEach(sheet => {
+      try {
+        [...sheet.cssRules].forEach(rule => {
+          if (rule instanceof CSSMediaRule) {
+            const media = rule.conditionText || rule.media?.mediaText || '';
+            if (/prefers-reduced-motion/.test(media)) {
+              result.reducedMotion.cssRules.push({
+                mediaQuery: media,
+                ruleCount: rule.cssRules?.length,
+                preview: [...rule.cssRules].slice(0, 3).map(r => r.cssText?.slice(0, 100)),
+              });
+            }
+          }
+        });
+      } catch(e) {}
+    });
+  } catch(e) {}
+
+  // ═══ ANIMATION STATE WITH REDUCED MOTION ═══
+  if (prefersReduced && document.getAnimations) {
+    const allAnims = document.getAnimations();
+    result.reducedMotion.activeAnimationsKilled = allAnims.filter(a => a.playState !== 'running').length;
+    result.reducedMotion.runningDespiteReducedMotion = allAnims.filter(a => a.playState === 'running').length;
+  }
+
+  // ═══ JS KILL-SWITCH PATTERNS ═══
+  // Can't read event listeners, but check for data attributes that signal reduced-motion handling
+  const reducedEls = document.querySelectorAll('[data-reduced-motion], [class*="reduced-motion"], [aria-reducedmotion]');
+  result.reducedMotion.jsKillSwitches = [...reducedEls].map(el => ({
+    tag: el.tagName,
+    className: el.className?.toString?.().slice(0, 60),
+  }));
+
+  // ═══ GSAP REDUCED MOTION ═══
+  if (window.gsap) {
+    // gsap.matchMedia is the canonical way to handle reduced motion in GSAP 3.11+
+    result.reducedMotion.gsapMatchMedia = !!window.gsap.matchMedia;
+    result.reducedMotion.gsapNote = window.gsap.matchMedia
+      ? 'Site uses gsap.matchMedia() — animations may be conditionally killed for reduced-motion preference'
+      : 'gsap.matchMedia() not detected — check if site manually reads matchMedia in JS';
+  }
+
+  // ═══ ARIA ROLES AUDIT ═══
+  const ariaRoles = {};
+  document.querySelectorAll('[role]').forEach(el => {
+    const role = el.getAttribute('role');
+    ariaRoles[role] = (ariaRoles[role] || 0) + 1;
+  });
+  result.accessibility.ariaRoles = ariaRoles;
+  result.accessibility.ariaLive = document.querySelectorAll('[aria-live]').length;
+  result.accessibility.skipLinks = document.querySelectorAll('[href="#main"], [href="#content"], .sr-only[href], .skip-link').length;
+
+  // ═══ FOCUS MANAGEMENT ═══
+  result.focusManagement = {
+    focusVisibleCSS: (() => {
+      try {
+        let found = false;
+        [...document.styleSheets].forEach(sheet => {
+          try {
+            [...sheet.cssRules].forEach(rule => {
+              if (rule.selectorText?.includes(':focus-visible')) found = true;
+            });
+          } catch(e) {}
+        });
+        return found;
+      } catch(e) { return false; }
+    })(),
+    outlineCSSNote: 'Check if body/global CSS has `outline: none` — this is an accessibility red flag',
+    dialogElements: document.querySelectorAll('[role="dialog"], dialog').length,
+    trapFocusPatterns: document.querySelectorAll('[data-focus-trap], [aria-modal="true"]').length,
+  };
+
+  // ═══ COLOR SCHEME SUPPORT ═══
+  result.colorScheme = {
+    metaColorScheme: document.querySelector('meta[name="color-scheme"]')?.content,
+    cssColorSchemeProperty: (() => {
+      try { return getComputedStyle(document.documentElement).colorScheme; } catch(e) { return 'unknown'; }
+    })(),
+    darkModeDataAttr: document.documentElement.dataset.theme || document.documentElement.classList.contains('dark') ? 'dark class detected' : null,
+    darkModeNote: 'Check if 3D scenes swap geometries, materials, or shaders between light/dark mode',
+  };
+
+  // ═══ RECOMMENDATION ═══
+  result.summary = {
+    reducedMotionCSSRules: result.reducedMotion.cssRules.length,
+    hasReducedMotionSupport: result.reducedMotion.cssRules.length > 0 || result.reducedMotion.jsKillSwitches.length > 0,
+    recommendation: result.reducedMotion.cssRules.length > 0
+      ? `Good: ${result.reducedMotion.cssRules.length} CSS @media (prefers-reduced-motion) rule(s) found.`
+      : 'Warning: No CSS reduced-motion rules detected. Site may not respect user motion preferences.',
+  };
+
+  return result;
+})()

package/scripts/08-complexity-scorer.js

@@ -0,0 +1,138 @@
+/**
+ * SCRIPT 08 — Complexity Scorer
+ * webgl-forensics skill | Structural Upgrade C
+ *
+ * Run via: evaluate_script AFTER all other phases have completed
+ * Input: Pass the collected data as JSON — or run standalone for rough scoring
+ * Output: Complexity score (1-100), rating, breakdown, and estimated rebuild time
+ *
+ * USAGE: Call this at the END of the forensics session.
+ * Pass collected phase data as input, or run standalone for auto-estimation.
+ */
+(() => {
+  const scores = {};
+  let total = 0;
+
+  // ═══ 1. 3D COMPLEXITY (0–25 pts) ═══
+  let s3d = 0;
+  const canvases = document.querySelectorAll('canvas');
+  if (canvases.length > 0) s3d += 5;
+  if (canvases.length > 1) s3d += 5; // multiple WebGL contexts = complex
+  // Check for custom shaders (ShaderMaterial markers)
+  if (window.THREE) {
+    s3d += 5;
+    // R3F = usually more complex setup
+    const hasR3F = [...canvases].some(c => c.__r$);
+    if (hasR3F) s3d += 5;
+  }
+  if (window.BABYLON) s3d += 8;
+  if (window.unityInstance) s3d += 15; // Unity = very hard to clone
+  // Post-processing strongly implies custom shaders
+  if (document.querySelectorAll('canvas').length > 0 && window.THREE) {
+    // Heuristic: large canvas on hero = likely custom shader + post processing
+    const heroCanvas = [...document.querySelectorAll('canvas')].find(c => c.offsetWidth > 400);
+    if (heroCanvas) s3d += 5;
+  }
+  scores['3D Engine'] = Math.min(s3d, 25);
+
+  // ═══ 2. ANIMATION COMPLEXITY (0–20 pts) ═══
+  let sAnim = 0;
+  if (window.gsap) sAnim += 5;
+  if (window.ScrollTrigger?.getAll?.()?.length > 3) sAnim += 5;
+  if (window.ScrollTrigger?.getAll?.()?.length > 10) sAnim += 5;
+  if (window.ScrollSmoother) sAnim += 3;
+  if (window.anime) sAnim += 3;
+  if (document.querySelector('[data-framer-appear-id]')) sAnim += 4;
+  if (window.lottie) sAnim += 3;
+  if (window.rive) sAnim += 5;
+  if (document.getAnimations?.()?.length > 20) sAnim += 3;
+  scores['Animation System'] = Math.min(sAnim, 20);
+
+  // ═══ 3. SCROLL COMPLEXITY (0–15 pts) ═══
+  let sScroll = 0;
+  if (window.__lenis) sScroll += 5;
+  if (window.LocomotiveScroll) sScroll += 5;
+  if (window.fullPage) sScroll += 8;
+  if (CSS?.supports?.('animation-timeline', 'scroll()')) sScroll += 4;
+  const scrollTriggerCount = window.ScrollTrigger?.getAll?.()?.length || 0;
+  if (scrollTriggerCount > 5) sScroll += 3;
+  if (scrollTriggerCount > 15) sScroll += 5;
+  scores['Scroll System'] = Math.min(sScroll, 15);
+
+  // ═══ 4. INTERACTION COMPLEXITY (0–15 pts) ═══
+  let sInteract = 0;
+  const cursor = document.querySelectorAll('[class*="cursor"]');
+  if (cursor.length > 0) sInteract += 5;
+  const magnetic = document.querySelectorAll('[data-magnetic], [class*="magnetic"]');
+  if (magnetic.length > 0) sInteract += 5;
+  const parallax = document.querySelectorAll('[data-parallax], [data-speed]');
+  if (parallax.length > 3) sInteract += 5;
+  const mixBlend = [...document.querySelectorAll('*')].slice(0, 200).filter(el => {
+    try { return getComputedStyle(el).mixBlendMode !== 'normal'; } catch(e) { return false; }
+  });
+  if (mixBlend.length > 3) sInteract += 3;
+  scores['Interaction Model'] = Math.min(sInteract, 15);
+
+  // ═══ 5. PAGE TRANSITION COMPLEXITY (0–10 pts) ═══
+  let sTrans = 0;
+  if (window.barba) sTrans += 7;
+  if (window.swup) sTrans += 5;
+  if (document.startViewTransition) sTrans += 4;
+  const overlays = [...document.querySelectorAll('[class*="overlay"], [class*="curtain"], [class*="wipe"]')]
+    .filter(el => {
+      const cs = getComputedStyle(el);
+      return cs.position === 'fixed' && parseInt(cs.zIndex) > 10;
+    });
+  if (overlays.length > 0) sTrans += 3;
+  scores['Page Transitions'] = Math.min(sTrans, 10);
+
+  // ═══ 6. AUDIO COMPLEXITY (0–5 pts) ═══
+  let sAudio = 0;
+  if (window.Howl || window.Howler) sAudio += 3;
+  if (window.Tone) sAudio += 5;
+  if (window.AudioContext || window.webkitAudioContext) sAudio += 2;
+  scores['Audio System'] = Math.min(sAudio, 5);
+
+  // ═══ 7. FRAMEWORK COMPLEXITY (bonus/penalty) ═══
+  let sFramework = 0;
+  if (window.__NEXT_DATA__) sFramework = 8; // Next.js App Router = moderate setup
+  else if (window.__NUXT__) sFramework = 8;
+  else if (window.Shopify) sFramework = 5; // Shopify has constraints
+  else if (document.querySelector('meta[name="generator"][content*="Webflow"]')) sFramework = 3; // no-code = harder to clone accurately
+  else if (document.querySelector('meta[name="generator"][content*="Framer"]')) sFramework = 4;
+  else sFramework = 5; // Unknown vanilla = medium complexity
+  scores['Framework'] = sFramework;
+
+  // ═══ TOTAL ═══
+  total = Object.values(scores).reduce((a, b) => a + b, 0);
+
+  // ═══ RATING ═══
+  let rating, emoji, estimatedDays;
+  if (total <= 20) { rating = 'Simple'; emoji = '🟢'; estimatedDays = '1–2 days'; }
+  else if (total <= 40) { rating = 'Moderate'; emoji = '🟡'; estimatedDays = '3–5 days'; }
+  else if (total <= 60) { rating = 'Complex'; emoji = '🟠'; estimatedDays = '1–2 weeks'; }
+  else if (total <= 80) { rating = 'Very Complex'; emoji = '🔴'; estimatedDays = '2–4 weeks'; }
+  else { rating = 'Extreme'; emoji = '⚫'; estimatedDays = '1–3 months'; }
+
+  // ═══ BREAKDOWN BAR ═══
+  const breakdown = Object.entries(scores).map(([k, v]) => {
+    const bar = '█'.repeat(Math.round(v / 2)) + '░'.repeat(Math.round((25 - v) / 5));
+    return `${k.padEnd(20)}: ${String(v).padStart(2)}pts ${bar}`;
+  }).join('\n');
+
+  return {
+    score: total,
+    maxScore: 100,
+    rating,
+    emoji,
+    estimatedRebuildTime: estimatedDays,
+    breakdown: scores,
+    visualBreakdown: breakdown,
+    recommendation: total > 60
+      ? 'High complexity. Focus on Phase 1 (3D shaders) and Phase 2 (GSAP timelines) first — those are the hardest to recreate.'
+      : total > 30
+      ? 'Moderate complexity. Animation system is the core challenge. Extract GSAP configs precisely.'
+      : 'Lower complexity. Focus on design tokens, CSS animations, and layout structure.',
+    verdict: `${emoji} ${rating} (${total}/100) — Estimated rebuild: ${estimatedDays}`,
+  };
+})()

package/scripts/09-visual-diff-validator.js

@@ -0,0 +1,113 @@
+/**
+ * SCRIPT 09 — Visual Diff & Clone Validation
+ * webgl-forensics skill | Phase 13 (Gap #8)
+ *
+ * Purpose: After building the clone, compare it against the source.
+ * Run on BOTH the source and clone — compare the JSON output.
+ *
+ * Automated comparison metrics:
+ *   - Color palette match
+ *   - Typography match
+ *   - Layout section count match
+ *   - Animation presence match
+ *   - Navigation structure match
+ */
+(() => {
+  const result = {
+    url: window.location.href,
+    timestamp: new Date().toISOString(),
+    snapshot: {},
+  };
+
+  // ═══ COLOR PALETTE FINGERPRINT ═══
+  const colors = new Set();
+  const sampleEls = [...document.querySelectorAll('*')].slice(0, 300);
+  sampleEls.forEach(el => {
+    try {
+      const cs = getComputedStyle(el);
+      if (cs.backgroundColor && cs.backgroundColor !== 'rgba(0, 0, 0, 0)') colors.add(cs.backgroundColor);
+      if (cs.color) colors.add(cs.color);
+    } catch(e) {}
+  });
+  result.snapshot.colorPalette = [...colors].slice(0, 20);
+
+  // ═══ TYPOGRAPHY FINGERPRINT ═══
+  const fonts = new Set();
+  sampleEls.forEach(el => {
+    try { fonts.add(getComputedStyle(el).fontFamily?.split(',')[0]?.trim()); } catch(e) {}
+  });
+
+  const bodyStyle = getComputedStyle(document.body);
+  result.snapshot.typography = {
+    bodyFont: bodyStyle.fontFamily?.split(',')[0]?.trim(),
+    bodySize: bodyStyle.fontSize,
+    bodyColor: bodyStyle.color,
+    bodyBg: bodyStyle.backgroundColor,
+    uniqueFonts: [...fonts].filter(Boolean).slice(0, 10),
+  };
+
+  // ═══ LAYOUT FINGERPRINT ═══
+  const sections = document.querySelectorAll('section, [class*="section"], main > div, [data-section]');
+  result.snapshot.layout = {
+    sectionCount: sections.length,
+    totalPageHeight: document.documentElement.scrollHeight,
+    viewportHeight: window.innerHeight,
+    navExists: !!document.querySelector('nav, header, [role="navigation"]'),
+    footerExists: !!document.querySelector('footer, [class*="footer"]'),
+    hasH1: !!document.querySelector('h1'),
+    h1Text: document.querySelector('h1')?.textContent?.trim().slice(0, 60),
+    linkCount: document.querySelectorAll('a').length,
+    imageCount: document.querySelectorAll('img').length,
+    canvasCount: document.querySelectorAll('canvas').length,
+  };
+
+  // ═══ ANIMATION PRESENCE FINGERPRINT ═══
+  result.snapshot.animations = {
+    hasGSAP: !!window.gsap,
+    scrollTriggerCount: window.ScrollTrigger?.getAll?.()?.length || 0,
+    hasLenis: !!(window.__lenis || document.querySelector('[data-lenis-prevent]')),
+    hasLocomotive: !!(window.LocomotiveScroll || document.querySelector('[data-scroll-container]')),
+    cssAnimationCount: (() => {
+      let count = 0;
+      sampleEls.forEach(el => {
+        try { if (getComputedStyle(el).animationName !== 'none') count++; } catch(e) {}
+      });
+      return count;
+    })(),
+    waapiCount: document.getAnimations?.()?.length || 0,
+  };
+
+  // ═══ NAVIGATION FINGERPRINT ═══
+  const nav = document.querySelector('nav, header, [role="navigation"]');
+  result.snapshot.navigation = nav ? {
+    linkCount: nav.querySelectorAll('a').length,
+    links: [...nav.querySelectorAll('a')].map(a => a.textContent?.trim().slice(0, 30)).filter(Boolean),
+    hasLogo: !!(nav.querySelector('svg, img, [class*="logo"]')),
+  } : null;
+
+  // ═══ COMPARISON INSTRUCTIONS ═══
+  result.instructions = [
+    '1. Run this script on SOURCE site → save output as source-snapshot.json',
+    '2. Run this script on CLONE site → save output as clone-snapshot.json',
+    '3. Compare key fields:',
+    '   - colorPalette: Colors should match within tolerance',
+    '   - typography.bodyFont: Must match exactly',
+    '   - layout.sectionCount: Should match ±1',
+    '   - layout.canvasCount: Must match',
+    '   - animations.scrollTriggerCount: Should be equal or close',
+    '4. Take full-page screenshots of both and visually compare',
+    '5. Use Chrome DevTools > Rendering > Show paint flashing to verify scroll performance',
+  ];
+
+  // ═══ PASS/FAIL CRITERIA (fill in manually after comparison) ═══
+  result.passFailTemplate = {
+    bodyFont: '[ ] SOURCE: _____ | CLONE: _____ | MATCH: Y/N',
+    backgroundColor: '[ ] SOURCE: _____ | CLONE: _____ | MATCH: Y/N',
+    sectionCount: '[ ] SOURCE: _____ | CLONE: _____ | MATCH: Y/N',
+    canvasExists: '[ ] SOURCE: _____ | CLONE: _____ | MATCH: Y/N',
+    scrollSmooth: '[ ] SOURCE: _____ | CLONE: _____ | MATCH: Y/N',
+    h1Match: '[ ] SOURCE: _____ | CLONE: _____ | MATCH: Y/N',
+  };
+
+  return result;
+})()