kosta4a/stopmotion-video

Vídeo stop-motion

Os vídeos feitos com esta skill se movem como stop-motion ao som de uma música. Cada pose é mantida por uma colcheia, e então tudo muda junto. As páginas aparecem nas linhas do compasso. Cada clique soa em uma batida de bateria, e as grandes mudanças caem nos grandes bumbos. A taxa de quadros permanece baixa propositalmente. Quando um movimento parece brusco, suas poses são espaçadas melhor; a batida nunca é suavizada.

As regras vêm da produção de um filme de lançamento de 47 segundos, cortado em uma faixa de drum and bass a 169,825 BPM, ao longo de algumas centenas de rodadas de anotações. O filme rodava a 30fps e mantinha uma pose por colcheia, o que dá 5,66 poses por segundo, 5 ou 6 quadros cada. Os valores aqui são os do filme, e em live.md os de uma página web que toca cenas dele contra um metrônomo. Onde uma regra se generaliza além deles, o texto diz.

Vocabulário

• Pose: uma imagem mantida, a colcheia da música. O código a chama de batida (STEP_MS, useBeat).
• Batida da música: o que o BPM conta, uma semínima. Tem duas poses de duração e recebe um clique de metrônomo.
• Compasso: quatro batidas da música, oito poses. No drum and bass, o bumbo cai na pose 0 e as caixas nas poses 2 e 6, contando a partir de 0.
• Golpe: um som de bateria na música. Um bumbo forte é o bumbo que abre uma frase (a cada compasso ímpar na faixa do filme).
• ms autorado: tempos no código. Eles são escritos em uma pose de 200ms e tocam SPEED vezes mais rápido (SPEED = TEMPO / 150).
• Carimbos de data/hora são escritos m:ss.ff, onde ff conta quadros. É como o Remotion Studio mostra o tempo, e como as anotações chegam.

Postura operacional

• Mantenha a baixa taxa de quadros propositalmente. Nunca suavize a batida para corrigir um movimento. Espace melhor as poses do movimento.
• Tudo mantém uma pose por uma batida e muda junto, transições incluídas. Nada funciona em seu próprio relógio: uma animação embutida ou uma página de rolagem também segue a pose. A digitação é a única exceção: ela corre mais rápido que a batida, como a digitação faz, a partir de sua pose.
• A música é o relógio. Meça-a antes de storyboard. Coloque páginas em seus compassos e aja em seus golpes.
• Um relógio para o vídeo inteiro. Conte as poses nos quadros do vídeo, nunca nos de uma cena.
• Mova-se em compassos inteiros. Altere o comprimento de uma página por compassos inteiros, ou recupere as poses em outro lugar antes da próxima linha do compasso. Caso contrário, tudo depois dela sai da música.
• Sem poses ociosas. Quando o que acontece em uma página terminar, mantenha-a apenas pelo tempo que o espectador precisar para absorvê-la.
• Poucos tipos de mudança, uma direção, nada de fade.
• Verifique medindo. Use stills, uma por pose, tempos medidos no áudio da renderização e um corte de metrônomo. Não julgue a sincronia a olho nu.

A ferramenta: Remotion, por padrão

Proponha o Remotion para fazer o vídeo, a menos que o projeto já faça seu vídeo de outra forma. Diga isso antes do storyboard, com o motivo, e mude apenas se o usuário pedir outra ferramenta. Em uma página web, toque ao vivo (live.md); em uma ferramenta de movimento, as regras ainda valem, mas os helpers não.

