longtake (一镜到底动效)

longtake

Basé sur onetake par Patrick, modifié pour les plateformes vidéo verticales (9:16). Ce qui a changé et pourquoi : CHANGES.md. Méthode verticale : references/vertical.md.

Courts films d'animation sur un produit, construits à partir du produit. Pas un éditeur vidéo, pas un générateur de diaporama : une composition (un fichier HTML, window.__seek(t)), une bibliothèque de mouvements (lib/motion.js), des séquences enregistrées à partir du produit réel, une palette sonore qui partage le même espace, et un oracle qui dit si la coupe a un rythme et si elle porte, avant qu'un humain n'ait à la regarder.

Six films l'ont appris. motion-web a pris trois coupes : les deux premières ont été rejetées comme « PPT 式一个一个展示 » pour une cadence uniforme — la moitié du rythme. Pocket Weather Club avait le rythme et était encore PPT : sa v1 passait tous les tests de rythme et a été rejetée, parce que chaque battement remplaçait le précédent. La v3 a été acceptée lorsque chaque battement naissait du dernier — le personnage atterrit sur le titre, la page sort de sa carte, une scène s'ouvre à partir du personnage. C'est la moitié de la portée. One dot a ajouté l'opérateur : avec une caméra fixe c'était « 就缺灵动的跟踪运镜 » ; avec une caméra qui poursuit ce que chaque battement cadre — en retard, en inclinaison, en stabilisation — c'était « 运镜、镜头和物理都没问题 ». knockon portait par cause : une machine de table légère où chaque battement est la collision qui déclenche le suivant. clearing portait par échelle : un seul plan d'un an à une demi-heure libre et retour, une caméra qui poursuit l'ancre à l'écran pour qu'elle atterrisse au même endroit à 1× et 300×. overlap était la leçon de sens : sa première coupe était « 美术挺棒但没看出来啥意思 », et l'ajout de curseurs étiquetés l'a aggravée ; elle n'a été lue qu'une fois l'idée intégrée dans l'œuvre — un & caché dans deux plaques de bruit qui apparaît à l'instant où les passages entrent en registre. Tout ici existe pour que le film suivant commence là où ces films ont fini.

Ce que le protocole ne peut pas vous donner (à lire en premier)

Les règles ci-dessous sont principalement des rejets écrits : elles empêchent un film d'être un diaporama. Ce sont un plancher. Un film peut passer toutes les règles et toutes les étapes de l'oracle et être encore mort — W1 (une promotion verticale, 2026-11) l'a fait : portée 1.00, VERDICT PASS, et le verdict était « 很死板，没到参考片的 70% ». Ce qui lui manquait, c'est ce que les films acceptés avaient :

