edit-skill

xbear-motion-kurgu

Transforme une vidéo tête parlante en un montage éditorial animé qui alterne entre deux mondes : A-roll sombre (visage + sous-titres) ↔ canevas crème (explications, preuves, chiffres). Le montage est réalisé avec Remotion.

Règle d'or : Aucune scène n'est rendue en vidéo sans validation préalable. Une maquette de design (PNG) est d'abord présentée.

0. Fichiers (racine : ~/Desktop/seckin_ayazlar/)

Quoi	Où
Ce skill + index	06_skill/xbear-motion-kurgu/SKILL.md, REFERANS_INDEKSI.md
Résumé du style (mesures)	05_stil_calismasi/STIL_OZETI.md (lire uniquement si règle ambiguë)
Cartes d'animation	05_stil_calismasi/animasyonlar/<type>/<id>/kart.md + in/peak/out.png
Marque (prioritaire)	02_marka/marka_notu.md, fontlar/, logolar/
Projet Remotion	remotion-studio/ → composants dans src/xbear/
Outil de transcription	remotion-studio/scripts/transcribe.sh <video> <sortie> tr → <nom>.words.json
Sorties projet	07_projeler/<projet>/ (maquettes, MP4 final, liste des scènes)
Tests composants	05_stil_calismasi/bilesen_testleri/
Effets sonores	03_sfx/<type>/ (source) → scripts/sfx_esitle.py → public/sfx/ + src/xbear/ses/kutuphane.ts. Mesures : 05_stil_calismasi/SES_ANALIZI.md

En cas de conflit, l'ordre est : marka_notu.md > ce fichier > STIL_OZETI.md.

1. Règles de style

Mondes

• A-roll (~30 %) : studio sombre, visage, sous-titres. Presque jamais sans sous-titres.
• Canevas (~70 %) : fond #F5F2EF, grille légère, lumière de fenêtre douce et diagonale (<KremZemin>).
• Transition A-roll ↔ canevas toujours en coupe franche. Pas de fondu, glissement ou fondu enchaîné.

Couleurs (tema.ts → RENK)

Rôle	HEX
Canevas / grille	#F5F2EF / #ECE9E6
Carte	#FFFFFF
Texte principal / secondaire	#111111 / #8A8A8A
Accent bleu (UI / texte italique)	#2782F5 / #1E90E8
Vert argent	#16A06B
Rouge avertissement (dessin à la main, deadline, négatif)	#E35B63
Éclat produit	#864EC6 → #3C296B
Noir A-roll / sous-titre	#030303 / #FFFFFF

Au maximum une couleur d'accent par phrase : bleu = idée principale, vert = argent, rouge = deadline ou perte.

Typographie (tema.ts → FONT, BOYUT ; pour 1080×1920)

• Phrase / sous-titre : sans-serif néo-grotesque (Instrument Sans 500). 84px sur canevas, 64px en sous-titre A-roll.
• Expression accentuée : serif italique bleu (Instrument Serif Italic), 1,3 fois la taille du sans-serif. 1 expression de 2 à 4 mots par phrase ; jamais en gras ou souligné.
• Chiffres : grotesque italique gras (Inter Black Italic), chiffres tabulaires. Jamais de serif. Vert si argent.
• Étiquette : gris, majuscules espacées (letter-spacing .16em).
• Maximum 2 lignes. Texte centré ou aligné sur un tiers vide, jamais en pleine largeur. Les caractères turcs sont corrects (ğ, ş, ı, İ).
• Lorsque la police de marque arrive, seul src/xbear/fontlar.ts change.

Mouvement (tema.ts → KARE, EASE)

Élément	Mouvement	Durée
Mot	Opacité 0→1 + flou 8→0, sur place (ligne ne bouge pas)	5 images, au moment où le mot est prononcé
Entrée carte / objet	~60px vers le haut + fondu + flou 10→0 + échelle .95→1, ease-out	14 images
Icône / badge	Échelle .6→1, léger dépassement (spring)	8 images
Sortie texte	Flotte vers le haut de 40px + flou, ease-in	10 images
Changement de section canevas	Perte de focus	9 images
Sortie latérale carte	Flou de mouvement horizontal	8 images
Caméra	Déplacement lent continu sur canevas ; recadrage instantané sur A-roll (1,15–1,3×)
Compteur	Comptage ease-out ; l'argent devient vert à la valeur finale	20–90 images

