Product Motion Video

Product Motion Video (60s)

0. Entrées (ne demander que ce qui manque, un seul message, max 3 questions)

• SUJET : produit/idée (obligatoire)
• MARQUE : URL ou fichier .md (optionnel) -> extraire nom, slogan, 3 avantages, couleurs, ton. Un seul web_fetch max.
• RÉFÉRENCE DE STYLE : optionnelle ; en déduire 3 traits (rythme, type, palette) en une ligne. Pas de recherche approfondie. Si l'utilisateur a laissé {placeholders} non remplis, les traiter comme vides, énoncer les hypothèses en une ligne, et construire.

1. Plan (<=15 lignes de réflexion, pas de dissertation)

Palette (fond, encre, 1 accent, 1 secondaire), 1 police d'affichage + 1 police de corps (système/Google Fonts avec fallback), 8 scènes.

Structure par défaut de 60 secondes :

1. 0-5 Accroche : typographie cinétique, une affirmation audacieuse
2. 5-13 Problème : glitch/tension, compteurs
3. 13-21 Révélation : logo/produit apparaît par morphing
4. 21-31 Fonctionnalités 1-3 : cartes UI, icônes pop, décalage
5. 31-41 Preuve : graphique animé / compteurs numériques
6. 41-49 Flux / fonctionnement : tracé de ligne + nœuds
7. 49-56 Montage : coupes rapides, battements de 0,4s, texte défilant
8. 56-60 Appel à l'action : logo, slogan, URL, pulsation

2. Construction (un seul fichier .html, JavaScript vanilla, zéro dépendance, <=18Ko)

Architecture, rester léger :

• Scène 1920×1080 adaptée à la taille via transform CSS ; toutes les couleurs comme variables CSS.
• Timeline maîtresse : scenes=[{t0,t1,build(stage), update(p)}] avec p dans 0..1 depuis une seule horloge rAF t=(now-start)/1000. Pas de chaînes de setTimeout.
• Fonctions d'aide (écrire une fois, réutiliser) : ease(p) (cubic/expo/back), lerp, clamp, stagger(i,n,p), type(el,text,p).
• Vocabulaire de motion (utiliser >=6) : typographie cinétique, révélations par masque, tracés stroke-dashoffset, compteurs, couches en parallaxe, cartes décalées, morphing de forme (chemin SVG via lerp d), glitch (découpage clip-path), marquee, zoom avant (scale+translate sur la scène), transitions par balayage entre les scènes.
• Règles : chevauchement des transitions de scène de 0,4s ; chaque élément utilise une easing (jamais linéaire) ; maximum 2 points focaux simultanés ; maintenir le texte clé affiché >=1,2s ; animer uniquement transform/opacity.
• Contrôles : lecture/pause (espace), barre de défilement, redémarrage, paramètre de recherche ?t=SECONDS, window.seek(t) pour l'export.
• Respecter prefers-reduced-motion en ne lançant pas automatiquement la scène de glitch clignotant.
• Audio optionnel : sons synthétisés via WebAudio sur les coupures de scène (désactivé par défaut, bouton muet). Jamais d'audio externe.

3. Livraison

• Publier via l'outil Artifact (publish) en tant que page ; si pas d'outil Artifact, utiliser create_file dans /mnt/user-data/outputs + present_files.
• Répondre : 2 phrases (ce que c'est, hypothèses). Pas de narration scène par scène.

4. Export MP4 (uniquement si l'utilisateur le demande)

Playwright headless : pour f de 0..1799, appeler seek(f/30), capture d'écran 1920×1080 -> frames ; ffmpeg -framerate 30 -i f_%04d.png -c:v libx264 -pix_fmt yuv420p out.mp4. Si ffmpeg/playwright est manquant, le signaler et donner cette recette à l'utilisateur sans réessayer.

5. Discipline de tokens

• Ne pas lire d'autres compétences, ne pas prévisualiser le rendu, ne pas faire de passe de perfectionnement sauf demande explicite.
• Réutiliser les mêmes mises en page de carte/texte entre les scènes ; varier le mouvement, pas le balisage.
• Écrire le fichier en UN SEUL appel d'outil. Éditer avec de petites modifications str_replace pour les révisions, jamais une réécriture complète.
• Limiter la recherche à 1 fetch + 1 search.