brand-cut

Que fait brand-cut ?

entreprise / URL / dépôt -> recherche -> charte graphique -> script de moments produit -> storyboard -> (VO) -> construction par archétype -> (mix) -> QA -> matrice de rendu -> livrer

Lisez LEARNINGS.md avant votre premier film. Il contient tout ce qui a fait qu'un film a été rejeté ou qu'un rendu a échoué.

0. Règles (impératives)

• Chaque scène est un moment produit concret avec une UI réelle. Quand l'IA apparaît, une vraie réponse IA est à l'écran. Pas de slogans abstraits.
• La vérité plutôt que le marketing. Construisez à partir de la base de code, des docs et des écrans réels de l'application ; le site web ne sert que pour le ton. Chaque affirmation à l'écran remonte à une source (qa/claims.py).
• Logo exact, couleurs issues de la source, jamais approximatives.
• Pas d'aspect IA. Pas de majuscules / text-transform: uppercase, d'émojis, de sérifs italiques, de dégradés IA violets, de paillettes, d'orbes, de particules, de flare d'objectif, de contours néon, de fausse UI, de téléphones ou maisons procéduraux.
• Sécurité des flashs. Au maximum un flash plein écran toutes les ~8 s, jamais plus de 3 flashs en 1 s. qa/flashcheck.py doit passer sur le fichier final.
• Son. Un SFX conçu sur chaque action UI à l'écran ; la musique baisse sous les SFX et la VO ; pas de pompage sur le beat.
• Les formats sont des mises en page natives dans les zones de sécurité, jamais des recadrages. 60 fps ; le 1080p est rendu en 4K puis réduit.
• Ne jamais poster, télécharger ou publier quoi que ce soit, ni acheter de crédits, sans que l'utilisateur ne le dise.

1. Structure

