edit-skill

xbear-motion-kurgu

Converte um vídeo com pessoa falando em uma edição de motion editorial que alterna entre dois mundos: A-roll escuro (rosto + legenda) ↔ tela creme (explicação, prova, números). A edição é feita com Remotion.

Regra de ouro: Nenhuma cena é renderizada em vídeo sem aprovação. Primeiro, a página de design (PNG) é mostrada.

0. Arquivos (raiz: ~/Desktop/seckin_ayazlar/)

O quê	Onde
Este skill + índice	06_skill/xbear-motion-kurgu/SKILL.md, REFERANS_INDEKSI.md
Resumo de estilo (medidas)	05_stil_calismasi/STIL_OZETI.md (leia apenas se a regra não estiver clara)
Cartões de animação	05_stil_calismasi/animasyonlar/<tipo>/<id>/kart.md + in/peak/out.png
Marca (prioridade máxima)	02_marka/marka_notu.md, fontlar/, logolar/
Projeto Remotion	remotion-studio/ → componentes em src/xbear/
Ferramenta de transcrição	remotion-studio/scripts/transcribe.sh <video> <saida> tr → <nome>.words.json
Saídas do projeto	07_projeler/<projeto>/ (páginas de design, MP4 final, lista de cenas)
Testes de componentes	05_stil_calismasi/bilesen_testleri/
Efeitos sonoros	03_sfx/<tipo>/ (fonte) → scripts/sfx_esitle.py → public/sfx/ + src/xbear/ses/kutuphane.ts. Medição: 05_stil_calismasi/SES_ANALIZI.md

Em caso de conflito, a ordem é: marca_notu.md > este arquivo > STIL_OZETI.md.

1. Regras de estilo

Mundos

• A-roll (~30%): estúdio escuro, rosto, legenda. Quase nunca fica sem legenda.
• Tela creme (~70%): fundo #F5F2EF, grade sutil, luz de janela diagonal suave (<KremZemin>).
• Transição A-roll ↔ tela creme é sempre corte seco. Sem deslize, wipe ou crossfade.

Cores (tema.ts → RENK)

Função	HEX
Tela creme / grade	#F5F2EF / #ECE9E6
Cartão	#FFFFFF
Texto principal / secundário	#111111 / #8A8A8A
Azul de destaque (UI / itálico)	#2782F5 / #1E90E8
Verde dinheiro	#16A06B
Vermelho de aviso (rabisco, prazo, negativo)	#E35B63
Brilho de produto	#864EC6 → #3C296B
Preto do A-roll / legenda	#030303 / #FFFFFF

No máximo uma cor de destaque por frase: azul = ideia principal, verde = dinheiro, vermelho = prazo ou perda.

Tipografia (tema.ts → FONT, BOYUT; para 1080×1920)

• Frase / legenda: neo-grotesk sem serifa (Instrument Sans 500). Na tela creme 84px, na legenda do A-roll 64px.
• Expressão de destaque: azul itálico com serifa (Instrument Serif Italic), 1,3x o tamanho da sem serifa. 1 expressão, 2–4 palavras por frase; nunca negrito ou sublinhado.
• Números: grotesco itálico pesado (Inter Black Italic), algarismos tabulares. Nunca use serifa. Se for dinheiro, é verde.
• Rótulo: cinza, maiúsculas espaçadas (letter-spacing .16em).
• Máximo de 2 linhas. Texto centralizado ou alinhado a um terço vazio, não use largura total. Caracteres turcos escritos corretamente (ğ, ş, ı, İ).
• Quando a fonte da marca chegar, apenas src/xbear/fontlar.ts é alterado.

Movimento (tema.ts → KARE, EASE)

Item	Movimento	Duração
Palavra	opacidade 0→1 + desfoque 8→0, no lugar (linha não desliza)	5 quadros, no momento em que a palavra é dita
Entrada de cartão/objeto	sobe ~60px + fade + desfoque 10→0 + escala .95→1, ease-out	14 quadros
Ícone / selo	escala .6→1, leve overshoot (spring)	8 quadros
Saída de texto	desliza 40px para cima + desfoque, ease-in	10 quadros
Mudança de seção na tela creme	perda de foco	9 quadros
Saída lateral do cartão	desfoque de movimento horizontal	8 quadros
Câmera	arrasto lento contínuo na tela creme; reenquadramento instantâneo no A-roll (1,15–1,3×)
Contador	contagem ease-out; dinheiro fica verde no valor final	20–90 quadros

