Skip to content
Get packs

Cinematic GSAP Motion System

Adds premium scroll, text, parallax and cursor animations to websites using GSAP and Lenis.

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
4 files

What it does

When installed, 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 supplies consistent timing values, markup data attributes, CSS and JavaScript setup, and it respects the visitor's reduced-motion preference. It is a design and coding guide for motion, not a standalone app.

Great for

  • Front-end developers building a luxury editorial site or creative studio portfolio
  • Designers who want a consistent motion language implemented in code
  • Teams already using or willing to adopt GSAP and Lenis

Skip it if

  • Simple brand or business sites where heavy animation would slow pages or distract visitors
  • Projects that cannot add npm packages such as GSAP and Lenis, since the code depends on them
  • Accessibility-critical contexts without testing, because motion can cause discomfort for some users even with the reduced-motion fallback

Try asking

  • “Add a cinematic scroll reveal and staggered headline animation to my portfolio homepage using GSAP and Lenis”
  • “Set up smooth scrolling with Lenis synced to ScrollTrigger in my Next.js project”
  • “Create a pinned storytelling section with parallax images for a product landing page”
  • “Add a magnetic hover button and custom cursor that respects reduced motion”
Step-by-step guide: how to use Cinematic GSAP Motion SystemInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 4 original files, the MIT licence and an attribution note.

    cinematic-gsap-lenis-motion-system.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip cinematic-gsap-lenis-motion-system.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip cinematic-gsap-lenis-motion-system.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Specify the page type and desired intensity so the agent keeps motion subtle, as the guide asks
  • Test on touch devices and with reduced motion enabled, since the cursor is hidden there and effects are simplified
  • Review the generated npm install and imports and confirm library versions before shipping

What's inside

  • demo/index.html
  • demo/PROMPT.md
  • REFERENCES.md
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.

Find exactly what
you're looking for