Toutes les ressources premium et membres pour 8,99 €/mois, en abonnement sans engagement. Voir les offres

PalateKit

Se connecter
Menu

Demander une ressource

Décrivez en une phrase la ressource qui vous manque. Nous vous écrirons quand elle sera publiée.

0 / 280

Une page, une vidéo ou une image en ligne.

Débloquer PalateKit

Tout débloquer

Offre

Le paiement vaut acceptation de nos conditions générales de vente.

Paiement sécurisé par Stripe. Reçus et factures envoyés par e-mail.

Content de vous revoir

Connectez-vous pour installer, télécharger ou sauvegarder cette ressource. Un compte gratuit suffit pour les ressources gratuites.

Système de mouvement pour site premium v1.0.0

Utilisez cette ressource pour définir et coder le langage de mouvement d'un site haut de gamme

Nouveau

  • 497 téléchargements
  • 154 mentions J'aime
  • 131 sauvegardes

Gratuit

Installer avec la CLI

Dans un terminal, depuis le dossier voulu :

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

Sans option, la skill va dans ~/.agents/skills/ ; ajoutez --agent claude-code (ou codex, cursor…) pour viser un agent.

Première fois : connectez la CLI avec

npx --yes palatekit@latest login

L'agent installe un système de mouvement réutilisable avec GSAP, ScrollTrigger et Lenis, piloté par de petits attributs HTML. Il couvre le texte révélé par mots ou lignes, les révélations au défilement, les images découvertes par masque, la parallaxe, les sections épinglées, le survol magnétique, le curseur personnalisé et les calques réactifs à la souris.

Choisie surtout par

Mise à jour le 2 novembre 2026

Page d'aperçu sombre présentant un système de mouvement avec un grand titre blanc.

Caractéristiques

Fonctionne dans
Guides d'installation
Génère avec
Le modèle de votre agent
Utilise
  • GSAP
  • Lenis
Licence
MIT

Ressources similaires

Tout voir

Ce que vous obtenez

  • SKILL.md traduit en français : jetons de mouvement, API d'attributs, base CSS et fonctions JavaScript prêtes à adapter
  • Règles de chorégraphie (ordre d'apparition) et de performance
  • Un ordre d'initialisation et une liste de contrôle qualité
  • demo/PROMPT.md et REFERENCES.md : le prompt type et les liens vers la documentation

Pour qui

  • Vous voulez que défilement, survol et curseur forment un seul langage de mouvement
  • Vous refaites le site d'un studio créatif, d'une agence ou d'une marque de luxe
  • Vous voulez réutiliser les mêmes animations sur plusieurs pages

Pas pour qui

  • Une seule animation isolée, pour laquelle une recette simple suffit
  • Un projet sans GSAP ni Lenis
  • Des interfaces d'application où le mouvement doit rester discret

Étiquettes

  • gsap
  • lenis
  • motion
  • scrolltrigger
  • curseur

À propos

Vous dites

« Ajoute un système de mouvement à mon site : titres révélés par lignes, images dévoilées au défilement, boutons magnétiques et curseur avec libellé. »

Page d'aperçu sombre présentant un système de mouvement avec un grand titre blanc.

Skill publiée par MengTo sous licence MIT, traduite par PalateKit.

Voir plus

Prérequis

À préparer
Le site ou les pages à animer et Les effets que vous souhaitez ou évitez
Dépendances
GSAP et Lenis

Comment l'utiliser

  1. Installez la skill et indiquez le site ou les pages à animer
  2. Demandez l'installation du système de mouvement avec les effets souhaités
  3. Vérifiez avec la liste de contrôle : sans JavaScript, mouvement réduit, tactile

Aperçu du contenu

Fichiers

  • demo/preview.jpg72,3 Ko
  • demo/PROMPT.md2,1 Ko
  • LICENSE1,1 Ko
  • NOTICE-PALATEKIT.md0,5 Ko
  • REFERENCES.md0,2 Ko
  • SKILL.md18,8 Ko

Origine et licence

Modifié par PalateKit

Auteur
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.

Avis des utilisateurs

–

Aucune note pour l'instant

Chargement des avis…

Supprimer votre avis ?

Votre note et votre commentaire seront retirés de la fiche.

Questions fréquentes

Les effets fonctionnent-ils sur téléphone ?

Le survol magnétique, le curseur et le parallaxe à la souris sont désactivés sur écran tactile ; les révélations au défilement restent actives.

Peut-on l'utiliser avec React ?

Oui. La skill conseille d'envelopper l'initialisation dans gsap.context() et d'appeler ctx.revert() au démontage.