Interaction Model Detection in AI Website Cloning: Identifying Scroll, Click, and Time-Driven Behaviors

The AI agent follows a strict hierarchical detection workflow that tests for scroll-driven behaviors first using IntersectionObserver analysis, then validates click or hover triggers, and finally observes for time-based autonomous changes to classify each UI component's interaction model accurately.

The JCodesMore/ai-website-cloner-template repository implements a rigorous interaction model detection system that serves as the foundation for accurate code generation. Before producing React components, the system inspects target websites to determine whether sections react to scroll position, user clicks, hover states, or timed intervals, ensuring the cloned implementation matches the original behavior precisely.

The Three-Phase Detection Hierarchy

The detection algorithm follows a specific priority order defined in .windsurf/workflows/clone-website.md, requiring agents to test scroll behaviors before any other interaction type.

Phase 1: Scroll-Driven Detection

The workflow explicitly instructs: "Don't click first. Scroll through the section slowly and observe if things change on their own as you scroll"【/.windsurf/workflows/clone-website.md:75‑83】.

Scroll-driven components are identified by detecting IntersectionObserver usage in the source page, which typically powers sidebars where active items auto-change as content scrolls into view. The documentation specifies looking for "Scroll-driven tab/accordion switching – sidebars where the active item auto-changes as content scrolls past (IntersectionObserver, NOT click handlers)"【/.windsurf/workflows/clone-website.md:75‑78】.

If programmatic scroll detection reveals DOM mutations or class changes without user interaction, the component is classified as scroll-driven.

Phase 2: Click and Hover Validation

When scroll observation reveals no changes, the agent proceeds to "THEN click/hover to test for click/hover-driven interactivity"【/.windsurf/workflows/clone-website.md:85‑86】.

For click-driven detection, the agent must "click EACH ONE and record the content that appears for each state"【/.windsurf/workflows/clone-website.md:151‑154】. This validates that content changes occur only in response to explicit user events rather than viewport position or timing.

Phase 3: Time-Based Observation

Time-driven interactions, such as auto-rotating carousels, are identified by observing autonomous changes that occur without user input. The workflow directs agents to "test all interactive behaviors: scroll through the page, click every button/tab, hover over interactive elements" while noting any changes that happen after a delay【/.windsurf/workflows/clone-website.md:423‑426】.

If the DOM mutates after a waiting period (typically 5 seconds) without scroll or click events, the component receives a time-driven classification.

Recording the Interaction Model

Once detected, the interaction model must be explicitly documented in the component specification. The workflow requires an exact field format: INTERACTION MODEL: scroll-driven with IntersectionObserver or INTERACTION MODEL: click-to-switch with opacity transition【/.windsurf/workflows/clone-website.md:86‑89】.

This field drives code generation decisions, determining whether the output uses useEffect hooks with IntersectionObserver for scroll-driven sections, onClick handlers for click-driven tabs, or setInterval timers for time-driven carousels.

Implementation Code Examples

The following TypeScript patterns illustrate how agents implement these detection heuristics using headless browser automation:

// Scroll-driven detection via IntersectionObserver analysis
async function detectScrollDriven(page: Page): Promise<boolean> {
  const observerFound = await page.evaluate(() =>
    !!Array.from(document.querySelectorAll('script, *')).find(el =>
      el instanceof IntersectionObserver || el.textContent?.includes('IntersectionObserver')
    )
  );
  if (observerFound) return true;

  // Fallback: scroll and detect DOM mutations
  const initial = await page.content();
  await page.evaluate(() => window.scrollBy(0, 500));
  const after = await page.content();
  return initial !== after;
}

// Click-driven detection via event simulation
async function detectClickDriven(page: Page, selector: string): Promise<boolean> {
  const before = await page.$eval(selector, el => el.textContent);
  await page.click(selector);
  const after = await page.$eval(selector, el => el.textContent);
  return before !== after;
}

// Time-driven detection via delayed observation
async function detectTimeDriven(page: Page, waitMs = 5000): Promise<boolean> {
  const before = await page.content();
  await page.waitForTimeout(waitMs);
  const after = await page.content();
  return before !== after;
}

Source Documentation References

The detection workflow is defined across several canonical files:

• docs/research/INSPECTION_GUIDE.md – Lists Interactions (click, hover, focus, keyboard navigation) as one of six reconnaissance tasks【/__modal/volumes/vo-cSqLfqnnIwYXEonuEJnnZa/repos/github.com/JCodesMore/ai-website-cloner-template/master/docs/research/INSPECTION_GUIDE.md:38】
• .windsurf/workflows/clone-website.md – Contains the complete three-phase detection hierarchy and field specification format
• .github/skills/clone-website/SKILL.md – Embeds the same guidance for GitHub skills integration

Summary

• Interaction model detection follows a strict hierarchy: scroll first, click second, time third.
• Scroll-driven components are identified by IntersectionObserver usage or DOM mutations during viewport scrolling.
• Click-driven behaviors require manual validation by simulating events and confirming state changes.
• Time-driven interactions are detected by observing autonomous DOM changes after a delay period.
• Detection results are stored in a structured INTERACTION MODEL field that dictates subsequent code generation templates.

Frequently Asked Questions

What is interaction model detection in website cloning?

Interaction model detection is the systematic process of analyzing a website's UI components to determine how they respond to user actions or environmental changes. According to the JCodesMore/ai-website-cloner-template source code, this inspection step precedes code generation and classifies behaviors as scroll-driven, click-driven, time-driven, or static to ensure accurate React implementation.

How does the system prioritize different interaction types?

The system uses a hierarchical testing order defined in .windsurf/workflows/clone-website.md: agents must scroll first to check for IntersectionObserver-based behaviors, then test click and hover events if no scroll changes occur, and finally observe for time-based autonomous changes. This prevents misclassifying scroll-driven tabs as click-driven components.

What distinguishes time-driven from click-driven interactions?

Click-driven interactions require explicit user input (mouse clicks or hover events) to trigger content changes, while time-driven interactions occur automatically after a delay without any user action. The detection algorithm waits approximately 5 seconds after page load to identify carousels or animations that advance independently, classifying these separately from user-triggered behaviors.

Where is the detected interaction model stored?

After detection, the interaction model is recorded in the component specification under a dedicated field formatted as INTERACTION MODEL: <classification>. This field appears in the agent's output documentation and directly influences which React hooks and browser APIs are generated—for example, selecting IntersectionObserver for scroll-driven sections versus onClick handlers for click-driven tabs.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}