GratuitVidéo
Fenêtre d'application et zoom
- 365365 téléchargements
- 125125 mentions J'aime
- 188188 sauvegardes
Compatible avec
+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
Page web cinématique pilotée par le défilement v1.0.0
Utilisez cette ressource pour créer une page web éditoriale qui raconte une histoire au défilement
Nouveau
- 439 téléchargements
- 180 mentions J'aime
- 138 sauvegardes
Gratuit
Installer avec la CLI
Dans un terminal, depuis le dossier voulu :
npx --yes palatekit@latest install cinematic-scroll-storytellingSans 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 loginL'agent applique une méthode GSAP, ScrollTrigger et Lenis : préchargeur, révélation de texte mot par mot, sections qui apparaissent une fois, cartes empilées, parallaxe et scènes épinglées. Il suit des jetons de mouvement précis (durées, décalages, easings) et un ordre de construction, puis vérifie les cas sans JavaScript, la réduction des animations et le mobile.
Mise à jour le 2 novembre 2026
Aperçus
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- Gratuit
GratuitVidéo
Un seul grand chiffre
- 463463 téléchargements
- 223223 mentions J'aime
- 100100 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
PalateKit Motion, la bibliothèque
- 338338 téléchargements
- 198198 mentions J'aime
- 249249 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Trois barres face à face
- 348348 téléchargements
- 133133 mentions J'aime
- 182182 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Avant / après au curseur
- 322322 téléchargements
- 248248 mentions J'aime
- 238238 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Carrousel de trois cartes
- 418418 téléchargements
- 157157 mentions J'aime
- 101101 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Échange en bulles
- 564564 téléchargements
- 127127 mentions J'aime
- 161161 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Liste qui se coche
- 442442 téléchargements
- 233233 mentions J'aime
- 160160 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
Ce que vous obtenez
- SKILL.md traduit en français : vocabulaire des effets, jetons de mouvement, anatomie de page et extraits de code prêts à adapter
- Extraits JavaScript et CSS pour le préchargeur, le texte découpé, les révélations, la pile de cartes et la parallaxe
- Une liste de contrôle qualité (lisibilité sans JavaScript, mouvement réduit, mobile)
- demo/PROMPT.md et REFERENCES.md : le prompt type et les liens vers la documentation
Pour qui
- Vous réalisez le site d'un studio, d'un portfolio ou d'un lancement de produit
- Vous voulez une page au rythme maîtrisé plutôt qu'un empilement d'effets
- Vous cherchez une base GSAP et Lenis claire pour un agent de code
Pas pour qui
- Une application ou un tableau de bord où le défilement doit rester ordinaire
- Un projet qui ne peut pas utiliser GSAP ou Lenis
- Des animations vidéo exportées en MP4
Étiquettes
- gsap
- lenis
- scroll
- parallaxe
- landing page
À propos
Vous dites
« Crée la page d'accueil de mon studio de design avec un préchargeur, un titre qui se révèle mot par mot et une pile de cartes pour mes trois projets. »
Skill publiée par MengTo sous licence MIT, traduite par PalateKit.
Voir plusVoir moins
Prérequis
- À préparer
- Le contenu de la page (titres, textes, images) et Le nom du projet ou de la marque à mettre en scène
- Dépendances
- GSAP et Lenis
Comment l'utiliser
- Installez la skill dans votre agent et préparez le contenu de la page
- Demandez une page de récit au défilement en citant les sections souhaitées
- Testez sur ordinateur et mobile avec la liste de contrôle fournie
Aperçu du contenu
Fichiers
- demo/preview.jpg76,5 Ko
- demo/PROMPT.md2,2 Ko
- LICENSE1,1 Ko
- NOTICE-PALATEKIT.md0,5 Ko
- REFERENCES.md0,1 Ko
- SKILL.md13,4 Ko
Origine et licence
Modifié par PalateKit
- Auteur
- MengTo
- Source
- github.com/MengTo/Skills/tree/a45892d2fdadab75b31fb16abecc02f101b31c43/agent-skills/web-design/cinematic-scroll-storytelling
- Licence
- MIT
Notice
Version modifiée de « cinematic-scroll-storytelling » (MengTo, MIT) : traduction française et fiche par PalateKit.
Avis des utilisateurs
–
Aucune note pour l'instant
Chargement des avis…
Questions fréquentes
Faut-il installer des paquets ?
Oui, la page utilise GSAP et Lenis (npm i gsap lenis) ; vous pouvez aussi les charger depuis un CDN dans une page HTML simple.
Les utilisateurs qui réduisent les animations sont-ils pris en compte ?
Oui. Le code teste prefers-reduced-motion, désactive le défilement lissé et affiche le contenu statique.