getFrontend/10-animation-styles-skill

---

name: 10-animation-styles-skill description: Créez des vidéos animées dans 10 styles qui cartonnent sur Reels et TikTok : pixel art, style PS2, art comique, style Lego, claymation, découpage papier, anime rétro, 3D low poly, risographie et diorama miniature. L'agent écrit l'histoire, code chaque scène et rend un mp4 sur votre ordinateur, sans crédits ni modèles d'image.

Styles d'animation

Dix looks, chacun dans un fichier de code réel que Claude peut utiliser pour n'importe quelle histoire. Rien ici n'appelle un modèle d'image ou de vidéo, donc la même histoire est rendue de la même façon à chaque fois et ne coûte rien.

Le modèle est livré avec un exemple terminé de 22 secondes : Claude vole vers la lune dans une fusée maison, dans un nouveau style à chaque temps fort. Exécutez-le d'abord pour voir chaque look en mouvement, puis remplacez l'histoire.

Styles

Fichier	Style	Le look en une ligne
pixel.js	Pixel art	Dessiné à environ 120 pixels de large et agrandi sans lissage. Petite palette, ciel dégradé, HUD de jeu
ps2.js	Style PS2	Peu de polygones, textures boueuses, brouillard, image basse résolution étirée, HUD de mission
comic.js	Art comique	Traits d'encre épais, couleurs plates, points Ben-Day, lignes d'action, bulles de texte, un grand BOUM
brick.js	Style Lego	Tout est en briques de plastique avec des tenons, sous un soleil doux
clay.js	Claymation	Formes molles avec empreintes digitales, lumière douce, 12 poses par seconde
paper.js	Découpage papier	Couches de carton découpé avec petites ombres, fibres de papier, 8 poses par seconde
anime.js	Anime rétro	Cellulos des années 80 : ciel dégradé, grand disque solaire, lignes de vitesse, image inversée sur le coup, grain du film
poly.js	3D low poly	Faces plates et lumière dure, rien de rond
riso.js	Risographie	Deux encres sur papier crème, chacune avec ses propres points de demi-teinte, imprimé légèrement décalé
mini.js	Diorama miniature	Un petit décor fait main sur un bureau, carton et coton, flou de tilt-shift

styles.md contient les règles pour chaque style : ce qui le fait ressembler à ce style, ce qu'il faut changer pour un nouveau sujet, et ce qui le casse. Lisez la partie du style avant d'écrire sa scène.

Étapes

1. Obtenir le brief. Quelle est l'histoire ou l'application, format vertical (Reels, TikTok) ou large (X, YouTube), et quels styles ? Sans préférence, choisissez 3 à 5 styles adaptés aux temps forts, ou les 10 pour les montrer. Un seul style pour toute la vidéo convient aussi.
2. Écrire l'histoire avec copywriter.md. Une ligne par temps fort. Montrez les lignes à l'utilisateur avec le style à côté de chacune, et attendez un "oui".
3. Copier le modèle : cp -r ~/.claude/skills/claude-animation-styles/template ~/ma-video && cd ~/ma-video && npm i. Vérifiez qu'il fonctionne avant de changer quoi que ce soit : node render.cjs stills 2,6,12 et ouvrez les images. Elles montrent l'histoire exemple, donc supprimez stills/ avant de commencer la vôtre.
4. Écrire story.json. format est vertical ou wide. Chaque temps fort a un style (le nom du fichier), seconds et sa line. Le même style peut être utilisé pour plusieurs temps forts, et chacun reçoit sa propre scène (voir ci-dessous).
5. Réécrire la scène dans chaque fichier de style que vous utilisez. Gardez le look, remplacez le sujet. Voir "Changer le sujet" ci-dessous.
6. Vérifier les images après chaque style : node render.cjs stills 1,3.5,6. Les nombres sont les secondes dans la vidéo entière, pas dans le temps fort, et la commande imprime le nom de fichier de chaque image. Ouvrez chacune. Le sujet est-il reconnaissable sans le son ? Ressemble-t-il au style ? Quelque chose est-il coupé par le cadre ?
7. Ajouter une voix, si l'utilisateur le souhaite : ELEVENLABS_API_KEY=... python3 voice.py [voice_id]. Il lit les lignes, écrit voice.mp3 et réajuste les temps forts dans story.json pour correspondre. Pas de clé signifie pas de voix, donc réglez les secondes manuellement et ajoutez de la musique.
8. Rendre : node render.cjs video --audio voice.mp3, ou simplement node render.cjs video pour aucun son. Il écrit out/video.mp4. Une vidéo de 20 secondes prend quelques minutes.
9. Regarder l'ensemble avant de le remettre : ffmpeg -i out/video.mp4 -vf "fps=1,scale=240:-1,tile=8x4" -frames:v 1 out/sheet.jpg (une image par seconde, donc les cellules vides à la fin sont normales). Vous ne pouvez pas entendre le son, donc demandez à l'utilisateur de vérifier le son.