Chaque mouvement se stabilise en ≤15 images. Le seul dépassement autorisé est un léger ressort.

Rythme

• Environ une nouvelle idée visuelle toutes les ~6–8 secondes (médiane 6,4 s dans v01).
• Quelque chose change toutes les 1–2 secondes au sein d'une scène : mot, carte ou tic de compteur.
• Environ 5 coupes franches par minute. Les sections A-roll durent en médiane ~8–9 secondes.
• Accroche (premières 3–5 s) : A-roll + sous-titres + chiffre critique marqué + une icône.

Phrase → animation

Type de phrase	Ce qui apparaît
Date / deadline	Icône de calendrier + date rouge
Liste (« X, Y et Z »)	Chaque élément sur son propre mot : une carte + pilule de compteur incrémentale
Argent / revenu	Chiffre vert gras italique, souvent qui défile
Résultat / « les gens ont dit »	Cartes de preuve (~une par seconde)
Calcul de prix	Construit ligne par ligne, puis comparaison en barres
Information cachée	Mosaïque + pilule « sera révélé à la fin »
Nom de produit / outil	Carte produit ou icône d'application
Question de choix	Deux boutons sur l'A-roll
Phrase émotionnelle / personnelle	Uniquement A-roll + sous-titres
Appel à l'action (CTA)	« Clique sur le lien » + éclat bleu en bas + clic de bouton

Interdits

• Néon, glitch, décalage RVB, brûlure de film, fuite de lumière, émoji, sticker
• Ombre portée sur le texte, texte contouré, texte dégradé, SOUS-TITRES EN MAJUSCULES, sous-titres encadrés / sur plaque
• Rotation, 3D, easing élastique
• Fond coloré plein écran : le fond est soit canevas crème, soit A-roll sombre
• Plus de 2 lignes de texte, plus d'un accent par phrase
• Fondu ou glissement entre A-roll et canevas
• Dépassement de la zone de sécurité : 8 % en haut, 15 % en bas, 12 % à droite restent vides. Les sous-titres ne couvrent pas le visage.

Son (mesures : SES_ANALIZI.md)

Événement	Son	Note
Coupe A-roll ↔ canevas	whoosh	Automatique via SahneDizisi quand Sahne.dunya change (~60 % des coupes)
Entrée carte, chiffre, pilule	swish	Joué automatiquement par KartGiris, UIKart, SayiSayaci
Sortie latérale carte, perte de focus	whoosh	Couper si à moins de 0,5 s du whoosh de la coupe suivante (cikisSesi={false})
Recadrage accroche, révélation, CTA	boom	~1 par minute. Utiliser ZoomIn ses="boom" ou <SesEfekti tur="boom">
Badge / dessin à la main / bouton	pop / kalem / klik
Avant révélation info cachée	riser	Le pic coïncide avec le moment de la révélation
Compteur	—	Pas de tic (tikSesi désactivé par défaut)
Moment où le compteur d'argent devient vert	para (ka-ching)	Automatique via SayiSayaci para ; désactivable avec paraSesi={false}. Non présent dans la référence, choix XBEAR

• Le pic sonore arrive 2–3 images après l'événement visuel (TEPE_GECIKME_KARE). Les composants le synchronisent automatiquement.
• Le pic SFX est ~10 dB en dessous de la parole (SEVIYE_DB : swish -17, whoosh -14, boom -12 dBFS). Utiliser <SesAyari kaydirmaDb={-3}> pour le réglage global.
• Interdit : déluge de whoosh, pop sur chaque mot, tic de compteur, lecture consécutive du même fichier.
• Les fichiers bruts Epidemic sont placés directement dans 03_sfx/<type>/. sfx_esitle.py sépare les variantes (_v1, _v2…), coupe le silence et la queue, normalise.

Règles de la chaîne Seçkin (02_marka/marka_notu.md)

• Les gros mots sont coupés. Les moments de silence (attente, mémorisation du script) sont coupés. Le montage suit l'ordre de tournage.
• Musique uniquement depuis Epidemic Sound, à -15 dB (si forte -20 dB), uniquement dans l'intro et sous les moments silencieux.
• Pas d'étalonnage.

2. Flux de travail

Étape 1 — Planification

