SaneHe/clay-themed-stopmotion

Vidéo stop-motion thème argile universelle

Ce skill permet de générer des vidéos courtes avec un style visuel stable et un thème remplaçable. Il décrit une méthode de production universelle basée sur "matériau argileux + calques d'actifs + mouvement par étapes + sous-titres et son" ; la ville, la date, le personnage, le point de repère, le moyen de transport, l'intrigue et les effets sonores doivent être lus depuis le brief actuel de l'utilisateur, et ne peuvent pas être codés en dur pour un projet spécifique.

La livraison finale doit inclure le projet source HyperFrames reproductible, les actifs locaux réels, l'audio, l'export MP4 et l'image de contrôle finale par trame. Un aperçu HTML non rendu n'est pas une vidéo terminée.

Définir d'abord les variables du thème

Avant d'écrire du code, extrayez et enregistrez les éléments suivants à partir des besoins de l'utilisateur :

• Phrase de thème : qui fait quoi dans quel monde pour atteindre quel objectif ;
• Temps, lieu, époque, point de repère ou univers ;
• Nombre de personnages, apparence, vêtements, accessoires et actions ;
• Matériaux visuels : argile, carton, tissu, bois, métal ou autre texture artisanale ;
• Source de couleur et langue du générique de début/fin ;
• Durée, format d'image, plateforme, sous-titres et exigences sonores.

Si l'utilisateur ne fournit qu'une vidéo de référence, analysez d'abord ses matériaux, son rythme de plan, sa composition, ses sous-titres et son son, puis écrivez les variables du thème dans DESIGN.md. La vidéo de référence fournit une méthode et une ambiance, mais ne détermine pas automatiquement l'histoire de la nouvelle vidéo.

Flux de travail standard

1. Analyser la référence et rédiger des hypothèses. Enregistrez la durée, le rapport hauteur/largeur, le rythme des plans, les pauses d'arrêt sur image, les matériaux, la position des sous-titres, la musique et les effets sonores des événements. Les éléments non confirmés doivent être écrits comme des hypothèses, sans se faire passer pour des faits.
2. Rédiger d'abord le document de conception. Créez DESIGN.md, STORYBOARD.md et une liste d'actifs. Définissez les couleurs du thème, les matériaux, les polices, le timing des plans, les sous-titres, les repères audio et le texte de fin.
3. Générer des actifs en calques. Arrière-plans, personnages, accessoires, points de repère, textures et effets locaux enregistrés en PNG/JPG/WAV locaux. Les personnages et les accessoires de premier plan doivent de préférence être en PNG transparent, en maintenant la cohérence de la position de la caméra, de l'éclairage, des proportions et des matériaux.
4. Effectuer un audit d'attribution des actifs. Ouvrez chaque PNG de personnage/accessoire et listez les objets qu'il contient déjà (sac, tasse, carte, chapeau, ombre, etc.). Chaque objet visible ne peut avoir qu'une seule source : PNG de personnage, calque d'actif indépendant ou HTML/CSS. Vous ne pouvez pas ajouter une version CSS simplifiée à un objet déjà dessiné dans le PNG du personnage. Voir references/compositing-audit.md.
5. Terminer d'abord l'image statique. Utilisez index.html comme entrée racine ; pour le mode portrait, placez une composition indépendante dans compositions/. Assurez-vous d'abord que chaque plan fonctionne en mode statique, puis ajoutez le mouvement.
6. Ajouter un mouvement par étapes déterministe. Utilisez la timeline en pause de GSAP, les heures de début et de fin de scène et un nombre limité de steps(n). Utilisez des translations, zooms, rotations, tremblements et pauses légers pour simuler le mouvement artisanal du stop-motion. Interdiction d'utiliser Math.random(), Date.now(), repeat: -1 et les transform CSS/GSAP qui se chevauchent.
7. Ajouter des sous-titres et un générique de fin. Les sous-titres sont des calques HTML, assurez-vous qu'ils sont lisibles dans différents formats d'image. Le générique de fin ne doit contenir que le texte officiel demandé par l'utilisateur, interdiction d'utiliser preview, draft, test, Codex ou des instructions internes.
8. Ajouter du son en calques. La musique et les effets sonores d'événements sont des fichiers audio locaux. Spécifiez data-start, data-duration, data-track-index, data-volume et les fondus pour chaque <audio> ; pour les compositions portrait imbriquées avec un repère de début non nul, ajoutez data-hf-media-start-basis="local". Les fichiers audio de substitution ne peuvent être utilisés que pour les brouillons, pas dans la timeline finale. N'utilisez pas de bruit blanc pour imiter directement les sons naturels comme les vagues, le vent ou les flammes ; si vous n'avez pas de ressource appropriée, laissez vide ou réduisez la densité sonore. Avant la livraison, vérifiez chaque piste et le mixage selon references/audio-layout.md.
9. Recomposer pour la plateforme. Le mode portrait ne doit pas être simplement un recadrage du mode paysage. Définissez data-width="1080" data-height="1920", conservez le sujet principal, les points de repère clés et les sous-titres, placez le texte dans la zone de sécurité centrale, et repositionnez les personnages et les accessoires. Voir references/vertical-export.md.
10. Rendu, extraction d'images clés et vérification. Exécutez lint, validate, rendu, ffprobe et contact sheet. Vérifiez le format d'image, la durée, les sous-titres, la hiérarchie des actifs, les objets en double, les blocs flottants, les marqueurs internes de fin, la vidéo H.264 et l'audio AAC ; écoutez réellement les pistes individuelles et le mixage final sur les 0 à 5 premières secondes, les transitions principales et la fin. ffprobe et les vérifications de niveau ne remplacent pas une vérification auditive. Voir references/workflow.md et references/audio-layout.md.

