Que fait film-collage-papier-dechire ?
Un film de collage = un seul voyage continu en stop-motion à travers du papier déchiré, coupé au rythme de la musique, se terminant sur un titre, une déchirure de page jusqu'au logo et un appel à l'action. Tout est code sauf les découpes photo. assets/template/ est un film complet de 10 s (lancement YouTube de kaye.creatives) prêt à être rendu tel quel — adaptez-le, ne partez pas de zéro.
Ce que les utilisateurs de ce skill attendent (références/leçons.md contient l'histoire)
- Regardez la référence d'abord. Ouvrez chaque lien envoyé, extrayez les images à 12 ips, lisez les fiches. Plusieurs références → trouvez celle qu'ils préfèrent.
- Technique de la référence, histoire de la marque. Copiez la grammaire du mouvement, jamais l'intrigue (pas de mapping suricates-pour-suricates).
- Code d'abord ; générez uniquement des découpes photo. Pas de fonds générés, pas de personnes ou de personnages IA sauf demande, pas de génération vidéo.
- Choix sous forme de fiches rendues, pas de suppositions : police du titre →
tools/font_sheet.sh, couleurs →tools/palette_sheet.sh; l'utilisateur répond par un numéro. - Rapide et visible : envoyez le tableau des beats, la fiche de découpes et une ébauche tôt, donnez des ETAs en temps réel, utilisez des agents parallèles (références/agent_workflow.md).
- Parlez dans la langue de l'utilisateur ; le texte à l'écran en anglais sauf demande. Pas de scintillement plein écran (photosensibilité).
0 · Collecte des informations (demandez une fois, en un seul message, uniquement ce que vous ne pouvez pas déduire)
Orthographe exacte de la marque/handle et chaque mot à l'écran · durée · format (voir ci-dessous) · langue du texte (le cyrillique change les polices) · CTA (s'abonner / suivre / visiter) · fichier logo ou logo texte · musique : synthétisée ou leur propre piste · OK pour dépenser environ N×2 crédits en découpes.
Format. Les mises en page de collage sont conçues pour 1920×1080 uniquement (collage.js et scenes.js utilisent des coordonnées absolues). Pour un Reel 9:16 sans remise en page : effectuez le rendu du film 16:9 et placez-le en pleine largeur (1080×608) sur une page 1080×1920 entre des bandes de papier déchiré qui portent le titre, le handle et le CTA. Un vrai film vertical signifie repositionner chaque coordonnée — citez-le comme un temps supplémentaire.
1 · Projet (1 min)
<skill>/scripts/new_project.sh <output_root> <slug> # nouvelle marque : palette désactivée (couleurs papier originales)
<skill>/scripts/new_project.sh <output_root> <slug> --example # reproduire le film kaye.creatives livré (palette nuit)
cd <project> # exécutez chaque commande ci-dessous depuis le projet (agents : préfixez chaque appel par `cd <project> &&`)
Crée comp/, audio/score.html, tools/ (extraction/encodage/mux/incrustation compilés), cutouts/, refs/, review/. Nécessite macOS (Swift, AVFoundation, afconvert), Chrome/Brave, Node ≥ 22 (NODE_BIN=/chemin/vers/node force une version ; si un fallback a été lié, export PATH="<project>/tools/bin:$PATH" pour les appels node directs — tools/*.sh le font eux-mêmes), internet pour Google Fonts.
Les découpes manquantes s'affichent comme des cartes grises étiquetées, donc une ébauche fonctionne avant toute génération. L'exemple charge : cam_side cam_front car helmet phone plane_front plane_side clap reel laptop headphones midi phone_gimbal cassette cloud_1..4 rocks_a/b/c tree_a/b grass_strip.
2 · Référence (10–15 min)
Téléchargez la référence (Pinterest : résoudre pin.it → page pin → l'URL v1.pinimg.com/videos/…/720w.mp4 ou /mc/720p/ H.264 ; GIF : diviser les images avec ImageIO/Swift — pas de ffmpeg). tools/extract ref.mp4 refs/f 12 960 0.85, puis des fiches de contact avec tools/sheet.mjs (légendes = image/12 s ; tools/strip.sh suppose 24 ips, donc ses étiquettes correspondent à la moitié du temps réel sur des images à 12 ips). REGARDEZ. Écrivez refs/analysis.md avec les titres de références/reference_san_diego.md : temps de coupe, courbes de mouvement, hexadécimaux de palette, polices similaires, liste des choses à copier — et mappez chaque dispositif de référence à un dispositif CL/CLX ou marquez-le comme « nouveau dispositif » ; listez les dispositifs San Diego à supprimer. La référence de l'utilisateur remplace les chiffres San Diego ci-dessous.
Grammaire du mouvement (mesures San Diego — références/reference_san_diego.md)
- Tout sur deux poses (12 dessins/s) : temps de mouvement
q(t) = floor(t*12)/12, oscillation de couche de 1–2 px par dessin. - Pas de coupes franches jusqu'au logo : zooms traversants, déchirure de page, volet déchiré, trou hexagonal dans le kaléidoscope, basculement derrière une fusée en bandes.
- Chute d'un objet en 3 dessins (bord entre → en l'air −8° → atterrit) + 1 dessin de stabilisation (1.03→1) ; apparitions en 1–2 dessins.
- Plongée dans un détail : zoom exponentiel ~1→6× sur ~1 s, le centre du zoom se rapproche du détail.
- Kaléidoscope : anneaux en miroir, pas de rotation, l'échelle double environ toutes les ~0.35–0.38 s ; un autocollant répété seulement en un seul anneau.
- Le titre tombe d'en haut, expo-out sur 9 dessins, pas de dépassement, contour en papier blanc + extrusion perspective.
- Déchirure de page ~0.42 s avec un dos sombre qui s'enroule → bande déchirée avec le mot-symbole ; scintillement de style alterné tenu 2-1-2-3-2-2 images, à l'intérieur de la bande.
3 · Histoire + tableau des beats (envoyez dans les ~15 min)
Écrivez script.md : time | musique | ce que l'on voit | texte à l'écran (textuel), grille à 120 BPM (beat 0.5 s, 24 ips). Choisissez la durée :
10 s (l'exemple livré)
| t | beat |
|---|---|
| 0–1.0 | page de collage ; ▶ tombe (atterrit 0.5) ; tag de chaîne ; curseur appuie sur ▶ 0.875 |
| 1.0 | la page se déchire du centre → monde 1 (voiture F1 à travers des bandes diagonales, centre 1.75 ; casque frappe 2.0 ; tag) |
| 2.5 | volet déchiré → caméra de film, plongée accélérée dans l'objectif, iris papier 2.9–3.4 (tag) |
| 3.5–4.5 | anneaux du kaléidoscope, flyers 4.2/4.3/4.4, trou hexagonal → bureau |
| 4.5–5.5 | bureau : ordinateur portable 4.5, matériel 4.75/5.0/5.25, invite tape, « générer ✦ » 5.15 → résultat |
| 5.5–5.95 | basculement, fusée en bandes emporte ▶ |
| 6.0 | titre « KAYE / CREATIVES » (Fraunces Black Italic), explosion radiale, biplan traverse |
| 7.5–7.92 | déchirure de page → bande logo |
| 8.0–8.5 | scintillement du logo dans la bande |
| 8.5–10 | S'ABONNER frappe, clic 9.0 → ABONNÉ ✓, cloche 9.15, poussée lente |
Intro de 6 s (joue avant chaque vidéo : pas de déchirure, pas de bureau, pas de CTA) : 0–0.5 héros tombe · 0.75–1.5 plongée dans un détail, iris 1.0–1.42 · 1.5–2.5 kaléidoscope, flyers 2.17/2.33, trou 2.33–2.5 · 2.5–2.96 basculement fusée · 3.0 titre (atterrit 3.75) + explosion · 4.5–4.92 déchirure · 5.0–5.5 scintillement bande · 5.5–6 coup final + tenue. Partition : dur 6, drop 0.5, mid 1.5, build 2.5, vac 2.95, lift 3.0, end 5.5. Logo ≥ 1.0 s à l'écran.
Promo de 15 s (reflète la référence de 15 s) : 0–0.5 héros tombe · 0.5–2.5 apparitions · 2.5–3.5 plongée + iris · 3.5–5.5 kaléidoscope, trou 5.33 · 5.5–7.5 monde 2, explosion menée par un flyer · 7.5–9.5 monde 3 / moments produit · 9.5–10.5 fusée · 10.5 titre (atterrit 11.25) · 12.5–12.92 déchirure · 13.0–13.5 scintillement · 13.5–15 CTA.
30 s : assets/examples/kaye_30s_scenes.js + kaye_30s_score.html (pub téléphone, lettres de rançon, mur de miniatures).
Reskin pour une autre marque
| dispositif | kaye (YouTube) | ex. café |
|---|---|---|
| chute héros | ▶ bouton lecture | tasse / sac de grains (CL.sprite + CL.drop) |
| apparitions | accessoires caméra | croissant, grains |
| déchirure → monde 1 | voiture F1 à travers des bandes | tambour torréfaction, ferme |
| plongée + iris | objectif caméra (cam_front) | crème dans la tasse (mesurer centre + rayon en px sprite ; formule iris dans api.md) |
| anneaux kaléidoscope | voitures, bobines | grains, tasses (un anneau par autocollant) |
| bureau + écran | interface invite | comptoir + ticket de commande (CLX.tag / CLX.ransom) — ou supprimez-le |
| fusée | ▶ sur des bandes | tasse sur un panache de bandes |
| titre / bande | nom de chaîne / kaye.creatives | nom boutique / logo ou @handle |
| CTA | S'ABONNER + cloche + curseur | handle + puce adresse (CLX.tag), étoile horaires (CLX.star) |
CLX.play, subscribe, thumb, screen et cursor sont des dispositifs YouTube. Les arrière-plans dans collage.js utilisent des noms de découpes fixes (CL.page : grass_strip + rocks_* ; CL.diag : rocks_* + cassette ; CL.cloudsky : cloud_1..4) : le reskin zéro-code consiste à générer des substituts sous les mêmes noms (grass_strip = une bande déchirée de grains de café, rocks_* = sacs en demi-teinte noir et blanc) ; sinon copiez pageLayers dans scenes.js. Mettez à jour la liste cuts: de warm() pour les nouveaux noms. |
4 · Découpes (5 min, ~2 crédits chacune)
Uniquement ce que le code ne peut pas dessiner — modèle d'invite, ensemble d'exemple et incrustation dans références/cutouts.md. tools/greenkey keyframes/raw/x.png cutouts/x → PNG alpha, feuilles multi-objets divisées automatiquement. Effectuez le rendu d'une fiche de vérification sur un fond coloré et envoyez-la.
Un fichier logo réel → cutouts/logo.png, dessiné avec CL.sprite dans le drawUnder de la déchirure ; l'aspect scintillement = les arrière-plans de style logoBand + ce sprite. Pour un logo texte, dimensionnez-le min(190, 0.78·L / largeur mesurée).
5 · Montage en code
comp/scenes.js est le film : COPY (mots à l'écran), fonctions de scène (pageScene, f1Scene, camScene, kalDraw, deskScene, titleBg, titleScene, endScene), transitions (wipe, ripDraw, tearDone), K.setup({bars}) zooms marqués. Mots en dehors de COPY : le « PROMPT »/titre de l'interface d'invite (CLX.screen o.title), les glyphes d'affiche du look scintillement 'posters' (collage_fx.js) — vérifiez-les. API : références/api.md ; timings réels et pièges de l'exemple : références/edit_notes_10s.md.
Re-rythmez en remappant le temps, pas en éditant les littéraux : Cut(a, b, (ctx, t) => titleScene(ctx, t + (6.0 - a))). Gardez les décalages multiples de 1/12 s. Les scènes qui dessinent un voisin se déplacent en un seul bloc (kalDraw→deskScene via drawNext, titleBg→deskScene avant 71/12, endScene→titleScene/titleBg). Ensuite mettez à jour K.setup({bars}), les repères de partition et les temps d'images fixes. Les temps au-delà de la durée sont limités à la dernière image.
Police du titre vit à 4 endroits : le <link> dans comp/index.html (chargez UNE police de la famille), la liste fonts() dans comp/film.js (sinon les sprites cuisent avec un fallback), COPY.titleFont, et le <link> de comp/font_sheet.html pour les candidates. Texte cyrillique : Ultra, Fraunces, Cinzel, Bevan, Abril Fatface, Shrikhand, Chango, Rye, Lilita One, Bungee, Chewy et Gluten n'ont pas de cyrillique — utilisez Rubik / Rubik Spray Paint, Unbounded, Yeseva One, Lobster, Playfair Display, Russo One pour le titre et logoBand o.font, et vérifiez les puces de rançon.
Images fixes : node tools/capture.mjs comp/index.html review/st --stills 0.5,1.75,….
6 · Musique
audio/score.html synthétise la partition dans le navigateur (pas d'échantillons) : groove funk + bruitage papier (gifles, déchirures, whoosh, pops, frappe, clics, cloche), limiteur. Définissez window.SCORE_CONFIG {dur, drop, mid, build, vac, lift, end} dans son premier <script> à partir du tableau des beats et déplacez les repères avec window.SCORE_CUES = {…} ; supprimez les lignes dans paper() pour les événements que le film n'a pas (cherchez CUE.car, CUE.plane, CUE.type, CUE.gen, CUE.subClick, CUE.ding) — mettre un repère à null génère une erreur. Mettez en sourdine les couches avec ?lv_<name>=0.
node tools/render_audio.mjs "<project>/audio/score.html" audio/score.wav
afconvert -f m4af -d aac -b 256000 audio/score.wav audio/score.m4a
python3 tools/music_window.py audio/score.wav --hits 0.5:0.35,1.0:1.0,6.0:1.0,7.5:0.45,8.5:1.0 # chaque grand hit le plus fort dans sa fenêtre
python3 tools/music_window.py audio/score.wav --timeline 0.25
Leur propre piste à la place : python3 tools/music_window.py track.mp3 --len <dur> → choisissez une fenêtre → python3 tools/cut_audio.py track.mp3 <start> <dur> audio/score.m4a → re-rythmez l'image sur ses temps forts (grille = le BPM de la piste). Vous ne pouvez pas entendre l'audio — vérifiez par les nombres (références/music_notes_10s.md) et dites-le.
7 · Ébauche → choix → final
tools/render_film.sh draft # ~30 s pour 10 s → <slug>_draft.mp4 (+ .frames_draft)
tools/strip.sh .frames_draft review/strip.png 1
tools/font_sheet.sh "LIGNE1|LIGNE2" # polices de titre numérotées dans le traitement réel et la palette du film
tools/palette_sheet.sh 0.75 3.75 6.9 8.75 # chaque palette de comp/grade.js sur les images clés (0 = originale)
tools/render_film.sh final audio/score.m4a <slug>_final.mp4 # images PNG, 30 Mbps
Intégrez la palette choisie avec window.PALETTE = '<nom>' dans comp/index.html (null = couleurs originales). grade.js recolore chaque pixel, photos et logo inclus : pour les couleurs de la marque, ajoutez une entrée PALS avec les hexadécimaux de la marque dans les rôles (rouge → primaire) et vérifiez que les photos de produits et le logo restent fidèles — ou définissez null et éditez directement CL.C / CLX.PAL.
QA avant envoi (regardez les images vous-même)
- Synchronisation : événements image vs pics
--hits/--timeline, ≤ 1 image. - Sur deux poses : les hachages des paires d'images ne diffèrent que lors des événements délibérés à 1 image.
- Jointures : pas d'images vides/sautantes ; rien de statique > ~1 s sauf les tenues de titre/logo.
- Rien ne couvre l'objet héros, le titre, l'étiquette du bouton, l'URL (chemins du curseur !).
- Tags ≥ 36 px sur les puces en papier, chacun ≥ 0.8 s ; titre ≥ 1.5 s ; logo ≥ 1.5 s (≥ 1.0 s pour les films ≤ 8 s).
- Pas de scintillement plein écran ; les pas de luminosité du scintillement de bande se font dans un sens. Pas de carte grise « découpe manquante » restante.
- Durée exacte (afinfo), audio présent, pic ≤ −1 dBFS.
- Un seul rendu à la fois par projet (
render_film.shefface son dossier d'images).
Fichiers
| besoin | où |
|---|---|
| grammaire San Diego mesurée, plans, palette, polices | références/reference_san_diego.md |
| API CL / CLX | références/api.md (+ commentaires d'en-tête de collage.js / collage_fx.js) |
| invites de découpes, ensemble d'exemple, incrustation | références/cutouts.md |
| carte des repères de partition + mesures | références/music_notes_10s.md |
| workflow agent, conseils | références/agent_workflow.md |
| leçons de l'historique des utilisateurs | références/leçons.md |
| notes de montage de l'exemple 10 s | références/edit_notes_10s.md |
| rendu fusionné pour le projet kaye.creatives | références/kaye_creatives.md |
| notes de développement | références/dev_notes.md |