Amartileyton/autovideo

Destaques de Artigo

Use com remotion-best-practices, motion-graphics e cinematic-camera para notícias, lançamentos, tendências e momentos de prova de artigo onde um terminal pareceria forçado.

Entrada obrigatória

Antes de codificar, pergunte por qualquer decisão faltante:

Qual formato você deseja: inserção 4:3 meia-tela do Instagram ou 9:16 tela cheia do Instagram? E qual fundo: luz quente, escuro limpo, grade clara ou grade escura?

• Inserção 4:3: 1440×1080, projetada para permanecer legível em aproximadamente metade de um quadro 9:16.
• Tela cheia 9:16: 1080×1920, respeitando as zonas de legenda/interface.
• Use 16:9 apenas quando explicitamente solicitado.
• Se o usuário delegar o fundo, use luz quente.

O papel do artigo pode permanecer claro em uma cena de fundo escuro limpo ou grade escura. Não mude silenciosamente toda a composição para escuro.

Proibição visual absoluta

Zero neon, brilho, glow, bordas luminosas, sombras coloridas, gradientes ciano-roxo, orbes gradientes, lavagens radiais de cor, glassmorfismo, iluminação cyberpunk ou decoração de IA vibrada. Os destaques devem parecer tratamento físico de marcador/papel — não luz emitida.

Rejeite qualquer tratamento proibido antes da entrega.

Referência aprovada

Inspecione assets/examples/article-highlight.mp4 e entre em contato/consulte quadros de referência antes de codificar. Continue sua hierarquia editorial, espaçamento generoso do papel, tratamento contido do marcador, câmera lenta e legibilidade. Use a galeria do repositório canônico quando os ativos locais não estiverem disponíveis: https://github.com/Liamrjohnston/remotion-motion-graphics-skill.

Quando usar

Use para:

• Batidas informativas/notícias/lançamentos/tendências.
• Prova de "algo mudou ou foi lançado".
• Trechos reais de artigos com frases destacadas significativas.
• Evidências não terminais onde o material editorial esclarece o ponto.

Use terminal-inserts para histórias de CLI/configuração/agente. Use filmagens/UI autênticas do produto quando a batida for uma demonstração do produto.

Arquitetura central

Não achate o artigo quando os traços de marcador devem ficar atrás do texto. Construa DOM/SVG em camadas no Remotion:

1. Superfície da cena selecionada.
2. Papel/cartão editorial com amplo preenchimento seguro.
3. Camada de marcador Rough.js/SVG acima do papel.
4. Texto DOM/SVG acima do marcador.

O marcador deve ficar visivelmente atrás das palavras e acima do papel.

Material e layout

• Papel: branco quente/branco off-white com borda neutra e sombra neutra suave; nunca brilho colorido.
• Tipografia: hierarquia editorial/notícias — pequeno rótulo de seção, título grande serifado/editorial, legenda/data atenuada e no máximo 2–3 linhas curtas de corpo.
• Destaques: cor de marcador físico semitransparente contida, como amarelo suave; nunca fluorescente.
• Use identidade/fonte real do artigo e o texto fornecido. Não invente publicações, datas, alegações ou citações.
• Quebre linhas intencionalmente e mantenha o texto dentro das margens seguras transformadas.
• Não centralize como um slide de título; deve parecer um trecho autêntico de artigo.
• Remova pills/botões/clutter de origem não essenciais se não forem legíveis no tamanho de destino.

Animação

• Comece com um desfoque para foco contido e breve, apenas quando suportar a referência aprovada; desfoque é foco óptico, não brilho.
• Nenhum marcador visível durante a fase inicial de foco.
• Use um movimento lento e sutil de câmera e rotação de perspectiva contida.
• Inicie os traços do marcador depois que o foco se estabilizar.
• Desenhe cada destaque da esquerda para a direita usando uma máscara/wipe.
• Sequencie os destaques; nunca revele todos de uma vez.
• Termine com todas as frases-chave legíveis e uma pausa estável.
• Anime com useCurrentFrame(), spring() e interpolate(); sem animação CSS.

Regras do marcador

• Use rough.js ou uma forma de marcador SVG irregular.
• O marcador permanece atrás do texto.
• Uma leve imperfeição é boa; um retângulo gradiente perfeito não é.
• Destaque apenas frases significativas e verificadas, não parágrafos inteiros.
• A opacidade do marcador deve preservar o contraste do texto.
• Sem amarelo fluorescente, emissão de luz, halo de desfoque ou borda brilhante.

Sem narração redundante

O texto do artigo/fonte pode aparecer quando for a evidência real. Não adicione um título separado que apenas repita o VO falado. Use apenas o trecho autêntico e metadados estruturais mínimos.

Portão de rejeição de primeira passagem

Não entregue até que cada resposta seja "não":

1. O formato ou fundo não foram confirmados?
2. Há neon, brilho, tratamento de marcador luminoso, sombra colorida, lavagem gradiente ou glassmorfismo?
3. A identidade ou alegação da fonte/artigo foi inventada?
4. O cartão é um slide de título centralizado genérico em vez de uma superfície editorial?
5. Algum texto-chave está ilegível no posicionamento selecionado do Instagram?
6. O marcador fica acima/obscurece o texto ou aparece muito cedo?
7. A câmera corta o papel ou cria viagem vazia?
8. O resultado perde a contenção e o polimento da referência aprovada?

Revise em particular até que o portão passe.

QA e entrega

1. Verifique tipos ou execute a validação significativa mais pequena.
2. Renderize um still sem destaque inicial, um still com traço no meio, um still com destaque final e a pausa final.
3. Confirme que o marcador está invisível no início, atrás do texto e completo no final.
4. Inspecione por corte, cópia ilegível, detalhes de fonte inventados, neon/brilho e enquadramento fraco.
5. Entregue MP4 com dimensões, duração, comando de renderização exato e nota de posicionamento do editor.