Merci d'avoir commenté ! Voici le fichier de mon reel : un skill qui apprend à Claude à transformer une vidéo en animation au scroll, image par image, comme sur les pages produit d'Apple. Tu l'installes une fois, et Claude sait le faire dans tous tes projets.
Le fichier est dans l'encadré À télécharger (à droite sur ordinateur, tout en bas de la page sur téléphone). Ouvre plutôt cette page sur ton ordinateur : c'est là que tu vas l'installer.
Ce que fait ce skill
Quand tu lui donnes une vidéo, Claude :
- découpe ta vidéo en images (format WebP, léger) avec ffmpeg ;
- installe GSAP et Lenis, les deux librairies qui gèrent le scroll ;
- crée un composant React qui dessine la bonne image selon ta position dans la page ;
- le place dans ta page, avec les bons réglages.
C'est la technique des pages Apple : pas une vidéo qu'on lit, mais une suite d'images qui avance au rythme du scroll. L'animation avance et recule exactement avec ta molette ou ton doigt.
Ce qu'il ne fait pas, volontairement : le design autour (textes, sections, typo). Le skill ne s'occupe que de la partie technique, tu gardes la main sur ta page.
Ce qu'il te faut
- Une vidéo : générée (Higgsfield, Kling, Seedance...) ou filmée.
- Un projet Next.js ou React. Pas encore de projet ? Demande à Claude de t'en créer un.
- ffmpeg sur ton ordinateur, l'outil qui découpe la vidéo. Pas installé ? Claude peut s'en occuper (sur Mac :
brew install ffmpeg). - Claude Code, ou Antigravity.
Installer le skill
Décompresse le zip : tu obtiens un dossier scroll-frame-sequence qui contient un fichier SKILL.md. Garde ce dossier tel quel, c'est lui qu'il faut ranger au bon endroit.
Dans Claude Code
Range le dossier dans ~/.claude/skills/. Le dossier .claude est dans ton dossier utilisateur ; il est caché (sur Mac, Cmd + Maj + . l'affiche dans le Finder). Le fichier doit se retrouver ici : ~/.claude/skills/scroll-frame-sequence/SKILL.md. Le skill marche alors dans tous tes projets.
Le plus simple : demande-le à Claude Code.
Installe ce skill pour qu'il soit disponible dans tous mes projets : décompresse ~/Downloads/scroll-frame-sequence.zip dans ~/.claude/skills/, puis vérifie que le fichier ~/.claude/skills/scroll-frame-sequence/SKILL.md existe.
Si le skill n'apparaît pas tout de suite, relance Claude Code.
Dans Antigravity
Range le dossier dans ton projet, ici : .agents/skills/scroll-frame-sequence/SKILL.md.
Sur claude.ai ou l'app Claude
Va sur claude.ai/customize/skills, importe le zip tel quel (sans le décompresser) et active le skill. Pratique pour en parler avec Claude ; pour l'intégrer dans un vrai site, Claude Code reste le plus simple : il découpe la vidéo et écrit les fichiers directement dans ton projet.
Lancer l'animation
Mets ta vidéo dans ton projet, ouvre Claude Code dans le dossier du projet, puis colle ce prompt en l'adaptant :
Utilise le skill scroll-frame-sequence pour transformer ma vidéo videos/hero.mp4 en animation au scroll. Projet Next.js (App Router), 180 images. Place la section juste après le hero de la page d'accueil, et ne touche pas au reste du design.
Remplace le chemin de la vidéo, le type de projet (Next.js App Router, Next.js Pages Router ou React avec Vite) et l'endroit de la page par les tiens. S'il manque une info, Claude te la demande.
Ensuite, lance le site (npm run dev) et ouvre-le par son adresse locale (localhost). Ne l'ouvre pas en double-cliquant sur un fichier : les images ne se chargeraient pas.
Bien choisir ta vidéo
- Un fond uni. Autour de l'image, le skill remplit l'écran avec la couleur des coins de ta vidéo. Avec un fond uni, l'animation se fond dans ta page, sans cadre visible.
- Un mouvement simple et continu : une rotation, un zoom, un objet qui s'assemble. C'est ce qui rend le mieux quand on le fait avancer au scroll.
- Entre 100 et 300 images. En dessous, ça saccade ; au-dessus, c'est lourd à charger. Une vidéo de 12 secondes découpée à 15 images par seconde donne 180 images. Vidéo de 5 secondes ? Demande 24 images par seconde, soit 120 images.
Régler l'animation
Chaque souci a son réglage. Change la valeur toi-même dans le composant, ou décris à Claude ce que tu vois :
- L'animation se termine trop tôt : baisse
frameSpeed(1,5 à 1,8) ou allonge la section (scrollHeight). - L'animation est molle : monte
frameSpeed(2,2 à 2,5). - Le sujet est coupé sur les bords : baisse
imageScale(0,80 à 0,82). - Trop de vide autour du sujet : monte
imageScale(0,90 à 0,95). - La section est trop longue ou trop courte : règle
scrollHeight(3 pour raccourcir, 5 ou 6 pour allonger). - Ça saccade quand tu scrolles : passe
scrubà0.5pour adoucir le suivi du scroll.
Bon à savoir : par défaut, l'animation est finie à la moitié de la section, puis la dernière image reste affichée. Pratique pour poser un texte dessus.
Sur téléphone
Le skill prévoit aussi une version mobile (images plus légères) et une image fixe pour les visiteurs qui ont réduit les animations dans leurs réglages. Demande-les une fois l'animation en place :
Ajoute la version mobile prévue par le skill (images en 1280 px, moins d'images, section plus courte) et l'image fixe pour les visiteurs qui ont activé « réduire les animations ».
Si ça ne marche pas
- Les images ne s'affichent pas : tu as ouvert le site en double-cliquant sur un fichier. Passe par
npm run devet l'adresse localhost. - Rien ne bouge au scroll : un élément parent de la section a souvent un
overflow: hiddenqui bloque le scroll. Demande à Claude de le chercher. - Ça rame sur téléphone : demande moins de 150 images, en 1280 px de large.
Tu vas l'essayer ? Tague-moi sur Insta avec ton animation, je veux voir ce que tu en fais !