O que sourceframe faz?

Um método para fazer um vídeo da mesma forma que você construiria um sistema: requisitos primeiro, um livro do que é verdade, um contrato de layout, pequenos passos verificados, medição antes da opinião. O produto é um vídeo curto, silencioso primeiro (15 a 90 segundos) que explica um mecanismo seguindo um elemento focal através dele. O nome é a regra: cada quadro remonta a uma fonte.

Esta habilidade foi destilada de uma construção real (um vídeo explicativo de 77 segundos sobre como o coreboot executa código C antes da DRAM existir, com uma grade de cache de 4.096 células, um chip flash 3D e treinamento de DRAM) e reprovada em um segundo assunto não relacionado (examples/merkle-proof, uma prova de inclusão Merkle cujo cada hash é computado pela build). Os caminhos abaixo são relativos à pasta desta habilidade.

Quando usar, quando não usar

Use para: vídeos de "como funciona", demonstrações de protocolos ou algoritmos, tours de arquitetura de sistemas, sequências de "o que acontece quando", reconstituições de pós-morte. Ele brilha quando o assunto tem um mecanismo com um estado que muda (bits mudam, um ponteiro se move, um hash se propaga).

Não use para: edições de cabeça falante ou filmagens, anúncios de produtos, branding de movimento puro, qualquer coisa onde o conteúdo é opinião em vez de mecanismo. Para esses casos, use uma habilidade de movimento simples. Se o usuário quiser apenas um carrossel estático, use uma habilidade de carrossel.

Os sete princípios

Livro antes dos pixels. Escreva FACTS.md (afirmação, evidência, status) antes da primeira cena. Status V lido de uma fonte nesta sessão, C computado pela build, S esquemático e rotulado na tela, H memória (reverificar), N precisa de fonte (bloqueia o envio). Nunca invente um número, um símbolo, um caminho, uma versão. Prefira C: deixe a build computar o que o vídeo mostra.
Um elemento focal. Uma coisa por quadro é a âncora do olho: ela recebe a única cor de "foco", é sempre a etapa atual e nunca compete com uma segunda. Tudo o resto é mais silencioso por construção.
Cor é significado. Os papéis da paleta (data, focus, ok, bad, ink) são semânticos e fixos para todo o vídeo. Nunca escolha um tom por estética.
Determinismo. Um quadro é uma função pura do seu número de quadro. Sem tempo de relógio, sem Math.random, sem transições CSS, sem useFrame. Use hash(n) com semente para qualquer coisa pseudoaleatória. Isso é o que torna possível a renderização paralela, imagens estáticas e sincronização de som posterior.
A imagem é o instrumento. A animação existe para mostrar uma mudança de estado. Cada movimento responde "o que isso mostra?". Proibido: o mesmo fade-up em todos os blocos, easing quicante ou elástico, decoração em loop, brilho por si só.
Meça primeiro, veja depois. Números são baratos e exatos; opiniões são caras. Verifique tipos, faça lint do livro, sonde o contêiner, meça pixels onde puder, depois veja uma folha de contato por rodada.
Regras de parada. Máximo de três rodadas de revisão por conjunto de cenas, máximo de três correções por rodada. Diga o que sobrou e por que parou. Honestidade supera polimento: rotule o que não foi verificado.

As dez fases

Cada fase tem uma entrega e um portão. Não pule um portão para economizar tempo: os erros caros estão todos a montante.

