edit-skill

xbear-motion-kurgu

Convierte un video de persona hablando en una edición de motion graphics editorial que alterna entre dos mundos: oscuro A-roll (rostro + subtítulos) ↔ lienzo crema (explicación, pruebas, números). La edición se realiza con Remotion.

Regla de oro: Ninguna escena se renderiza como video sin aprobación previa. Primero se muestra la página de diseño (PNG).

0. Archivos (raíz: ~/Desktop/seckin_ayazlar/)

Qué	Dónde
Esta habilidad + índice	06_skill/xbear-motion-kurgu/SKILL.md, REFERANS_INDEKSI.md
Resumen de estilo (medidas)	05_stil_calismasi/STIL_OZETI.md (leer solo si la regla es ambigua)
Tarjetas de animación	05_stil_calismasi/animasyonlar/<tipo>/<id>/kart.md + in/peak/out.png
Marca (prioridad absoluta)	02_marka/marka_notu.md, fontlar/, logolar/
Proyecto Remotion	remotion-studio/ → componentes en src/xbear/
Herramienta de transcripción	remotion-studio/scripts/transcribe.sh <video> <salida> tr → <nombre>.words.json
Salidas del proyecto	07_projeler/<proyecto>/ (páginas de diseño, MP4 final, lista de escenas)
Pruebas de componentes	05_stil_calismasi/bilesen_testleri/
Efectos de sonido	03_sfx/<tipo>/ (fuente) → scripts/sfx_esitle.py → public/sfx/ + src/xbear/ses/kutuphane.ts. Medición: 05_stil_calismasi/SES_ANALIZI.md

En caso de conflicto, el orden es: marka_notu.md > este archivo > STIL_OZETI.md.

1. Reglas de estilo

Mundos

• A-roll (~30%): estudio oscuro, rostro, subtítulos. Casi nunca se queda sin subtítulos.
• Lienzo (~70%): fondo #F5F2EF, rejilla ligera, suave luz de ventana diagonal (<KremZemin>).
• La transición A-roll ↔ lienzo siempre es corte directo. No hay deslizamientos, barridos ni transiciones cruzadas.

Color (tema.ts → RENK)

Rol	HEX
Lienzo / rejilla	#F5F2EF / #ECE9E6
Tarjeta	#FFFFFF
Texto principal / secundario	#111111 / #8A8A8A
Azul de acento (UI / texto en cursiva)	#2782F5 / #1E90E8
Verde dinero	#16A06B
Rojo de advertencia (dibujo a mano, fecha límite, negativo)	#E35B63
Brillo de producto	#864EC6 → #3C296B
Negro A-roll / subtítulos	#030303 / #FFFFFF

Se usa como máximo un color de acento por oración: azul = idea principal, verde = dinero, rojo = fecha límite o pérdida.

Tipografía (tema.ts → FONT, BOYUT; para 1080×1920)

• Oración / subtítulo: sans serif neo-grotesca (Instrument Sans 500). 84px en lienzo, 64px en subtítulo A-roll.
• Frase de acento: azul serif cursiva (Instrument Serif Italic), 1.3 veces el tamaño del sans. En la oración hay 1 frase, de 2–4 palabras; nunca en negrita o subrayada.
• Números: grotesca cursiva pesada (Inter Black Italic), cifras tabulares. Nunca se usa serif. Si es dinero, es verde.
• Etiqueta: gris, mayúscula espaciada (letter-spacing .16em).
• Máximo 2 líneas. El texto está centrado o alineado al tercio vacío, no se usa ancho completo. Los caracteres turcos se escriben correctamente (ğ, ş, ı, İ).
• Cuando llegue la fuente de la marca, solo se modifica src/xbear/fontlar.ts.

Movimiento (tema.ts → KARE, EASE)

Elemento	Movimiento	Duración
Palabra	Opacidad 0→1 + desenfoque 8→0, en su lugar (la línea no se desplaza)	5 fotogramas, justo cuando se dice la palabra
Entrada de tarjeta / objeto	Sube ~60px + fade + desenfoque 10→0 + escala .95→1, ease-out	14 fotogramas
Icono / insignia	Escala .6→1, ligero rebote (spring)	8 fotogramas
Salida de texto	Se desvanece 40px hacia arriba + desenfoque, ease-in	10 fotogramas
Cambio de sección en lienzo	Pérdida de enfoque	9 fotogramas
Salida lateral de tarjeta	Desenfoque de movimiento horizontal	8 fotogramas
Cámara	En lienzo, desplazamiento lento continuo; en A-roll, reencuadre instantáneo (1.15–1.3×)
Contador	Conteo ease-out; el dinero se vuelve verde al valor final	20–90 fotogramas