Conventions générales du projet

• Conservez un seul index.html racine ; les formats d'image alternatifs sont placés dans compositions/, pour éviter qu'HyperFrames ne détecte plusieurs entrées racines.
• Utilisez des actifs matriciels réels pour les points de repère réels ou le sujet principal ; les formes CSS géométriques ne peuvent être utilisées que pour la mise en page temporaire, pas comme actifs visuels finaux.
• Le contenu du thème est déterminé par le brief, et ne peut pas présupposer la ville, l'itinéraire, la date, la profession ou les personnages fixes dans le skill.
• Chaque accessoire doit être marqué dans la liste d'actifs comme "intégré dans le PNG" ou "calque indépendant". S'il est intégré, ne créez pas de calque CSS avec la même sémantique.
• Utilisez des ID et des commentaires explicites pour les accessoires d'environnement nécessaires (par exemple, tourniquet, poêle, porte, train ou pluie), pour éviter que les objets environnementaux ne ressemblent à des marques collées sur les personnages.
• N'utilisez pas de vrais logos d'entreprise, d'informations personnelles ou de musique non autorisée ; privilégiez les panneaux génériques, les textures générées et l'audio déterministe local.

Commandes de validation

npm install
npx hyperframes lint
npx hyperframes lint compositions/vertical.html
npx hyperframes validate --no-contrast
npm run render
npm run render:vertical

Après l'export portrait, vérifiez avec ffprobe-static du projet réel :

FFPROBE=$(node --input-type=module -e "import p from 'ffprobe-static'; console.log(typeof p === 'string' ? p : p.path)")
python3 scripts/check_render.py outputs/final-vertical.mp4 \
  --ffprobe "$FFPROBE" --width 1080 --height 1920 --max-duration 60

La contact sheet finale doit au moins inclure le générique de début, l'action principale, les transitions, le point culminant/résultat et le générique de fin. Un rendu réussi ne signifie pas que le visuel est correct : si vous voyez des blocs blancs, bruns, bleus ou gris inexpliqués, des points de repère ou accessoires en double, des objets flottants ou des mentions d'aperçu internes, vous devez revenir à l'audit d'attribution des actifs et le retraiter.

Documentation de support

• references/workflow.md : brief général, liste d'actifs, structure des plans et critères d'acceptation.
• references/compositing-audit.md : attribution des accessoires intégrés, vérification des calques en double et des artefacts visuels.
• references/vertical-export.md : zone de sécurité 9:16 et règles de recomposition.
• references/audio-layout.md : disposition générale de la musique/des effets sonores et vérification du volume.