SKILL.md, LEARNINGS.md  ce fichier, les pièges
research/RESEARCH.md    étape 0 : nom d'entreprise / URL / base de code -> charte graphique + vérités + captures UI réelles
brand.schema.json       schéma de la charte graphique
brands/demo/            "Tidewell", une marque fictive ; copiez-la pour une nouvelle marque
archetypes/             CONTRACT.md + 30 modèles de scènes (scene.html + README.md)
formats/                presets.json (tailles, marges de sécurité, préréglages de rendu, loudness) + safe-*.png superpositions
shared/                 hf.js (moteur : format, choix, générateur aléatoire), phone.js (téléphone photoréaliste), type.js, uikit/ (composants chat, notification, calendrier, reçu)
audio/                  vo.py (ElevenLabs + garde-fou budgétaire), mix.py, music.md, sfx/ (INDEX.md, INDEX.json, fichiers)
qa/                     flashcheck.py, framecheck.py, safezone.py, claims.py, vo_diff.py, contact.py, run-all.sh
scripts/                new-film.sh, add-scene.py, set-format.py, set-brand.py, brand-css.py, render-matrix.sh, save-ref.sh, index-refs.py, shazam.py, xcorr.py, beats.py, peaks.py
templates/              SPEC.md (contrat du film), index.html, project/, structures/
reference/              PATTERNS.md (bibliothèque d'archétypes + lois), RESEARCH-digest.md, studies/ (18 analyses de bobines + INDEX.md)
examples/               exemples de films finis avec leur charte graphique, SPEC et visuels

Prérequis : Node 18+ (npx hyperframes), Python 3.10+, ffmpeg, uv (uvx exécute les scripts QA et audio dans des environnements jetables). Optionnel : ELEVENLABS_API_KEY pour la voix off (sans elle, audio/vo.py utilise le TTS open-source Kokoro ; voir audio/VOICE.md), un dossier de musique ($MOTION_LIBRARY/music).

Fonctionne dans n'importe quel agent disposant d'un shell. Là où ce fichier dit "sous-agents", exécutez les étapes séquentiellement si votre agent n'en a pas ; "récupération web" désigne l'outil de récupération/navigation de votre agent, ou curl.

2. Pipeline

0. Recherche (research/RESEARCH.md). Mode base de code quand vous avez le dépôt (le plus précis), mode site web sinon, les deux quand vous pouvez. Sortie : brands/<id>/brand.json, truths avec sources, captures UI réelles dans brands/<id>/assets/ui/, et 5 à 8 moments produit.
1. Brief. Public, formats, durée, VO ou musique seule ou silencieux, la seule chose que le spectateur doit comprendre.
2. Charte graphique. Copiez brands/demo/, remplissez les palettes (glowRamp 9 tons), polices avec fichiers, logo, captures UI, histoire, vérités, voix. Validez avec brand.schema.json.
3. Génération de la structure. scripts/new-film.sh <marque> <dossier> <format> [format...] [--palette id] -> index.html avec le bloc de la marque (polices, variables CSS, window.BRAND), film.json, SPEC.md, stubs audio. Re-thématisez à tout moment : scripts/set-brand.py <dossier> <marque> [palette]. Changez de format : scripts/set-format.py <dossier> <fmt>.
4. Script. SPEC.md section 2 : une ligne par moment produit (UI réelle, mots à l'écran, ligne de VO, preuve, cibles de taille strictes). Limites de lecture : <= 3 mots/s, <= 42 caractères par ligne, 2 lignes max.
5. VO d'abord (films avec VO). audio/vo/script.txt, une ligne par ligne de VO, puis python3 audio/vo.py say <dossier> --voice <id> --take <nom>. Il fait une requête avec horodatages, divise par alignement, coupe les remplissages et limite les pauses. lines.json donne les durées. Vérifiez avec qa/vo_diff.py <dossier> <take>. Le garde-fou budgétaire refuse tout appel dépassant le plafond du travail.
6. Storyboard sur la VO et la grille de mesures (scripts/beats.py <wav> <dur>). SPEC.md section 3 : archétype, entrée/sortie, transition (pas de flash en premier, PATTERNS section 4), événements SFX.
7. Musique. Trois options coupées sur des fenêtres alignées sur les mesures (bloom sur la révélation, résolution sur le logo) ; effectuez le rendu de la sélection. Voir audio/music.md.
8. Construction à partir des archétypes. python3 scripts/add-scene.py <dossier> <archétype> <scene-id> <début> <durée> [--vars JSON], puis personnalisez. Avec des sous-agents : un constructeur par groupe de scènes, chacun ne possédant que ses fichiers, puis un critique indépendant sur les captures, puis corrections.
9. Mix. audio/events.json (musique, lignes VO, SFX avec temps depuis audio/sfx/INDEX.md, ducking) -> python3 audio/mix.py <dossier> -> audio/mix.wav à -14 LUFS / -1 dBTP.
10. QA. npx hyperframes check avec 0 erreurs, un rendu brouillon, puis qa/run-all.sh <dossier> <video> <fmt> (framecheck, flashcheck, safezone, claims, loudness, fps). Passez en revue les feuilles qa/contact.py <video> 10 <prefix> par rapport à la section 0.
11. Matrice de rendu. scripts/render-matrix.sh <dossier> [--4k 16x9] : par format, capture 4K réduite à 1080p, audio multiplexé, tests QA exécutés. Vérifiez d'abord l'espace disque libre.
12. Livraison. Un dossier avec les vidéos, une galerie index.html et un court REPORT.md (quoi, crédits utilisés, alternatives musique et voix, ce qui manque). Ouvrez-le pour l'utilisateur.

3. Formats (formats/presets.json)

id	toile	marges de sécurité (h/b/g/d)	pour
16x9	1920x1080	108/108/192/192	YouTube, LinkedIn, X, site
9x16	1080x1920	270/680/70/140	Reels, TikTok, Shorts
1x1	1080x1080	86/86/135/135	fil IG/LinkedIn
4x5	1080x1350	108/108/86/86	fil IG/FB
bannière	1920x600	60/60/96/96	bannière README/site (boucle silencieuse)

Les scènes lisent window.BRAND.format et adaptent la mise en page par format ([data-fmt="9x16"]). Le petit côté est toujours 1080 px, donc les tailles en px sont cohérentes ; agrandissez les héros en vertical.

4. Archétypes (détails dans reference/PATTERNS.md)

glow-field (A01, lumière WebGL plein film) | glass-slab (A02, panneau IA avec une vraie réponse streamée) | glass-tile-click (A03) | word-blur-in (A04) | tracking-collapse (A05) | chip-marquee (A06) | status-stack (A07, implémentation de référence) | wordmark-lockup (A08) | phone-tunnel (A09) | drum-wheel (A10) | card-carousel (A11) | network-lines (A12) | composer-send (A13) | card-burst (A14) | checklist-fix (A15) | orbit-chips (A16) | list-swap-toggle (A17) | object-launch (A18) | brutal-type (A19) | icon-ring (A20) | calendar-pick (A21) | product-hero (A22) | chat-thread (A23) | container-morph (A24) | notification-pile (A25) | docusign-sign (A26) | stripe-paid (A27) | logo-sting (A28) | branch-tree (A29) | counter-pill (A30) | logo-wheel (A31, carrousel "fonctionne avec").

Les structures de film S1-S8 (explicatif SaaS, 13 s vertical, checklist de polissage premium, cinématographique sombre, démo Figma, ouverture en dégradé, sting artisanal, plaque de preuve) se trouvent dans PATTERNS.md section 5. Contrat : archetypes/CONTRACT.md (variables CSS indépendantes de la marque, window.BRAND, variables par instance, natif du format, sécurité des flashs, indications SFX dans le README).

5. Étudier une nouvelle bobine de référence

• scripts/save-ref.sh <url> télécharge une bobine avec yt-dlp et crée un aperçu 2 ips + identification de la chanson ; scripts/index-refs.py l'indexe.
• Construisez des bandes 10 ips par 2 s et des passages en fps natifs aux moments clés ; suivez un élément par image pour nommer l'easing ; grille de beats avec scripts/beats.py ; hexadécimaux de palette ; luminance par image pour le profil de flash.
• Écrivez reference/studies/<id>.md : liste des plans, construction par élément, caméra, valeurs d'easing, transitions, typographie, palette, profondeur, son, structure de copie, pourquoi ce n'est pas IA, ce qui le rendrait IA, archétypes. Les 18 études qui s'y trouvent sont les exemples travaillés.

6. Styles éprouvés

• Glow (A01) : un shader WebGL ; champ scalaire -> rampe 9 tons, bruit warp, tramage ; uniformes depuis une table de keyframes monotone-Hermite pilotée par un proxy tween GSAP.
• Verre : backdrop-filter: blur(22px) saturate(1.5) brightness(1.15), biseau dégradé via mask-composite, surbrillance et ombre internes, ombre portée de contact, un reflet sur le mouvement.
• Typographie : une grotesk en 500, flou par mot de 14 -> 0 px, échelle 1.06 -> 1, power3.out, ligne recentrée, recul continu.
• UI réelle : recréez les composants du produit en HTML/CSS à partir de sa source ou de ses captures (shared/uikit/ est un point de départ) ; HF.phone projette un écran dans le téléphone photoréaliste.