Every premium and members-only resource for $9.99/month, as a no-commitment subscription. See the plans

PalateKit

Sign in
Menu

Request a resource

Describe the resource you are missing in one sentence. We will email you when it is published.

0 / 280

A page, a video or an image online.

Unlock PalateKit

Unlock everything

Plan

Paying means accepting our terms of sale.

Secure payment by Stripe. Receipts and invoices sent by email.

Welcome back

Sign in to install, download or save this resource. A free account is enough for free resources.

Motion system for a premium website v1.0.0

Use this resource to define and code the motion language of a high-end website

New

  • 497 downloads
  • 154 likes
  • 131 saves

Free

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install gsap-lenis-motion-system

With no option, the skill goes to ~/.agents/skills/; add --agent claude-code (or codex, cursor…) to target an agent.

First time: connect the CLI with

npx --yes palatekit@latest login

The agent sets up a reusable motion system with GSAP, ScrollTrigger and Lenis, driven by small HTML attributes. It covers word and line text reveals, scroll reveals, clip-path image reveals, parallax, pinned sections, magnetic hover, a custom cursor and mouse-reactive layers.

Mostly picked by

Updated November 2, 2026

Dark preview page presenting a motion system with a large white headline.

Details

Works in
Install guides
Generates with
Your agent's model
Uses
  • GSAP
  • Lenis
Licence
MIT

Similar resources

View all

What you get

  • SKILL.md: motion tokens, attribute API, CSS foundation and JavaScript functions ready to adapt
  • Choreography rules (order of appearance) and performance rules
  • An initialization order and a quality checklist
  • demo/PROMPT.md and REFERENCES.md: the sample prompt and links to the documentation

Good fit for

  • You want scroll, hover and cursor to share a single motion language
  • You are rebuilding the site of a creative studio, an agency or a luxury brand
  • You want to reuse the same animations across several pages

Not for

  • A single isolated animation, where a simple recipe is enough
  • A project without GSAP or Lenis
  • App interfaces where motion should stay discreet

Tags

  • gsap
  • lenis
  • motion
  • scrolltrigger
  • cursor

About

You say

"Add a motion system to my site: headlines revealed line by line, images unveiled on scroll, magnetic buttons and a cursor with a label."

Dark preview page presenting a motion system with a large white headline.

Skill published by MengTo under the MIT license, translated by PalateKit.

Show more

Prerequisites

You bring
The site or pages to animate and The effects you want or want to avoid
Dependencies
GSAP and Lenis

How to use it

  1. Install the skill and tell the agent which site or pages to animate
  2. Ask for the motion system with the effects you want
  3. Check with the checklist: no JavaScript, reduced motion, touch devices

Content preview

Files

  • demo/preview.jpg72.3 KB
  • demo/PROMPT.md2.1 KB
  • LICENSE1.1 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • REFERENCES.md0.2 KB
  • SKILL.md17.8 KB

Origin and licence

Modified by PalateKit

Author
MengTo
Source
github.com/MengTo/Skills/tree/a45892d2fdadab75b31fb16abecc02f101b31c43/agent-skills/web-design/cinematic-gsap-lenis-motion-system
Licence
MIT

Notice

Version modifiée de « cinematic-gsap-lenis-motion-system » (MengTo, MIT) : traduction française et fiche par PalateKit.

User reviews

–

No ratings yet

Loading reviews…

Delete your review?

Your rating and comment will be removed from the page.

Frequently asked questions

Do the effects work on phones?

Magnetic hover, the cursor and mouse parallax are turned off on touch screens; scroll reveals stay active.

Can I use it with React?

Yes. The skill advises wrapping the setup in gsap.context() and calling ctx.revert() on cleanup.