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

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 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 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.

// 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:

// 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.

// 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 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 — Mirrors the detection checklist for Opencode environments
• .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 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 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 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 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 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.

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