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

> Learn how our AI website cloner detects scroll click and time driven user interactions through a hierarchical workflow analyze UI components with IntersectionObserver and trigger validation.

- Repository: [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template)
- Tags: deep-dive
- Published: 2026-06-23

---

**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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.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:

```typescript
// 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;
}

```

```typescript
// 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;
}

```

```typescript
// 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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md)** – Contains the complete three-phase detection hierarchy and field specification format
- **[`.github/skills/clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.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.