Cada movimento se estabelece em ≤15 quadros. A única exceção permitida é um leve overshoot.

Ritmo

• Em média, uma nova ideia visual a cada ~6–8 segundos (mediana 6,4s na v01).
• Dentro de uma cena, algo muda a cada 1–2 segundos: palavra, cartão ou tick do contador.
• ~5 cortes secos por minuto. Seções de A-roll duram mediana de ~8–9 segundos.
• Gancho (primeiros 3–5s): A-roll + legenda + número crítico destacado + um ícone.

Frase → animação

Tipo de frase	O que aparece
Data / prazo	Ícone de calendário + data vermelha
Lista ("X, Y e Z")	Cada item em seu próprio cartão de palavra + pílula de contador crescente
Dinheiro / receita	Número verde itálico pesado, geralmente contando
Resultado / "as pessoas disseram"	Cartões de prova (~1 por segundo)
Cálculo de preço	Construído linha por linha, depois comparação de barras
Informação oculta	Mosaico + pílula "será revelado no final"
Nome de produto / ferramenta	Cartão de produto ou ícone de aplicativo
Pergunta de escolha	Dois botões sobre o A-roll
Frase emocional / pessoal	Apenas A-roll + legenda
Chamada para ação (CTA)	"Clique no link" + brilho azul por baixo + clique de botão

Proibições

• Neon, glitch, deslocamento RGB, queima de filme, vazamento de luz, emoji, sticker
• Sombra em texto, texto contornado, texto degradê, legenda EM MAIÚSCULAS, legenda em caixa/placa
• Rotação, giro 3D, easing elástico
• Fundo colorido em tela cheia: o fundo é sempre tela creme ou A-roll escuro
• Mais de 2 linhas de texto, mais de um destaque por frase
• Deslize ou crossfade entre A-roll ↔ tela creme
• Transbordar a área segura: 8% superior, 15% inferior, 12% direito permanecem vazios. Legenda não cobre o rosto.

Som (medição: SES_ANALIZI.md)

Evento	Som	Nota
Corte A-roll ↔ tela creme	whoosh	Quando Sahne.dunya muda, SahneDizisi coloca automaticamente (~60% dos cortes)
Entrada de cartão, número, pílula	swish	KartGiris, UIKart, SayiSayaci reproduzem automaticamente
Saída lateral do cartão, perda de foco	whoosh	Se estiver a menos de 0,5s do próximo whoosh de corte, desligue (cikisSesi={false})
Reenquadramento do gancho, payoff/explicação, CTA	boom	~1 por minuto. ZoomIn som="boom" ou <SesEfekti tur="boom">
Selo / rabisco / botão	pop / kalem / klik
Antes de revelar informação oculta	riser	O pico coincide com o momento da revelação
Contador	—	Sem tick (tikSesi desligado por padrão)
Momento em que o contador de dinheiro fica verde	para (ka-ching)	SayiSayaci para reproduz automaticamente (paraSesi={false} desliga). Não está na referência, é uma escolha da XBEAR

• O pico do som vem 2–3 quadros após o evento visual (TEPE_GECIKME_KARE). Os componentes ajustam isso automaticamente.
• O pico do SFX fica ~10 dB abaixo da fala (SEVIYE_DB: swish -17, whoosh -14, boom -12 dBFS). Para ajuste geral, use <SesAyari kaydirmaDb={-3}>.
• Proibido: enxurrada de whoosh, pop em cada palavra, tick de contador, repetição do mesmo arquivo consecutivamente.
• O arquivo Epidemic bruto é colocado diretamente na pasta 03_sfx/<tipo>/. O sfx_esitle.py separa as variantes (_v1, _v2...), corta silêncio e cauda, e normaliza.

Regras do canal Seçkin (02_marka/marka_notu.md)

• Palavrões são cortados. Pausas silenciosas e momentos de olhar para o roteiro e memorizar são cortados. A edição segue a ordem de gravação.
• Música selecionada apenas da Epidemic Sound, a -15 dB (se alta, -20 dB), apenas na introdução e por baixo de partes silenciosas.
• Nenhuma correção de cor é feita.

2. Fluxo de trabalho

Passo 1 — Planejamento