Cada movimiento se asienta en ≤15 fotogramas. La única excepción permitida es un ligero rebote.

Ritmo

• En promedio, aparece una nueva idea visual cada ~6–8 segundos (en v01, la mediana es 6.4 s).
• Dentro de una escena, algo cambia cada 1–2 segundos: palabra, tarjeta o tick de contador.
• Hay ~5 cortes directos por minuto. Las secciones de A-roll duran una mediana de ~8–9 segundos.
• Gancho (primeros 3–5 s): A-roll + subtítulos + número crítico marcado + un icono.

Oración → animación

Tipo de oración	Qué aparece
Fecha / fecha límite	Icono de calendario + fecha roja
Lista ("X, Y y Z")	Cada elemento en su propia palabra: una tarjeta + píldora de contador creciente
Dinero / ingreso	Número verde en cursiva pesada, la mayoría de las veces apareciendo con conteo
Resultado / "la gente dijo"	Tarjetas de evidencia (~1 por segundo)
Cálculo de precio	Se construye línea por línea, luego comparación de barras
Información oculta	Mosaico + píldora "se revelará al final"
Nombre de producto / herramienta	Tarjeta de producto o icono de aplicación
Pregunta de elección	Dos botones sobre el A-roll
Oración emocional / personal	Solo A-roll + subtítulos
Llamada a la acción (CTA)	"Haz clic en el enlace" + brillo azul inferior + clic de botón

Prohibiciones

• Neón, glitch, desplazamiento RGB, quemadura de película, fuga de luz, emoji, pegatina
• Sombra en texto, texto con contorno, texto degradado, subtítulos en MAYÚSCULAS, subtítulos con caja/placa
• Rotación, voltereta 3D, easing elástico
• Fondo de color a pantalla completa: el fondo es o lienzo crema o A-roll oscuro
• Más de 2 líneas de texto, más de un acento por oración
• Deslizamiento o transición cruzada entre A-roll y lienzo
• Salirse del área segura: el 8% superior, 15% inferior y 12% derecho deben quedar vacíos. Los subtítulos no cubren el rostro.

Sonido (medición: SES_ANALIZI.md)

Evento	Sonido	Nota
Corte A-roll ↔ lienzo	whoosh	Cuando Sahne.dunya cambia, SahneDizisi lo coloca automáticamente (~60% de los cortes)
Entrada de tarjeta, número, píldora	swish	KartGiris, UIKart, SayiSayaci lo reproducen automáticamente
Salida lateral de tarjeta, pérdida de enfoque	whoosh	Si el siguiente whoosh de corte está a menos de 0.5 segundos, se desactiva (cikisSesi={false})
Reencuadre de gancho, revelación/explicación, CTA	boom	~1 por minuto. Usar ZoomIn ses="boom" o <SesEfekti tur="boom">
Insignia / dibujo a mano / botón	pop / kalem / klik
Antes de revelar información oculta	riser	Su pico coincide con el momento de la revelación
Contador	—	Sin tick (tikSesi desactivado por defecto)
Momento en que el contador de dinero se vuelve verde	para (ka-ching)	SayiSayaci para lo reproduce automáticamente (paraSesi={false} lo desactiva). No está en la referencia, es preferencia de XBEAR

• El pico del sonido llega 2–3 fotogramas después del evento visual (TEPE_GECIKME_KARE). Los componentes lo alinean automáticamente.
• El pico del SFX se sitúa ~10 dB por debajo de la voz (SEVIYE_DB: swish -17, whoosh -14, boom -12 dBFS). Para el ajuste general, usar <SesAyari kaydirmaDb={-3}>.
• Prohibido: inundación de whoosh, pop en cada palabra, tick de contador, reproducción consecutiva del mismo archivo.
• El archivo original de Epidemic se coloca directamente en la carpeta 03_sfx/<tipo>/. sfx_esitle.py separa sus variantes (_v1, _v2…), recorta el silencio y la cola, y lo normaliza.

Reglas del canal de Seçkin (02_marka/marka_notu.md)

• Las blasfemias se eliminan. Las pausas silenciosas y los momentos de mirar el guión y memorizar se cortan. La edición sigue el orden de grabación.
• La música se selecciona solo de Epidemic Sound, a -15 dB (si es fuerte, -20 dB), solo en la intro y debajo de las partes silenciosas.
• No se realiza corrección de color.

2. Flujo de trabajo

Paso 1 — Planificación