Pour mettre de la musique sous une voix, 14 dB plus silencieuse que la voix : ffmpeg -i voice.mp3 -i music.mp3 -filter_complex "[1]volume=0.2[m];[0][m]amix=inputs=2:duration=first:normalize=0" audio.wav Mesurez les deux avec -af ebur128 et ajustez le volume, car les pistes varient beaucoup en intensité.

Changer le sujet

Chaque fichier de style a un create qui construit le monde une fois, et un render(t, ctx, dur) qui dessine n'importe quel moment, où t est en secondes dans le temps fort et dur est la durée du temps fort. Il ne regarde jamais que t, donc n'importe quelle image peut être dessinée dans n'importe quel ordre.

Un style utilisé deux fois. create reçoit index (la position du temps fort dans story.json), line et beat. Sauvegardez this.index = index et dessinez une scène différente pour chacun. Ne testez pas start pour cela, car il change chaque fois que le timing change.

Styles 2D (pixel, comic, paper, anime, riso). Le sujet est dessiné via un petit peintre : paint.fill(path, key) et paint.lines(segments, width, key), chaque style décidant ce qu'ils font. Dans comic, ils ajoutent des traits d'encre. Dans paper, ils ajoutent une ombre. Dans riso, ils déposent de la densité d'encre. lib/common.js contient les sujets exemples, drawClaude et drawRocket. Écrivez un drawCat, drawPhone ou drawFounder de la même manière, en utilisant les mêmes noms de pièces dans chaque style, et il récupère chaque look gratuitement. Un nouveau nom de pièce (fur, apron) doit être ajouté à la palette de ce style, qui est PAL dans comic, paper et anime et toneA et toneB dans riso, sinon il peint dans la mauvaise couleur sans erreur. Le pixel art dessine son propre sprite, donc écrivez-le à la main.

Styles 3D (ps2, brick, clay, poly, mini). lib/three-claude.js construit le sujet à partir de formes simples, avec un kit décidant du nombre de polygones et du matériau. Construisez votre sujet de la même manière : makeCat(kit). Le style Lego est l'exception, puisque tout doit être construit à partir de briques, donc copiez son helper add.

Gardez le sujet identique dans chaque style. Même silhouette, mêmes deux ou trois couleurs. C'est ce qui fait qu'un changement de style est perçu comme la même histoire plutôt qu'un nouveau clip. Une forme simple reconnaissable bat un personnage détaillé.

Ce qui fait fonctionner ces styles

• Changez le style sur une coupe franche. Coupez directement au look suivant. La surprise est la transition.
• Un grand objet qui bouge au centre. Les gens doivent comprendre chaque temps fort en moins d'une seconde, souvent sur un téléphone sans son.
• Chaque temps fort dure 1,5 à 3 secondes. Assez long pour voir le look, assez court pour qu'ils restent pour le suivant.
• Gardez l'histoire en mouvement à travers la coupe. Si la fusée monte à la fin d'un temps fort, elle monte encore au début du suivant.
• Le texte appartient au style. Un HUD dans les looks de jeu, une bulle de texte dans le look comique. Évitez les sous-titres par-dessus.

En cas de problème

• Puppeteer ou Three.js manquant : npm i dans le dossier avec render.cjs.
• ffmpeg manquant : brew install ffmpeg sur un Mac. Les images fonctionnent sans, la vidéo en a besoin.
• Images 3D noires ou rendus très lents : le rendu utilise le GPU sur un Mac et un rendu logiciel ailleurs (render.cjs, la ligne gl). Le rendu logiciel fonctionne et prend beaucoup plus de temps.
• Titres dans la mauvaise police : la page charge Inter Tight et Bangers depuis Google Fonts, donc elle a besoin d'Internet pendant le rendu.
• Un mot dans le style comique arrive tard : le compte à rebours lit les temps des mots depuis voice.json quand il y a une voix. Changez les mots qu'il cherche dans comic.js.

Gardez-le pour vous

Copiez les looks et créez vos propres sujets. N'utilisez pas le logo d'une marque, les personnages d'un jeu ou les décors d'une vraie entreprise à l'écran, et ne copiez pas la scène d'un autre créateur plan par plan.