edit-skill

xbear-motion-kurgu

Verwandelt ein Talking-Head-Video in eine redaktionelle Motion-Graphics-Bearbeitung, die zwischen zwei Welten wechselt: dunklem A-Roll (Gesicht + Untertitel) ↔ cremefarbener Leinwand (Erklärung, Beweis, Zahlen). Der Schnitt wird mit Remotion durchgeführt.

Goldene Regel: Keine Szene wird ohne Genehmigung als Video gerendert. Zuerst wird die Designseite (PNG) gezeigt.

0. Dateien (Stamm: ~/Desktop/seckin_ayazlar/)

Was	Wo
Diese Fertigkeit + Index	06_skill/xbear-motion-kurgu/SKILL.md, REFERANS_INDEKSI.md
Stil-Zusammenfassung (Maße)	05_stil_calismasi/STIL_OZETI.md (nur lesen, wenn die Regel unklar ist)
Animationskarten	05_stil_calismasi/animasyonlar/<typ>/<id>/kart.md + in/peak/out.png
Marke (Vorrang vor allem)	02_marka/marka_notu.md, fontlar/, logolar/
Remotion-Projekt	remotion-studio/ → Komponenten in src/xbear/
Transkript-Tool	remotion-studio/scripts/transcribe.sh <video> <ausgabe> tr → <name>.words.json
Projektausgaben	07_projeler/<projekt>/ (Designseiten, finales MP4, Szenenliste)
Komponententests	05_stil_calismasi/bilesen_testleri/
Soundeffekte	03_sfx/<typ>/ (Quelle) → scripts/sfx_esitle.py → public/sfx/ + src/xbear/ses/kutuphane.ts. Messung: 05_stil_calismasi/SES_ANALIZI.md

Bei Konflikten gilt folgende Reihenfolge: marka_notu.md > diese Datei > STIL_OZETI.md.

1. Stilregeln

Welten

• A-Roll (~30 %): dunkles Studio, Gesicht, Untertitel. Fast nie ohne Untertitel.
• Leinwand (~70 %): #F5F2EF Hintergrund, leichtes Raster, weiches diagonales Fensterlicht (<KremZemin>).
• Der Übergang A-Roll ↔ Leinwand ist immer ein harter Schnitt. Keine Schiebe-, Wisch- oder Überblendungen.

Farbe (tema.ts → RENK)

Rolle	HEX
Leinwand / Raster	#F5F2EF / #ECE9E6
Karte	#FFFFFF
Haupttext / Sekundärtext	#111111 / #8A8A8A
Akzent Blau (UI / kursiver Text)	#2782F5 / #1E90E8
Geld Grün	#16A06B
Warnung Rot (Handzeichnung, Frist, negativ)	#E35B63
Produktglühen	#864EC6 → #3C296B
A-Roll Schwarz / Untertitel	#030303 / #FFFFFF

Pro Satz wird maximal eine Akzentfarbe verwendet: Blau = Hauptidee, Grün = Geld, Rot = Frist oder Verlust.

Typografie (tema.ts → FONT, BOYUT; für 1080×1920)

• Satz / Untertitel: Neo-Grotesk Sans (Instrument Sans 500). Auf Leinwand 84px, im A-Roll-Untertitel 64px.
• Akzentphrase: Blaue kursive Serif (Instrument Serif Italic), 1,3-fache Größe der Sans. Im Satz 1 Phrase, 2–4 Wörter; niemals fett oder unterstrichen.
• Zahlen: Schwere kursive Grotesk (Inter Black Italic), Tabellenziffern. Niemals Serif verwenden. Bei Geld grün.
• Etikett: Grau, gesperrte Großbuchstaben (letter-spacing .16em).
• Es werden maximal 2 Zeilen geschrieben. Text ist zentriert oder an den leeren Raum angelehnt, nicht in voller Breite. Türkische Zeichen werden korrekt geschrieben (ğ, ş, ı, İ).
• Wenn die Markenschrift kommt, ändert sich nur src/xbear/fontlar.ts.