1. Obter transcrição: remotion-studio/scripts/transcribe.sh <cru.mp4> 07_projeler/<projeto>/ tr.
2. Marcar locais de corte: silêncio, memorização, palavrões.
3. Escrever a lista de cenas como tabela e mostrar ao usuário: S01 | 00:00.0–00:04.8 | A-roll / tela creme | o que está sendo dito | o que aparece (tipo de frase) | componente(s) | som.
4. Verificação de ritmo: deve haver uma nova ideia a cada ~6–8 segundos, e não mais que três cenas A-roll consecutivas.

Passo 2 — Seleção de referências

• Apenas REFERANS_INDEKSI.md é lido. Para cada cena, procura-se por "quando" e palavras-chave e selecionam-se 2–3 linhas.
• Apenas o kart.md dessas linhas e, se necessário, peak.png são abertos. clip.mp4 não é aberto, a pasta não é carregada em massa.
• Na lista de cenas, anotar ref v01-17 etc.

Passo 3 — Página de design

1. Criar a pasta do projeto: remotion-studio/src/projeler/<projeto>/.
   • sahneler.tsx → lista de Sahne[] (id, ad, sure, kareler, not, dunya, Bilesen).
   • No array kareler de cada cena, inserir 2–3 quadros críticos: entrada finalizada, pico, imediatamente antes da saída.
   • Kayit.tsx registra duas composições: <Projeto>-Video (SahneDizisi) e <Projeto>-Tasarim (TasarimSayfasi). Ambas são adicionadas a Root.tsx.
   • A composição de design deve ser um <Composition> (não <Still>), com {...tasarimSayfasiBoyutu(sahneler)}. Caso contrário, os quadros serão comprimidos para 0.
2. Se 03_sfx mudou, primeiro sincronizar os sons: python3 -I remotion-studio/scripts/sfx_esitle.py. O script lista os tipos que usam placeholders sintéticos; informe isso ao usuário.
3. O vídeo bruto é colocado em remotion-studio/public/ham/<projeto>/ e chamado com <ARoll kaynak="ham/<projeto>/x.mp4" baslangicSn={...} />.
4. Renderizar: npx remotion still <Projeto>-Tasarim ../07_projeler/<projeto>/tasarim_v1.png --frame=0
5. Verificar o PNG você mesmo. Verifique a área segura, transbordamento, limite de 2 linhas e caracteres turcos. Depois, mostre ao usuário.

Passo 4 — Aprovação (obrigatória)

• Até que o usuário aprove explicitamente, remotion render não é executado. Nem mesmo render de teste de uma única cena.
• Se forem solicitadas correções, uma nova versão da página de design (tasarim_v2.png) é gerada.

Passo 5 — Renderização

• npx remotion render <Projeto>-Video ../07_projeler/<projeto>/final_v1.mp4 --port=3199
• Verificar a saída com ffprobe: 1080×1920, 30 fps, duração esperada, stream de áudio presente.
• ffmpeg -i final.mp4 -af volumedetect -f null - → max_volume ≤ -1 dB (sem clipping).
• A lista de cenas é entregue junto com o vídeo final: tempo | tipo | texto na tela | transição | referência.

Passo 6 — Revisão

• Apenas a cena solicitada é alterada. Primeiro, a página de design dessa cena (apenas das cenas modificadas) é mostrada e, após aprovação, o vídeo é renderizado novamente.
• Os arquivos são mantidos com número de versão (final_v2.mp4). As versões antigas não são excluídas.

3. Estrutura do Remotion e componentes

