# What Is the Mandatory Interaction Sweep in Website Cloning? > Discover the mandatory interaction sweep in website cloning. This vital inspection finds dynamic elements like scrolls and hovers missed by static images, securing accurate component specs before code generation. - Repository: [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template) - Tags: deep-dive - Published: 2026-07-02 --- **The mandatory interaction sweep is a systematic inspection pass that discovers dynamic behaviors—such as scroll-driven animations, hover states, and click interactions—that static screenshots cannot capture, ensuring accurate component specifications before code generation begins.** The JCodesMore/ai-website-cloner-template project relies on a **mandatory interaction sweep** to bridge the gap between static visual assets and functional web components. This critical step runs immediately after capturing full-page screenshots and before any extraction work begins, serving as the primary mechanism for documenting how a target website actually behaves when users interact with it. ## What Is the Mandatory Interaction Sweep? The **mandatory interaction sweep** is a dedicated inspection pass defined in [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md) (lines 37–63). Unlike static analysis, this sweep actively manipulates the page to surface hidden states and dynamic behaviors. According to the source code, the inspector performs four distinct actions during this phase: - **Scroll detection:** Slowly scrolling through the page while pausing at each section to observe header transformations, entrance animations, scroll-snap points, and smooth-scroll library triggers. - **Click exploration:** Activating every interactive element—including buttons, tabs, cards, and links—to record state changes such as modal openings, dropdown expansions, or content replacements. - **Hover state capture:** Moving over potential hover-sensitive elements (buttons, navigation items, images) to document visual changes like color shifts, scaling effects, shadow additions, or opacity adjustments. - **Responsive testing:** Validating layout behavior across three specific viewport widths: desktop at 1440px, tablet at 768px, and mobile at 390px, noting element visibility changes and breakpoint thresholds. All observations are compiled into [`docs/research/BEHAVIORS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/docs/research/BEHAVIORS.md), which serves as the authoritative "behavior bible" for subsequent specification writing. ## Why the Mandatory Interaction Sweep Is Required The sweep is mandatory because static screenshots fundamentally cannot reveal dynamic UI states. The workflow documentation in [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md) (lines 82–89) explicitly warns that "getting this wrong means a complete rewrite, not a CSS tweak." **Captures hidden states:** Many modern components exist in multiple visual states—such as tab bars with active panels or headers that transform on scroll—that remain invisible in a single static capture. **Prevents costly misidentification:** Confusing a scroll-driven section for a click-driven one (or vice versa) forces complete architectural redesigns later. The sweep eliminates this ambiguity by definitively documenting interaction models. **Ensures accurate builder specifications:** Builder agents receive precise interaction models (for example, "INTERACTION MODEL: scroll-driven with IntersectionObserver") directly from [`docs/research/BEHAVIORS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/docs/research/BEHAVIORS.md), allowing them to generate code that reproduces original behaviors without inference. **Supports comprehensive validation:** By creating a complete interaction inventory, the final build can be systematically tested against the original site's dynamic behavior, resulting in higher fidelity clones. ## How to Perform the Mandatory Interaction Sweep While the sweep can be performed manually, the repository provides implementation guidance for automated or assisted execution. The process involves systematically exercising the page's dynamic surface area. ### Scroll Behavior Detection During the scroll phase, the inspector monitors for `header.scrolled` class changes, IntersectionObserver triggers, and parallax effects. This identifies components that react to viewport position rather than user clicks. ### Click and State Mapping Every element matching `a, button, [role=button], [onclick]` selectors must be activated to document DOM mutations. The inspector records whether interactions trigger navigation, modal displays, or accordion expansions. ### Responsive Validation Testing occurs at the three specified breakpoints (1440px/768px/390px) to capture media query transitions and responsive layout shifts that might affect interaction targets. ## Implementation Example Below is a minimal JavaScript implementation you can paste into the browser console (or run via the MCP "Run Script" feature) to perform the core interaction sweep. This script logs actions and elements to the console, which can then be transferred to [`docs/research/BEHAVIORS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/docs/research/BEHAVIORS.md). ```javascript // ---- Interaction Sweep Helper ---- function logAction(type, el, details) { console.log(`[${type}]`, el, details); } // 1. Scroll sweep let lastY = window.scrollY; window.addEventListener('scroll', () => { if (Math.abs(window.scrollY - lastY) > 30) { logAction('SCROLL', document.scrollingElement, { y: window.scrollY, headerChanged: !!document.querySelector('header.scrolled') }); lastY = window.scrollY; } }); // 2. Click sweep document.querySelectorAll('a,button,[role=button],[onclick]').forEach(el => { el.addEventListener('click', e => { logAction('CLICK', el, { href: el.href, text: el.innerText }); }); }); // 3. Hover sweep document.querySelectorAll('a,button,.hoverable').forEach(el => { el.addEventListener('mouseenter', e => { const style = getComputedStyle(el); logAction('HOVER', el, { color: style.color, bg: style.backgroundColor }); }); }); ``` Running this script produces console entries like: ``` [SCROLL] {y: 320, headerChanged: true} [CLICK]