Bewegung (tema.ts → KARE, EASE)

Element	Bewegung	Dauer
Wort	Deckkraft 0→1 + Unschärfe 8→0, an Ort und Stelle (Zeile verschiebt sich nicht)	5 Frames, im Moment des Sprechens
Karten-/Objekt-Eingang	~60px anheben + Fade + Unschärfe 10→0 + Skala .95→1, ease-out	14 Frames
Symbol / Abzeichen	Skala .6→1, leichtes Überschwingen (Spring)	8 Frames
Textausgang	40px nach oben gleiten + unscharf werden, ease-in	10 Frames
Leinwand-Abschnittswechsel	Fokusverlust	9 Frames
Kartenseitenaustritt	Horizontale Bewegungsunschärfe	8 Frames
Kamera	Stetiges langsames Schweben auf der Leinwand; im A-Roll sofortige Neurahmung (1.15–1.3×)
Zähler	ease-out zählen; Geld wird beim Endwert grün	20–90 Frames

Jede Bewegung setzt sich in ≤15 Frames. Die einzige erlaubte Überschreitung ist leichtes Überschwingen.

Rhythmus

• Durchschnittlich ~6–8 Sekunden kommt eine neue visuelle Idee (in v01 Median 6,4 s).
• Innerhalb einer Szene ändert sich alle 1–2 Sekunden etwas: Wort, Karte oder Zähler-Tick.
• Pro Minute gibt es ~5 harte Schnitte. A-Roll-Abschnitte dauern im Median ~8–9 Sekunden.
• Hook (erste 3–5 s): A-Roll + Untertitel + markierte kritische Zahl + ein Symbol.

Satz → Animation

Satztyp	Was kommt
Datum / Frist	Kalendersymbol + rotes Datum
Liste ("X, Y und Z")	Jeder Punkt eine Karte bei seinem Wort + steigender Zähler-Pill
Geld / Einnahmen	Grüne schwere kursive Zahl, meist zählend erscheinend
Ergebnis / "Leute sagten"	Beweiskarten (~alle 1 s)
Preisberechnung	Zeile für Zeile aufgebaut, dann Balkenvergleich
Versteckte Information	Mosaik + "wird am Ende enthüllt"-Pill
Produkt-/Toolname	Produktkarte oder App-Symbol
Auswahlfrage	Zwei Buttons über dem A-Roll
Emotionaler / persönlicher Satz	Nur A-Roll + Untertitel
Handlungsaufforderung (CTA)	"Klick auf den Link" + blaues Glühen unten + Button-Klick

Verbote

• Neon, Glitch, RGB-Verschiebung, Filmbrand, Lichtlecks, Emojis, Sticker
• Textschatten, konturierter Text, verlaufender Text, GROSSBUCHSTABEN-Untertitel, eingerahmter/geplatteter Untertitel
• Drehung, 3D-Salto, gummiatiges Easing
• Vollbild-Farbhintergrund: Hintergrund ist entweder cremefarbene Leinwand oder dunkles A-Roll
• Mehr als 2 Textzeilen, mehrere Akzente in einem Satz
• Schiebe- oder Überblendungen zwischen A-Roll ↔ Leinwand
• Über den sicheren Bereich hinausragen: Oberer Bereich %8, unterer Bereich %15, rechter Bereich %12 bleiben leer. Untertitel bedecken nicht das Gesicht.

Ton (Messung: SES_ANALIZI.md)

