Vidéo teaser
Un teaser présente une fonctionnalité en quelques séquences, chacune avec un seul focus clair, le tout sur de la musique. Chaque écran est une capture d'écran réelle du produit ; le mouvement provient de la caméra, des lignes découpées de ces captures d'écran qui se mettent en place, et des coupes qui tombent sur la musique. La vidéo entière est du code (une page HTML et une table de timing, rendues par HyperFrames), donc une nouvelle capture, une légende modifiée ou un clip musical différent ne nécessitent qu'une ré-exécution.
La personne dirige le goût et itérera plusieurs fois. Montrez les planches contact avant les rendus complets, conservez chaque rendu et notez ce qui a changé et pourquoi. Commencez par les valeurs par défaut dans references/taste.md : elles sont ce qu'un premier cycle de révisions a convergé.
Configuration
- Node 22+ avec npx (HyperFrames s'exécute via
npx [email protected]; rien à installer), ffmpeg dans le PATH (HyperFrames en a besoin pour les captures et les rendus aussi),uv(les outils Python déclarent leurs propres dépendances), et Playwright avec Chromium dans le projet du produit pour les captures. Les rendus chargent GSAP et la police Inter depuis un CDN, donc ils ont besoin d'une connexion réseau. SK=<chemin du dossier de cette compétence>/scripts.- Travaillez dans un dossier en dehors des fichiers suivis d'un dépôt (un
.logs/<video>/dans gitignore, ou un dossier scratch) :
<work>/
assets/<theme>/ captures et boxes.json, par passe de capture
capture/ les scripts de capture pour ce produit
video/ index.html et timeline.js (copiés depuis l'exemple) ; assets/ contient les captures, l'icône de marque, la musique
NOTES.md chaque version et pourquoi elle a changé, commandes de reconstruction
1. Brief
Confirmez en un court échange, en proposant des valeurs par défaut :
- Durée : 10 s sauf indication contraire. Sous un plafond strict, réduisez les séquences, n'accélérez jamais le mouvement.
- Les séquences : trois ou quatre, chacune une tâche sur un écran (saisir une URL, examiner ce qui a été trouvé, voir le résultat, la marque). Chaque séquence reçoit une légende de deux ou trois mots, sans chiffres.
- Exemple de données lisibles en un coup d'œil : un site bien connu, pour que les résultats (noms de concurrents, favicons) soient reconnaissables.
- Aspect : les propres jetons de thème du produit (le mode sombre est une bonne valeur par défaut pour un teaser) et sa véritable icône de marque, prise depuis son site web en ligne, pas un logo que vous dessinez.
- Musique : le fichier, et si une durée de 10 s convient (voir étape 5).
- Quelle branche ou worktree a la dernière interface utilisateur pour chaque écran. Vérifiez si elle est en retard par rapport à son dépôt distant avant de capturer.
2. Capture
Captures d'écran réelles à 1440x900, 2x, avec $SK/capture.mjs (le même outil que pour narrated-video) : images de frappe pour tout ce qui est tapé, captures hautes (2400 px) pour tout ce que la caméra pane vers le bas, boîtes mesurées pour chaque élément qu'une scène encadre, découpe en lignes, ou sur lequel elle clique. Passez { colorScheme: 'dark' } à cap.page() pour le mode sombre. Ne dessinez jamais d'interface utilisateur et ne modifiez pas les pixels. Détails, y compris les images d'animation figées et la capture d'un état de chargement sans payer la requête : references/capture.md. Examinez chaque capture avant de l'utiliser.
3. Composer
Copiez examples/openseo-ai-visibility/video (index.html, timeline.js) dans le dossier de travail, placez les captures, l'icône de marque et la musique dans video/assets/, et réécrivez timeline.js : la table de timing, les légendes, la palette, les chemins et hauteurs des captures, les boîtes mesurées, les clés de caméra de chaque scène, et le pointeur. index.html construit chaque scène à partir de ce fichier : les lignes sont découpées de leur capture en utilisant les boîtes mesurées. Comment les pièces fonctionnent et les nombres importants : references/composition.md.
4. Brouillon et inspection
cd video
npx --yes [email protected] lint # doit signaler 0 erreurs
npx --yes [email protected] snapshot --at 0,1.2,2.4,2.6,3.4,4.4,6.0,8.2,9.5 --no-end # dans snapshots/
Les captures instantanées prennent des secondes, utilisez-les donc plutôt que des rendus brouillons. Capturez chaque début de scène, clic, entrée de légende et le milieu de chaque fondu, et examinez-les (chaque exécution écrit aussi des planches contact) : un seul focus par image et centré, la légende dégagée de la chose en focus, pas de bord de page vide quand la page est à plat, pas de ligne encore manquante à la fin d'un dévoilement. Ensuite, vérifiez une image en pleine résolution de chaque scène pour des textes nets.
5. Musique
uv run $SK/beats.py song.mp3 # tempo, volume par seconde, chaque temps fort
uv run $SK/beats.py song.mp3 --window 51.9 10 # les temps forts d'un clip candidat en temps vidéo
Choisissez le clip, écrivez son début dans l'élément <audio> dans index.html et ses temps forts dans la table de timing, et déplacez les coupes dessus : le clic principal sur la goutte, chaque changement de scène sur un temps fort, le logo sur le temps fort le plus fort. Choix du clip et mappage : references/music-sync.md.
6. Rendu et vérification
npx --yes [email protected] render -o renders/<video>-vN.mp4 --fps 60 --crf 14 \
--video-frame-format png --experimental-fast-capture=false # environ 15 s pour 10 s de vidéo
uv run $SK/verify-sync.py renders/<video>-vN.mp4 <temps forts planifiés...> # chaque temps fort dans une image ; sort en erreur sinon
uv run $SK/sheet.py renders/<video>-vN.mp4 renders/sheet-vN.png <temps...>
Nommez les rendus par version et conservez-les tous ; la personne compare. Un arrêt sur image pour le partage (une image sociale, une miniature) est une capture 4K d'un moment choisi : npx --yes [email protected] snapshot --at 7.3 --no-end --zoom 0,0,1920,1080 --zoom-scale 2 -o stills écrit un PNG de 3840x2160.
7. Révision et itération
Donnez le chemin du mp4 (et comment l'ouvrir), les séquences et leurs temps, et tout ce qui diffère de la demande. Enregistrez chaque cycle dans NOTES.md. La première version de l'exemple travaillé a pris sept cycles ; ce qui a changé à chaque cycle est dans examples/openseo-ai-visibility/NOTES.md.
Règles strictes
- Écrans réels uniquement. Un dévoilement de lignes peut brièvement couvrir des lignes avec l'arrière-plan propre du tableau (échantillonné depuis la capture) pendant que les vraies lignes atterrissent dessus ; une fois qu'elles ont atterri, l'image est la capture.
- Vérifiez les captures pour les secrets et données personnelles (clés, e-mails, noms d'autres personnes, URLs localhost) avant le rendu.
- La musique et les captures restent sur la machine de la personne ; ne publiez rien sans qu'on vous le demande.
- Restaurez tout fichier suivi que la construction ou l'aperçu du produit régénère dans son dépôt.
Les erreurs qui coûtent le plus de temps sont dans references/gotchas.md.