1. Transcrire : remotion-studio/scripts/transcribe.sh <ham.mp4> 07_projeler/<projet>/ tr.
2. Marquer les coupures : silence, mémorisation, gros mots.
3. Écrire la liste des scènes sous forme de tableau et la montrer à l'utilisateur : S01 | 00:00.0–00:04.8 | A-roll / canevas | ce qui est dit | ce qui apparaît (type de phrase) | composant(s) | son.
4. Vérification du rythme : une nouvelle idée toutes les ~6–8 secondes, pas trois scènes A-roll consécutives.

Étape 2 — Sélection des références

• Lire uniquement REFERANS_INDEKSI.md. Pour chaque scène, chercher le « quand » et les mots-clés, sélectionner 2–3 lignes.
• Ouvrir uniquement les kart.md de ces lignes et, si nécessaire, peak.png. Ne pas ouvrir clip.mp4, ne pas charger le dossier en masse.
• Noter dans la liste des scènes ref v01-17 par exemple.

Étape 3 — Maquette de design

1. Créer le dossier projet : remotion-studio/src/projeler/<projet>/.
   • sahneler.tsx → liste Sahne[] (id, ad, sure, kareler, not, dunya, Bilesen).
   • Pour chaque scène, insérer 2–3 images clés dans le tableau kareler : entrée terminée, pic, juste avant la sortie.
   • Kayit.tsx enregistre deux compositions : <Projet>-Video (SahneDizisi) et <Projet>-Tasarim (TasarimSayfasi). Les deux sont ajoutés dans Root.tsx.
   • La composition de design doit être une <Composition> (pas <Still>), avec {...tasarimSayfasiBoyutu(sahneler)}. Sinon les images se compressent à 0.
2. Si 03_sfx a changé, synchroniser d'abord les sons : python3 -I remotion-studio/scripts/sfx_esitle.py. Le script liste les types utilisant un placeholder synthétique ; le signaler à l'utilisateur.
3. Placer la vidéo brute dans remotion-studio/public/ham/<projet>/, l'appeler avec <ARoll kaynak="ham/<projet>/x.mp4" baslangicSn={…} />.
4. Rendu : npx remotion still <Projet>-Tasarim ../07_projeler/<projet>/tasarim_v1.png --frame=0
5. Vérifier le PNG soi-même. Contrôler la zone de sécurité, les débordements, la limite de 2 lignes et les caractères turcs. Puis le montrer à l'utilisateur.

Étape 4 — Validation (obligatoire)

• Ne pas exécuter remotion render tant que l'utilisateur n'a pas explicitement validé. Même un rendu test d'une seule scène n'est pas autorisé.
• Si des corrections sont demandées, produire une nouvelle version de la maquette (tasarim_v2.png).

Étape 5 — Rendu

