# How Scroll-Triggered State Changes Are Captured in the AI Website-Cloner Template

> Discover how the AI website cloner template captures scroll-triggered state changes using Playwright. Learn how scroll offsets and styles are saved for dynamic React code generation.

- Repository: [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template)
- Tags: internals
- Published: 2026-07-05

---

**Scroll-triggered state changes are captured during the pre-generation inspection phase using a headless Playwright browser that records scroll offsets and computed styles, then serializes them into component specifications for later React code generation.**

The AI Website-Cloner Template takes a unique approach to preserving scroll-driven interactions found in modern websites. Rather than embedding live scroll listeners in the final Next.js application, it captures all **scroll-triggered state changes** during an initial reconnaissance phase, allowing the generated code to reproduce complex behaviors like sticky headers and parallax effects without requiring runtime access to the original site.

## Why Inspection-Time Capture Replaces Runtime Listeners

Most cloning tools attempt to reverse-engineer scroll behavior by analyzing minified JavaScript event listeners. According to the source code in [`.github/skills/clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.github/skills/clone-website/SKILL.md), this template instead performs a comprehensive **interaction sweep** before any code is emitted. This method records the exact computed styles and DOM states at specific scroll positions, eliminating the need to re-scrape the live site during runtime and ensuring the cloned site remains functional even if the original changes or goes offline.

## The Five-Step Scroll Capture Pipeline

The inspection process follows a strict pipeline defined in [`docs/research/INSPECTION_GUIDE.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/docs/research/INSPECTION_GUIDE.md) and [`README.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/README.md).

### 1. Launching the Headless Browser Session

When the `/clone-website` skill initiates, the agent launches a Playwright-controlled headless browser against the target URL. This session is configured to monitor not just the main document scroll, but also individual scrollable containers within the page architecture.

### 2. Injecting the Scroll Monitoring Script

The browser injects a lightweight recording script that attaches to `scroll` events. As implemented in the skill definition, this script tracks:

- Current `scrollY` and `scrollX` values
- Computed CSS properties of elements that react to scrolling (e.g., sticky headers, lazy-loaded sections)
- DOM state changes including visibility toggles and class name modifications triggered by scroll position

### 3. Capturing State Snapshots

At each significant scroll tick, the script executes `window.getComputedStyle(element)` on affected components. These snapshots capture the precise style object—recording properties like `position`, `top`, `background`, and transforms—alongside the exact scroll offset. The data is serialized into JSON and streamed back to the agent for processing.

### 4. Writing Component Specifications

The collected data is persisted to **component spec files** located under `docs/research/components/`. Each specification contains a dedicated *"scroll-states"* section that maps discrete scroll positions (e.g., 0 px, 200 px, 400 px) to their corresponding CSS values and class toggles, creating a static blueprint of the dynamic behavior.

### 5. Generating Reactive Components

Builder agents read these specification files during code generation. They translate the static scroll-state maps into dynamic React logic, typically emitting `useEffect` hooks that monitor `window.scrollY` or `framer-motion` animations driven by scroll progress.

## Code Implementation Examples

The following examples demonstrate the actual implementation patterns found in the repository.

### Inspector Script Injection

During the Playwright session, the agent injects code similar to this TypeScript snippet to harvest scroll data:

```ts
await page.evaluate(() => {
  const records: Array<{y: number; styles: Record<string, string>}> = [];

  const capture = () => {
    const y = window.scrollY;
    const target = document.querySelector('.sticky-header')!;
    const styles = getComputedStyle(target);
    records.push({
      y,
      styles: {
        position: styles.position,
        top: styles.top,
        background: styles.background,
      },
    });
  };

  window.addEventListener('scroll', capture);
  capture(); // Record initial state
  setTimeout(() => (window as any).__CLONE_RESULTS = records, 3000);
});

```

### Generated React Component

The builder agents use the captured data to generate components that replicate the observed behavior:

```tsx
"use client";

import { useEffect, useState } from "react";

export default function Header() {
  const [isSticky, setIsSticky] = useState(false);

  useEffect(() => {
    const update = () => setIsSticky(window.scrollY > 200);
    window.addEventListener("scroll", update);
    return () => window.removeEventListener("scroll", update);
  }, []);

  return (
    <header
      className={isSticky ? "bg-white shadow-md" : "bg-transparent"}
    >
      {/* Header content */}
    </header>
  );
}

```

In this generated code, the `isSticky` threshold at 200 pixels directly mirrors the scroll-state recorded by the inspector at that exact offset, ensuring pixel-perfect reproduction of the original interaction.

## Summary

- **No runtime scraping**: The generated Next.js app does not re-inspect the original site; all scroll behavior is hardcoded from the inspection data captured in the `docs/research/` directory.
- **Playwright-based capture**: A headless browser performs the interaction sweep, injecting scripts to monitor `scroll` events and extract computed styles via `window.getComputedStyle`.
- **JSON serialization**: Scroll offsets and style snapshots are serialized and stored in component specifications under `docs/research/components/`.
- **Static-to-dynamic translation**: Builder agents convert the static "scroll-states" specifications into React state logic or animation libraries like Framer Motion.
- **Precise reproduction**: Because the system captures computed style results at specific pixel offsets, it accurately reproduces complex scroll-driven effects like parallax and sticky positioning without accessing the original site's JavaScript.

## Frequently Asked Questions

### Does the generated website use the same scroll listeners as the original site?

No. The template captures the *effects* of scrolling (the computed styles and DOM states) rather than copying the original JavaScript event listeners. The generated React components use their own `useEffect` hooks or animation libraries to replicate the observed behavior based on the inspection data stored in the component specs.

### What specific scroll data is recorded during the inspection?

According to [`docs/research/INSPECTION_GUIDE.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/docs/research/INSPECTION_GUIDE.md), the inspector records the current `scrollY` and `scrollX` values, the complete computed CSS of affected elements, and any DOM mutations such as class name changes or visibility toggles that occur at specific scroll positions.

### Where is the scroll state data stored before code generation?

The serialized scroll data is written to component specification files in the `docs/research/components/` directory. Each file contains a "scroll-states" section that lists the specific CSS values and properties for different scroll offsets, acting as a blueprint for the builder agents.

### Can this method capture complex scroll effects like parallax or lazy loading?

Yes. Because the inspection captures computed styles at multiple scroll intervals, it records the visual output of parallax transforms and lazy-load triggers. The builder agents then recreate these effects using React state or animation libraries, ensuring the cloned site matches the original's scroll-driven appearance.