1. Obtener la transcripción: remotion-studio/scripts/transcribe.sh <bruto.mp4> 07_projeler/<proyecto>/ tr.
2. Marcar los lugares a cortar: silencio, memorización, blasfemia.
3. Escribir la lista de escenas como tabla y mostrarla al usuario: S01 | 00:00.0–00:04.8 | A-roll / lienzo | qué se dice | qué aparece (tipo de oración) | componente(s) | sonido.
4. Control de ritmo: debe haber una nueva idea cada ~6–8 segundos, no más de tres escenas A-roll consecutivas.

Paso 2 — Selección de referencias

• Solo se lee REFERANS_INDEKSI.md. Para cada escena, se buscan el "cuándo" y las palabras clave y se seleccionan 2–3 líneas.
• Solo se abren el kart.md y, si es necesario, el peak.png de esas líneas. No se abre clip.mp4, no se carga la carpeta completa.
• Se anota en la lista de escenas algo como ref v01-17.

Paso 3 — Página de diseño

1. Crear la carpeta del proyecto: remotion-studio/src/projeler/<proyecto>/.
   • sahneler.tsx → lista de Sahne[] (id, ad, sure, kareler, not, dunya, Bilesen).
   • En el array kareler de cada escena, se introducen 2–3 fotogramas clave: entrada completa, pico, justo antes de la salida.
   • Kayit.tsx registra dos composiciones: <Proyecto>-Video (SahneDizisi) y <Proyecto>-Tasarim (TasarimSayfasi). Ambas se añaden a Root.tsx.
   • La composición de diseño debe ser <Composition> (no <Still>), con {...tasarimSayfasiBoyutu(sahneler)}. De lo contrario, los fotogramas se comprimen a 0.
2. Si 03_sfx ha cambiado, primero sincronizar los sonidos: python3 -I remotion-studio/scripts/sfx_esitle.py. El script lista los tipos que usan marcadores sintéticos; informar de esto al usuario.
3. El video bruto se coloca en remotion-studio/public/ham/<proyecto>/ y se llama con <ARoll kaynak="ham/<proyecto>/x.mp4" baslangicSn={…} />.
4. Renderizar: npx remotion still <Proyecto>-Tasarim ../07_projeler/<proyecto>/tasarim_v1.png --frame=0
5. Revisar el PNG uno mismo. Verificar el área segura, desbordamiento, límite de 2 líneas y caracteres turcos. Luego mostrarlo al usuario.

Paso 4 — Aprobación (obligatoria)

• Hasta que el usuario dé su aprobación explícita, remotion render no se ejecuta. Tampoco se realiza un render de prueba de una sola escena.
• Si se solicitan correcciones, se genera una nueva versión de la página de diseño (tasarim_v2.png).

Paso 5 — Renderizado

• npx remotion render <Proyecto>-Video ../07_projeler/<proyecto>/final_v1.mp4 --port=3199
• Verificar la salida con ffprobe: 1080×1920, 30 fps, duración esperada, flujo de audio presente.
• ffmpeg -i final.mp4 -af volumedetect -f null - → max_volume ≤ -1 dB (sin recorte).
• Junto con el video final, se entrega la lista de escenas: tiempo | tipo | texto en pantalla | transición | referencia.

Paso 6 — Revisión

• Solo se modifica la escena solicitada. Primero se muestra la página de diseño de esa escena (solo las escenas modificadas) y, después de la aprobación, se vuelve a renderizar el video.
• Los archivos se guardan con número de versión (final_v2.mp4). Las versiones anteriores no se eliminan.

3. Estructura y componentes de Remotion