• npx remotion render <Projet>-Video ../07_projeler/<projet>/final_v1.mp4 --port=3199
• Vérifier la sortie avec ffprobe : 1080×1920, 30 ips, durée attendue, présence d'un flux audio.
• ffmpeg -i final.mp4 -af volumedetect -f null - → max_volume ≤ -1 dB (pas d'écrêtage).
• Livrer la liste des scènes avec la vidéo finale : temps | type | texte à l'écran | transition | référence.

Étape 6 — Révision

• Modifier uniquement la scène demandée. D'abord montrer la maquette de cette scène (uniquement les scènes modifiées), puis après validation, relancer le rendu vidéo.
• Conserver les fichiers avec un numéro de version (final_v2.mp4). Ne pas supprimer les anciennes versions.

3. Structure Remotion et composants

remotion-studio/
  public/fonts/            Instrument Sans/Serif, Inter (OFL) → quand police marque arrive public/fonts/marka/
  public/ornek/            aroll_yer_tutucu.mp4 (uniquement pour les tests)
  public/sfx/<type>/       Sons normalisés par sfx_esitle.py (ne pas toucher)
  public/ham/<projet>/     A-roll brut (pour chaque projet)
  src/Root.tsx             fontlariYukle() + toutes les compositions
  src/xbear/               ← bibliothèque réutilisable, importée depuis "./xbear"
    tema.ts zamanlama.ts fontlar.ts TasarimSayfasi.tsx index.ts
    bilesenler/*.tsx
    ses/                   sesler.ts (règles de niveau/alignement), SesEfekti.tsx, kutuphane.ts (automatique)
    ornekler/              Exemples d'utilisation de chaque composant (compositions XB-*)
  src/projeler/<projet>/   sahneler.tsx, Kayit.tsx, kelimeler.json

Composant	Utilité	Exemple d'utilisation
KremZemin	Fond canevas + dérive	<KremZemin>…</KremZemin>
VurguMetni	Phrase canevas, mot par mot ; [ ] = accent, \n = ligne	<VurguMetni metin={"Charge seulement 30 minutes,\n[plus rapide que les concurrents]"} isaret={{ifade:"30 minutes", tip:"altcizgi"}} cikisKaresi={108}/>
ElCizimi	Ellipse / souligné rouge dessiné à la main (une seule expression critique)	Avec VurguMetni.isaret ou <ElCizimi tip="elips" baslangic={20}/>
SayiSayaci	Compteur de grands nombres ; para → vert	<SayiSayaci etiket="PRIX DE DÉPART" bas={39999} son={42999} sonEk=" €" para baslangic={12}/>
UIKart	Carte flottante blanche ou carte héros varyant="urun" ; badge, étiquette, icône	<UIKart varyant="urun" baslik="Nova X1 Pro" altBaslik="TEST · 2026" rozet="+ NOUVEAU"/>
Hap	Étiquette, compteur (+3), deadline, CTA	<Hap metin="Contenu de la boîte" sayi="+3"/>
KartGiris	Entrée/sortie commune pour tout objet (yukari / yana)	<KartGiris baslangic={14} cikisKaresi={128} cikisTipi="yana">…</KartGiris>
AltYaziBandi	Sous-titre A-roll, depuis words.json, max 2 lignes	<AltYaziBandi kelimeler={sahneKelimeleri(words, 12.4, 18)} vurgular={["30","jours"]}/>
ZoomIn	atlama (recadrage instantané) · punch · itme · suruklenme	<ZoomIn mod="atlama" kare={66} olcek={1.25} odak={{x:.5,y:.3}} ses="boom">…</ZoomIn>
ARoll	Recadre la vidéo brute en 9:16, coupe avec baslangicSn	<ARoll kaynak="ham/p/x.mp4" baslangicSn={12.4}/>
Gecis	kesme · bulanikYukari · odakKaybi · yanaKayma · karartma ; enveloppe le contenu (pas le fond)	<KremZemin><Gecis tip="odakKaybi" sure={120} giris={false}>…</Gecis></KremZemin>
SesEfekti / SesAyari	SFX unique (type + image ; pic aligné, rotation de fichier) / activation globale, décalage dB	<SesEfekti tur="boom" kare={66}/>
TasarimSayfasi / SahneDizisi	PNG de validation / séquence finale + sons de coupe	voir Étape 3

Aides au timing (zamanlama.ts) : kare(sn), sahneKelimeleri(words, bas, son), kelimeKaresi(kelimeler, "trente"). Attacher l'animation au mot : l'image de début est prise depuis words.json, pas devinée.

Les composants lisent fps depuis useVideoConfig(), les dimensions sont fixes 1080×1920. Ainsi, ils s'affichent correctement même sur la maquette. Une scène reçoit explicitement sure et cikisKaresi.

16:9 / hybride (Hibrit.tsx) : KoyuCamZemin, CamKart, TakipEtiketi (point + ligne + pilule suivi), BolumEtiketi, UygulamaKarosu (gorsel = vrai logo), TelefonCerceve, KilitKatmani, RotoKatmani. Carte liste : projeler/duo/Parti2.tsx → ListeKarti + OzellikSatiri (var/yok/bilgi). Pas encore écrit : TarayiciCerceve, Stepper, Mozaik. Références avec correspondance dans l'index : v01-10/14/47 (téléphone), v01-08/13/43 (navigateur), v01-26/55 (icône), v01-51 (stepper), v01-04/58 (mosaïque), v01-46 (bouton), v01-56 (liste).

4. Environnement et commandes

• Mac (Apple M1 Pro) : Node 24, ffmpeg 9, whisper.cpp + large-v3-turbo. Installation et versions dans KURULUM.md, validation avec kurulum_dogrula.command.
• Si le shell de la session n'est pas Mac mais une VM Linux :
  • remotion-studio/node_modules est spécifique au Mac, ne pas exécuter npm i dans la VM.
  • Pour le rendu, copier le projet dans l'espace de travail cloud, y faire npm i avec les mêmes versions ([email protected]) et rendre avec Chromium (--browser-executable=…/chrome-headless-shell). Réécrire les résultats dans le dossier.
  • Whisper est exécuté par l'utilisateur sur Mac, ou un script .command est préparé.
  • sfx_esitle.py fonctionne aussi dans la VM (python3 + ffmpeg).

…

[truncated for translation]