faizalmy/brand-film

Film de marque

Un film de 60 secondes sur l'identité d'une marque : le logo, le site, le produit, le nom. Premier film approuvé : ReUI « Refreshed ». template/ en est le code : une implémentation de référence fonctionnelle à copier et adapter, pas une bibliothèque générique.

• brands/<brand>.md : tout ce qui est spécifique à la marque (palette, typographie, sources de texte, logo, produit, musique, règles, préférences). Lisez-le en premier. Pour une nouvelle marque, rédigez-en un à partir de brands/_new-brand.md.
• references/example-reui-refreshed.md : le plan de tournage du film approuvé avec les images et les hits. C'est la forme à adapter.
• references/reui-frames/ : le modèle visuel. 38 photogrammes du film approuvé plus sheet.jpg. Regardez la feuille avant de concevoir, et comparez vos photogrammes à l'image correspondante lorsque vous vérifiez.
• references/review.md : liste de contrôle des points faibles et le brief de révision du sous-agent.

Prérequis (vérifiez d'abord, installez ce qui manque)

Exécutez ces vérifications avant la première construction sur une machine. Installez uniquement ce qui échoue et informez l'utilisateur de ce que vous avez installé.

Besoin	Vérification	Installation
Node 20.19+	node -v	brew install node (ou nvm)
Remotion et son moteur de rendu	npx remotion versions dans le projet	npm i dans le projet (les versions sont épinglées dans template/package.json) ; dans un projet existant : npm i remotion @remotion/cli @remotion/renderer @remotion/fonts @remotion/media à la même version
Chrome pour Remotion	npx remotion browser ensure	même commande ; télécharge Chrome Headless Shell
ffmpeg / ffprobe (vérification du fichier final)	ffprobe -version	brew install ffmpeg
Python 3 + Pillow (planches contact)	python3 -c "import PIL"	pip3 install pillow
librosa + numpy (beat.py, nouveaux morceaux uniquement)	python3 -c "import librosa"	pip3 install librosa numpy
Playwright + Chromium (captures)	node -e "require('playwright')" dans le projet	npm i -D playwright && npx playwright install chromium
Un fond musical	un fichier dans public/audio/	depuis la source nommée dans le profil de la marque ; n'en inventez jamais un

La licence de Remotion : gratuite pour les particuliers et les petites équipes ; les entreprises au-delà de sa limite de taille ont besoin d'une licence entreprise (https://remotion.dev/license). Mentionnez-la une fois lorsque la marque est une entreprise.

Le langage (identique pour chaque marque)

• Une seule toile et une seule encre issues des neutres de la marque. Couleur uniquement là où la marque en a vraiment, ou à l'intérieur de son UI réelle. Pas de verre, d'or, de 3D ou de lueur à moins que la marque n'en soit composée.
• Un élément mène. Il vole sur une ligne fine, porte les coupes et atterrit dans le logo final. Chaque plan le transmet au suivant à la même position d'écran. Dans le logo de ReUI, c'est le point. Trouvez cet élément dans un nouveau logo : un point, un coin, une extrémité de trait.
• Chaque ligne est réelle. Les guides de construction proviennent des propres chemins du logo. Chaque chiffre à l'écran est mesuré (unités du logo, boîtes DOM en px). Rien n'est décoratif.
• La police de caractères de la marque (celle utilisée par son site). Une police mono uniquement pour les mesures.
• Aucun logo ou texte par-dessus l'UI du produit. Les étiquettes sont placées en dehors de l'UI, dans un espace dégagé.
• Les longs plans fixes font partie du style. Le calme est acceptable, le mort ne l'est pas.

Structure narrative (adaptez, ne copiez pas aveuglément)

Partie	Temps (en beats)	Rôle
Ligne	0-8	L'élément principal devient un curseur et tape la propre ligne de la marque
Logo	8-20	L'élément s'ouvre sur le logo ; le logo est dessiné à partir de sa construction
Site	20-32	Le logo effectue un zoom arrière et devient le logo de navigation du site, puis une visite rapide ; une interaction réelle sur le site sur un hit
Nom	32-36	Le mot-symbole, une lettre par beat
Produit	36-49	3-4 vues réelles du produit, des glissés réels, des dimensions mesurées, des coupes franches, environ 3 beats chacune
Apparences	49-52	Le logo dessiné différemment à chaque beat ; l'élément principal ne bouge jamais
Fin	52-60	Le logo atterrit, les lettres se stabilisent sur le dernier hit, puis la ligne et le domaine de la marque

Accordez du temps à ce dont la marque est fière. Réduisez les apparences avant la construction ou le produit.

Règles strictes

• Le texte de la marque est copié, jamais rédigé. Les slogans, lignes et noms proviennent textuellement du site ou des documents de la marque. N'inventez, combinez ou raccourcissez jamais.
• Les données de démonstration dans l'UI du produit ne sont jamais du contenu : ne montrez pas ses noms, chiffres ou personnes.
• UI réelle uniquement, capturée avec une souris réelle. Ne simulez jamais le produit.
• Audio :
  • La musique provient de la source nommée dans le profil de la marque, jamais d'une nouvelle génération sauf si le profil le permet.
  • Les hits sont quelques impacts et claquements sur les points de synchronisation.
  • Pas d'effets sonores de clic ou de frappe sauf si le profil le demande.
• Ne rendez ni n'exportez jamais sans y être invité à ce tour. Après une modification, passez l'aperçu du Studio et ne proposez pas de rendu. Lorsque demandé : 4K, même nom de fichier, écrasement.
• Les idées d'essai vont dans une composition en double. Prouvez que celle approuvée est inchangée en comparant les photogrammes. « Fix all » ou « remove X » va directement dans la composition principale.
• L'utilisateur pointe des images (« remove 3150 »). Rendez cette image et nommez le plan avant de modifier quoi que ce soit.

Système de timing (facile à casser)

Tout dans src/Refreshed.tsx :

• Horloge.
  • BPM du fond musical. SLOW = 2 : l'histoire se déroule à la moitié du tempo de la musique. useCurrentFrame() local renvoie les images ralenties.
  • T = un beat de l'histoire. b(n) = beat n, arrondi aux demi-beats : b(0.25) n'est pas un quart, utilisez T / 4.
  • real(n) = b(n) * SLOW = l'image du film au beat n.
• ramp(f, from, to, ease) est la seule façon d'animer. Il arrondit from/to à la grille T / 8 et renvoie 1 lorsqu'ils coïncident. Ne passez jamais de fractions 0-1 ; utilisez clamp01((x - a) / (b - a)).
• Plans. SHOTS = [[fromBeat, toBeat, Component]]. Déplacez une limite avec chaque constante de beat à l'intérieur de ce plan.
• Son.
  • HITS = effets sonores sur les beats.
  • BED_FROM = décalage de début dans la piste. BED_VOL, avec un callback volume pour les duckings.
• Kick. KickBump pulse l'image à chaque kick jusqu'aux apparences. STILL = plages de beats sans pulse.
• Points de synchronisation sont l'épine dorsale : chaque changement important se produit sur un hit. En déplacer un signifie repositionner les plans autour.
• Nouveau morceau : python3 scripts/beat.py <track.wav> donne le tempo, la phase du premier beat et le drop. Définissez BPM et BED_FROM, puis placez les points de synchronisation sur ses accents.

Adaptation du template à une marque

Échange	Où
Chemins du logo (anneau, forme intérieure, élément principal), ligne centrale du logo et trait, lettres du mot-symbole et positions, viewBox	src/logo.tsx (RING_D, U_D, DOT, U_LINE, U_STROKE, LETTERS, LETTER_X, VB, uPoint)
Palette, police, crénage	en haut de src/Refreshed.tsx (INK, PAPER, LIGHT_INK, DIM, FONT, TRACK) et public/fonts
La ligne et le domaine de la marque	LINE, DOMAIN
Captures du site	un script de capture comme scripts/reui/site-object.mjs écrivant dans public/cap/site-object/
Vues produit	scripts de capture comme scripts/reui/live.mjs, dash.mjs, block-live.mjs. Chacun écrit une capture d'écran par étape de souris plus les boîtes mesurées dans public/cap/live/<dir>/ et meta.json. Puis modifiez les entrées NAMES_UI/BLOCK_UI et l'union dir dans WITH_UI
Apparences	LOOKS : 3-4 façons de dessiner le logo (comme ses données de chemin, tramé, lignes de construction)
Musique et hits	public/audio/, BPM, BED_FROM, HITS

Un logo avec une structure différente (pas de point, pas d'anneau) a besoin de ses propres Construct, Opening et Final. Conservez l'idée : dessinez-le à partir de sa géométrie réelle, mené par un élément.

Flux de travail

1. Lisez brands/<brand>.md (ou rédigez-le). Mesurez le SVG du logo et le site ; collectez les lignes textuelles de la marque.
2. Nouveau film :
   • cp -R ~/.claude/skills/brand-film/template <project> et npm i.
   • Placez le fond musical dans public/audio/.
   • Les scripts de capture chargent Playwright depuis le dossier du projet (npm i -D playwright), ou depuis le dossier dans PLAYWRIGHT_FROM.
3. Capturez le site et le produit avec une souris réelle. Sauvegardez meta.json avant une nouvelle capture. Choisissez des vues produit différentes les unes des autres et glissez quelque chose de réel ; jamais une visite guidée par survol.
4. Éditez uniquement ce que la marque change (tableau ci-dessus). Conservez les helpers (Flight, Wipe, Dim, Lead, Disc, Live, LiveRun).
5. Vérifiez.
   • npx tsc --noEmit. Seule l'erreur TS6192 sur les imports inutilisés est acceptable.
   • Depuis le dossier du projet : ~/.claude/skills/brand-film/scripts/qa.sh <scratch>/q1 0.4 <frames...>, puis lisez sheet.jpg.
   • Échantillonnez chaque plan, les deux images de chaque jonction, chaque image de synchronisation et la fin.
   • Placez votre feuille à côté de references/reui-frames/sheet.jpg. Tout ce qui est plus clairsemé, plus fort ou plus encombré que le plan correspondant du template est un problème.
   • Les images uniques peuvent scintiller ; re-rendez-en une avant de la corriger.
6. Révision (toujours, avant la première remise d'un nouveau montage) :
   • Lancez un sous-agent avec le brief dans references/review.md. Il reçoit le code, pas vos conclusions.
   • Il renvoie les points faibles classés, avec les images et une liste « ne pas toucher ».
   • Vérifiez vous-même ses principales découvertes dans les images et éliminez celles que les images ne montrent pas.
   • Montrez à l'utilisateur la courte liste classée et demandez quoi corriger, sauf s'il a dit « fix all ».
   • Re-vérifiez les images corrigées. Ne défaites jamais ce que l'utilisateur a aimé (profil de la marque).
7. Aperçu dans Remotion Studio (http://localhost:<port>/Refreshed). Remettez l'aperçu, pas un rendu.
8. Rendu (uniquement lorsque demandé) : npx remotion render src/index.ts Refreshed out/<name>.mp4 --scale=2 --codec=h264 --crf=16 --pixel-format=yuv420p --overwrite --log=error en arrière-plan. Puis ffprobe : 3840x2160, 60 ips, nombre d'images, flux audio.

Terminez chaque tour par

Ce qui a changé (par image), ce qui n'a pas été vérifié (le mouvement et le son n'apparaissent jamais dans les images fixes), et si le mp4 rendu est obsolète.