# Smooth Scroll Libraries in the AI Website Cloner Template: Detecting Lenis and Locomotive Scroll

> Discover how the AI Website Cloner Template detects Lenis and Locomotive Scroll smooth scroll libraries by scanning for CSS classes and seamlessly integrates them into your Next.js applications.

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

---

**The AI Website Cloner Template automatically detects Lenis and Locomotive Scroll libraries by scanning target websites for specific CSS classes, then provides standard integration patterns for Next.js applications.**

The JCodesMore/ai-website-cloner-template repository includes an intelligent cloning workflow that identifies smooth scroll implementations when reverse-engineering websites. This detection system specifically looks for two popular solutions—**Lenis** and **Locomotive Scroll**—enabling developers to replicate complex scrolling behaviors in generated Next.js codebases.

## Detected Smooth Scroll Libraries

The cloning workflow systematically searches for smooth scroll implementations during the global UI patterns analysis phase.

### Lenis Detection

According to [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md) at line 135, the workflow checks for the presence of the **`.lenis`** CSS class or associated scripts. This detection cue indicates that the target website utilizes the Lenis smooth scroll library, which provides lightweight, inertia-based scrolling effects.

### Locomotive Scroll Detection

Similarly, the workflow searches for the **`.locomotive-scroll`** class identifier in the target site's markup. Located in the same workflow configuration, this detection identifies Locomotive Scroll implementations, which offer advanced parallax effects and scroll-triggered animations commonly found in high-end portfolio sites.

## Implementation Patterns in Next.js

Once detected, both libraries require client-side initialization within the Next.js App Router structure. The cloning workflow notes that you must "add these to [`globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/globals.css) and note any libraries that need to be installed" according to the source configuration.

### Lenis Integration

Create a client-only provider component that instantiates Lenis in a `useEffect` hook. Import from `@studio-freight/lenis` and hook the library's `raf` method into the browser's animation frame.

```typescript
// src/components/LenisProvider.tsx
'use client';

import { useEffect } from 'react';
import Lenis from '@studio-freight/lenis';

export default function LenisProvider({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    const lenis = new Lenis({ smooth: true });
    
    function raf(time: number) {
      lenis.raf(time);
      requestAnimationFrame(raf);
    }
    
    requestAnimationFrame(raf);
    return () => lenis.destroy();
  }, []);

  return <>{children}</>;
}

```

Mount this provider in your root layout:

```tsx
// src/app/layout.tsx
import LenisProvider from '@/components/LenisProvider';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <LenisProvider>{children}</LenisProvider>
      </body>
    </html>
  );
}

```

Install the dependency via `npm i @studio-freight/lenis`.

### Locomotive Scroll Integration

Locomotive Scroll requires a container reference and explicit CSS imports. Initialize the library in a client component that wraps your application content with the `locomotive-scroll` class.

```typescript
// src/components/LocomotiveScrollProvider.tsx
'use client';

import { useEffect, useRef } from 'react';
import LocomotiveScroll from 'locomotive-scroll';
import 'locomotive-scroll/dist/locomotive-scroll.css';

export default function LocomotiveScrollProvider({ children }: { children: React.ReactNode }) {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!containerRef.current) return;
    
    const scroll = new LocomotiveScroll({
      el: containerRef.current,
      smooth: true,
    });
    
    return () => scroll.destroy();
  }, []);

  return (
    <div ref={containerRef} className="locomotive-scroll">
      {children}
    </div>
  );
}

```

Install via `npm i locomotive-scroll`.

## Detection Workflow Configuration

The detection logic resides in the workflow files that guide AI cloning agents. The primary configuration at [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md) contains the explicit instruction at line 135: "Check for smooth scroll libraries (Lenis, Locomotive Scroll — check for `.lenis`, `.locomotive-scroll`, or custom scroll container classes)."

Additional configuration files include:

- **[`.opencode/commands/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.opencode/commands/clone-website.md)** — Mirrors the detection checklist for Opencode environments
- **[`.github/skills/clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.github/skills/clone-website/SKILL.md)** — Defines the skill parameters for GitHub-hosted agents

When detection occurs, the workflow adds required CSS to [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css) and documents the necessary npm packages for manual installation.

## Summary

- The AI Website Cloner Template detects **Lenis** by searching for the `.lenis` CSS class in target websites.
- **Locomotive Scroll** is identified through the `.locomotive-scroll` class signature.
- Detection logic is centralized in [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md) at line 135.
- Both libraries require client-side React components that initialize in `useEffect` hooks.
- Install Lenis with `npm i @studio-freight/lenis` or Locomotive Scroll with `npm i locomotive-scroll`.
- Global styles should be added to [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css) as part of the cloning workflow.

## Frequently Asked Questions

### How does the AI Website Cloner Template detect smooth scroll libraries?

The template scans target websites for specific CSS class signatures—`.lenis` for Lenis and `.locomotive-scroll` for Locomotive Scroll—as documented in the workflow configuration at [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md) line 135. This detection occurs during the global UI patterns analysis phase of the cloning process.

### Can I use both Lenis and Locomotive Scroll simultaneously in the same project?

No, these libraries conflict when instantiated together because they both attempt to control the browser's scroll behavior. The cloning workflow detects which library the target site uses and prepares the appropriate implementation pattern, but you should choose only one per project.

### Where should I install the smooth scroll provider in a Next.js app?

Mount the provider component in [`src/app/layout.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/layout.tsx) at the root level, wrapping the children content. Both Lenis and Locomotive Scroll providers must be marked with the `'use client'` directive since they access browser-only APIs like `requestAnimationFrame` and DOM elements.

### Does the template automatically install the npm packages for these libraries?

No, the detection workflow only identifies the library and notes the requirement in the generated files. You must manually run `npm i @studio-freight/lenis` or `npm i locomotive-scroll` after the cloning process, then create the provider components as shown in the implementation examples.