Guide · Agent skill
How to use the Cinematic GSAP Motion System agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The Cinematic GSAP Motion System is an agent skill: a set of written instructions that an AI coding agent loads so it can plan and write website motion using GSAP, ScrollTrigger and Lenis. It is aimed at front-end developers and designers building luxury editorial sites or creative studio portfolios. After this guide you will know how to install the skill, ask for motion work in plain language, and check what the agent produces.
Cinematic GSAP Motion SystemMengTo/Skills · MIT Download the skill Quick start
- 1Download and unzip. Download the skill ZIP from this page and unzip it into ~/.claude/skills/ or a project's .claude/skills/ folder.
- 2Or upload in the Claude apps. In the Claude apps, open Settings → Capabilities → Skills and upload the skill.
- 3Install the npm packages. In your project, run npm i gsap lenis. You need Node.js and npm.
- 4Describe the motion you want. Ask the agent for a specific effect, such as a staggered headline reveal or a pinned section, and name the type of site.
- 5Review the setup code. Check that GSAP's ScrollTrigger is registered, Lenis is driven through the GSAP ticker, and the reduced-motion check is present.
- 6Test on real devices. Scroll the page on desktop and touch devices, and check that motion is slow and calm and that the reduced-motion setting turns it off.
What does the skill make the agent do?
With the skill loaded, the agent can plan and write website code that uses GSAP and Lenis to create smooth, slow-moving scroll effects, staggered text reveals, parallax images, pinned sections, magnetic hover buttons and a custom cursor. It uses consistent timing values from a shared set of motion tokens, adds markup data attributes, and supplies the CSS and JavaScript setup. It also respects the visitor's reduced-motion preference.
The skill is a design and coding guide for motion, not a standalone app. It does not give you a finished website; it shapes the code an agent writes for your project.
- Smooth scrolling with Lenis, synced to the GSAP ticker
- Staggered word and line reveals on scroll
- Parallax images and pinned scenes
- Magnetic hover states and a custom cursor
- Reduced-motion fallback built into the setup
Install the skill from the ZIP or the Claude apps
Download the ZIP for this skill from this page and unzip it. To make it available across your own projects, place the unzipped folder in ~/.claude/skills/. To limit it to one project, place it in that project's .claude/skills/ folder.
If you use the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.
- Personal use across projects: ~/.claude/skills/
- Single project: the project's .claude/skills/ folder
- Claude apps: Settings → Capabilities → Skills
Install the libraries the code needs
The generated code depends on two npm packages, GSAP (with its ScrollTrigger plugin) and Lenis. You need Node.js and npm to install them, and a web page with a DOM and a bundler that can import CSS. If your project cannot add npm packages, this skill will not fit.
The skill's setup step uses this command:
npm i gsap lenisTrigger the skill with natural requests
You do not need special syntax. Describe the effect you want in ordinary words and mention the kind of site. The skill's description covers luxury editorial sites, creative studio portfolios, smooth scroll reveals, staggered text, parallax, pinned sections, magnetic hover states, custom cursors and mouse-reactive movement, so requests using these ideas should match it.
The demo prompts in the package also use the form "Use $cinematic-gsap-lenis-motion-system to...", which names the skill directly if you want to be certain it is used.
- "Add a smooth scroll and staggered headline reveal to my studio portfolio homepage using GSAP and Lenis."
- "Make the product images on this editorial page parallax on scroll, with a calm, slow feel."
- "Pin the case study section while the images scroll past, then release it."
- "Add a magnetic hover to the Explore button and a custom cursor that shows the label."
Review what the agent writes
The skill favours subtle motion. Its guidance says to prefer smooth, delayed and intentional movement, and to avoid bounce, elastic or springy easing, fast abrupt transitions, large scale jumps and over-animated interfaces. If an output looks busy, ask the agent to reduce the intensity, which fits the skill's own guidance.
The markup the skill uses relies on data attributes such as data-motion-text, data-reveal, data-parallax-image and data-cursor. Check that these are present in the HTML before testing the motion.
- Confirm the reduced-motion branch is in place
- Test scroll reveals on a real page length
- Check that the cursor is hidden on touch devices, as the CSS does with pointer: coarse
What people use it for
- Luxury editorial magazine pages with slow headline reveals and parallax photography
- Creative studio portfolios with pinned case study scenes and magnetic buttons
- Product launch pages where cards stagger in as the visitor scrolls
- Immersive storytelling pages with layered, mouse-reactive movement
Frequently asked questions
How do I install the cinematic GSAP Lenis motion system skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder for one project. In the Claude apps, you can upload it under Settings → Capabilities → Skills.
What do I need to run it?
You need Node.js and npm to install gsap and lenis, GSAP with the ScrollTrigger plugin, the Lenis smooth scroll library, and a web page with a DOM and a bundler that can import CSS. The skill does not run scripts or use the network itself.
Is it free to use?
The skill is listed under the MIT licence. Check the licence file in the source repository for the full terms. This page does not state a price.
Does it work without GSAP and Lenis?
No. The code it generates depends on GSAP and Lenis, so the project must be able to add those npm packages.
Are there alternatives?
The skill's reference list points to the Lenis repository and the GSAP documentation for ScrollTrigger, Timeline and Eases. If you do not want these libraries, this skill is not a fit, and you would need a different motion approach.
Why is my animation not showing or not smooth?
Check that the data attributes are in the markup, that ScrollTrigger.refresh runs on load, and that Lenis is driven through the GSAP ticker as the setup shows. Also check that reduced-motion is not enabled in your operating system, since the skill turns motion off in that case.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you are building a luxury editorial site or creative studio portfolio and your project can add GSAP and Lenis. Pick something else for simple brand or business sites, projects that cannot add npm packages, or accessibility-critical work that has not been tested, since motion can cause discomfort even with the reduced-motion fallback.
Download the skill