remotion-studio/
  public/fonts/            Instrument Sans/Serif, Inter (OFL) → quando a fonte da marca chegar, public/fonts/marca/
  public/ornek/            aroll_yer_tutucu.mp4 (apenas para testes)
  public/sfx/<tipo>/       sons normalizados pelo sfx_esitle.py (não tocar)
  public/ham/<projeto>/    A-roll bruto (para cada projeto)
  src/Root.tsx             fontlariYukle() + todas as composições
  src/xbear/               ← biblioteca reutilizável, importar de "./xbear"
    tema.ts zamanlama.ts fontlar.ts TasarimSayfasi.tsx index.ts
    bilesenler/*.tsx
    ses/                   sesler.ts (regras de nível/alinhamento), SesEfekti.tsx, kutuphane.ts (automático)
    ornekler/              exemplos de uso de cada componente (composições XB-*)
  src/projeler/<projeto>/  sahneler.tsx, Kayit.tsx, kelimeler.json

Componente	Para quê	Exemplo de uso
KremZemin	Fundo da tela creme + arrasto	<KremZemin>…</KremZemin>
VurguMetni	Frase da tela creme, palavra por palavra; [ ] = destaque, \n = linha	<VurguMetni metin={"Carregamento apenas 30 minutos,\n[mais rápido que os concorrentes]"} isaret={{ifade:"30 minutos", tip:"altcizgi"}} cikisKaresi={108}/>
ElCizimi	Rabisco/elipse/sublinhado vermelho (uma única expressão crítica)	Com VurguMetni.isaret ou <ElCizimi tip="elips" baslangic={20}/>
SayiSayaci	Contagem de números grandes; para → verde	<SayiSayaci etiket="PREÇO INICIAL" bas={39999} son={42999} sonEk=" R$" para baslangic={12}/>
UIKart	Cartão flutuante branco ou varyant="urun" cartão hero; selo, rótulo, ícone	<UIKart varyant="urun" baslik="Nova X1 Pro" altBaslik="ANÁLISE · 2026" rozet="+ NOVO"/>
Hap	Rótulo, contador (+3), prazo, CTA	<Hap metin="Itens na caixa" sayi="+3"/>
KartGiris	Entrada/saída comum para cada objeto (yukari / yana)	<KartGiris baslangic={14} cikisKaresi={128} cikisTipi="yana">…</KartGiris>
AltYaziBandi	Legenda do A-roll, de words.json, máximo de 2 linhas	<AltYaziBandi kelimeler={sahneKelimeleri(words, 12.4, 18)} vurgular={["30","dias"]}/>
ZoomIn	atlama (reenquadramento instantâneo) · punch · itme · suruklenme	<ZoomIn mod="atlama" kare={66} olcek={1.25} odak={{x:.5,y:.3}} ses="boom">…</ZoomIn>
ARoll	Corta o vídeo bruto para 9:16, corta com baslangicSn	<ARoll kaynak="ham/p/x.mp4" baslangicSn={12.4}/>
Gecis	kesme · bulanikYukari · odakKaybi · yanaKayma · karartma; envolve o conteúdo (não o fundo)	<KremZemin><Gecis tip="odakKaybi" sure={120} giris={false}>…</Gecis></KremZemin>
SesEfekti / SesAyari	SFX único (tipo + quadro; pico alinhado, rotação de arquivo) / liga-desliga geral, deslocamento dB	<SesEfekti tur="boom" kare={66}/>
TasarimSayfasi / SahneDizisi	PNG de aprovação / sequência final + sons de corte	veja Passo 3

Auxiliares de temporização (zamanlama.ts): kare(sn), sahneKelimeleri(words, bas, son), kelimeKaresi(kelimeler, "otuz"). Conecte a animação à palavra: o quadro inicial é obtido do words.json, não é estimado manualmente.

Os componentes leem apenas fps de useVideoConfig(), as dimensões são fixas em 1080×1920. Assim, eles aparecem corretamente também na página de design. Para uma cena, sure e cikisKaresi são fornecidos explicitamente.

16:9 / híbrido (Hibrit.tsx): KoyuCamZemin, CamKart, TakipEtiketi (ponto+rótulo+linha com rastreador), BolumEtiketi, UygulamaKarosu (gorsel = logotipo real), TelefonCerceve, KilitKatmani, RotoKatmani. Cartão de lista: projeler/duo/Parti2.tsx → ListeKarti + OzellikSatiri (var/yok/bilgi). Ainda não escritos: TarayiciCerceve, Stepper, Mozaik. Referências com correspondência no índice: v01-10/14/47 (telefone), v01-08/13/43 (navegador), v01-26/55 (ícone), v01-51 (stepper), v01-04/58 (mosaico), v01-46 (botão), v01-56 (lista).

4. Ambiente e comandos

• Mac (Apple M1 Pro): Node 24, ffmpeg 9, whisper.cpp + large-v3-turbo. Instalação e versões em KURULUM.md, verificação com kurulum_dogrula.command.
• Se o shell da sessão não for Mac, mas sim uma VM Linux:
  • remotion-studio/node_modules é específico do Mac, não execute npm i na VM.
  • Para renderização, copie o projeto para a área de trabalho em nuvem, execute npm i lá com as mesmas versões ([email protected]) e renderize com Chromium (--browser-executable=…/chrome-headless-shell). Escreva os resultados de volta na pasta.
  • O Whisper é executado pelo usuário no Mac, ou um script .command é preparado.
  • sfx_esitle.py também funciona na VM (python3 + ffmpeg).