How the AI Website Cloner Template Detects Scroll-Driven Interactions

The template delegates scroll detection to AI agents during a dedicated Reconnaissance phase, using computed-style snapshots, listener inspection, and CSS analysis rather than embedded hard-coded logic.

The JCodesMore/ai-website-cloner-template repository provides a behavior-first framework for cloning websites, where detecting scroll-driven interactions is handled through instructional workflows rather than static code. During the Interaction Sweep phase, AI agents analyze target websites to identify scroll-triggered animations, sticky positioning, and smooth-scroll libraries. This approach allows the template to adapt to diverse scroll behaviors across different sites without requiring manual updates to detection algorithms.

Reconnaissance-First Detection Architecture

Unlike traditional templates that embed scroll detection logic directly into the codebase, this repository instructs external AI agents (such as Claude Code or Codex) to perform dynamic analysis. The detection workflow is defined in instructional markdown files that guide agents through a systematic discovery process.

According to the source code in README.md (lines 90-92), the first phase of cloning involves extracting an "interaction sweep (scroll, click, hover, responsive)" from the target site. This establishes scroll detection as a foundational step before any code generation begins.

The specific methodology appears in .windsurf/workflows/clone-website.md (lines 60-85) and .opencode/commands/clone-website.md (lines 62-88), where agents receive explicit instructions to scroll first, observe changes, then classify the interaction model. This "don't click first" rule ensures that agents correctly distinguish between click-driven and scroll-driven components.

Three-Layer Scroll Detection Strategy

The template employs complementary tactics to capture scroll-driven behaviors accurately. Each tactic targets a different layer of the web stack, ensuring comprehensive coverage of modern scroll interactions.

Computed-Style Snapshotting

Agents capture before-and-after states by sampling computed styles at different scroll positions. At scroll position 0, the agent runs getComputedStyle() on target elements, then scrolls past hypothesized triggers (typically 100-150 px) and captures styles again.

These snapshots reveal CSS transitions triggered by scroll position, such as background color changes, box-shadow appearances, or opacity shifts. The resulting data is stored in the component specification under BEFORE STATE and AFTER STATE fields.

Scroll-Listener and Library Inspection

The agent inspects JavaScript execution contexts for event listeners on scroll, wheel, or IntersectionObserver. It specifically searches for known smooth-scroll libraries by checking for class names like .lenis or .locomotive-scroll in the DOM.

When detected, the agent records the specific mechanism—such as IntersectionObserver thresholds or scroll-snap-type configurations—in the specification's INTERACTION MODEL section. This enables the builder agents to replicate exact scroll behaviors using equivalent React or Next.js implementations.

CSS Property Analysis

Agents scan for declarative scroll behaviors in CSS, identifying constructs such as position: sticky, overflow-auto containers, scroll-snap-type properties, and keyframe animations tied to scroll progress. These clues indicate global scroll behaviors that affect multiple components.

Findings from this analysis are added to globals.css and noted in the specification as shared scroll contexts, ensuring that layout behaviors like sticky headers or scroll-snapping sections are preserved in the cloned output.

Key Files Defining Scroll Detection

The repository distributes scroll detection logic across several configuration and documentation files:

• README.md (lines 90-92): Defines the "interaction sweep" that initiates scroll detection during the Reconnaissance phase
• .windsurf/workflows/clone-website.md (lines 60-85): Provides the step-by-step recipe for spotting scroll-driven behaviors, including the scroll-first observation protocol
• .opencode/commands/clone-website.md (lines 62-88): Mirrors the Windsurf workflow instructions for the Opencode platform
• docs/research/INSPECTION_GUIDE.md (Phase 2): Lists concrete scroll-related items to identify, including infinite scroll, pagination, and virtual scrolling patterns
• .github/skills/clone-website/SKILL.md (lines 63-89): Reinforces detection patterns for GitHub Skills integrations

Practical Detection Implementation

While the template itself contains no executable detection scripts, the instructional files expect agents to generate logic similar to the following examples. These illustrate how an AI-driven script would implement the detection steps defined in the workflow documentation.

// Capture scroll-driven style changes using Puppeteer
import puppeteer from 'puppeteer';

async function captureScrollStates(url: string, selector: string) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(url, { waitUntil: 'networkidle2' });

  // Capture initial computed style
  const before = await page.evaluate((sel) => {
    const el = document.querySelector(sel);
    const style = window.getComputedStyle(el);
    return { bg: style.backgroundColor, shadow: style.boxShadow };
  }, selector);

  // Scroll past likely trigger point
  await page.evaluate(() => window.scrollBy(0, 200));
  await page.waitForTimeout(500);

  // Capture post-scroll style
  const after = await page.evaluate((sel) => {
    const el = document.querySelector(sel);
    const style = window.getComputedStyle(el);
    return { bg: style.backgroundColor, shadow: style.boxShadow };
  }, selector);

  await browser.close();
  return { before, after };
}

// Detect smooth-scroll libraries in the target document
function detectSmoothScroll(doc: Document): string | null {
  if (doc.querySelector('.lenis')) return 'Lenis';
  if (doc.querySelector('.locomotive-scroll')) return 'Locomotive Scroll';
  
  // Check for custom scroll listeners
  const scripts = Array.from(doc.scripts);
  for (const s of scripts) {
    if (s.textContent?.includes('requestAnimationFrame') && 
        /scroll/.test(s.textContent)) {
      return 'Custom scroll listener';
    }
  }
  return null;
}

Summary

• Agent-driven detection: The template uses instructional markdown files rather than hard-coded logic to guide AI agents in discovering scroll behaviors
• Three-tier analysis: Detection combines computed-style snapshots, JavaScript listener inspection, and CSS property scanning
• Behavior-first approach: Agents scroll through sections before clicking, ensuring accurate classification of interaction models
• Comprehensive documentation: Scroll detection workflows are defined across README.md, .windsurf/workflows/clone-website.md, .opencode/commands/clone-website.md, and related skill files
• Specification output: Detected scroll behaviors are documented with precise triggers, thresholds, and before/after states for reproduction in Next.js

Frequently Asked Questions

How does the template distinguish between scroll-driven and click-driven interactions?

The workflow files in .windsurf/workflows/clone-website.md and .opencode/commands/clone-website.md instruct agents to scroll first through a section and observe visual changes before attempting any clicks. If visual changes occur during scrolling, the component is classified as scroll-driven; if changes only occur after clicking, it is classified as click-driven. This sequential approach prevents misclassification of interactive elements.

What specific scroll libraries can the detection identify?

The inspection guidelines specifically mention Lenis and Locomotive Scroll as target libraries, identified by searching for CSS class names like .lenis or .locomotive-scroll. Additionally, agents look for generic indicators such as requestAnimationFrame loops containing scroll-related logic, which typically indicate custom smooth-scroll implementations.

Where is the scroll detection configuration stored in the repository?

Scroll detection logic is distributed across five key locations: the main README.md (lines 90-92) for high-level phase definitions, .windsurf/workflows/clone-website.md (lines 60-85) for Windsurf-specific instructions, .opencode/commands/clone-website.md (lines 62-88) for Opencode compatibility, docs/research/INSPECTION_GUIDE.md for detailed research criteria, and .github/skills/clone-website/SKILL.md (lines 63-89) for GitHub Skills integration.

Does the repository include executable scroll detection code?

No, the repository contains no compiled or executable detection scripts. Instead, it provides instructional markdown files that tell AI agents how to generate and execute detection logic dynamically. This design allows the template to remain language-agnostic and adapt to new scroll interaction patterns without code updates.

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