Ereignis	Ton	Hinweis
A-Roll ↔ Leinwand-Schnitt	whoosh	Wird automatisch von SahneDizisi eingefügt, wenn sich Sahne.dunya ändert (~60 % der Schnitte)
Karten-, Zahlen-, Pill-Eingang	swish	KartGiris, UIKart, SayiSayaci spielen automatisch ab
Kartenseitenaustritt, Fokusverlust	whoosh	Wenn näher als 0,5 s am nächsten Schnitt-Whoosh, deaktivieren (cikisSesi={false})
Hook-Reframe, Payoff/Enthüllung, CTA	boom	~1 Mal pro Minute. ZoomIn ses="boom" oder <SesEfekti tur="boom">
Abzeichen / Handzeichnung / Button	pop / kalem / klik
Vor der Enthüllung von Geheiminformationen	riser	Spitze trifft auf den Enthüllungsmoment
Zähler	—	Kein Tick (tikSesi standardmäßig aus)
Moment, in dem der Geldzähler grün wird	para (ka-ching)	SayiSayaci para spielt automatisch ab (paraSesi={false} deaktiviert). Nicht in der Referenz, ist eine XBEAR-Präferenz

• Die Spitze des Tons kommt 2–3 Frames nach dem visuellen Ereignis (TEPE_GECIKME_KARE). Komponenten richten dies automatisch aus.
• Die SFX-Spitze liegt ~10 dB unter der Sprachlautstärke (SEVIYE_DB: swish -17, whoosh -14, boom -12 dBFS). Für die Gesamtanpassung wird <SesAyari kaydirmaDb={-3}> verwendet.
• Verboten: Whoosh-Flut, Pop auf jedes Wort, Zähler-Tick, aufeinanderfolgendes Abspielen derselben Datei.
• Die rohe Epidemic-Datei wird direkt in den 03_sfx/<typ>/-Ordner gelegt. sfx_esitle.py trennt Varianten (_v1, _v2…), schneidet Stille und Ausklang, normalisiert.

Seçkins Kanalregeln (02_marka/marka_notu.md)

• Fluchen wird herausgeschnitten. Stille Warte- und Auswendiglern-Momente werden herausgeschnitten. Der Schnitt folgt der Aufnahmereihenfolge.
• Musik wird nur von Epidemic Sound ausgewählt, -15 dB (wenn laut -20 dB), nur im Intro und unter stillen Stellen.
• Es wird keine Farbkorrektur durchgeführt.

2. Arbeitsablauf

Schritt 1 — Planung

1. Transkript erstellen: remotion-studio/scripts/transcribe.sh <roh.mp4> 07_projeler/<projekt>/ tr.
2. Zu schneidende Stellen markieren: Stille, Auswendiglernen, Fluchen.
3. Szenenliste als Tabelle schreiben und dem Benutzer zeigen: S01 | 00:00.0–00:04.8 | A-Roll / Leinwand | was gesagt wird | was kommt (Satztyp) | Komponente(n) | Ton.
4. Rhythmusprüfung: Alle ~6–8 Sekunden eine neue Idee, keine drei aufeinanderfolgenden A-Roll-Szenen.

Schritt 2 — Referenzauswahl

• Nur REFERANS_INDEKSI.md wird gelesen. Für jede Szene werden anhand von "wann" und Schlüsselwörtern 2–3 Zeilen ausgewählt.
• Nur die kart.md und ggf. peak.png dieser Zeilen werden geöffnet. clip.mp4 wird nicht geöffnet, der Ordner wird nicht massenhaft geladen.
• Notizen wie ref v01-17 werden in der Szenenliste vermerkt.

Schritt 3 — Designseite

1. Projektordner erstellen: remotion-studio/src/projeler/<projekt>/.
   • sahneler.tsx → Sahne[]-Liste (id, ad, sure, kareler, not, dunya, Bilesen).
   • In das kareler-Array jeder Szene werden 2–3 kritische Frames eingetragen: Eingang abgeschlossen, Höhepunkt, kurz vor dem Ausgang.
   • Kayit.tsx registriert zwei Kompositionen: <Projekt>-Video (SahneDizisi) und <Projekt>-Tasarim (TasarimSayfasi). Beide werden zu Root.tsx hinzugefügt.
   • Die Design-Komposition muss <Composition> sein (nicht <Still>), mit {...tasarimSayfasiBoyutu(sahneler)}. Sonst werden die Frames auf 0 gestaucht.
