lenis-mcp-server
Integrates with GSAP (GreenSock) for ScrollTrigger, enabling advanced scroll-driven animations such as parallax effects, timeline synchronization, and scroll-based interactions.
Provides Next.js-specific setup and configuration for Lenis smooth scroll, including server-side rendering considerations, app router compatibility, and integration with Next.js projects.
Generates setup code for React applications, handling component integration, hooks, and smooth scrolling configuration specific to React environments.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@lenis-mcp-serverset up Lenis with GSAP ScrollTrigger in my React app"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
šÆ Lenis MCP Server
MCP server that provides Lenis smooth scroll expertise to AI assistants. Knowledge-based ā no external API calls, all documentation is embedded.
š About
The Lenis MCP Server is a Model Context Protocol server that gives AI coding assistants deep knowledge about Lenis ā the lightweight, performant smooth scroll library by darkroom.engineering.
All documentation (settings, methods, events, patterns, troubleshooting) is embedded directly in the server. When an AI assistant calls a tool, it receives structured, accurate information ā no network requests, no API keys, zero latency.
Related MCP server: Documentation Retrieval MCP Server (DOCRET)
š ļø Tools
Tool | Description |
š§ | Generate setup code for vanilla JS, React, Vue, Next.js (+ GSAP, snap) |
š | Query settings, methods, events, properties with search |
š | Diagnose scroll issues against known limitations |
šØ | Production-ready patterns: parallax, snap, horizontal, WebGL sync |
ā” | Performance recommendations for your setup |
šļø How It Works
graph LR
A[š¤ AI Assistant] -->|Calls MCP tool| B[šÆ Lenis MCP Server]
B -->|Queries| C[š Embedded Knowledge Base]
C -->|Returns| B
B -->|Structured response| A
A -->|Generates code| D[š» Your Project]
style A fill:#6366f1,stroke:#4f46e5,color:#fff
style B fill:#14b8a6,stroke:#0d9488,color:#fff
style C fill:#f59e0b,stroke:#d97706,color:#fff
style D fill:#10b981,stroke:#059669,color:#fffš¦ Installation
Via npx (recommended)
Add to your MCP config (Claude Desktop, Cursor, Windsurf, etc.):
{
"mcpServers": {
"lenis-mcp": {
"command": "npx",
"args": ["-y", "lenis-mcp-server"]
}
}
}From source
git clone https://github.com/devAndreotti/lenis-mcp-server.git
cd lenis-mcp-server
npm install
npm run buildThen add to your MCP config:
{
"mcpServers": {
"lenis-mcp": {
"command": "node",
"args": ["path/to/lenis-mcp-server/dist/index.js"]
}
}
}š Features
Feature | Description |
š Zero Latency | All docs embedded ā no network requests needed |
šÆ Framework-Aware | Supports vanilla JS, React, Vue, and Next.js |
š GSAP Integration | Deep knowledge of ScrollTrigger integration |
š Smart Debugging | Matches symptoms against known limitations |
š± Mobile-Ready | Performance tips for touch & mobile optimization |
šØ Pattern Library | Parallax, snap, horizontal, WebGL sync, and more |
š¬ Example Prompts
"Set up Lenis with GSAP ScrollTrigger in my React app"
"What are all the Lenis settings and their defaults?"
"My scroll is janky on Safari, help me fix it"
"Create a parallax effect with Lenis and GSAP"
"Optimize my Lenis setup for mobile devices"
"How do I handle nested scroll containers?"
š Project Structure
lenis-mcp-server/
ā
āāā src/
ā āāā index.ts # MCP server with 5 tools
ā āāā knowledge/
ā āāā lenis-docs.ts # Complete Lenis knowledge base
ā
āāā package.json
āāā tsconfig.json
āāā LICENSE
āāā README.mdš Troubleshooting
Problem | Solution |
Server won't start | Ensure Node.js ā„ 18 and run |
Tools not appearing | Check MCP config path is correct and restart your IDE |
Outdated information | Open an issue or PR to update the knowledge base |
šŖ Contributing
Contributions are welcome! Follow the steps below:
Fork this repository.
Create a branch:
git checkout -b feature/your-feature.Commit your changes:
git commit -m "feat: my contribution".Push to the branch:
git push origin feature/your-feature.Open a Pull Request with a summary of proposed changes.
Use Conventional Commits: feat:, fix:, docs:, style:, refactor:, test:, chore:.
š License
This project is under the MIT license. See the LICENSE file for details.
Available Tools
5 toolslenis_create_scroll_patternCreate Lenis Scroll PatternARead-onlyIdempotent
Generates production-ready code for common Lenis scroll patterns.
Available patterns: parallax, infinite-scroll, snap, horizontal scroll, WebGL sync, and scroll-triggered animations.
Args:
pattern ('parallax' | 'infinite-scroll' | 'snap' | 'horizontal' | 'webgl-sync' | 'scroll-triggered'): Pattern to generate
framework ('vanilla' | 'react' | 'vue' | 'nextjs'): Target framework (default: 'vanilla')
with_gsap (boolean): Include GSAP for animations (default: true)
Returns: Complete code with HTML structure, CSS, JavaScript setup, and explanatory comments.
Examples:
"Parallax effect with GSAP" ā pattern: 'parallax', with_gsap: true
"Horizontal scroll section" ā pattern: 'horizontal'
"Snap scrolling between sections" ā pattern: 'snap'
| Name | Required | Description | Default |
|---|---|---|---|
| pattern | Yes | Scroll pattern to generate: parallax, infinite-scroll, snap, horizontal, webgl-sync, or scroll-triggered | |
| framework | No | Target framework | vanilla |
| with_gsap | No | Include GSAP for animations (recommended for most patterns) |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint=true, idempotentHint=true, and destructiveHint=false. Description adds output format details (HTML, CSS, JS, comments) which align with these hints.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Extremely concise with clear sections (available patterns, args, returns, examples). No filler, every sentence adds value.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given 3 parameters with full schema coverage, annotations present, and no output schema needed (description explains returns), the description fully covers the tool's purpose and usage.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100%, so baseline 3. Description adds default values (framework: vanilla, with_gsap: true) and concrete examples mapping patterns to parameters, enhancing usability.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Clearly states it generates production-ready code for Lenis scroll patterns, listing all available patterns. Distinct from sibling tools (debug, setup, API, optimization) by focusing on pattern generation.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Provides explicit context for when to use (generating pattern code) with examples. Doesn't explicitly exclude cases, but sibling coverage implies alternatives exist for other needs.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
lenis_debug_scroll_issueDebug Lenis Scroll IssueARead-onlyIdempotent
Diagnoses Lenis smooth scroll issues based on symptom descriptions.
Matches symptoms against known limitations, common pitfalls, and troubleshooting patterns from the official Lenis documentation.
Args:
symptom (string): Description of the scroll issue
framework (string): Framework being used, if known
using_gsap (boolean): Whether GSAP ScrollTrigger is being used (default: false)
Returns: Diagnosis with probable causes, step-by-step fixes, and relevant code snippets.
Examples:
"Scroll feels janky on Safari" ā symptom about Safari fps cap
"Nested modal scroll not working" ā nested scroll configuration
"ScrollTrigger not syncing" ā GSAP integration issue
| Name | Required | Description | Default |
|---|---|---|---|
| symptom | Yes | Description of the scroll issue (e.g., 'scroll not working', 'janky on Safari', 'nested scroll broken') | |
| framework | No | Framework being used, if known | |
| using_gsap | No | Whether GSAP ScrollTrigger is being used |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations declare readOnlyHint, idempotentHint, and destructiveHint, indicating no side effects. The description adds context about being diagnostic and returning a diagnosis, which is consistent and adds moderate value beyond annotations.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is concise with four clear bullet points, front-loading the purpose. Every sentence adds value, and there is no redundancy.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given no output schema, the description includes a Returns section with expected output (diagnosis with causes, fixes, code snippets) and examples. For a 3-parameter tool, this is complete and helpful.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%. The description's Args section provides clear explanations for each parameter, including defaults and examples, adding meaning beyond the schema (e.g., 'symptom' examples like 'janky on Safari').
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description uses a specific verb ('diagnoses') and clearly identifies the resource ('Lenis smooth scroll issues'). It distinguishes itself from sibling tools, which focus on creating patterns, generating setup, API reference, and optimizing performance.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description indicates when to use the tool (for diagnosing scroll issues) and provides examples. However, it does not explicitly state when not to use it or mention alternatives, though the sibling tools give implicit context.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
lenis_generate_setupGenerate Lenis SetupARead-onlyIdempotent
Generates complete Lenis smooth scroll setup code for a given framework.
Supports vanilla JS, React, Vue, and Next.js with optional GSAP ScrollTrigger integration, snap scrolling, and custom RAF loop configuration.
Args:
framework ('vanilla' | 'react' | 'vue' | 'nextjs'): Target framework (default: 'vanilla')
with_gsap (boolean): Include GSAP ScrollTrigger integration (default: false)
with_snap (boolean): Include lenis/snap package (default: false)
custom_raf (boolean): Use custom requestAnimationFrame loop (default: false)
settings (object): Custom Lenis settings to include
Returns: Complete setup code with installation commands, imports, initialization, CSS, and comments.
Examples:
"Set up Lenis with GSAP in React" ā framework: 'react', with_gsap: true
"Basic smooth scroll for vanilla JS" ā framework: 'vanilla'
"Next.js app with snap scrolling" ā framework: 'nextjs', with_snap: true
| Name | Required | Description | Default |
|---|---|---|---|
| settings | No | Custom Lenis settings to include (e.g., { lerp: 0.05, duration: 1.5 }) | |
| framework | No | Target framework: vanilla, react, vue, or nextjs | vanilla |
| with_gsap | No | Include GSAP ScrollTrigger integration | |
| with_snap | No | Include lenis/snap package for scroll snapping | |
| custom_raf | No | Use custom requestAnimationFrame loop instead of autoRaf |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare the tool as read-only (readOnlyHint=true), idempotent (idempotentHint=true), and non-destructive (destructiveHint=false). The description adds that it generates code, which is consistent. It does not disclose any behavioral traits beyond what annotations already provide; however, it details the output components (install, imports, code, CSS). No contradiction.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is well-structured with a summary, parameter list, return description, and examples. It is not overly verbose given the number of parameters and options. However, the Args section largely duplicates the schema, which could be trimmed for slightly better conciseness.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The tool has 5 parameters (all optional), a nested object, and no output schema. The description adequately explains the generated output content and provides examples for common use cases. It covers the complexity sufficiently, though specifying the output format (e.g., string of code with markdown) would enhance completeness.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema already fully describes each parameter. The description's Args section mostly repeats schema info (defaults, types) and adds examples. This adds some clarity but does not substantially extend beyond the schema. The 'settings' object is described similarly in both.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states it generates complete Lenis setup code for a given framework, listing supported frameworks and optional integrations. This verb+resource combination is specific and distinguishes it from sibling tools like debug or pattern creation.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides clear context for when to use the tool (e.g., 'Set up Lenis with GSAP in React') and includes examples. It lacks explicit 'when not to use' statements or direct comparison to alternatives, but the provided examples and parameter combinations effectively imply correct usage scenarios.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
lenis_get_api_referenceLenis API ReferenceARead-onlyIdempotent
Queries the complete Lenis API documentation ā settings, methods, events, and properties.
Supports filtering by category and search term for targeted lookups.
Args:
category ('settings' | 'properties' | 'methods' | 'events' | 'all'): Filter by API category (default: 'all')
search (string): Optional search term to filter results
Returns: Formatted API documentation with types, defaults, and descriptions.
Examples:
"What is the lerp setting?" ā category: 'settings', search: 'lerp'
"List all methods" ā category: 'methods'
"How do events work?" ā category: 'events'
| Name | Required | Description | Default |
|---|---|---|---|
| search | No | Search term to filter results (e.g., 'lerp', 'scrollTo', 'wheel') | |
| category | No | API category to query: settings, properties, methods, events, or all | all |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint=true, destructiveHint=false, and idempotentHint=true, so the description's main role is to add context. It explains the return format (formatted API documentation with types, defaults, descriptions), which is valuable beyond annotations. No contradictions.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is well-structured with a clear purpose sentence, followed by parameter details, return description, and concrete examples. It is concise, front-loaded, and every sentence contributes to understanding.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's simplicity (reading documentation) and the lack of output schema, the description sufficiently covers what the tool does, its parameters, return format, and usage examples. It is complete for an agent to invoke correctly.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema already documents both parameters. The description adds value by restating defaults, providing usage examples (e.g., 'lerp' for search), and clarifying the purpose of each parameter in the context of API lookups.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states it queries the complete Lenis API documentation, listing specific categories (settings, methods, events, properties). It distinguishes itself from sibling tools that focus on creating patterns, debugging, generation, or optimization, making the purpose unambiguous.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides examples and mentions filtering by category and search term, which helps the agent understand how to use the tool. However, it lacks explicit guidance on when not to use it or direct comparison to siblings, though the context of sibling names implies differentiation.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
lenis_optimize_performanceOptimize Lenis PerformanceARead-onlyIdempotent
Provides performance optimization recommendations for Lenis smooth scroll setups.
Analyzes the described setup and returns targeted tips for reducing jank, improving fps, and optimizing for mobile devices.
Args:
setup_description (string): Description of current Lenis setup
target_fps (number): Target frames per second (default: 60)
mobile_optimized (boolean): Include mobile-specific tips (default: true)
Returns: Prioritized list of optimization recommendations with code examples.
Examples:
"React app with 50 GSAP animations and parallax" ā heavy animation tips
"Simple landing page with smooth scroll" ā lightweight optimizations
"E-commerce site with lazy loaded images" ā scroll-aware loading tips
| Name | Required | Description | Default |
|---|---|---|---|
| target_fps | No | Target frames per second | |
| mobile_optimized | No | Whether to include mobile-specific optimizations | |
| setup_description | Yes | Description of current Lenis setup (e.g., 'React app with 50 GSAP animations and parallax') |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already indicate readOnlyHint, idempotentHint, and destructiveHint. The description adds valuable context about the return format (prioritized list with code examples) and input examples, which exceeds the annotation coverage without contradictions.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is concise and well-structured: a single sentence summary followed by Args, Returns, and Examples sections. Every part adds value, and the most important information is front-loaded.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the 3 parameters with full schema coverage, annotations, and no output schema, the description fully explains the tool's behavior, inputs, and output format (prioritized list with code examples). Examples illustrate typical use cases, making it complete.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% with descriptions for all parameters. The description adds examples for setup_description (e.g., 'React app with 50 GSAP animations') and clarifies the default values and return structure, providing extra meaning beyond the schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states it provides performance optimization recommendations for Lenis setups, with specific verb 'provides' and resource 'performance optimization recommendations'. It distinguishes from sibling tools like debugging or setup generation by focusing solely on optimization.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies usage for performance optimization but does not explicitly state when to use this tool versus alternative sibling tools (e.g., debug vs. optimize). No when-not guidance is provided.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.
5 tool updates
v1.0.0- First observed
lenis_create_scroll_pattern - First observed
lenis_debug_scroll_issue - First observed
lenis_generate_setup - First observed
lenis_get_api_reference - First observed
lenis_optimize_performance
TDQS
Each tool has a clearly distinct purpose: pattern generation, debugging, setup code, API reference, and optimization. There is no overlap or ambiguity.
All tools follow a consistent 'lenis_verb_noun' pattern in snake_case (e.g., lenis_create_scroll_pattern, lenis_debug_scroll_issue). The naming is predictable and uniform.
With exactly 5 tools, the server is well-scoped for a focused library helper. Each tool serves a distinct purpose without redundancy or unnecessary breadth.
The set covers creation, debugging, setup, documentation, and optimization. Minor gap: no tool for updating or removing patterns, but core workflows are fully supported.
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Related MCP Connectors
Driflyte MCP server which lets AI assistants query topic-specific knowledge from web and GitHub.
Augments MCP Server - A comprehensive framework documentation provider for Claude Code
MCP server unifying ERPs, CRMs, APIs and knowledge base for Claude, ChatGPT and Gemini.
MCP server for AI agent profiles and smart notes. 60+ coding prompt packs with expert personas.
Related MCP Servers
- AlicenseBqualityCmaintenanceAn MCP server that supercharges AI assistants with powerful tools for software development, enabling research, planning, code generation, and project scaffolding through natural language interaction.1167101MIT
- AlicenseNot gradedqualityDmaintenanceAn MCP server that enables AI assistants to access up-to-date documentation for Python libraries like LangChain, LlamaIndex, and OpenAI through dynamic fetching from official sources.1MIT
- AlicenseCqualityCmaintenanceSmart MCP server that reads your code, understands file connections, and provides precise context to AI coding assistants, reducing token usage and preventing errors from outdated or irrelevant files.173MIT
- AlicenseNot gradedqualityCmaintenanceMCP server providing 33 verified Motion for React APIs with correct imports and defaults, enabling AI assistants to generate accurate animation code.18MIT
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/devAndreotti/lenis-mcp-server'
If you have feedback or need assistance with the MCP directory API, please join our Discord server