Scroll-Driven vs Click-Driven Interaction Models in Website Cloning

Scroll-driven interaction models trigger UI state changes based on scroll position or viewport intersection thresholds, while click-driven models require explicit user clicks to toggle visibility or activate components—confusing these two paradigms during cloning creates architectural mismatches that require complete rewrites.

When using the JCodesMore/ai-website-cloner-template to replicate complex websites, accurately distinguishing between scroll-driven and click-driven interaction models is fundamental to the cloning pipeline's success. The repository's documentation explicitly warns that misidentifying these models constitutes "the #1 most expensive mistake" because the underlying state-change mechanisms are architecturally incompatible, forcing developers to scrap entire component implementations if detected incorrectly.

Core Differences Between Scroll-Driven and Click-Driven Models

The cloning pipeline inspects target websites to determine how interactive elements transition between states. These two primary interaction models differ fundamentally in their trigger mechanisms, detection strategies, and implementation requirements.

Trigger Mechanisms and State Detection

Scroll-driven interactions activate automatically as the user scrolls through the page. According to the source code analysis in .github/skills/clone-website/SKILL.md (lines 83-90), the cloner identifies these by detecting:

• IntersectionObserver crossings at specific viewport thresholds
• CSS scroll-snap points or position: sticky behaviors
• CSS animation-timeline or JavaScript scroll listeners
• Parallax effects tied to scroll position

When recording these behaviors, the cloner documents the exact scroll position or intersection ratio that triggers the before/after styles, labeling the spec as "INTERACTION MODEL: scroll-driven with IntersectionObserver."

Click-driven interactions require explicit user input. The cloner detects these via:

• onClick handlers attached to DOM elements
• Standard <button> or <a> elements that toggle visibility
• State changes triggered by direct user activation

These are documented as "INTERACTION MODEL: click-to-switch" with specific details about the opacity or class transitions involved.

Component Specification Structure

Each generated component specification includes an interactionModel field that clearly distinguishes between these paradigms. As defined in .github/skills/clone-website/SKILL.md (lines 174-318), valid values include <static | click-driven | scroll-driven | time-driven>.

For example, a scroll-driven tab component generates the following specification structure:

{
  "name": "FeatureTabs",
  "interactionModel": "scroll-driven",
  "trigger": {
    "type": "IntersectionObserver",
    "threshold": 0.5
  },
  "states": {
    "inactive": { "opacity": "0", "transform": "translateY(20px)" },
    "active":   { "opacity": "1", "transform": "translateY(0)" }
  }
}

Conversely, a click-driven component would list "interactionModel": "click-driven" with trigger details referencing the click event handler rather than intersection thresholds.

Technical Implementation Examples

The repository provides distinct implementation patterns for each interaction model. Below are the reference implementations used by the cloning pipeline.

Scroll-Driven Implementation with IntersectionObserver

When the cloner detects scroll-driven behavior, it generates React components utilizing the IntersectionObserver API to track viewport position:

import { useEffect, useRef, useState } from 'react';

export function ScrollDrivenTabs({ sections }: { sections: string[] }) {
  const ref = useRef<HTMLDivElement>(null);
  const [active, setActive] = useState(0);

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            const idx = Number(e.target.getAttribute('data-index'));
            setActive(idx);
          }
        });
      },
      { threshold: 0.5 }
    );
    ref.current?.querySelectorAll('[data-index]').forEach((el) => observer.observe(el));
    return () => observer.disconnect();
  }, []);

  return (
    <div className="tabs" ref={ref}>
      {sections.map((s, i) => (
        <section key={i} data-index={i} className={i === active ? 'active' : ''}>
          {s}
        </section>
      ))}
    </div>
  );
}

This implementation monitors scroll position continuously and updates state automatically when sections cross the 50% visibility threshold.

Click-Driven Implementation

For click-driven components, the generated code uses state hooks triggered by explicit user interaction:

import { useState } from 'react';