2. Wenn sich 03_sfx geändert hat, zuerst die Sounds synchronisieren: python3 -I remotion-studio/scripts/sfx_esitle.py. Das Skript listet Typen auf, die synthetische Platzhalter verwenden; dies dem Benutzer mitteilen.
3. Das Rohvideo wird in remotion-studio/public/ham/<projekt>/ gelegt und mit <ARoll kaynak="ham/<projekt>/x.mp4" baslangicSn={…} /> aufgerufen.
4. Rendern: npx remotion still <Projekt>-Tasarim ../07_projeler/<projekt>/tasarim_v1.png --frame=0
5. Das PNG selbst ansehen. Sicheren Bereich, Überlauf, 2-Zeilen-Grenze und türkische Zeichen prüfen. Dann dem Benutzer zeigen.

Schritt 4 — Genehmigung (obligatorisch)

• remotion render wird nicht ausgeführt, bis der Benutzer ausdrücklich zustimmt. Auch kein Einzelszenen-Testrender.
• Wenn Korrekturen gewünscht werden, wird eine neue Version der Designseite (tasarim_v2.png) erstellt.

Schritt 5 — Rendern

• npx remotion render <Projekt>-Video ../07_projeler/<projekt>/final_v1.mp4 --port=3199
• Ausgabe mit ffprobe überprüfen: 1080×1920, 30 fps, erwartete Dauer, vorhandener Audiostream.
• ffmpeg -i final.mp4 -af volumedetect -f null - → max_volume ≤ -1 dB (kein Clipping).
• Zusammen mit dem finalen Video wird die Szenenliste geliefert: Zeit | Typ | Text auf dem Bildschirm | Übergang | Referenz.

Schritt 6 — Revision

• Nur die gewünschte Szene wird geändert. Zuerst wird die Designseite dieser Szene (nur die geänderten Szenen) gezeigt, nach Genehmigung wird das Video neu gerendert.
• Dateien werden mit Versionsnummer geführt (final_v2.mp4). Alte Versionen werden nicht gelöscht.

3. Remotion-Struktur und Komponenten