• Un contenu digne d'être regardé dans chaque battement. Le film de lancement de onetake (la référence habituelle) est la v8 : trois invites, chacune devenant un mini-film conçu complet dans sa propre palette et son propre langage de mouvement. Le spectateur regarde du travail, pas des étiquettes sur le travail. Demandez d'abord : quelle est la plus belle chose que nous possédons (séquences, films finis, UI réelle) ? Construisez le film à partir de cela, en plein écran. Un concept qui explique un processus avec des cartes et des puces est un diagramme, et un diagramme bien animé reste un diagramme.
• Une horloge. Chaque cas fort coupe sur une grille musicale — envoie sur les temps forts, la partie la plus rapide sur le drop, un arrêt sur un temps silencieux. Sans narration, la musique est la chronologie, pas une décoration. Chronométrer les battements « assez longtemps pour lire » donne un rythme uniforme qui semble rigide. Si le projet de l'utilisateur interdit la musique, dites ce que cela coûte et demandez.
• Un arc. La densité et la vitesse montent vers un pic, puis se relâchent. Cinq stations égales sont une liste.
• Le changement comme contenu. Dans la référence, la chose elle-même se transforme (une fenêtre se reformate en téléphone, une barre s'ouvre en film). Un mouvement qui ne fait que voyager entre des battements statiques est des transitions autour de diapositives.
• Des cycles de regard. La référence a pris huit coupes révisées. Montrez des plans fixes de l'accroche et du pic avant le premier rendu et un brouillon avant le polissage ; ne présentez jamais un passage non révisé comme final.

Quand utiliser cette compétence, et quand ne pas l'utiliser

• Un clip de lancement / teaser / intro pour une application, une page, une compétence, une fonctionnalité — oui.
• Une démo de fonctionnalité narrée (30–60 s) qui montre le produit en cours d'utilisation, éventuellement dans plusieurs langues — oui : reconstruisez l'UI au lieu de l'enregistrer (§4, references/product-demo.md).
• L'utilisateur a un clip de référence dont il veut l'ambiance — oui, commencez au §1.
• Long format, tête parlante, montage de séquences existantes avec transitions — non.
• L'utilisateur nomme explicitement HyperFrames ou Remotion — utilisez ce qu'il nomme. Sinon, ce pipeline.

Le protocole — dans cet ordre, sans sauter

1 · Déconstruire la référence avant de toucher à quoi que ce soit (硬规则)

python3 scripts/analyze_ref.py ref.mp4 --out ana/     # carte d'énergie, coupes, immobilité, planches contact, ligne de mouvement

Lisez la carte d'énergie et les planches et notez les nombres que le film doit égaler. La carte d'énergie dit quand le film bouge ; la ligne motion: dit comment — médiane t80 (snaps ou courbes en S) et smear (rendu avec flou de mouvement ou non). Ce qui a décidé le film motion-web : la référence était 34 % immobile, avait 7 coupes franches en deux salves, et gardait chaque élément petit avec beaucoup d'espace blanc. Rien de tout cela n'est évident en regardant une fois, et un film construit sans le mesurer est sorti avec une cadence uniforme — deux fois. references/reference-deconstruction.md.

Les nombres de la référence supplantent les règles de genre ci-dessous. « Petits éléments, grand fond » et « immobile un tiers du temps » ont été mesurés à partir de motion-web. Le film de lancement de onetake est ~10 % immobile et principalement en plein écran ; W1 a suivi les règles de genre contre lui (immobile 0.50, fond vide) et est sorti vide et lent. Notez le % d'immobilité, combien du cadre est rempli, le nombre de coupes et où se trouve le tronçon le plus dense, et égalisez ceux-là. Notez aussi de quoi sont faits les battements de la référence (pièces conçues finies ? UI réelle ? texte ?) et si elle coupe sur la musique — c'est l'entrée du §2.

2 · Concept — trois idées centrales avant toute feuille de battements (硬规则)

Un concept est une phrase sur l'image, pas sur le produit : l'idée unique dont le film est fait. Écrivez-en trois qui diffèrent dans cette idée — pas trois histoires racontées avec les mêmes cartes :

• un élément se transforme à travers tout — un point est le curseur, se divise en liste de compétences, se creuse en anneau de chargement, se déroule en courbe de ressort, atterrit comme le point sur le i du logo ;
• un mouvement de caméra à travers l'échelle — commencez à l'intérieur du curseur, sortez vers la saisie, plongez à travers le bouton d'envoi dans le travail, ressortez à travers le film fini (cases/clearing-15s : un an → un jour → une demi-heure → retour) ;
• une division avant/après — les mêmes battements en diaporama à gauche et portés à droite, jusqu'à ce que le côté droit brise le gauche ;
• une réaction en chaîne — chaque battement est la collision qui déclenche le suivant (cases/knockon-15s) ;
• ou une métaphore physique, une surface continue, un système typographique…

Pour chacun : le cadre d'accroche, ce qui porte chaque limite, ce qu'il exclut (pas de cartes ? pas de coupes ?), et son apparence — un préréglage de looks/ (python3 scripts/look.py sheet → gallery/sheets/looks.png : papier, crépuscule, table, outremer, riso, braise, chacun mesuré à partir d'un film accepté), les couleurs propres du produit (look.py from-shot shots/*.png --out look.json), ou une créée pour ce film. Montrez les trois et laissez l'utilisateur choisir. L'histoire du modèle — mots cinétiques → invite tapée → liste de vérification qui tictaque → résultat → hits staccato → logo noir — est un concept, jamais le défaut : une démo d'opération construite dessus a passé toutes les étapes de l'oracle (portée 1.00) et a été renvoyée comme « 和 motion web 很像…没有创造力 ». La même chose vaut pour les exemples de la liste ci-dessus et pour chaque cas : choisir « one dot » parce que c'est le premier exemple est copier, pas un concept (W1 l'a fait, et a été lu comme un diagramme). Testez chaque concept avec deux questions : que regarde le spectateur dans la seconde la plus chargée ? (ce doit être quelque chose de beau, pas une étiquette) et en quoi la chose elle-même se transforme-t-elle ?

Les films verticaux (9:16) ne sont pas des films paysage pivotés : le cadre est une colonne haute, donc remplissez-le de haut en bas, laissez le matériau déborder des bords, et respectez les zones de sécurité de la plateforme (les légendes et les boutons couvrent le bas ~20 % et le bord droit). stills.py --width 1080 --height 1920 garde le rapport dans sa planche. La méthode, avec la plongée dans le portail imbriqué et ses nombres : references/vertical.md, cas cases/huazhong-dongtian-22s/.

3 · Storyboard comme rythme et portée

Écrivez le concept choisi comme une feuille de battements : t · battement · ce qui bouge · ce qui est immobile · ce qui porte dans le battement suivant.

Rythme. Variez la durée des plans d'au moins 4× (mots de 0,25 s à côté de poses de 2,5 s). Au moins un tronçon de quasi-silence dans l'image et le son. Une histoire — celle du concept — pas un catalogue. La taille des éléments et le fond suivent la référence (§1).

Arc et horloge. Choisissez la musique avant la feuille de battements, trouvez ses temps forts, ses silences et son drop (scripts/beat_grid.py), et écrivez chaque t dans la feuille comme un battement de cette piste. Le pic de l'image se trouve sur le drop.

Portée. À chaque limite de section, nommez la chose qui lui survit et bouge : la main, le sujet, un conteneur qui devient la scène suivante (morphRect), une scène qui s'ouvre à partir du sujet (iris), une caméra qui pousse dans une carte jusqu'à ce qu'elle soit la scène (zoomThrough), un casting qui se plie dans le verrouillage (gather → seal). Si rien ne survit, c'est un changement de diapositive, quel que soit le rythme. Les coupes franches appartiennent aux salves de hits et à la carte de fin, quand le concept les a. references/rhythm.md.

4 · Séquences à partir du produit réel — ou l'UI reconstruite à partir de captures d'écran

python3 scripts/record_footage.py footage.json --out footage/

Pages réelles, pilotées en temps réel par Playwright (balayages rythmés par l'horloge murale, pas de défilement, clics), enregistrées à la taille à laquelle vous les montrerez, avec un marqueur magenta injecté à l'instant où l'entrée commence pour que le cadre d'action soit retrouvable ensuite. Les images sortent à 30 ips en JPEG ; le chemin du pointeur est sauvegardé pour que la composition puisse redessiner la main — le spectateur doit voir la cause, pas seulement l'effet. Format de configuration dans le docstring du script.

Ou reconstruisez-la. Quand le film parcourt les fonctionnalités d'une application (et surtout quand il a une voix ou d'autres langues), l'utilisateur capture l'écran ou enregistre uniquement les prises de référence, et l'UI est reconstruite en HTML dans le propre cadre pixel de la référence. Chaque chaîne vit dans une table, chaque état est écrit par un set(state) pur, et la réplique se trouve sur le plan où la caméra peut se rapprocher à n'importe quel zoom. Les surlignages sont mesurés à partir de son DOM (lib/ui_kit.js). La narration vient de scripts/vo_tools.py : audition, lignes, temps de mots, sous-titres. Une deuxième langue est ?lang= sur la même comp, sa VO mappée sur la chronologie créée par UIK.timeWarp sur des mots qui signifient la même chose, vérifiée pixel-identique pour la langue source avec scripts/frame_diff.py. Le contenu reste la sortie réelle du produit. Méthode, nombres et ce qui est quoi : references/product-demo.md. C'est une technique, pas une apparence : la palette, la scène, la grammaire de la caméra et les transitions sont choisies fraîchement dans §2 à chaque fois.

5 · Composer — un fichier, fonctions pures du temps, mouvements de la bibliothèque

mkdir -p cases/my-film && cp templates/comp.html lib/motion.js cases/my-film/   # le modèle charge motion.js → window.OM
python3 scripts/probe.py my-film/comp.html        # dès qu'il joue de bout en bout : ce qui porte chaque limite, la courbe de chaque mouvement

Choisissez les mouvements en regardant gallery/sheets/<move>.png — six images sur la courbe de vitesse de ce qui bouge. La bibliothèque en compte 39 : entrées, portées, simulations de contact et en direct, caméra et ses assistants de projection, et un ensemble fluide (un champ lumineux, des ondulations, de la soie, une courroie, des ressorts SwiftUI) ; chacun est une fonction du temps retournant des nombres pour une transformation DOM ou un appel canvas. Ne redérivez jamais un ressort ou une interpolation avec des constantes fixes. Le modèle est le film motion-web (mots cinétiques, invite tapée, liste de vérification qui tictaque, traversées en vol, simulations en direct, une pose, hits staccato, un chemin de main continu que chaque simulation lit) — copiez ses battements seulement quand c'est le concept choisi en §2 ; sinon gardez son contrat et ses aides et écrivez les propres battements du concept. Tout est f(t) ; les simulations sont pré-simulées une fois à 240 Hz et échantillonnées. Aperçu ?play, épinglez ?t=6.4&hud. references/motion-library.md, references/composition.md.

L'apparence voyage avec la comp. python3 scripts/look.py apply ember cases/my-film/comp.html (ou un look.json) écrit look.js à côté : les huit couleurs comme variables CSS et LOOK.color, trois polices OFL sous-ensemble aux glyphes que la comp définit et intégrées, pour que le rendu file:// obtienne une vraie typographie. Chargez-la avant le script de la comp, écrivez contre var(--ink) / var(--display) ou LOOK.font('display', 96), et enchaînez window.__ready sur LOOK.ready. Relancez-la après les changements de copie ; elle nomme tout caractère qu'une police n'a pas (--cjk <font> pour le chinois / japonais / coréen).

Caméra : keyée, mais opérée. OM.camera(t, keys) place la caméra où chaque battement en a besoin ; le ressenti d'un opérateur vient de la façon dont les clés sont placées : keyez le sujet ~0.1 s en avance sur sineInOut pour le suivre, keyez le point d'atterrissage avant un snap sur expoInOut pour fouetter vers lui, ajoutez une main (une flottaison lente à deux sinusoïdes, zéro dans les poses) et OM.shake sur chaque atterrissage. Dessinez un OM.lattice faible plus loin, ou sur un fond vide le mouvement ne se lit pas. Avec une caméra, __track retourne des boîtes écran (OM.projectBox), __motion donne à render.py le voyage, et __meta.inFrame nomme ce qui ne doit jamais quitter le cadre. La méthode, avec code : references/composition.md → A camera.

6 · Rendu — brouillons 1080p30, 4K60 seulement après acceptation

python3 scripts/stills.py comp.html --times 0.7,2.4,3.8,6.2,9.9,12.7 --out stills.png   # regardez avant de rendre
python3 scripts/render.py comp.html --out draft.mp4 --sfx sfx.wav            # 1920×1080 · 30 ips · 180° shutter
python3 scripts/render.py comp.html --out film.mp4 --final --sfx sfx.wav     # 3840×2160 · 60 ips, une fois la coupe acceptée

L'obturateur est un véritable flou de mouvement : chaque cadre en mouvement est plusieurs recherches sur l'obturateur ouvert, moyennées en lumière linéaire ; les poses sont détectées et sautées. Une capture est une capture d'écran Chrome (~150 ms ; la page elle-même se dessine en moins de 1 ms), donc render.py exécute --workers navigateurs en processus parallèles (noyaux par défaut − 2, mai...