#	fase	entrega	portão
0	captação	verificação de ajuste em uma linha, plataforma, duração, silencioso primeiro ou com som	pergunte apenas o que bloqueia o trabalho (uma pergunta), caso contrário decida e afirme
1	briefing	`BRIEF.md` seções 1 a 3	a conclusão cabe em uma frase; o elemento focal pode ser nomeado em uma frase
2	evidência	`FACTS.md` preenchido para cada afirmação planejada; scripts de computação para linhas `C`	`tools/ledger_lint.py` passa; nenhuma linha `N`
3	direção	lista de exclusão, frase ideia, momento marcante, tokens `theme.ts`	teste do concorrente aprovado (veja `references/02-direction.md`)
4	storyboard	tabela: cena, segundos, o que se move, legenda, linha do livro; `timeline.json`	orçamento de legenda cumprido; duração total justificada
5	fundamentos	projeto scaffolded, fontes, tema, concha, câmera, pré-visualização abre	uma imagem estática renderiza; WebGL funciona (veja armadilhas: comprimento do caminho)
6	construção	cenas, as mais difíceis e centrais primeiro	por cena: imagens estáticas, uma folha de contato, no máximo 3 correções
7	assets	assets 3D e de ícone, processuais a menos que uma fonte licenciada seja necessária	todo logotipo ou marca usado inalterado e creditado
8	verificação	renderização completa, codificação, sonda, folha de quadros, lint do livro	todas as verificações automáticas verdes; folha revisada; falhas listadas
9	entrega	mp4, quadro de capa, texto da legenda, texto alternativo, créditos, lista "não verificado"	o usuário pode publicá-lo sem perguntar o que é verdade

Fase 0: captação

Afirme em uma linha o que você fará: Lendo isto como: <meio> para <leitor>, <elemento focal>, <duração>. Faça uma pergunta apenas se a resposta mudar o que você constrói (plataforma e proporção de tela; se o som virá depois; quais fontes são autoritativas). Canvas padrão 1080 x 1350 (4:5) a 30 fps para feeds sociais; veja references/08-adapting.md para 16:9, 1:1, 9:16.

Fase 1: briefing

Copie templates/starter/BRIEF.md. Preencha a intenção (meio, leitor, conclusão, elemento focal, clima). A conclusão deve ser uma frase que um espectador possa repetir. Se você não conseguir nomear o elemento focal em uma frase, você ainda não tem um vídeo: decida e diga isso, ou faça uma pergunta.

Fase 2: evidência (a parte que a maioria dos vídeos pula)

Identifique as fontes primárias (especificação, RFC, árvore fonte, folha de dados, página de manual, saída medida). Leia as linhas exatas que você citará. Registre arquivo:linha ou URL mais seção.
Para cada número, pergunte: a build pode computá-lo? Se sim, escreva um script que o computa, o verifique de uma segunda maneira, aborte em caso de discordância e escreva um módulo gerado que as cenas importam (examples/merkle-proof/scripts/compute.mjs é o modelo: recursão RFC versus build iterativa devem concordar ou nada é escrito).
Qualquer coisa que não possa ser fonte torna-se um esquemático rotulado (S, e a palavra "esquemático" aparece na tela) ou é cortada. [PRECISA DE FONTE] visível é permitido em rascunhos, nunca na renderização.
Dados ilustrativos são legais quando honestos: itens de exemplo inventados são mostrados como texto de exemplo simples e registrados como S.
Execute python tools/ledger_lint.py como um alarme: todo dígito em uma string de cena deve aparecer no livro.

Formato completo e exemplos: references/01-brief-and-ledger.md.

Fase 3: direção

Escreva a frase ideia: "Neste vídeo, [algo que pertence ao assunto] torna-se [o dispositivo]." Execute o teste do concorrente: se um vídeo genérico sobre o tópico pudesse usar a mesma frase, é uma ideia de categoria, não uma ideia. Escolha um momento marcante (o único movimento forte) e a lista de exclusão (as três visualizações mais óbvias, agora proibidas: tipicamente uma pilha de retângulos com setas, uma captura de tela, um objeto centralizado em um gradiente). Defina os dials: variância, intensidade de movimento, densidade, cada um de 1 a 10, a partir do assunto (um explicador de segurança para engenheiros é calmo e denso; um teaser de lançamento não é nem um nem outro). Detalhes e regras de coreografia em references/02-direction.md.

Fase 4: storyboard e temporização

Uma tabela: cena, segundos, o que se move, legenda, linha do livro. Orçamentos que se sustentaram na prática:

legenda no máximo 2 linhas e 14 palavras, mínimo de 48 px em um canvas 1080 (um telefone mostra o canvas a cerca de 0,36x, então 48 px são cerca de 17 pt); rótulos com pelo menos 26 px;
uma legenda fica pelo menos palavras / 2,6 + 0,8 segundos, nunca substituída no meio da frase;
uma ideia por cena; uma cena com mais de 12 s precisa de batidas internas (etapas) com sua própria legenda;
a peça inteira é uma ideia contada uma vez: corte qualquer cena cuja remoção não perca uma linha do livro.

Escreva a ordem das cenas e as durações apenas em timeline.json. Remotion, os scripts de verificação e o pipeline de som do cuelab leem todos esse mesmo arquivo.

Fase 5: fundamentos

node scripts/scaffold.mjs <diretório-destino> --install

Depois: edite src/theme.ts (paleta, canvas), coloque fontes em public/fonts, defina BRAND em src/ui/Chrome.tsx, edite timeline.json. Mantenha o caminho do projeto curto (veja armadilhas: ANGLE precisa de um caminho curto no Windows). Renderize uma imagem estática de uma cena 3D antes de escrever mais: se o WebGL falhar agora, falhará depois.

Fase 6: construção, cena por cena

Ordem: a cena marcante primeiro (o 3D ou grade difícil), depois as cenas que dependem dela, depois cenas de conexão. Por cena:

escreva a cena contra o contrato de layout (references/03-layout-contract.md) usando Shell, tokens e os ajudantes de animação;
bash tools/shots.sh <Cena> out/<cena> <quadros...>: escolha quadros no início, meio do movimento e repouso de cada batida, uma folha de contato;
leia a folha uma vez, responda: primeira/segunda/terceira coisa vista? elemento focal onde pretendido? algo genérico? o que cortar? Corrija no máximo três coisas; refaça apenas os quadros alterados;
quando a cena estiver estável, prossiga. Não polir a cena 2 enquanto a cena 6 não estiver construída.

Padrões de animação que funcionam (revelações de linha mascaradas, linhas escalonadas, embaralhamento de hash, inversão de bits, rótulos projetados em 3D, grades instanciadas) estão em references/04-remotion-patterns.md; receitas 3D em references/05-three-assets.md.

Fase 7: assets

Prefira assets processuais: eles são determinísticos, pequenos, tematizáveis e não apresentam risco de licença. Caixas foil, logotipos extrudados, grades de células instanciadas e campos de pontos cobrem a maioria dos explicadores. Use malhas geradas por IA apenas quando um objeto orgânico ou de marca for essencial e a licença e o custo do serviço forem aceitáveis para o usuário; nunca esconda que um asset foi gerado. Logotipos e marcas reais: use o arquivo do próprio projeto inalterado (recolorir uma marca de uma cor geralmente é aceitável; redesenhar não é), verifique a licença, credite na tela ou na legenda.

Fase 8: verificação

Automática, nesta ordem (do mais barato ao mais caro):

npx tsc --noEmit                 # tipos
python tools/ledger_lint.py      # números vs livro
bash tools/shots.sh Main out/m <quadros>   # folha de contato, olhe uma vez
npm run render && npm run encode          # renderização bruta, depois yuv420p h264 de alcance limitado
                                          # encode.sh termina executando tools/probe.py

tools/probe.py verifica codec, yuv420p (não yuvj420p), tamanho, fps, duração contra timeline.json, alcance limitado, sem quadros pretos, átomo fast-start. Depois olhe uma folha do mp4 final (quadros a cada 4 s, extraídos com ffmpeg) e em um quadro em tamanho real para nitidez do texto. Se um crítico de design estiver disponível (por exemplo, a habilidade creator-critic), execute-o em uma pasta de imagens estáticas: trate bloqueadores como bloqueadores e maiores como perguntas. Lista de verificação completa: references/06-verification.md.

Fase 9: entrega