export function ClickDrivenTabs({ tabs }: { tabs: string[] }) {
  const [active, setActive] = useState(0);
  return (
    <div className="click-tabs">
      <nav>
        {tabs.map((t, i) => (
          <button key={i} onClick={() => setActive(i)} className={i === active ? 'selected' : ''}>
            Tab {i + 1}
          </button>
        ))}
      </nav>
      <section>{tabs[active]}</section>
    </div>
  );
}

The critical distinction: scroll-driven components observe the DOM and react to viewport changes, while click-driven components wait for event handlers to execute state transitions.

Why Interaction Model Detection Matters

The ai-website-cloner-template documentation in .github/skills/clone-website/SKILL.md (lines 83-90) provides an explicit warning: building a click-based UI where the original uses scroll-driven behavior (or vice-versa) forces a complete architectural rewrite because the state-management strategies are fundamentally incompatible.

The .windsurf/workflows/clone-website.md file (lines 80-87) reinforces this with specific workflow guidance: "determine the interaction model FIRST by scrolling before clicking." This reconnaissance sequence ensures that the cloner observes passive scroll behaviors before attempting to trigger click events, preventing false positives where scroll animations might be mistaken for click transitions.

Source Files and Implementation Context

Several key files govern how these interaction models are detected and processed:

• README.md (lines 90-92): Describes the multi-phase reconnaissance pipeline where both scroll and click behaviors are inspected during the initial analysis phase.

• .github/skills/clone-website/SKILL.md: Contains the explicit checklist for identifying interaction models and documents the "INTERACTION MODEL" specification field format.

• .windsurf/workflows/clone-website.md: Provides workflow-specific instructions emphasizing the scroll-first detection sequence to avoid expensive refactoring.

• AGENTS.md: Central documentation hub where interaction model specifications are imported for all supported AI agents.

• src/lib/utils.ts: Contains the cn() utility function used by generated components to handle class name merging consistently across both scroll-driven and click-driven implementations.

Summary

• Misidentification is costly: Confusing scroll-driven and click-driven models requires complete component rewrites, making accurate detection the highest priority during cloning.

• Scroll-driven behaviors rely on viewport position, intersection ratios, and CSS scroll mechanisms that update state automatically without user interaction.

• Click-driven behaviors depend on explicit event handlers attached to buttons or interactive elements that trigger state changes only upon user activation.

• Specification integrity: Every component spec must include the correct interactionModel value (scroll-driven or click-driven) with corresponding trigger details to ensure faithful reproduction.

• Detection sequence matters: The workflow explicitly requires inspecting scroll behavior before testing clicks to accurately capture the intended interaction paradigm.

Frequently Asked Questions

How does the AI cloner detect whether an interaction is scroll-driven or click-driven?

The cloner performs a reconnaissance phase that observes both passive scroll behaviors and active click events. According to README.md (lines 90-92), the agent first monitors scroll position changes and IntersectionObserver thresholds to identify scroll-driven triggers, then tests click handlers to detect click-driven behaviors. This sequential approach prevents misclassification when components might support both input methods.

What happens if I implement a click handler for a component that should be scroll-driven?

Implementing click handlers for scroll-driven content creates a broken user experience and requires architectural refactoring. As noted in .github/skills/clone-website/SKILL.md (lines 83-90), this mismatch is labeled "the #1 most expensive mistake" because scroll-driven components must continuously monitor viewport position via IntersectionObserver or scroll listeners, while click-driven components use isolated event handlers—swapping these approaches necessitates rewriting the state management logic entirely.

Can a single component use both scroll-driven and click-driven interaction models?

While technically possible in custom implementations, the ai-website-cloner-template treats these as distinct mutually exclusive categories in the component specification. The interactionModel field accepts values of <static | click-driven | scroll-driven | time-driven> but does not support hybrid classifications. Complex components requiring both behaviors would need separate sub-components with distinct interaction models specified in the generated architecture.

Where is the interaction model documented in the cloned output?

Each generated component contains an interactionModel field in its JSON specification, as defined in .github/skills/clone-website/SKILL.md (lines 174-318). This field explicitly states whether the component is scroll-driven (with details like intersectionObserver thresholds) or click-driven (with click handler descriptions), ensuring the implementation phase uses the correct React patterns and state management strategies.

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