remotion-studio/
  public/fonts/            Instrument Sans/Serif, Inter (OFL) → cuando llegue la fuente de la marca, a public/fonts/marka/
  public/ornek/            aroll_yer_tutucu.mp4 (solo para pruebas)
  public/sfx/<tipo>/       Sonidos normalizados por sfx_esitle.py (no tocar manualmente)
  public/ham/<proyecto>/   A-roll bruto (para cada proyecto)
  src/Root.tsx             fontlariYukle() + todas las composiciones
  src/xbear/               ← biblioteca reutilizable, importar desde "./xbear"
    tema.ts zamanlama.ts fontlar.ts TasarimSayfasi.tsx index.ts
    bilesenler/*.tsx
    ses/                   sesler.ts (reglas de nivel/alineación), SesEfekti.tsx, kutuphane.ts (automático)
    ornekler/              Uso de ejemplo de cada componente (composiciones XB-*)
  src/projeler/<proyecto>/ sahneler.tsx, Kayit.tsx, kelimeler.json

Componente	Para qué	Ejemplo de uso
KremZemin	Fondo de lienzo + desplazamiento	<KremZemin>…</KremZemin>
VurguMetni	Oración en lienzo, palabra por palabra; [ ] = acento, \n = línea	<VurguMetni metin={"La carga solo son 30 minutos,\n[más rápido que la competencia]"} isaret={{ifade:"30 minutos", tip:"altcizgi"}} cikisKaresi={108}/>
ElCizimi	Elipse/subrayado rojo dibujado a mano (una sola frase crítica)	Con VurguMetni.isaret o con <ElCizimi tip="elips" baslangic={20}/>
SayiSayaci	Conteo de números grandes; para → verde	<SayiSayaci etiket="PRECIO INICIAL" bas={39999} son={42999} sonEk=" ₺" para baslangic={12}/>
UIKart	Tarjeta flotante blanca o tarjeta hero con varyant="urun"; insignia, etiqueta, icono	<UIKart varyant="urun" baslik="Nova X1 Pro" altBaslik="REVISIÓN · 2026" rozet="+ NUEVO"/>
Hap	Etiqueta, contador (+3), fecha límite, CTA	<Hap metin="Contenido de la caja" sayi="+3"/>
KartGiris	Entrada/salida común para cada objeto (yukari / yana)	<KartGiris baslangic={14} cikisKaresi={128} cikisTipi="yana">…</KartGiris>
AltYaziBandi	Subtítulo A-roll, desde words.json, máximo 2 líneas	<AltYaziBandi kelimeler={sahneKelimeleri(words, 12.4, 18)} vurgular={["30","días"]}/>
ZoomIn	atlama (reencuadre instantáneo) · punch · itme · suruklenme	<ZoomIn mod="atlama" kare={66} olcek={1.25} odak={{x:.5,y:.3}} ses="boom">…</ZoomIn>
ARoll	Recorta el video bruto a 9:16, lo corta con baslangicSn	<ARoll kaynak="ham/p/x.mp4" baslangicSn={12.4}/>
Gecis	kesme · bulanikYukari · odakKaybi · yanaKayma · karartma; envuelve el contenido (no el fondo)	<KremZemin><Gecis tip="odakKaybi" sure={120} giris={false}>…</Gecis></KremZemin>
SesEfekti / SesAyari	SFX individual (tipo + fotograma; pico alineado, rotación de archivos) / activar-desactivar general, desplazamiento en dB	<SesEfekti tur="boom" kare={66}/>
TasarimSayfasi / SahneDizisi	PNG de aprobación / secuencia final + sonidos de corte	Ver Paso 3

Ayudantes de temporización (zamanlama.ts): kare(sn), sahneKelimeleri(words, bas, son), kelimeKaresi(kelimeler, "treinta"). Vincular la animación a la palabra: el fotograma de inicio se toma de words.json, no se estima manualmente.

Los componentes solo leen fps de useVideoConfig(), las dimensiones son fijas: 1080×1920. Así se ven correctamente también en la página de diseño. A una escena se le asignan explícitamente sure y cikisKaresi.

16:9 / híbrido (Hibrit.tsx): KoyuCamZemin, CamKart, TakipEtiketi (punto+línea+píldora con seguimiento), BolumEtiketi, UygulamaKarosu (gorsel = logotipo real), TelefonCerceve, KilitKatmani, RotoKatmani. Tarjeta de lista: projeler/duo/Parti2.tsx → ListeKarti + OzellikSatiri (var/yok/bilgi). Aún no escritos: TarayiciCerceve, Stepper, Mozaik. Referencias con contraparte en el índice: v01-10/14/47 (teléfono), v01-08/13/43 (navegador), v01-26/55 (icono), v01-51 (stepper), v01-04/58 (mosaico), v01-46 (botón), v01-56 (lista).

4. Entorno y comandos

• Mac (Apple M1 Pro): Node 24, ffmpeg 9, whisper.cpp + large-v3-turbo. Instalación y versiones en KURULUM.md, para verificar usar kurulum_dogrula.command.
• Si la terminal de la sesión es una VM Linux (no Mac):
  • remotion-studio/node_modules es específico de Mac, en la VM no se ejecuta npm i.
  • Para renderizar, copiar el proyecto al espacio de trabajo en la nube, ejecutar npm i allí con las mismas versiones ([email protected]) y renderizar con Chromium (--browser-executable=…/chrome-headless-shell). Escribir los resultados de vuelta a la carpeta.
  • Whisper lo ejecuta el usuario en su Mac, o se prepara un script .command.
  • sfx_esitle.py también funciona en la VM (python3 + ffmpeg).