remotion-studio/
  public/fonts/            Instrument Sans/Serif, Inter (OFL) → wenn Markenschrift kommt: public/fonts/marka/
  public/ornek/            aroll_yer_tutucu.mp4 (nur für Tests)
  public/sfx/<typ>/        Von sfx_esitle.py normalisierte Sounds (nicht manuell anfassen)
  public/ham/<projekt>/    Roh-A-Roll (für jedes Projekt)
  src/Root.tsx             fontlariYukle() + alle Kompositionen
  src/xbear/               ← wiederverwendete Bibliothek, Import über "./xbear"
    tema.ts zamanlama.ts fontlar.ts TasarimSayfasi.tsx index.ts
    bilesenler/*.tsx
    ses/                   sesler.ts (Pegel-/Timing-Regeln), SesEfekti.tsx, kutuphane.ts (automatisch)
    ornekler/              Beispielverwendung jeder Komponente (XB-*-Kompositionen)
  src/projeler/<projekt>/  sahneler.tsx, Kayit.tsx, kelimeler.json

Komponente	Wofür	Beispielverwendung
KremZemin	Leinwandhintergrund + Schweben	<KremZemin>…</KremZemin>
VurguMetni	Leinwandsatz, Wort für Wort; [ ] = Akzent, \n = Zeile	<VurguMetni metin={"Aufladen nur 30 Minuten,\n[schneller als Wettbewerber]"} isaret={{ifade:"30 Minuten", tip:"altcizgi"}} cikisKaresi={108}/>
ElCizimi	Rote Handzeichnung Ellipse/Unterstrich (einzelner kritischer Ausdruck)	Mit VurguMetni.isaret oder <ElCizimi tip="elips" baslangic={20}/>
SayiSayaci	Große Zahl zählen; para → grün	<SayiSayaci etiket="START PREIS" bas={39999} son={42999} sonEk=" ₺" para baslangic={12}/>
UIKart	Weiße schwebende Karte oder varyant="urun" Hero-Karte; Abzeichen, Etikett, Symbol	<UIKart varyant="urun" baslik="Nova X1 Pro" altBaslik="REVIEW · 2026" rozet="+ NEU"/>
Hap	Etikett, Zähler (+3), Frist, CTA	<Hap metin="Was ist in der Box" sayi="+3"/>
KartGiris	Gemeinsamer Ein-/Ausgang für jedes Objekt (yukari / yana)	<KartGiris baslangic={14} cikisKaresi={128} cikisTipi="yana">…</KartGiris>
AltYaziBandi	A-Roll-Untertitel, aus words.json, maximal 2 Zeilen	<AltYaziBandi kelimeler={sahneKelimeleri(words, 12.4, 18)} vurgular={["30","Tage"]}/>
ZoomIn	atlama (sofortiger Reframe) · punch · itme · suruklenme	<ZoomIn mod="atlama" kare={66} olcek={1.25} odak={{x:.5,y:.3}} ses="boom">…</ZoomIn>
ARoll	Rohvideo auf 9:16 zuschneiden, mit baslangicSn schneiden	<ARoll kaynak="ham/p/x.mp4" baslangicSn={12.4}/>
Gecis	kesme · bulanikYukari · odakKaybi · yanaKayma · karartma; umschließt den Inhalt (nicht den Hintergrund)	<KremZemin><Gecis tip="odakKaybi" sure={120} giris={false}>…</Gecis></KremZemin>
SesEfekti / SesAyari	Einzel-SFX (Typ + Frame; spitzenausgerichtet, Datei-Rotation) / Globales Ein-/Aus, dB-Verschiebung	<SesEfekti tur="boom" kare={66}/>
TasarimSayfasi / SahneDizisi	Genehmigungs-PNG / finale Sequenz + Schnitt-Sounds	siehe Schritt 3

Timing-Hilfen (zamanlama.ts): kare(sn), sahneKelimeleri(words, bas, son), kelimeKaresi(kelimeler, "otuz"). Animation ans Wort binden: Start-Frame aus words.json nehmen, nicht schätzen.

Komponenten lesen von useVideoConfig() nur fps, Abmessungen sind fest 1080×1920. So erscheinen sie auch auf der Designseite korrekt. Einer Szene werden sure und cikisKaresi explizit gegeben.

16:9 / Hybrid (Hibrit.tsx): KoyuCamZemin, CamKart, TakipEtiketi (verfolgter Punkt+Linie+Pill), BolumEtiketi, UygulamaKarosu (gorsel = echtes Logo), TelefonCerceve, KilitKatmani, RotoKatmani. List-Karte: projeler/duo/Parti2.tsx → ListeKarti + OzellikSatiri (var/yok/bilgi). Noch nicht geschrieben: TarayiciCerceve, Stepper, Mozaik. Referenzen mit zugehörigem Index: v01-10/14/47 (Telefon), v01-08/13/43 (Browser), v01-26/55 (Symbol), v01-51 (Stepper), v01-04/58 (Mosaik), v01-46 (Button), v01-56 (Liste).

4. Umgebung und Befehle

• Mac (Apple M1 Pro): Node 24, ffmpeg 9, whisper.cpp + large-v3-turbo. Installation und Versionen in KURULUM.md, zur Überprüfung kurulum_dogrula.command.
• Wenn die Shell der Sitzung keine Mac-, sondern eine Linux-VM ist:
  • remotion-studio/node_modules ist Mac-spezifisch, npm i nicht in der VM ausführen.
  • Für das Rendern das Projekt in den Cloud-Arbeitsbereich kopieren, dort mit denselben Versionen npm i ausführen ([email protected]) und mit Chromium rendern (--browser-executable=…/chrome-headless-shell). Ergebnisse zurück in den Ordner schreiben.
  • Whisper wird vom Benutzer auf dem Mac ausgeführt, oder es wird ein .command-Skript vorbereitet.
  • sfx_esitle.py funktioniert auch in der VM (python3 + ffmpeg).

...