Added smoothe page scrolling across all pages using lenis

[Yash-Bandal]

Description

This PR integrates Lenis for smooth scrolling throughout the website.
- Added Lenis initialization in App.jsx
- Configured requestAnimationFrame for continuous scroll updates
- Ensured cleanup on unmount for performance
- No breaking UI or route changes
Tested on: Home, Programs, Mentors, Contributors, and Community pages.

Summary by CodeRabbit

• New Features

  • Introduced smooth, momentum-based scrolling across the app for a more polished and comfortable browsing experience.

• Chores

  • Updated dependencies to support the new scrolling experience.

[Yash-Bandal]

@coderabbitai generate docstrings

[coderabbitai]

Walkthrough

Added the Lenis dependency and integrated smooth-scrolling in App by initializing Lenis in a useEffect hook, driving it via requestAnimationFrame, and cleaning up on unmount. No API or routing changes.

Changes

Cohort / File(s)	Summary
Dependency update package.json	Added dependency lenis@^1.3.11.
Smooth scrolling integration src/App.jsx	Imported Lenis and useEffect; initialized Lenis with options; started rAF loop calling lenis.raf; cleaned up with lenis.destroy() on unmount.

Sequence Diagram(s)

sequenceDiagram
    autonumber
    actor User
    participant App
    participant Lenis
    participant rAF as requestAnimationFrame
    participant DOM as Document

    User->>App: Load/Mount
    App->>Lenis: new Lenis(options)
    App->>rAF: start loop
    loop animation frame
        rAF->>App: frame(time)
        App->>Lenis: lenis.raf(time)
        Lenis->>DOM: update scroll position smoothly
    end
    User->>DOM: Scroll input
    DOM->>Lenis: scroll events
    Lenis->>DOM: managed smooth scrolling

    App-->>Lenis: Unmount → destroy()
    Lenis-->>DOM: cleanup

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

I bounce through code with silky ease,
A rabbit riding gentle breeze—
Lenis hums, the pixels glide,
rAF beats keep time in stride.
Pack my carrots, smooth the scroll,
On mount we roll, on unmount whole. 🥕✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title clearly summarizes the primary change of integrating Lenis to enable smooth page scrolling across the entire application and directly references the core library used, making it both specific and relevant to the pull request’s main objective. Although there is a minor typo in “smoothe,” the essential intent and scope of the update are communicated effectively.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

✅ Actions performed

Initiated docstring generation; will generate only if new commits exist.

[coderabbitai]

Note

Docstrings generation - SUCCESS
Generated docstrings for this pull request at #75

[coderabbitai]

Actionable comments posted: 3

🧹 Nitpick comments (1)

src/App.jsx (1)

14-34: Consider using autoRaf for simpler setup.

The manual requestAnimationFrame loop is valid, but Lenis supports an autoRaf: true option that handles the animation loop internally, simplifying your code and cleanup logic.

You could simplify to:

   useEffect(() => {
     // Initialize Lenis for smooth scroll
     const lenis = new Lenis({
       duration: 0.8, // scroll speed (0.8s for smooth flow)
       easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // default easing
       smooth: true,
-      smoothTouch: false, // disable smooth on mobile for performance
+      syncTouch: false, // disable smooth on mobile for performance
+      autoRaf: true,
     });
 
-    // RAF loop
-    const raf = (time) => {
-      lenis.raf(time);
-      requestAnimationFrame(raf);
-    };
-    requestAnimationFrame(raf);
-
     // Cleanup when component unmounts
     return () => {
       lenis.destroy();
     };
   }, []);

Based on learnings.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0cd948b and b1e6f2c.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (2)

• package.json (2 hunks)
• src/App.jsx (2 hunks)

🔇 Additional comments (1)

package.json (1)

14-14: LGTM! Dependency version is current.

The lenis dependency at version ^1.3.11 is correct and up-to-date (published Oct 6, 2025). Ensure the recommended lenis.css is imported in your application for proper layout and interaction behavior.

Based on learnings.