Hive-RSI-Lab/video

Fazendo um vídeo

Não grave a tela. Uma gravação treme sempre que a máquina está ocupada, e ninguém pode executá-la novamente após uma correção. Em vez disso, escreva o filme como um script. O kit executa a página em um relógio virtual e captura um quadro a cada 1/30 segundo do tempo da página, de modo que toda animação, timer, scroll e tecla digitada ocorrem em quadros exatos. Movimentos de câmera, cursor e anéis de clique são desenhados sobre os quadros depois. O mesmo script sempre produz o mesmo filme.

O ciclo

1. video new DIR escreve um DIR/film.mjs inicial. Aponte-o para um servidor descartável com dados fictícios, nunca para uma conta real. Escreva de três a cinco batidas com uma ideia cada.
2. heavy timeout 1800 video render DIR/film.mjs OUT/ filma, codifica cada batida e costura as batidas no MP4. A primeira renderização executa video check primeiro. Uma renderização falha se alguma palavra da lista de negação aparecer na tela.
3. video sheet OUT/film.mp4 OUT/sheet.png 16 e então olhe a folha. A maioria dos bugs só aparece aqui: uma lista que nunca rolou, um painel vazio, a câmera na coisa errada.
4. video stutters OUT/film.mp4 deve relatar 0 trepidações. Solavancos são movimentos rápidos ou saltos. Um solavanco é aceitável onde o conteúdo deve cortar (uma troca de página, uma mensagem chegando); --allow A-B pula esses trechos.
5. video mp4 IN OUT.mp4 produz o web MP4 (H.264, faststart). video gif IN OUT.gif --max 3 reduz a largura de 960 px até que o GIF caiba em menos de 3 MB.
6. Itere sobre os tempos no script, nunca cortando o vídeo.

O ritmo e a API completa do diretor estão em kit/KIT.md; leia-o antes do seu primeiro filme. Resumidamente: cerca de 20 s no total; a coisa funcionando em até 2 s; um movimento de câmera por batida (1,5-2x, 0,4-0,7 s); segure um resultado por pelo menos 0,8 s (d.show); digite a cerca de 30 teclas por segundo.

O que o torna suave (aprendido da maneira difícil)

• Coloque polimento exclusivo do filme em um script de inicialização, não no aplicativo. Faça novos itens aparecerem suavemente (animation: in .4s cubic-bezier(.16,1,.3,1) de opacidade 0 e translateY 12px) em vez de aparecerem de repente. Para uma lista que salta para o final, envolva o setter de Element.prototype.scrollTop para que deslize até lá em cerca de 500 ms. O filme de demonstração hive-stars é um exemplo prático com ambos.
• Controle seu próprio movimento com setTimeout. O relógio do filme executa timers exatamente. Callbacks de requestAnimationFrame podem não disparar enquanto o relógio está pausado.
• Consulte a linha do tempo da página. Se o aplicativo depende de timers (respostas prontas em 0,7 s, 1,8 s e assim por diante), ajuste o hold de cada batida a eles, de modo que uma batida termine logo após a coisa que ela exibe.
• zoom e unidades de viewport. O zoom: 1.5 do diretor filma um layout de 1280x720 em 1920x1080. O Chrome não divide vh/dvh/vw pelo zoom da raiz, então o kit reescreve essas unidades em folhas de estilo de mesma origem. Sem isso, um layout calc(100dvh - x) fica 1,5x mais alto e seu scroller nunca rola. CSS de origem cruzada não é reescrito, então sirva a página você mesmo.
• Aplicações que modificam Date. O kit lê o relógio através do seu próprio Date salvo, então uma página que envolve Date (um desvio de tempo, um falso "agora") não pode fazer pauseAt retroceder.
• A lista de negação: nome do host, usuário, nome e email do git, nomes reais de projetos. Apenas dados fictícios.

Tomadas 3D (Blender)

video blender SHOT.py OUT/ [--quality preview|final] renderiza um script de tomada na CPU. Execute sob seu limitador de tarefas (heavy no H2), e execute --quality preview primeiro, porque uma renderização final leva minutos por segundo de filme. Os auxiliares (easing, câmera com profundidade de campo, rig de iluminação, um PCB do KiCad, extrusão GDS, um plano de UI, grafos de nós) estão em kit/blender/README.md. Codifique os quadros com o encodeFrames do kit ou ffmpeg, depois corte-os com stitch.

Terminais

kit/term.mjs grava uma sessão real de tmux/bash em um sandbox com um home e host fictícios, depois a reproduz com xterm.js no relógio do filme. Veja kit/KIT.md.