# How the Extraction Pipeline Identifies Scroll-Driven Interaction Models in AI Website Cloning

> Discover how the extraction pipeline identifies scroll-driven interaction models through a three-pass sweep, capturing computed style changes and recording mechanisms like IntersectionObserver for AI website cloning.

- Repository: [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template)
- Tags: how-to-guide
- Published: 2026-07-10

---

**The extraction pipeline identifies scroll-driven interaction models by executing a mandatory three-pass interaction sweep (scroll, click, hover) that captures computed style changes at specific scroll positions and records the underlying mechanisms like IntersectionObserver or CSS animation-timeline in component specification files.**

The AI-Website-Cloner Template repository automates the replication of complex UI behaviors by analyzing how components respond to user interactions. Before generating any code, the extraction pipeline performs a systematic detection process to distinguish scroll-driven animations from click or hover triggers. This approach ensures that the resulting Next.js clone faithfully reproduces parallax effects, header transformations, and scroll-snap behaviors found in the original website.

## Pre-Extraction Interaction Sweep

The detection process begins with a **mandatory interaction sweep** defined in [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md) (section 5, lines 41-46). This sweep consists of three sequential passes: scroll, click, and hover.

During the **scroll pass**, the automation agent slowly traverses the page from top to bottom, pausing at each major section to observe visual changes. The pipeline specifically monitors for:

- Header style mutations (color, shadow, size) occurring at specific scroll positions
- Elements animating into view through fade-up, slide-in, or staggered effects
- Sidebars or tab indicators that automatically switch based on viewport position
- CSS scroll-snap points (`scroll-snap-type` properties)
- Presence of smooth-scroll libraries identified by class names like `.lenis` or `.locomotive-scroll`

The agent uses `getComputedStyle()` to capture pixel-perfect values before and after each scroll action, creating a differential snapshot of CSS properties.

## Detecting the Underlying Mechanism

When the pipeline observes a visual change during scrolling, it determines the exact trigger mechanism by scanning for specific scroll-driven APIs. The identification rules are codified in [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md) under "How to determine this" (lines 82-86).

The pipeline recognizes these scroll-driven patterns:

- **IntersectionObserver** – Detected via JavaScript inspection for lazy-loading or appear-on-scroll effects, including `rootMargin` configuration values
- **`position: sticky`** – Identified when elements maintain fixed positioning after crossing a threshold
- **CSS `animation-timeline`** – Flagged when keyframe-based scroll animations are present in the stylesheet
- **Direct JavaScript scroll listeners** – Caught when scripts manipulate style properties through `scroll` event handlers

For each detected mechanism, the pipeline records the trigger threshold (pixel offset or viewport ratio) alongside the before-and-after CSS states.

## Spec File Annotation

Once the interaction model is classified, the pipeline writes structured annotations into component specification files stored under `docs/research/components/`. These specifications explicitly define the scroll-driven behavior to ensure downstream builder agents generate correct logic.

A typical spec file contains:

```yaml
component: Header
interactionModel: scroll-driven
trigger:
  type: scroll-position
  value: 80   # px

before:
  backgroundColor: '#ffffff'
  boxShadow: 'none'
after:
  backgroundColor: '#f8f8f8'
  boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
transition:
  duration: 0.3s
  easing: ease-out

```

This explicit documentation prevents the builder from generating click-based interactions when the original design relies on scroll position. Scroll-driven components often reference animated SVGs stored in [`src/components/icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/icons.tsx), which the pipeline also extracts and catalogs.

## Implementation Example: Capturing Scroll-Driven Changes

The pipeline uses browser automation scripts to capture scroll-driven behaviors. Below is a representative JavaScript implementation that logs style changes during page scrolling:

```javascript
// Run in a browser MCP (Chrome, Playwright, etc.)
let prev = {};
let changes = [];

// Helper to capture computed style snapshot for a selector
function snapshot(selector) {
  const el = document.querySelector(selector);
  if (!el) return null;
  const style = getComputedStyle(el);
  return {
    opacity: style.opacity,
    transform: style.transform,
    top: style.top,
    left: style.left,
    // add any other properties you care about
  };
}

// Scroll the page slowly, pausing at each 100 px step
(async () => {
  const max = document.body.scrollHeight;
  for (let y = 0; y < max; y += 100) {
    window.scrollTo(0, y);
    await new Promise(r => setTimeout(r, 300)); // let animations settle

    // Example selector – replace with the element you are inspecting
    const sel = '[data-scroll-watch]';
    const cur = snapshot(sel);
    if (prev && cur && JSON.stringify(prev) !== JSON.stringify(cur)) {
      changes.push({
        scrollY: y,
        before: prev,
        after: cur,
      });
    }
    prev = cur;
  }
  console.log('Detected scroll-driven changes:', changes);
})();

```

The pipeline stores these detected changes in the research documentation, along with references to global CSS files like [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css) where scroll-snap types and smooth-scroll overrides are defined.

## Summary

- The extraction pipeline performs a **mandatory three-pass interaction sweep** (scroll, click, hover) before generating any code, as defined in [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md).
- **Scroll-driven detection** relies on `getComputedStyle()` to capture differential states at specific pixel offsets, identifying triggers like IntersectionObserver, sticky positioning, and CSS animation-timeline.
- Detected mechanisms are annotated in **YAML specification files** under `docs/research/components/` with precise trigger thresholds and before/after CSS values.
- The pipeline recognizes **smooth-scroll libraries** (Lenis, Locomotive Scroll) through class name inspection and records their configuration.
- **Active page driving** rather than static DOM inspection allows the pipeline to infer which CSS properties change in response to scroll events.

## Frequently Asked Questions

### How does the pipeline differentiate between scroll-driven and hover-driven animations?

The pipeline executes distinct interaction passes for each trigger type. During the scroll pass, it monitors for style changes while programmatically scrolling the viewport; during the hover pass, it simulates mouse movements. By comparing which actions cause specific CSS property changes—captured via `getComputedStyle()`—the system classifies the interaction model accurately in the component spec files.

### What specific scroll libraries does the extraction pipeline recognize?

According to the workflow documentation in [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md), the pipeline specifically identifies **Lenis** and **Locomotive Scroll** by scanning for CSS class names like `.lenis` or `.locomotive-scroll`. When detected, these libraries trigger additional inspection logic to capture their custom scroll physics and smooth-scrolling configurations.

### Where does the pipeline store the detected scroll interaction data?

The pipeline writes interaction annotations to component specification files stored under `docs/research/components/`. Each file documents the interaction model type (scroll-driven), trigger thresholds (pixel offsets or viewport ratios), and the specific CSS properties that change. This data is also referenced in [`docs/research/INSPECTION_GUIDE.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/docs/research/INSPECTION_GUIDE.md) and mirrored in [`.github/skills/clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.github/skills/clone-website/SKILL.md) for GitHub-based skill invocations.

### Why does the pipeline use getComputedStyle() instead of reading CSS files directly?

The pipeline uses `getComputedStyle()` to capture the **actual rendered values** of CSS properties after all stylesheets, inline styles, and JavaScript manipulations have been applied. Static file inspection cannot reveal runtime mutations caused by scroll event listeners or IntersectionObserver callbacks. By comparing computed styles before and after scroll actions, the pipeline detects the precise pixel values and transform matrices required to recreate the animation faithfully in the generated clone.