# How the AI Website Cloner Pipeline Detects and Handles Smooth Scroll Libraries Like Lenis

> Learn how the AI Website Cloner pipeline detects smooth scroll libraries like Lenis via CSS class inspection. It analyzes HTML markup to generate accurate cloning configurations.

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

---

**The AI Website Cloner detects smooth scroll libraries like Lenis through static CSS class inspection rather than runtime JavaScript execution, looking for selectors such as `.lenis` or `.locomotive-scroll` in the HTML markup and then generating configuration specs for the cloned output.**

The JCodesMore/ai-website-cloner-template uses a declarative inspection approach to identify smooth scrolling behavior during the website cloning process. Unlike traditional detection methods that execute JavaScript in a browser environment, this pipeline analyzes static HTML to find characteristic CSS classes associated with popular scroll libraries. This deterministic approach ensures consistent results while avoiding false positives from dynamically injected classes.

## Static CSS Class Detection Strategy

The pipeline does not implement a runtime detector or execute target page JavaScript. Instead, detection relies entirely on the **inspection guide** that drives the cloning workflow.

### Characteristic Selector Inspection

When the agent scrapes a target page, it searches for CSS classes that are characteristic of popular smooth-scroll packages. According to the workflow guide in [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md) at line 76, the agent specifically checks for:

- **`.lenis`** – Used by the **Lenis** smooth scroll library
- **`.locomotive-scroll`** – Used by **Locomotive Scroll**

This heuristic identifies smooth scroll containers by examining the top-level DOM structure for these specific class names.

### Recording Scroll Library Usage

If a top-level container bears one of these classes, the pipeline assumes the site implements a smooth-scroll library. The system records this finding in the generated specification, noting not just the library name but also any discovered configuration options such as smoothness values, easing functions, or scroll duration settings. The detection step is purely declarative—it relies on the presence of the CSS class rather than executing JavaScript in the target page.

## From Detection to Implementation

Once identified, the smooth scroll library information flows into the build phase through structured specifications that guide downstream agents.

### Spec Generation Process

The pipeline translates detection results into actionable build instructions:

1. **Package installation** – The generated spec includes the appropriate npm package (e.g., `lenis`) for installation
2. **Container markup** – Instructions to recreate the scroll container markup (e.g., `<div class="lenis">…</div>`)
3. **Configuration replication** – Capture of custom scroll options like duration, easing curves, and smoothness settings

These specifications appear in **globals.css** and component configuration files, ensuring downstream builder agents implement the behavior correctly.

### Implementation Example

When the pipeline detects a `.lenis` class, it generates configuration files resembling this structure:

```css
/* docs/research/example.com/globals.css */
@import "lenis/dist/lenis.css";

html, body {
  height: 100%;
}

.lenis {
  overflow: hidden;
}

```

```tsx
// src/app/layout.tsx
"use client";

import { Lenis } from "@studio-freight/lenis";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  React.useEffect(() => {
    const lenis = new Lenis({
      duration: 1.2,
      easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
    });
    function raf(time: number) {
      lenis.raf(time);
      requestAnimationFrame(raf);
    }
    requestAnimationFrame(raf);
  }, []);

  return <>{children}</>;
}

```

## Repository Locations for Detection Logic

The inspection guidance is duplicated across multiple agent configuration files to ensure consistent detection regardless of which AI agent executes the cloning workflow:

- **[`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md)** (line 76) – Primary Windsurf workflow instruction containing the directive: "**Smooth scroll libraries** (Lenis, Locomotive Scroll) — check for `.lenis` class or scroll container wrappers"
- **[`.opencode/commands/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.opencode/commands/clone-website.md)** (line 79) – Opencode command set variant with identical detection instructions
- **[`.github/skills/clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.github/skills/clone-website/SKILL.md)** (line 79) – Claude-based agent skill definition specifying the same CSS class checks
- **[`docs/research/INSPECTION_GUIDE.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/docs/research/INSPECTION_GUIDE.md)** – Comprehensive inspection manual outlining how to capture scroll behavior and note it in specifications

These files collectively constitute the pipeline’s detection mechanism for smooth-scroll libraries.

## Summary

- **Static analysis** drives detection rather than runtime JavaScript execution, eliminating false positives from dynamically injected classes
- **CSS class heuristics** identify Lenis via `.lenis` and Locomotive Scroll via `.locomotive-scroll` selectors in the top-level container
- **Multi-file configuration** ensures consistent detection across Windsurf, Opencode, and Claude-based agents through synchronized inspection guides
- **Declarative specs** automatically generate npm install commands, container markup, and scroll configuration options in globals.css and layout files
- **Deterministic pipeline** produces reproducible results by relying on HTML markup inspection at [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md) rather than browser execution

## Frequently Asked Questions

### Does the pipeline execute JavaScript to detect smooth scrolling?

No. The detection mechanism is purely declarative and relies on static HTML inspection. By searching for specific CSS classes like `.lenis` in the markup rather than executing JavaScript, the pipeline maintains deterministic behavior and avoids false positives that could arise from dynamically injected classes during runtime.

### Which smooth scroll libraries does the pipeline support?

The inspection guide currently targets **Lenis** (via the `.lenis` class) and **Locomotive Scroll** (via the `.locomotive-scroll` class). These are the primary libraries referenced in the workflow files at [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md) and related configuration documents.

### How does the pipeline handle false positives?

The declarative approach inherently minimizes false positives by only triggering when specific, well-known CSS classes are present in the static HTML. Since the pipeline does not execute JavaScript or analyze runtime behavior, it avoids detecting temporary or dynamically added classes that might appear during user interaction but do not represent actual smooth scroll implementation.

### Where does the smooth scroll configuration get implemented in the cloned site?

The detected library information flows into two primary locations: **globals.css** receives the CSS imports and container styles (such as `@import "lenis/dist/lenis.css"`), while **layout components** (typically [`src/app/layout.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/layout.tsx) in Next.js) receive the JavaScript initialization code that configures duration, easing, and animation frame loops.