Lenis Smooth Scroll + Progress Indicator: AI Code Example

This prompt targets front-end developers who want to elevate their web pages with polished, physics-based smooth scrolling powered by the Lenis library, paired with a real-time circular progress indicator. Instead of the browser's default abrupt scroll behavior, Lenis provides buttery, momentum-driven movement, while the circular progress bar gives users a clear, visual sense of how far they have scrolled through the page — expressed as a live percentage. The combination is a popular pattern in portfolio sites, editorial layouts, and landing pages where premium interaction design matters.

To reproduce this, paste the prompt into a capable code-generation model such as GPT-4o, Claude 3.5, or Gemini 1.5 Pro, then drop the output into a standard HTML file with CDN links for Lenis and GSAP (or a plain requestAnimationFrame loop). Useful variations include changing the indicator's position (fixed top-right vs. bottom-center), swapping the circle for a linear top progress bar, or integrating scroll-triggered animations that fire at specific percentage thresholds. This prompt is an efficient starting point for any project that prioritizes fluid, user-friendly scroll experiences.