Entregue: out/video.mp4, um quadro de capa (um quadro de repouso onde o título e o elemento focal são legíveis), rascunho de legenda (simples, sem hype, fonte nomeada), texto alternativo (uma frase sobre o que o vídeo mostra), créditos (assets, logotipos, licenças) e uma lista "não verificado" (qualquer coisa no status do livro H ou S, qualquer coisa que a build não possa provar, qualquer coisa que você não tenha conseguido revisar a olho). Não publique nada você mesmo.

Escolhendo entre opções (tabelas de decisão)

pergunta	escolha	porque
2D ou 3D para um elemento	3D apenas quando profundidade ou forma física é o ponto (um chip, uma pilha, um campo de um milhão de itens); caso contrário 2D	3D custa tempo de renderização e legibilidade; use-o onde explica
câmera	ortográfica, `manual = true`, fixa por cena	ortho mantém rótulos projetáveis e medidas honestas
rótulos em 3D	HTML ou SVG projetado com `project()`	texto permanece nítido e estilizado
muitas células repetidas	`InstancedMesh` (milhares) ou `Points` (um milhão)	chamadas de draw
fontes	no máximo duas famílias, OFL ou licenciadas, empacotadas em `public/fonts`	determinismo, sem rede na renderização
texto em laje ou preenchimento	texto escuro em preenchimentos claros, nunca branco sobre claro	contraste
som	projete-o depois que a imagem estiver bloqueada, a partir de `timeline.json`	veja a habilidade cuelab

Modos de falha que este método existe para prevenir

O vídeo bonito mas errado (sem livro); o vídeo correto mas ilegível (sem contrato de layout); o vídeo genérico (sem frase ideia, sem lista de exclusão); o vídeo que parece bom no estúdio e quebra na renderização (não determinismo); o vídeo que parece bom a 100% e é uma bagunça no telefone (pisos de tipo, teste de miniatura); o vídeo que não pode ser pontuado (sem timeline única); o vídeo cujas afirmações ninguém pode verificar (sem honestidade na entrega). Bugs concretos encontrados durante a construção dos dois primeiros vídeos, cada um com sintoma, causa e correção, estão em references/07-pitfalls.md; leia-o antes de depurar qualquer coisa que pareça mágica.

Arquivos nesta habilidade

caminho	o que
`references/01-brief-and-ledger.md`	modelo de briefing, formato do livro, como computar e verificar fatos
`references/02-direction.md`	frase ideia, lista de exclusão, dials, regras de coreografia, tokens de movimento
`references/03-layout-contract.md`	canvas, áreas seguras, pisos de tipo e a aritmética de escala de telefone
`references/04-remotion-patterns.md`	padrões de animação testados com código
`references/05-three-assets.md`	three.js no Remotion: câmera, shader foil, bordas, instanciação, pontos, extrusão, projeção de rótulo
`references/06-verification.md`	a escada de verificação completa, protocolo de folha de contato, codificação e sonda
`references/07-pitfalls.md`	todos os bugs reais encontrados, com correções
`references/08-adapting.md`	outras proporções de tela, temas, idiomas, variante sem 3D, transferência para som
`templates/starter/`	um projeto Remotion funcional: tema, ajudantes, cromo UI, kit three.js, ferramentas, modelos BRIEF e FACTS
`scripts/scaffold.mjs`	copia o starter para um novo projeto e instala
`../../examples/merkle-proof/`	um exemplo completo de 36 s com fatos computados, livro, renderização e sonda

Nota de licença que você deve transmitir

Remotion não é MIT. É gratuito para indivíduos e para equipes de até três pessoas; empresas acima disso precisam de uma licença paga (o CLI do Remotion imprime o aviso, veja remotion.pro/license). Informe o usuário uma vez, no início, quando o projeto pode ser comercial. three.js, React e as fontes empacotadas (SIL OFL) são permissivas.

sourceframe

O que é sourceframe?

Perguntar na sua IA favorita

Documentação