• Por que se encaixa. Cada quadro é um componente React calculado a partir do número do quadro, então uma pose é exata em qualquer quadro em que caia e renderiza igual toda vez. Uma renderização desenha quadros fora de ordem, em várias abas, o que só um vídeo conduzido pelo quadro sobrevive. Os helpers em assets/remotion/ são escritos para ele, e seu Studio mostra o tempo como m:ss.ff, a forma como as anotações chegam.
• Configure-o. npx create-video@latest com o modelo em branco. Fixe remotion e todos os pacotes @remotion/* em uma versão exata (a do filme: 4.0.532), e mantenha o TypeScript na versão 5.x (clock.md §7). Uma composição, 1920×1080 a 30fps. Copie beat.ts e transitions.tsx para src/ e defina TEMPO.
• Configure-o. Em remotion.config.ts: quadros JPEG com qualidade 95 (o padrão 80 torna ásperas bordas de fundos planos e tipos finos), cor BT.709 (para que os players mostrem as cores como o navegador) e sobrescrita ativada.
• Visualize e renderize. npx remotion studio para trabalhar; npx remotion render <Comp> out/<name>.mp4 para 1080p, com --scale=2 para 4K; --frames=<first>-<last> ou npx remotion still <Comp> --frame=<n> para verificar um trecho ou uma pose.

A ordem de decisão

Trabalhe de cima para baixo. Cada etapa restringe a próxima.

1. Proponha a ferramenta. Remotion, a menos que o projeto já faça vídeo de outra forma; configure-o como acima antes de qualquer outra coisa.
2. Meça a música. Encontre o tempo a partir de seus ataques e verifique se a grade se mantém ao longo do trecho que você usa. Marque os compassos e frases, onde a bateria sai e volta, e os bumbos fortes. Corte o trecho exato na amostra, um pelo (23ms) antes do primeiro bumbo de uma frase. Veja song.md.
3. Defina o relógio. Uma pose é a colcheia da música. Escreva em uma pose de 200ms com SPEED = TEMPO / 150, renderize a 30fps e conte poses nos quadros de todo o vídeo. Veja clock.md.
4. Coloque as páginas nos compassos. Escreva o storyboard em poses. Cada página é um número inteiro de poses e começa em uma linha do compasso. Mapeie os eventos da música para poses antes de animar qualquer coisa.
5. Posicione os golpes. O código é digitado em blocos nas colcheias, e títulos e um backspace pressionado correm mais rápido que a batida a partir de sua pose. Cliques e estalos vão nas caixas, aterrissagens e novas páginas nos tempos fortes, e grandes mudanças nos bumbos fortes. A construção vai no silêncio, e a aterrissagem vem quando a bateria retorna. Veja hits.md.
6. Espace as poses. Escolha cada curva para suas poses. A primeira pose de um movimento é seu primeiro passo, e cada pose o move visivelmente. As coisas aterrissam em vez de rastejar. Veja poses.md.
7. Mude as páginas. Use um corte seco na batida, um corte do fundo, uma página sobreposta como uma folha, a câmera indo para uma cor, um preenchimento de dentro, uma abertura através de uma forma, ou blocos de pixel. Nunca um fade. Veja hits.md.
8. Defina o tipo. O tracking aperta conforme o tamanho cresce, e o leading aperta junto. Cada palavra passa 4,5:1 contra seu fundo em cada pose. Os títulos são digitados, não esmaecidos. Veja type.md.
9. Faça o som. Cada clique vai no próprio golpe da música, colocado na amostra, e todos os cliques são cozidos em uma trilha que começa com a música. Abafe a música sob os cliques, e mantenha um corte de metrônomo para verificação. Veja sound.md.
10. Decida onde pular uma batida. Solte, abafe, segure, estale, corte compassos inteiros, termine em uma batida da música. Veja skipping.md.
11. Verifique. Faça uma folha de contato, meça a sincronia e assista ao corte do metrônomo. Tome notas como carimbos de data/hora mapeados para poses. Veja checking.md.
12. Tocando ao vivo, em um navegador? As mesmas regras contra um metrônomo: um relógio no tempo da página, a imagem 25ms à frente do som, o som agendado adiante no relógio de áudio, e sem música, toda mudança em um clique. Veja live.md.

Regras rapidamente

Relógio

Item	Regra
Taxa de quadros	30fps, de propósito. Uma variante suave de 60fps pode compartilhar o storyboard (clock.md §8)
Pose	a colcheia da música: 176,65ms a 169,825 BPM, 5,66 por segundo, 5 ou 6 quadros a 30fps
Autoria	todo tempo em ms em uma pose de 200ms; SPEED = TEMPO / 150; ms() para quadros, seconds() para relógios embutidos
Primeiro quadro da pose n	ceil(n × quadros por pose), nos quadros de todo o vídeo (beatFrame)
Página	um número inteiro de poses, começando em uma linha do compasso (pose divisível por 8)
Alterar comprimento	por compassos inteiros, ou recuperar as poses antes da próxima linha do compasso
Arrastos do Studio	uma faixa arrastada escreve um deslocamento from que desloca a imagem contra o som: remova-o

Espaçamento

Movimento	Curva	Poses
Entrada e saída (um movimento de câmera, uma passagem, um sublinhado)	easeInOutSine	7, 18, 25, 25, 18, 7% em seis
Entrada de fora do quadro	uma saída suave	senão, gasta seu início lento fora de vista
Uma página sobreposta a outra	easeOutSine	38, 70, 92% em uma transição de três poses
Zoom, linhas mais grossas, aberturas crescentes	cresce pelo mesmo fator a cada pose	um zoom mantém seu alvo em uma linha reta para o meio
Não em poucas poses	cúbico entrada-saída (3, 12, 35, 35, 12, 3: saltos no meio); a forte saída suave (aterrissa em sua primeira pose: 78, 97, 100% como uma transição de três poses, 88, 99, 100% como um movimento com moved())

Coisas na batida

Coisa	Regra
Clique	uma pose pressionada, em um bumbo ou caixa; o cursor some uma pose após seu último clique
Cursor	sólido enquanto digita, depois duas poses ligado e duas desligado
Giro	no máximo um quarto de volta por pose; mais de meia volta por pose parece girar para trás
Marca rolada	gira pelo seu deslocamento sobre seu raio, aterrissa em pé, em easeOutSine
Contador	um valor por pose na forte saída suave, algarismos tabulares, duas poses no número redondo
Títulos	digitados mais rápido que a batida a partir de sua pose: uma palavra a cada três quadros; linhas longas uma letra a cada 25ms (autorado)
Código	digitado em blocos irregulares de 2 a 4 caracteres por pose
Backspace pressionado	uma execução, uma letra a cada 25ms (autorado), quebras de linha também
Subida da câmera	sobe, fica imóvel por duas poses no topo, desce
De fora do quadro	não desenhado até que tenha se movido
Colocado à mão	errado por no máximo um décimo do movimento daquela pose, nada depois que para; abaixado dentro de alguns px

Golpes

Na música	Na imagem
Colcheias	código digitado em blocos, etapas de um movimento
Caixas	cliques, estalos
Tempos fortes	aterrissagens, novas páginas, primeira ação de uma página
Bumbos fortes	grandes mudanças: aterrissagem de página, a última página inteira, o clique final
Bateria sai	a construção
Bateria volta	a aterrissagem

Os cliques devem estar na batida. Uma transição pode estar fora dela.

Som

Item	Regra
Posicionamento do clique	na amostra, no golpe da música (os golpes do filme caíam 25ms após suas poses)
Arquivo de clique	40ms de silêncio antes de seu tick, para que o corte na amostra nunca o coma
Trilha de cliques	todo clique cozido em uma trilha que começa com a música
Abafamento	silêncio em torno de um clique importante; 45% por 160ms abaixo dos outros; fades de 10ms
Metrônomo	um clique em cada batida da música em seus golpes, o primeiro do compasso mais alto, música a 20%; nunca na exportação

Tipo

Tamanho	Tracking	Leading
abaixo de 20px	0; maiúsculas mono +2%	1,4–1,5
20px e acima	−1%	cerca de 1,4
32px e acima	−2%	cerca de 1,25
56px e acima	−3%	1,1–1,2; até 0,9 para títulos de exibição de duas linhas

Cada palavra deve atingir pelo menos 4,5:1 contra seu fundo em cada pose. Use uma família por padrão (Geist e Geist Mono nos exemplos), preto no branco, como o design tátil faz; o próprio filme combinou uma face de exibição com sua face de texto e colocou suas páginas em fundos de cor plana. Contadores usam algarismos tabulares. Os títulos são digitados, nunca esmaecidos.

Ao vivo, em um navegador

Item	Regra
Relógio	beat = anchorBeat + elapsed s × BPM / 60 × 2 em performance.now(); reancorado no agora em uma mudança de tempo; cada cena uma função pura da batida
Imagem	lê a batida 25ms adiantada; cada cena cometida dentro do quadro de animação (flushSync)
Som	um timer a cada 25ms agenda os próximos 120ms no relógio de áudio (getOutputTimestamp()); a janela medida em tempo de áudio, latência de saída adicionada
Em vista	apenas o que está na tela anima; o exemplo mais na tela é ouvido
Início	tentado no carregamento, depois no primeiro pressionamento ou tecla; um pressionamento que iniciou o som não o silencia (600ms); um mudo lembrado
Sem música	toda mudança em um clique: um movimento pode ir nas colcheias, mas começa e aterrissa nos cliques; o próprio clique do metrônomo removido
Metrônomo	uma batida de madeira silenciosa (880Hz em 50ms, 1320Hz no primeiro do compasso), sem baque sem música, tudo através de um limitador
Pausa	no clique mais próximo: tocado até ele, ou acomodado de volta por 160ms
Movimento reduzido	uma pose estática que mostra a ideia, movendo-se apenas após pressionar um botão de som
Tipo	palavras 4,5:1, marcas significativas 3:1, as menores palavras de uma cena dimensionada 9px ou mais conforme renderizado

Quando pular uma batida

A grade é estrita, então quebrá-la é uma decisão. Cada quebra abaixo tem uma razão em skipping.md.

• Solte a música em torno de um clique importante. Ela fica em silêncio de 50ms antes do clique até a próxima linha do compasso, com fades de 10ms. O clique é ouvido sozinho, e a batida volta com o que se segue.
• Abafe sob os outros cliques. Abaixe a música para 45% por 160ms para que o baque do clique tenha espaço.
• Segure um resultado sozinho por uma batida da música antes da próxima coisa começar, como um tick após uma cópia.
• Segure duas poses idênticas no topo de uma subida.
• Segure duas poses em um número redondo antes de continuar.
• Estale uma nota que cai entre batidas para a batida acentuada mais próxima.
• Corte compassos inteiros, mesmo quando a anotação pedir menos. Diga o que custa.
• Termine em uma batida da música. A última página segura cerca de 2 segundos, com a música sumindo na última pose. Caso contrário, termine logo após a ação.

Nunca enviar

• Movimento suavizado fora da batida para esconder um movimento mal espaçado
• Uma cena contando poses a partir de seu próprio primeiro quadro
• Uma página que começa fora de uma linha do compasso sem uma razão escrita ao lado
• Uma alteração de comprimento que não seja de compassos inteiros e não seja recuperada antes da próxima linha do compasso
• Um deslocamento from do Studio deixado na árvore de composição
• Um clique fora de um bumbo ou caixa, ou um som de clique colocado em um quadro em vez de na amostra
• Sons de clique curtos iniciados em seus próprios quadros em vez de uma trilha cozida
• Um movimento cuja primeira pose é a pose que ele deixa, ou que rasteja seus últimos px
• Algo de fora do quadro desenhado antes de se mover
• Um giro ou roda girando mais de meia volta por pose
• Um fade, ou um crossfade entre fundos saturados
• Mudanças de fundo mais rápidas que três flashes por segundo
• Uma palavra abaixo de 4,5:1 contra seu fundo em qualquer pose
• Abafamentos de áudio contra a trilha cozida em vez de em relação à música pura