@trueclone/cli 0.1.0 → 0.2.0

package/README.md

@@ -23,30 +23,39 @@ npx @trueclone/cli init            # once per project: installs trueclone, the s
 
 ## Proof
 
-Two benchmarks with very different stacks, scored by the tool itself:
+Three benchmarks with very different stacks, scored by the tool itself:
 
 **[rea.tools](https://rea.tools/)**: static docs with a canvas game and interactive demos, exact mode (copied with the owner's permission).
 
 | Check | Desktop | Tablet | Mobile |
 |---|---|---|---|
 | Layout, real pixels | 100% | 100% | 100% |
-| Scroll states | 100% | 100% | 99.99% |
+| Scroll states | 100% | 100% | 100% |
 | Computed styles (≈280 points per width) | 100% | 100% | 100% |
 | Hover effects | 100% | | |
 | Interactions (copy, tabs, calculator, dinosaur game, language menu) | 5/5 | | |
 
-**A Webflow motorsport portfolio** built with GSAP, ScrollTrigger, SplitText, Lenis, Swiper and three.js (97 scroll triggers), template mode (own placeholder content):
+**A Next.js + React + Framer Motion developer landing page** (12,000px, 11 scroll reveals with spring easing, a scroll-state header, marquees, view-mounted components), template mode, **seeded automatically**: no hand-written layout code, no original text or media in the clone.
+
+| Check | Desktop | Tablet | Mobile |
+|---|---|---|---|
+| Layout, structure | 99.99% | 99.93% | 99.94% |
+| Scroll states | 99.96% | 99.92% | 99.94% |
+| Computed styles | 99.5% | 98.7% | 99.2% |
+| Hover effects | 100% | | |
+
+**A Webflow motorsport portfolio** built with GSAP, ScrollTrigger, SplitText, Lenis, Swiper and three.js (97 scroll triggers), template mode, built by hand before seeding existed:
 
 | Check | Desktop | Tablet | Mobile |
 |---|---|---|---|
 | Layout, structure | 99.6% | 99.7% | 96.8% |
-| Scroll states | 97.1% | 96.7% | 96.5% |
-| Motion curves | 96.1% | 98.2% | 100% |
-| Computed styles | 94% | 88.9% | 81.8% |
+| Scroll states | 98.0% | 96.6% | 96.5% |
+| Motion curves | 96.9% | 98.2% | 99.6% |
+| Computed styles | 94% | 88.9% | 85.4% |
 | Hover effects | 100% | | |
 | Interactions (drag sliders, drag gallery, cursor follow, menu, skip) | 5/5 | | |
 
-Not perfect yet, and the report says so: the computed-style check is below its 95% target (placeholder text in highlighted phrases, a scroll-linked colour fade, mobile spacing), and so is mobile layout. The generated Next.js app scores within half a point of the HTML clone on every check. A full scoring run takes 1 to 9 minutes.
+The hand-built portfolio isn't perfect yet, and its report says so: computed styles and mobile layout are below target (placeholder text in highlighted phrases, a scroll-linked colour fade, mobile spacing). The generated Next.js app scores within half a point of the HTML clone on every check. A full scoring run takes 1.5 to 9 minutes.
 
 ## How it works
 
@@ -61,7 +70,7 @@ URL ─► capture ─► understand ─► design system ─► build ─► sc
 1. **Capture** (`trueclone capture`): full-page screenshots at 390, 768 and 1440px, sections, rendered HTML, assets, every network request.
 2. **Understand** (`trueclone motion`, REA): reads the live animation runtime (GSAP timelines, ScrollTriggers, Lenis and Swiper settings, CSS animations, cursor-driven tweens) and, through REA, bundles, source maps, event listeners and API endpoints.
 3. **Design system** (`trueclone design`): one canonical `design-tokens.json`, rendered to DESIGN.md, globals.css and the clone's tokens.
-4. **Build**: your agent writes the clone, guided by the skill. `trueclone rules` shows the original's CSS for any element (like DevTools), `trueclone textshape` gives placeholder text the original's line breaks, `trueclone seed` starts an exact clone from a script-free mirror.
+4. **Build**: `trueclone reveals` records the original's scroll reveals frame by frame and its scroll-driven class changes; `trueclone widgets` clicks every tab and menu and records each state; `trueclone seed` turns the script-free mirror into the clone (template mode: layout-measured lorem text and same-size media placeholders) and replays what was recorded. Layout is at 99%+ before anyone writes CSS; your agent writes the remaining behaviour, guided by the skill. `trueclone rules` shows the original's CSS for any element (like DevTools).
 5. **Score** (`trueclone score`): layout pixel diff per section, scroll states replayed, motion curves sampled, interaction scenarios with change assertions, every hover, computed styles at matching points. Reference measurements are cached, so only the clone is re-measured.
 6. **Report**: `REPORT.md` with the verdict, what to fix first, and what was not copied.
 
@@ -99,7 +108,9 @@ npx trueclone <url> [name]              # capture + design-system draft
 npx trueclone capture <url> [name] [--mode exact --permission "<owner>"]
 npx trueclone motion <name>             # motion inventory
 npx trueclone design <name>             # DESIGN.md + globals.css
-npx trueclone seed <name>               # exact mode: start clone/ from the mirror
+npx trueclone reveals <name>            # record scroll reveals and scroll class changes
+npx trueclone widgets <name>            # record every tab and menu state
+npx trueclone seed <name>               # clone/ from the mirror (template: placeholder text and media)
 npx trueclone rules <name> "<selector>" # the original's CSS rules for an element
 npx trueclone textshape <name> --write  # template mode: placeholder text with the original's line breaks
 npx trueclone score <name> [--quick]    # every check, then REPORT.md

package/bin/trueclone.mjs

@@ -23,6 +23,8 @@ const STEPS = {
   seed: ['seed.mjs', 'exact mode: start clone/ from the script-free mirror (markup, text, styles, media)'],
   design: ['design.mjs', 'design-tokens.json -> DESIGN.md (linted), shadcn globals.css, clone/tokens.css'],
   motion: ['motion.mjs', 'motion inventory from the live runtime (GSAP/ScrollTrigger, Lenis, Swiper, CSS animations)'],
+  reveals: ['reveals.mjs', 'record one-shot scroll reveals frame by frame, so seed can replay them (any library)'],
+  widgets: ['widgets.mjs', 'record every tab and menu state by clicking it, so seed can replay them (template mode)'],
   states: ['states.mjs', 'live scroll states; --clone scores the rebuild step by step'],
   curves: ['curves.mjs', 'motion score: sampled property curves, reference vs clone (motion-map.json)'],
   interact: ['interact.mjs', 'interaction tests: click/hover/drag/key scenarios on both sides (interactions.json)'],
@@ -38,6 +40,11 @@ const STEPS = {
   report: ['report.mjs', 'REPORT.md from the latest scores: every number, every gap, what cannot be copied'],
 };
 
+// npm/npx are .cmd files on Windows and need a shell; Node warns (DEP0190) when a shell gets separate arguments, so
+// build one quoted command line there instead
+const spawnCmd = (cmd, args, opts = {}) => (process.platform === 'win32'
+  ? spawn([cmd, ...args].map((a) => (/[\s"]/.test(a) ? `"${a.replace(/"/g, '\\"')}"` : a)).join(' '), { ...opts, shell: true })
+  : spawn(cmd, args, opts));
 const run = (file, args) => new Promise((resolve) => {
   const child = spawn(process.execPath, [file, ...args], { stdio: 'inherit' });
   child.on('close', (code) => resolve(code ?? 1));
@@ -88,7 +95,7 @@ async function init() {
   if (!process.argv.includes('--no-install')) {
     if (!(await exists(path.join(cwd, 'package.json')))) await fs.writeFile(path.join(cwd, 'package.json'), `${JSON.stringify({ name: path.basename(cwd).toLowerCase().replace(/[^a-z0-9-]+/g, '-'), private: true }, null, 2)}\n`);
     const code = await new Promise((resolve) => {
-      const child = spawn(process.platform === 'win32' ? 'npm.cmd' : 'npm', ['install', '--save-dev', '--save-exact', `${name}@${version}`], { stdio: 'inherit', shell: process.platform === 'win32' });
+      const child = spawnCmd('npm', ['install', '--save-dev', '--save-exact', `${name}@${version}`], { stdio: 'inherit' });
       child.on('close', (c) => resolve(c ?? 1));
     });
     installed = code === 0 ? `${name}@${version} (dev dependency: npx trueclone <step> now runs it)` : `failed: run npm install -D ${name}@${version} yourself`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trueclone/cli",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A working twin of any website from its URL: HTML clone, Next.js + Tailwind + shadcn app, DESIGN.md and globals.css, proven by layout, motion, interaction and style scores. Bundles REA.",
   "type": "module",
   "bin": {

package/scripts/capture.mjs

@@ -1,6 +1,7 @@
 // Capture a live page as the clone's reference: full-page screenshots, sections, design tokens,
 // rendered HTML, CSS/image/font files and a HAR.
-// usage: node scripts/capture.mjs <url> [name] [--hide ".cookie-banner,#popup"] [--cdp [endpoint]]
+// usage: node scripts/capture.mjs <url> [name] [--hide ".cookie-banner,#popup"] [--cdp [endpoint]] [--mode exact --permission "<owner>"]
+//        node scripts/capture.mjs <url> <name> --mirror-only   (rebuild reference/mirror from the saved capture)
 import fs from 'node:fs/promises';
 import path from 'node:path';
 import crypto from 'node:crypto';
@@ -32,6 +33,14 @@ const SAVED_TYPES = new Set(['stylesheet', 'image', 'font', 'media']);
 const EXTRA_MEDIA = /\.(glb|gltf|bin|hdr|exr|ktx2|basis|mp4|webm|mov|m3u8|ts|m4s|lottie|riv|json)(\?|$)/i;
 const keepResponse = (type, url) => SAVED_TYPES.has(type) || (mode === 'exact' && ['fetch', 'xhr', 'other'].includes(type) && EXTRA_MEDIA.test(url));
 
+// --mirror-only: rebuild reference/mirror from an existing capture (no new screenshots, caches stay valid)
+if (flags['mirror-only']) {
+  const meta = JSON.parse(await fs.readFile(path.join(ref, 'meta.json'), 'utf8'));
+  const saved = JSON.parse(await fs.readFile(path.join(ref, 'assets', 'manifest.json'), 'utf8'));
+  await buildMirror(saved, meta.url, meta.mode === 'exact' ? `Exact mode, authorised by: ${meta.permission}.` : "Template mode: the site's own content, kept as a reference only.");
+  process.exit(0);
+}
+
 // Only clear what capture owns; states/, motion.*, *.spec.json come from other scripts and stay.
 await fs.rm(path.join(ref, 'assets'), { recursive: true, force: true });
 await fs.rm(path.join(ref, 'mirror'), { recursive: true, force: true });
@@ -106,16 +115,64 @@ try {
       });
     }
     await page.goto(url, { waitUntil: 'load', timeout: 60000 });
+    // Components that mount only while in view (a lazy wordmark, an embed) are often unmounted again by the time
+    // the DOM is saved. Watch from load: an element that was empty, got content while scrolled into view and is empty
+    // again at snapshot time is saved with the fullest content it had. Things that start full and empty out (a
+    // loader) are left alone.
+    if (desktop) await page.evaluate(() => {
+      const count = (el) => el.getElementsByTagName('*').length;
+      const initial = new WeakMap();
+      for (const el of document.body.getElementsByTagName('*')) initial.set(el, count(el));
+      window.__tcRich = new Map();
+      new MutationObserver((records) => {
+        for (const r of records) {
+          for (let el = r.target, up = 0; el instanceof Element && el !== document.body && up < 8; el = el.parentElement, up++) {
+            const start = initial.has(el) ? initial.get(el) : 0;
+            const n = count(el);
+            if (start > 0 || n === 0) continue;
+            const best = window.__tcRich.get(el);
+            if (!best || n > best.n) window.__tcRich.set(el, { n, html: el.innerHTML });
+          }
+        }
+      }).observe(document.body, { subtree: true, childList: true });
+    });
     await settle(page, hide);
-    await page.screenshot({ path: path.join(ref, `${vp.name}.png`), fullPage: true });
+    // A full-page screenshot brings the whole page into view at once, which mounts view-mounted components and starts
+    // their reveals: shoot until two shots agree, so the reference shows a settled page, not a fade caught at 0%.
+    let shot = await page.screenshot({ fullPage: true });
+    for (let tries = 0; tries < 3; tries++) {
+      await page.waitForTimeout(2000);
+      const again = await page.screenshot({ fullPage: true });
+      const same = again.equals(shot);
+      shot = again;
+      if (same) break;
+    }
+    await fs.writeFile(path.join(ref, `${vp.name}.png`), shot);
     const sections = await sectionsOf(page);
     await fs.writeFile(path.join(ref, `${vp.name}.sections.json`), JSON.stringify(sections, null, 2));
     const height = await page.evaluate(() => document.documentElement.scrollHeight);
     rootFontSize[vp.name] = await page.evaluate(() => getComputedStyle(document.documentElement).fontSize);
     if (desktop) {
       const html = await page.evaluate(() => {
+        // restore view-mounted content (see above): only elements that are empty again now
+        const restore = [];
+        let i = 0;
+        for (const [el, best] of window.__tcRich || []) {
+          if (!el.isConnected || el.getElementsByTagName('*').length > 0) continue;
+          el.setAttribute('data-tc-rich', String(i));
+          restore[i++] = best.html;
+        }
         const doc = document.documentElement.cloneNode(true);
+        for (const el of document.querySelectorAll('[data-tc-rich]')) el.removeAttribute('data-tc-rich');
+        for (const el of doc.querySelectorAll('[data-tc-rich]')) {
+          el.innerHTML = restore[Number(el.getAttribute('data-tc-rich'))];
+          el.removeAttribute('data-tc-rich');
+          // marked for the layout diff: a full-page still can't show view-mounted content on either side, so its box
+          // is excluded there (the scroll-state check, with a real viewport, scores it)
+          el.setAttribute('data-tc-viewmount', '');
+        }
         doc.querySelector('style[data-lab-freeze]')?.remove();
+        console.log(`tc-rich: restored ${restore.length} view-mounted element(s)`);
         return '<!DOCTYPE html>\n' + doc.outerHTML;
       });
       await fs.writeFile(path.join(ref, 'rendered.html'), html);
@@ -132,15 +189,16 @@ try {
 
 await fs.writeFile(path.join(ref, 'assets', 'manifest.json'), JSON.stringify(manifest, null, 2));
 await fs.writeFile(path.join(ref, 'meta.json'), JSON.stringify({ url, name, mode, permission, hide, capturedAt: new Date().toISOString(), rootFontSize, viewports: summary }, null, 2));
-if (mode === 'exact') await buildMirror();
+await buildMirror(manifest, url, mode === 'exact' ? `Exact mode, authorised by: ${permission}.` : "Template mode: the site's own content, kept as a reference only.");
 console.table(summary);
-console.log(`${manifest.length} assets saved. Reference: ${path.relative(process.cwd(), ref)}${mode === 'exact' ? ` (exact mode; mirror in reference/mirror, authorised by: ${permission})` : ''}`);
+console.log(`${manifest.length} assets saved. Reference: ${path.relative(process.cwd(), ref)}, mirror in reference/mirror${mode === 'exact' ? ` (exact mode, authorised by: ${permission})` : ''}`);
 
-// ---------- Exact mode: static local mirror of the rendered page ----------
+// ---------- Static local mirror of the rendered page ----------
 // Same DOM as rendered.html, asset URLs rewritten to the saved copies, every script and inline handler
 // removed (we never reuse the site's code), forms disabled, noindex. Static by design: motion is rebuilt
-// from the states/motion inventory, not replayed.
-async function buildMirror() {
+// from the states/motion inventory, not replayed. Exact mode seeds the clone from it as is; template mode
+// seeds it with every text and medium swapped for placeholders (seed.mjs).
+async function buildMirror(manifest, url, note) {
   const mirror = path.join(ref, 'mirror');
   await fs.rm(mirror, { recursive: true, force: true });
   await fs.mkdir(path.join(mirror, 'css'), { recursive: true });
@@ -155,7 +213,8 @@ async function buildMirror() {
     return path.relative(fromDir, path.join(ref, m.file)).replaceAll('\\', '/');
   };
   const rewriteCssUrls = (css, base, fromDir) => css
-    .replace(/url\(\s*(['"]?)([^'")]+)\1\s*\)/g, (all, q, u) => (u.startsWith('data:') ? all : `url("${local(abs(u, base), fromDir) || abs(u, base) || u}")`))
+    // url(#id) points inside the document (SVG gradients, filters, masks): never resolve it against the stylesheet
+    .replace(/url\(\s*(['"]?)([^'")]+)\1\s*\)/g, (all, q, u) => (u.startsWith('data:') || u.trim().startsWith('#') ? all : `url("${local(abs(u, base), fromDir) || abs(u, base) || u}")`))
     .replace(/@import\s+(['"])([^'"]+)\1/g, (all, q, u) => `@import "${local(abs(u, base), fromDir) || u}"`);
 
   // stylesheets: rewritten copies under mirror/css
@@ -182,7 +241,7 @@ async function buildMirror() {
     }).join(', ')}${q}`)
     .replace(/<style\b([^>]*)>([\s\S]*?)<\/style>/gi, (all, attrs, css) => `<style${attrs}>${rewriteCssUrls(css, url, mirror)}</style>`)
     .replace(/\sstyle=("|')([^"']*url\([^"']*)\1/gi, (all, q, css) => ` style=${q}${rewriteCssUrls(css, url, mirror)}${q}`)
-    .replace(/<head([^>]*)>/i, `<head$1>\n<!-- rea-lab local mirror of ${url}. Authorised by: ${permission.replace(/--/g, '-')}. Local reference only: do not deploy. -->\n<meta name="robots" content="noindex,nofollow">`);
+    .replace(/<head([^>]*)>/i, `<head$1>\n<!-- trueclone local mirror of ${url}. ${note.replace(/--/g, '-')} Local reference only: do not deploy. -->\n<meta name="robots" content="noindex,nofollow">`);
   await fs.writeFile(path.join(mirror, 'index.html'), html);
   const missing = [...html.matchAll(/\s(?:src|href)=["'](https?:[^"']+)["']/gi)].map((m) => m[1]).filter((u) => !/^https?:\/\/[^/]+\/?$/.test(u));
   console.log(`mirror: reference/mirror/index.html (${manifest.length} local assets, ${missing.length} remote URLs left, e.g. links)`);

package/scripts/diff.mjs

@@ -32,12 +32,27 @@ try {
     if (structure) await mask(page);
     const clonePath = path.join(out, `${vp.name}${suffix}.clone.png`);
     await page.screenshot({ path: clonePath, fullPage: true });
+    // View-mounted content (marked by capture): a full-page still can't show it on either side, so its boxes are
+    // painted the same flat colour in both images; the scroll-state check scores it with a real viewport.
+    const excluded = await page.evaluate(() => [...document.querySelectorAll('[data-tc-viewmount]')]
+      .map((e) => { const r = e.getBoundingClientRect(); return [r.left, r.top + scrollY, r.width, r.height].map(Math.round); })
+      .filter((r) => r[2] > 0 && r[3] > 0));
     await context.close();
 
     const a0 = PNG.sync.read(await fs.readFile(path.join(ref, `${vp.name}${suffix}.png`)));
     const b0 = PNG.sync.read(await fs.readFile(clonePath));
     const w = Math.max(a0.width, b0.width), h = Math.max(a0.height, b0.height);
     const a = pad(a0, w, h), b = pad(b0, w, h);
+    for (const [x, y, rw, rh] of excluded) {
+      for (const img of [a, b]) {
+        for (let yy = Math.max(0, y); yy < Math.min(h, y + rh); yy++) {
+          for (let xx = Math.max(0, x); xx < Math.min(w, x + rw); xx++) {
+            const i = (yy * w + xx) * 4;
+            img.data[i] = 64; img.data[i + 1] = 64; img.data[i + 2] = 64; img.data[i + 3] = 255;
+          }
+        }
+      }
+    }
     const diff = new PNG({ width: w, height: h });
     const bad = match(a, b, diff);
     await fs.writeFile(path.join(out, `${vp.name}${suffix}.diff.png`), PNG.sync.write(diff));
@@ -57,6 +72,7 @@ try {
       match: +(100 - (bad / (w * h)) * 100).toFixed(2),
       heightRef: a0.height,
       heightClone: b0.height,
+      excludedViewMounted: excluded.length,
       worstSections: [...perSection].sort((x, y) => x.match - y.match).slice(0, 5),
       sections: perSection,
     });

package/scripts/interact.mjs

@@ -64,7 +64,7 @@ const stateOf = (page, selector) => page.evaluate((sel) => {
   const r = el.getBoundingClientRect();
   // Besides geometry and visibility: text, state attributes and canvas pixels, so a button that changes its label,
   // a tab that flips aria-pressed or a game that redraws its canvas counts as a change too.
-  const attrs = ['class', 'aria-pressed', 'aria-current', 'aria-expanded', 'open', 'hidden', 'disabled']
+  const attrs = ['class', 'aria-pressed', 'aria-current', 'aria-expanded', 'aria-selected', 'data-state', 'open', 'hidden', 'disabled']
     .map((a) => (el.hasAttribute(a) ? `${a}=${el.getAttribute(a)}` : '')).join(',') // boolean attributes are "" + (el.value !== undefined ? `,${el.value}` : '');
   const text = el.textContent.replace(/\s+/g, ' ').trim().slice(0, 200);
   let pixels = '';
@@ -88,7 +88,7 @@ async function runSide(url, side, list) {
       await warmUp(page);
       const atSel = sc.at?.[side];
       if (atSel && atSel !== 'body') {
-        const y = await page.evaluate((s) => { const el = document.querySelector(s); return el ? el.getBoundingClientRect().top + scrollY : 0; }, atSel);
+        const y = await page.evaluate((sel) => { const [s, idx] = sel.split('@'); const el = document.querySelectorAll(s)[Number(idx || 0)]; return el ? el.getBoundingClientRect().top + scrollY : 0; }, atSel);
         await wheelTo(page, Math.max(0, Math.round(y + (sc.at.offset || 0))), vp);
       } else {
         await wheelTo(page, sc.at?.offset || 0, vp);
@@ -121,7 +121,11 @@ async function runSide(url, side, list) {
         else if (st.click) {
           const target = Array.isArray(st.click) ? st.click : st.click[side];
           if (Array.isArray(target)) await page.mouse.click(...px(target));
-          else await page.click(target, { timeout: 5000 }).catch((e) => results.push({ name: sc.name, error: `click ${target}: ${e.message.split('\n')[0]}` }));
+          else {
+            // selector@n: the n-th match, as everywhere else in the scenario file
+            const [s, idx] = target.split('@');
+            await page.locator(s).nth(Number(idx || 0)).click({ timeout: 5000 }).catch((e) => results.push({ name: sc.name, error: `click ${target}: ${e.message.split('\n')[0]}` }));
+          }
         } else if (st.key) await page.keyboard.press(st.key);
         else if (st.wait) await page.waitForTimeout(st.wait);
         else if (st.shot) await shot(st.shot);

package/scripts/lib.mjs

@@ -124,7 +124,26 @@ const MASK_CSS = `*,*::before,*::after{color:transparent!important;text-shadow:n
 ::placeholder{color:transparent!important}
 img,video{object-position:-99999px -99999px!important;background:#888!important}
 svg{background:#888!important} svg *{visibility:hidden!important} iframe{visibility:hidden!important}
-canvas{background:#888!important;filter:contrast(0) brightness(1.066)!important}`; // canvas = media (WebGL heroes, 3D models): flat grey box like images
+canvas{background:#888!important;filter:contrast(0) brightness(1.066)!important}
+[data-lab-cliptext]{background:none!important;-webkit-text-fill-color:transparent!important}
+[data-lab-bgb]::before,[data-lab-bga]::after{background-image:none!important;background-color:#888!important}`; // canvas = media (WebGL heroes, 3D models): flat grey box like images
+
+// What CSS alone can't select: gradient text (background-clip: text paints the glyphs with its background, so a
+// transparent colour still shows the letters) and photo backgrounds on ::before/::after. Marked with attributes
+// the mask CSS targets; `off` removes them.
+function maskExtrasInPage(enable) {
+  const marks = ['data-lab-cliptext', 'data-lab-bgb', 'data-lab-bga'];
+  if (!enable) {
+    for (const m of marks) for (const el of document.querySelectorAll(`[${m}]`)) el.removeAttribute(m);
+    return;
+  }
+  for (const el of document.querySelectorAll('*')) {
+    const s = getComputedStyle(el);
+    if (s.backgroundClip === 'text' || s.webkitBackgroundClip === 'text') el.setAttribute('data-lab-cliptext', '');
+    if (getComputedStyle(el, '::before').backgroundImage.includes('url(')) el.setAttribute('data-lab-bgb', '');
+    if (getComputedStyle(el, '::after').backgroundImage.includes('url(')) el.setAttribute('data-lab-bga', '');
+  }
+}
 
 export async function mask(page) {
   const tag = await page.addStyleTag({ content: MASK_CSS });
@@ -137,9 +156,23 @@ export async function mask(page) {
       }
     }
   });
+  await page.evaluate(maskExtrasInPage, true);
   await page.waitForTimeout(200);
 }
 
+// Endless animations (marquees, rotating borders, pulsing glows) sit at whatever phase the page's clock happens to
+// be at, so two screenshots of the same page differ. Before a still comparison, every infinite animation is put on
+// its first frame and paused, on both sides. Continuous motion is scored by the motion checks, not by stills.
+export async function freezeLoops(page) {
+  await page.evaluate(() => {
+    for (const a of document.getAnimations()) {
+      if (a.effect?.getTiming().iterations !== Infinity) continue;
+      a.currentTime = 0;
+      a.pause();
+    }
+  }).catch(() => {});
+}
+
 // Reversible version of mask() for live pages: on() masks, off() restores every inline style it touched.
 export async function maskToggle(page, on) {
   await page.evaluate(([css, enable]) => {
@@ -164,6 +197,7 @@ export async function maskToggle(page, on) {
       }
     }
   }, [MASK_CSS, on]);
+  await page.evaluate(maskExtrasInPage, on);
   await page.waitForTimeout(on ? 150 : 50);
 }