Lenis Smooth Scroll & Parallax Effect: AI Code Example

This prompt is designed for front-end developers and creative coders who want to implement buttery-smooth scroll experiences with layered parallax depth effects. By leveraging the Lenis smooth-scroll library, the generated code produces a multi-section webpage where each section's background image moves at a distinct speed relative to the user's scroll position, creating a convincing sense of three-dimensional depth. A scroll progress indicator and clickable navigation dots are included out of the box, making the output immediately functional as a portfolio page, landing page prototype, or interactive showcase template.

This prompt works best with models capable of generating structured HTML, CSS, and JavaScript together — Claude or GPT-4o are strong choices. To adapt the output, try varying the number of sections, swapping placeholder image URLs for your own assets, or adjusting the parallax speed multipliers to fine-tune the depth illusion. You can also extend the prompt by requesting specific color schemes, section transitions, or mobile-responsive breakpoints to push the result closer to a production-ready component.