[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-10018":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":23,"hasPages":23,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":34,"readmeContent":35,"aiSummary":36,"trendingCount":16,"starSnapshotCount":16,"syncStatus":37,"lastSyncTime":38,"discoverSource":39},10018,"lenis","darkroomengineering\u002Flenis","darkroomengineering","Smooth scroll as it should be","https:\u002F\u002Flenis.dev",null,"TypeScript",14087,560,56,16,0,11,61,249,54,43.25,"MIT License",false,"main",[26,27,28,29,30,31,32,33],"performance","react","scroll","smooth","smooth-scroll","snap","vanilla","vue","2026-06-12 02:02:15","[![LENIS](https:\u002F\u002Fassets.darkroom.engineering\u002Flenis\u002Fbanner.gif)](https:\u002F\u002Fgithub.com\u002Fdarkroomengineering\u002Flenis)\n\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Flenis?colorA=E30613&colorB=000000\n)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Flenis)\n[![downloads](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002Flenis?colorA=E30613&colorB=000000\n)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Flenis)\n[![size](https:\u002F\u002Fimg.shields.io\u002Fbundlephobia\u002Fminzip\u002Flenis?label=size&colorA=E30613&colorB=000000)](https:\u002F\u002Fbundlephobia.com\u002Fpackage\u002Flenis)\n\n## Introduction\n\nLenis (\"smooth\" in latin) is a lightweight, robust, and performant smooth scroll library. It's designed by [@darkroom.engineering](https:\u002F\u002Ftwitter.com\u002Fdarkroomdevs) to be simple to use and easy to integrate into your projects. It's built with performance in mind and is optimized for modern browsers. It's perfect for creating smooth scrolling experiences on your website such as WebGL scroll syncing, parallax effects, and much more, see [Demo](https:\u002F\u002Flenis.darkroom.engineering\u002F) and [Showcase](https:\u002F\u002Fwww.lenis.dev\u002Fshowcase).\n\nRead our [Manifesto](https:\u002F\u002Fgithub.com\u002Fdarkroomengineering\u002Flenis\u002Fblob\u002Fmain\u002FMANIFESTO.md) to learn more about the inspiration behind Lenis.\n\n\u003Cbr\u002F>\n\n- [Sponsors](#sponsors)\n- [Packages](#packages)\n- [Showcase](https:\u002F\u002Fwww.lenis.dev\u002Fshowcase)\n- [Installation](#installation)\n- [Setup](#setup)\n- [No-code usage](#no-code-usage)\n- [Settings](#settings)\n- [Properties](#properties)\n- [Methods](#methods)\n- [Events](#events)\n- [Considerations](#considerations)\n- [Limitations](#limitations)\n- [Troubleshooting](#troubleshooting)\n- [Tutorials](#tutorials)\n- [Plugins](#plugins)\n- [License](#license)\n\n\u003Cbr\u002F>\n\n## Sponsors\n\nIf you’ve used Lenis and it made your site feel just a little more alive, consider [sponsoring](https:\u002F\u002Fgithub.com\u002Fsponsors\u002Fdarkroomengineering).\n\nYour support helps us smooth out the internet one library at a time—and lets us keep building tools that care about the details most folks overlook.\n\n\u003Ca href=\"https:\u002F\u002Fwww.osmo.supply\u002F?utm_source=lenis.dev\">\u003Cimg src=\"https:\u002F\u002Fwww.lenis.dev\u002Fsponsors\u002Fosmo.png\" width=\"128\"\u002F>\u003C\u002Fa>\n\u003Cbr\u002F>\n\n\u003C!-- sponsors -->\n[![Jesse Winton](https:\u002F\u002Fimg.logo.dev\u002Fcosmos.so?size=64&token=pk_E-KcYZmdT--jxwGY3dAs1Q&fallback=404)](mailto:jesse@cosmos.so) [![smsunarto](https:\u002F\u002Fgithub.com\u002Fsmsunarto.png?size=64)](https:\u002F\u002Fgithub.com\u002Fsmsunarto) [![bizarro](https:\u002F\u002Fgithub.com\u002Fbizarro.png?size=64)](https:\u002F\u002Fgithub.com\u002Fbizarro) [![itsoffbrand](https:\u002F\u002Fgithub.com\u002Fitsoffbrand.png?size=64)](https:\u002F\u002Fgithub.com\u002Fitsoffbrand) [![arkconclave](https:\u002F\u002Fgithub.com\u002Farkconclave.png?size=64)](https:\u002F\u002Fgithub.com\u002Farkconclave) [![Tamas Bodo](https:\u002F\u002Fimg.logo.dev\u002Fframerpod.com?size=64&token=pk_E-KcYZmdT--jxwGY3dAs1Q&fallback=404)](mailto:hello@framerpod.com) [![glauber-sampaio](https:\u002F\u002Fgithub.com\u002Fglauber-sampaio.png?size=64)](https:\u002F\u002Fgithub.com\u002Fglauber-sampaio) [![cachet-studio](https:\u002F\u002Fgithub.com\u002Fcachet-studio.png?size=64)](https:\u002F\u002Fgithub.com\u002Fcachet-studio) [![OHO-Design](https:\u002F\u002Fgithub.com\u002FOHO-Design.png?size=64)](https:\u002F\u002Fgithub.com\u002FOHO-Design) [![joevingracien](https:\u002F\u002Fgithub.com\u002Fjoevingracien.png?size=64)](https:\u002F\u002Fgithub.com\u002Fjoevingracien) [![Lazar Filipovic](https:\u002F\u002Fui-avatars.com\u002Fapi\u002F?name=Lazar+Filipovic&size=64)](mailto:webdesignbylazar@gmail.com)\n\u003C!-- sponsors -->\n\n\u003Cbr\u002F>\n\u003Ca href=\"https:\u002F\u002Fvercel.com\u002Foss\">\n \u003Cimg alt=\"Vercel OSS Program\" src=\"https:\u002F\u002Fvercel.com\u002Foss\u002Fprogram-badge.svg\" \u002F>\n\u003C\u002Fa>\n\n\u003Cbr\u002F>\n\n## Packages\n\n- [lenis](https:\u002F\u002Fgithub.com\u002Fdarkroomengineering\u002Flenis\u002Fblob\u002Fmain\u002FREADME.md)\n- [lenis\u002Freact](https:\u002F\u002Fgithub.com\u002Fdarkroomengineering\u002Flenis\u002Fblob\u002Fmain\u002Fpackages\u002Freact\u002FREADME.md)\n- [lenis\u002Fvue](https:\u002F\u002Fgithub.com\u002Fdarkroomengineering\u002Flenis\u002Ftree\u002Fmain\u002Fpackages\u002Fvue\u002FREADME.md)\n- [lenis\u002Fframer](https:\u002F\u002Flenis.framer.website\u002F)\n- [lenis\u002Fsnap](https:\u002F\u002Fgithub.com\u002Fdarkroomengineering\u002Flenis\u002Ftree\u002Fmain\u002Fpackages\u002Fsnap\u002FREADME.md)\n\n\u003Cbr\u002F>\n\n## Installation\n\nUsing a package manager:\n\n```bash\nnpm i lenis\n# or\nyarn add lenis\n# or\npnpm add lenis\n```\n\n```js\nimport Lenis from 'lenis'\n```\n\n\u003Cbr\u002F>\n\nUsing scripts:\n\n```html\n\u003Cscript src=\"https:\u002F\u002Funpkg.com\u002Flenis@1.3.23\u002Fdist\u002Flenis.min.js\">\u003C\u002Fscript> \n```\n\n\n\u003Cbr\u002F>\n\n## Setup\n\n### Basic:\n\n```js\n\u002F\u002F Initialize Lenis\nconst lenis = new Lenis({\n autoRaf: true,\n});\n\n\u002F\u002F Listen for the scroll event and log the event data\nlenis.on('scroll', (e) => {\n console.log(e);\n});\n```\n\n### Custom raf loop:\n\n```js\n\u002F\u002F Initialize Lenis\nconst lenis = new Lenis();\n\n\u002F\u002F Use requestAnimationFrame to continuously update the scroll\nfunction raf(time) {\n lenis.raf(time);\n requestAnimationFrame(raf);\n}\n\nrequestAnimationFrame(raf);\n```\n\n### Recommended CSS:\n\n**Import stylesheet:**\n```js\nimport 'lenis\u002Fdist\u002Flenis.css'\n```\n\n**Or link the CSS file:**\n\n```html\n\u003Clink rel=\"stylesheet\" href=\"https:\u002F\u002Funpkg.com\u002Flenis@1.3.23\u002Fdist\u002Flenis.css\">\n```\n\n**Or add it manually:**\n\n[See lenis.css stylesheet](.\u002Fpackages\u002Fcore\u002Flenis.css)\n\n### GSAP ScrollTrigger:\n```js\n\u002F\u002F Initialize a new Lenis instance for smooth scrolling\nconst lenis = new Lenis();\n\n\u002F\u002F Synchronize Lenis scrolling with GSAP's ScrollTrigger plugin\nlenis.on('scroll', ScrollTrigger.update);\n\n\u002F\u002F Add Lenis's requestAnimationFrame (raf) method to GSAP's ticker\n\u002F\u002F This ensures Lenis's smooth scroll animation updates on each GSAP tick\ngsap.ticker.add((time) => {\n lenis.raf(time * 1000); \u002F\u002F Convert time from seconds to milliseconds\n});\n\n\u002F\u002F Disable lag smoothing in GSAP to prevent any delay in scroll animations\ngsap.ticker.lagSmoothing(0);\n\n```\n\n\u003Cbr\u002F>\n\n## No-code usage\n\nOne line, no build step — just drop this into your HTML:\n\n```html\n\u003Clink rel=\"stylesheet\" href=\"https:\u002F\u002Funpkg.com\u002Flenis@1.3.23\u002Fdist\u002Flenis.css\">\n\u003Cscript src=\"https:\u002F\u002Funpkg.com\u002Flenis@1.3.23\u002Fdist\u002Flenis.min.js\">\u003C\u002Fscript> \n\u003Cscript>new Lenis({ autoRaf: true, autoToggle: true, anchors: true, allowNestedScroll: true, naiveDimensions: true, stopInertiaOnNavigate: true })\u003C\u002Fscript>\n```\n\nThat's it, your page now has smooth scrolling and should handle most of the usual issues such as:\n- compatibility with other packages\n- modals\n- smooth anchors\n- scroll reset on page change\n\n\u003Cbr\u002F>\n\n\n## Settings\n\n| Option | Type | Default | Description |\n|-------------------------|----------------------------|----------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `allowNestedScroll` | `boolean` | `false` | Automatically allow nested scrollable elements to scroll natively. This is the simplest way to handle nested scroll. ⚠️ Can create performance issues since it checks the DOM tree on every scroll event. If that's a concern, use `prevent` option instead. |\n| `anchors` | `boolean, ScrollToOptions` | `false` | Scroll to anchor links when clicked. If `true` is passed, it will enable anchor links with default options. If `ScrollToOptions` is passed, it will enable anchor links with the given options. |\n| `autoRaf` | `boolean` | `false` | Whether or not to automatically run `requestAnimationFrame` loop. |\n| `autoResize` | `boolean` | `true` | Resize instance automatically based on `ResizeObserver`. If `false` you must resize manually using `.resize()`. |\n| `autoToggle` | `boolean` | `false` | Automatically start or stop the lenis instance based on the wrapper's overflow property, ⚠️ this requires Lenis recommended CSS. Safari > 17.3, Chrome > 116 and Firefox > 128 ([https:\u002F\u002Fcaniuse.com\u002F?search=transition-behavior](https:\u002F\u002Fcaniuse.com\u002F?search=transition-behavior)). |\n| `content` | `HTMLElement` | `document.documentElement` | The element that contains the content that will be scrolled, usually `wrapper`'s direct child. |\n| `duration` | `number` | `1.2` | The duration of scroll animation (in seconds). Useless if lerp defined. |\n| `easing` | `function` | `(t) => Math.min(1, 1.001 - Math.pow(2, -10 * t))` | The easing function to use for the scroll animation, our default is custom but you can pick one from [Easings.net](https:\u002F\u002Feasings.net\u002Fen). Useless if lerp defined. |\n| `eventsTarget` | `HTMLElement, Window` | `wrapper` | The element that will listen to `wheel` and `touch` events. |\n| `gestureOrientation` | `string` | `vertical` | The orientation of the gestures. Can be `vertical`, `horizontal` or `both`. |\n| `infinite` | `boolean` | `false` | Enable infinite scrolling! `syncTouch: true` is required on touch devices ([See example](https:\u002F\u002Fcodepen.io\u002FClementRoche\u002Fpen\u002FOJqBLod)). |\n| `lerp` | `number` | `0.1` | Linear interpolation (lerp) intensity (between 0 and 1). |\n| `naiveDimensions` | `boolean` | `false` | If `true`, Lenis will use naive dimensions calculation. ⚠️ Be careful, this has a performance impact. |\n| `orientation` | `string` | `vertical` | The orientation of the scrolling. Can be `vertical` or `horizontal`. |\n| `overscroll` | `boolean` | `true` | Similar to CSS overscroll-behavior (https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Foverscroll-behavior). |\n| `prevent` | `function` | `undefined` | Manually prevent scroll to be smoothed based on elements traversed by events. If `true` is returned, it will prevent the scroll to be smoothed. Example: `(node) => node.classList.contains('cookie-modal')`. |\n| `smoothWheel` | `boolean` | `true` | Smooth the scroll initiated by `wheel` events. |\n| `stopInertiaOnNavigate` | `boolean` | `false` | If `true`, Lenis will stop inertia when an internal link is clicked. |\n| `syncTouch` | `boolean` | `false` | Mimic touch device scroll while allowing scroll sync (can be unstable on iOS\u003C16). |\n| `syncTouchLerp` | `number` | `0.075` | Lerp applied during `syncTouch` inertia. |\n| `touchInertiaExponent` | `number` | `1.7` | Manage the strength of syncTouch inertia. |\n| `touchMultiplier` | `number` | `1` | The multiplier to use for touch events. |\n| `virtualScroll` | `function` | `undefined` | Manually modify the events before they get consumed. If `false` is returned, the scroll will not be smoothed. Examples: `(e) => { e.deltaY \u002F= 2 }` (to slow down vertical scroll) or `({ event }) => !event.shiftKey` (to prevent scroll to be smoothed if shift key is pressed). |\n| `wheelMultiplier` | `number` | `1` | The multiplier to use for mouse wheel events. |\n| `wrapper` | `HTMLElement, Window` | `window` | The element that will be used as the scroll container. |\n\u003Cbr\u002F>\n\n\u003C!-- `target`: goal to reach\n- `number`: value to scroll in pixels\n- `string`: CSS selector or keyword (`top`, `left`, `start`, `bottom`, `right`, `end`)\n- `HTMLElement`: DOM element\n\n\u003Cbr\u002F>\n\n`options`:\n- `offset`(`number`): equivalent to [`scroll-padding-top`](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fscroll-padding-top)\n- `lerp`(`number`): animation lerp intensity\n- `duration`(`number`): animation duration (in seconds)\n- `easing`(`function`): animation easing\n- `immediate`(`boolean`): ignore duration, easing and lerp\n- `lock`(`boolean`): whether or not to prevent user from scrolling until target reached\n- `onComplete`(`function`): called when target is reached -->\n\n## Properties\n\n| Property | Type | Description |\n|-------------------------|-------------------|----------------------------------------------------------------------------|\n| `actualScroll` | `number` | Current scroll value registered by the browser |\n| `animatedScroll` | `number` | Current scroll value |\n| `className` (getter) | `string` | `rootElement` className |\n| `dimensions` | `object` | Dimensions instance |\n| `direction` | `number` | `1`: scrolling up, `-1`: scrolling down |\n| `isHorizontal` (getter) | `boolean` | Whether or not the instance is horizontal |\n| `isScrolling` (getter) | `boolean, string` | Whether or not the scroll is being animated, `smooth`, `native` or `false` |\n| `isStopped` (getter) | `boolean` | Whether or not the user should be able to scroll |\n| `lastVelocity` | `number` | Last scroll velocity |\n| `limit` (getter) | `number` | Maximum scroll value |\n| `options` | `object` | Instance options |\n| `progress` (getter) | `number` | Scroll progress from `0` to `1` |\n| `rootElement` (getter) | `HTMLElement` | Element on which Lenis is instanced |\n| `scroll` (getter) | `number` | Current scroll value (handles infinite scroll if activated) |\n| `targetScroll` | `number` | Target scroll value |\n| `time` | `number` | Time elapsed since instance creation |\n| `velocity` | `number` | Current scroll velocity |\n\n\u003Cbr\u002F>\n\n## Methods\n\n| Method | Description | Arguments |\n|-----------------------------|---------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `destroy()` | Destroys the instance and removes all events. | |\n| `on(id, function)` | `id` can be any of the following [instance events](#instance-events) to listen. | |\n| `raf(time)` | Must be called every frame for internal usage. | `time`: in ms |\n| `resize()` | Compute internal sizes, it has to be used if `autoResize` option is `false`. | |\n| `scrollTo(target, options)` | Scroll to target. | `target`: goal to reach\u003Cul>\u003Cli>`number`: value to scroll in pixels\u003C\u002Fli>\u003Cli>`string`: CSS selector or keyword (`top`, `left`, `start`, `bottom`, `right`, `end`)\u003C\u002Fli>\u003Cli>`HTMLElement`: DOM element\u003C\u002Fli>\u003C\u002Ful>`options`\u003Cul>\u003Cli>`offset`(`number`): equivalent to [`scroll-padding-top`](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fscroll-padding-top)\u003C\u002Fli>\u003Cli>`lerp`(`number`): animation lerp intensity\u003C\u002Fli>\u003Cli>`duration`(`number`): animation duration (in seconds)\u003C\u002Fli>\u003Cli>`easing`(`function`): animation easing\u003C\u002Fli>\u003Cli>`immediate`(`boolean`): ignore duration, easing and lerp\u003C\u002Fli>\u003Cli>`lock`(`boolean`): whether or not to prevent the user from scrolling until the target is reached\u003C\u002Fli>\u003Cli>`force`(`boolean`): reach target even if instance is stopped\u003C\u002Fli>\u003Cli>`onComplete`(`function`): called when the target is reached\u003C\u002Fli>\u003Cli>`userData`(`object`): this object will be forwarded through `scroll` events\u003C\u002Fli>\u003C\u002Ful> |\n| `start()` | Resumes the scroll | |\n| `stop()` | Pauses the scroll | |\n\n\n\n## Events\n\n| Event | Callback Arguments |\n|------------------|---------------------------|\n| `scroll` | Lenis instance |\n| `virtual-scroll` | `{deltaX, deltaY, event}` |\n\n\n\u003Cbr\u002F>\n\n## Considerations\n\n### Nested scroll\n\nThe simplest and most reliable way to handle nested scrollable elements is to use the `allowNestedScroll` option:\n\n```js\nconst lenis = new Lenis({\n allowNestedScroll: true,\n})\n```\n\nThis automatically detects nested scrollable elements and lets them scroll natively. However, this can create performance issues since Lenis needs to check the DOM tree on every scroll event. If you experience performance problems, use `data-lenis-prevent` instead.\n\n#### Using HTML attributes\n\n```html\n\u003Cdiv data-lenis-prevent>scrollable content\u003C\u002Fdiv>\n```\n\n[See example](https:\u002F\u002Fcodepen.io\u002FClementRoche\u002Fpen\u002FPoLdjpw)\n\n| Attribute | Description |\n|---------------------------------|--------------------------------------|\n| `data-lenis-prevent` | Prevent all smooth scroll events |\n| `data-lenis-prevent-wheel` | Prevent wheel events only |\n| `data-lenis-prevent-touch` | Prevent touch events only |\n| `data-lenis-prevent-vertical` | Prevent vertical scroll events only |\n| `data-lenis-prevent-horizontal` | Prevent horizontal scroll events only|\n\n#### Using Javascript\n\n```html\n\u003Cdiv id=\"modal\">scrollable content\u003C\u002Fdiv>\n```\n\n```js\nconst lenis = new Lenis({\n prevent: (node) => node.id === 'modal',\n})\n```\n\n[See example](https:\u002F\u002Fcodepen.io\u002FClementRoche\u002Fpen\u002FemONGYN)\n\n\n\n### Anchor links\nBy default, Lenis will prevent anchor links from working while scrolling. To enable them, you must set `anchors: true`.\n\n```js\nnew Lenis({\n anchors: true\n})\n```\n\nYou can also use `scrollTo` options:\n\n```js\nnew Lenis({\n anchors: {\n offset: 100,\n onComplete: ()=>{\n console.log('scrolled to anchor')\n }\n }\n})\n```\n\n\u003Cbr\u002F>\n\n## Limitations\n\n- no support for CSS scroll-snap, you must use ([lenis\u002Fsnap](https:\u002F\u002Fgithub.com\u002Fdarkroomengineering\u002Flenis\u002Ftree\u002Fmain\u002Fpackages\u002Fsnap\u002FREADME.md))\n- capped to 60fps on Safari ([source](https:\u002F\u002Fbugs.webkit.org\u002Fshow_bug.cgi?id=173434)) and 30fps on low power mode\n- smooth scroll will stop working over iframe since they don't forward wheel events\n- position fixed seems to lag on MacOS Safari pre-M1 ([source](https:\u002F\u002Fgithub.com\u002Fdarkroomengineering\u002Flenis\u002Fissues\u002F103))\n- touch events may behave unexpectedly when `syncTouch` is enabled on iOS \u003C 16\n- nested scroll containers require proper configuration to work correctly\n\n\u003Cbr\u002F>\n\n## Troubleshooting\n- Make sure you use the latest version of [Lenis](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Flenis?activeTab=versions)\n- Include the recommended CSS\n- If using GSAP ScrollTrigger, ensure proper integration (see [GSAP ScrollTrigger setup](#setup) section)\n- Test without Lenis to ensure your element\u002Fpage is scrollable\n- Be sure to use `autoRaf: true` or manually call `lenis.raf(time)` in your animation loop\n\n\u003Cbr\u002F>\n\n## Tutorials\n\n- [Infinite Scrolling with Lenis](https:\u002F\u002Ftympanus.net\u002FDevelopment\u002FScrollAnimationsGrid\u002F) by [Matt Rothenberg](https:\u002F\u002Fmattrothenberg.com\u002F)\n- [Building Smooth Scroll in 2025 with Lenis](https:\u002F\u002Fwww.edoardolunardi.dev\u002Fblog\u002Fbuilding-smooth-scroll-in-2025-with-lenis) by [Edoardo Lunardi](https:\u002F\u002Fwww.edoardolunardi.dev\u002F)\n\n\u003Cbr\u002F>\n\n## Plugins\n\n- [r3f-scroll-rig](https:\u002F\u002Fgithub.com\u002F14islands\u002Fr3f-scroll-rig) by [14islands](https:\u002F\u002F14islands.com\u002F)\n- [locomotive-scroll](https:\u002F\u002Fgithub.com\u002Flocomotivemtl\u002Flocomotive-scroll) by [Locomotive](https:\u002F\u002Flocomotive.ca\u002F)\n\n\u003Cbr\u002F>\n\n## License\n\nMIT © [darkroom.engineering](https:\u002F\u002Fgithub.com\u002Fdarkroomengineering)\n","Lenis 是一个轻量级、健壮且高性能的平滑滚动库。它使用 TypeScript 编写，旨在为现代浏览器提供流畅的滚动体验，支持 WebGL 同步滚动、视差效果等多种场景。核心功能包括简单易用的 API、丰富的设置选项以及事件监听机制，确保开发者能够轻松集成并自定义滚动行为。Lenis 适用于需要增强用户体验的网页设计项目，特别是那些追求视觉效果和交互细节的网站。",2,"2026-06-11 03:26:09","top_topic"]