Vídeo Desenhado à Mão

O que Vídeo Desenhado à Mão faz?

Tudo na tela é pintado pelo p5.brush (texturas reais de caneta, lápis e aquarela, desenhadas na GPU) dentro de um projeto HyperFrames, e cada quadro é uma função pura do tempo, então a renderização é exata. Os casos de uso abaixo são pontos de partida, não limites: qualquer ideia de desenho à mão funciona. Os caminhos neste arquivo são relativos à pasta deste skill.

1. Configuração (única vez)

• Node.js 18+ (HyperFrames é executado via npx).
• O Python do skill: ~/.cache/hand-drawn-video/venv/bin/python (Windows %USERPROFILE%\.cache\hand-drawn-video\venv\Scripts\python.exe), criado pelo INSTALL.md passo 5 a partir de um Python 3.10-3.12. Use-o para todos os comandos abaixo. Se estiver faltando, execute os passos 4-7 do INSTALL.md. Nunca use pip install no Python do sistema (o Python do Homebrew o recusa), e no Mac o comando é python3, não python.
• Internet: na primeira vez, scripts/brushlib.py baixa o p5.brush (versão fixa, com verificação SHA-256) para kit/.cache/; cada projeto recebe uma cópia. As renderizações também carregam GSAP de cdn.jsdelivr.net, então renderizar precisa de internet.
• O caso de uso redraw-video precisa de mais recursos (MediaPipe, ffmpeg): veja o USECASE.md dele. Pronto quando: npx --yes hyperframes --version exibir uma versão e <skill Python> scripts/brushlib.py exibir p5.brush ... ok.

2. Escolha o caso de uso

Caso de uso	O que faz	Comece em
explainer	Um sketchnote que explica passos: desenhos a caneta, setas, aguadas, rótulos manuscritos, destaque em marcador vermelho	usecases/explainer/
story	Uma história animada curta: um personagem doodle que age (achatamento, antecipação, olhos, sobrancelhas), um mundo pintado em aquarela	usecases/story/
redraw-video	Um clipe real de uma pessoa redesenhado 12 vezes por segundo (serigrafia ou aquarela), com uma transição do real para o desenho	usecases/redraw-video/
blank	Qualquer outra coisa, ou um novo estilo: uma linha de caneta, uma aguada, uma hachura, escrita à mão e o kit de desenho	usecases/blank/

Leia o usecases/<nome>/USECASE.md escolhido antes de escrever qualquer coisa. Se não estiver na tabela: comece de blank e leia references/p5brush-notes.md. Pronto quando: o caso de uso for escolhido e o conteúdo for acordado (as palavras, as batidas, a duração, 9:16 ou 16:9).

3. Inicie o projeto

<skill Python> scripts/new_project.py <caso de uso> "<Documentos>/<nova pasta>"

Coloque o projeto na pasta Documentos do usuário (um caminho absoluto; no Windows pode estar dentro do OneDrive), nunca dentro da pasta do skill: atualizar o skill substitui essa pasta. (--list mostra os casos de uso.) redraw-video é a exceção: ele executa sua própria ferramenta (USECASE.md). Pronto quando: a pasta tiver index.html, assets/vendor/brush.js (p5.brush, corrigido para o lint do HyperFrames) e assets/fonts/.

4. Personalize: regras para um bom trabalho desenhado à mão

Estas regras valem para todos os casos de uso e para qualquer novo estilo.

1. Cada quadro é uma função pura do tempo. renderAt(t) limpa e repinta tudo a cada hf-seek. Sem Math.random(), Date, temporizadores ou quadros de animação.
2. Uma semente por elemento (sd(id) antes de cada elemento). Um traço que ainda está crescendo não deve alterar a textura dos traços posteriores.
3. A caneta lidera, a tinta segue. O contorno desenha primeiro; a aguada aparece logo depois; a hachura é revelada da esquerda para a direita com brush.clip. A tinta fica sob as linhas na ordem de pintura.
4. Desenhe na velocidade da mão. Um traço leva 0,2-0,8 s com início e fim suaves. A escrita à mão leva cerca de 0,04 s por letra. Nada aparece de uma só vez.
5. Uma família de ferramentas por vídeo. Por exemplo, caneta + aquarela + um marcador vermelho. Três ou quatro tintas mais a cor do papel. Vermelho apenas na única coisa para se olhar.
6. Imperfeito, mas a mesma imperfeição em todos os quadros. Ultrapasse cantos e faça linhas tremidas com ruído senoidal fixo, nunca nova aleatoriedade por quadro. Exceção: uma "fervilhante" deliberada (linhas cintilantes), com uma nova semente por desenho, mantida por 2-3 quadros (8-12 desenhos por segundo).
7. Formas simples são lidas mais rápido que detalhes. Um personagem é uma cabeça círculo, olhos ponto e uma linha de boca; ele atua com o corpo (achatamento, antecipação, acompanhamento) e com os olhos e sobrancelhas.
8. Palavras são escritas à mão, curtas e ao lado do desenho, nunca sobre ele. A fonte do kit é Caveat (latim). Para árabe, adicione uma fonte árabe OFL em assets/fonts/ e declare-a com @font-face.
9. Mantenha curto e seguro. 5-12 s por clipe. Em 9:16, mantenha os desenhos e palavras principais entre cerca de 170 px do topo e 400 px da base (botões da plataforma e legendas). Pronto quando: a cena disser o que foi acordado e seguir as nove regras.

5. Verifique e renderize

• npx --yes hyperframes lint: 0 erros. Um aviso de "arquivo muito grande" é aceitável para cenas de um único arquivo.
• npx --yes hyperframes preview para percorrer, ou renderize e observe os quadros do início, meio e fim.
• npx --yes hyperframes render . -o renders/video.mp4.
• Verifique os quadros de acordo com as regras do passo 4 e as verificações do próprio caso de uso; corrija e renderize novamente. Pronto quando: renders/video.mp4 existir e seus quadros passarem nas verificações.

6. Adicione um caso de uso (estenda o skill)

Crie usecases/<nome>/ com:

• index.html: uma composição HyperFrames funcional que carrega assets/vendor/brush.js e fontes de assets/fonts/ (copie blank para começar).
• USECASE.md: quando usar, o que alterar no modelo e suas próprias verificações. O new_project.py o encontra automaticamente. Adicione uma linha à tabela do passo 2.

Limitações

• O p5.brush precisa de WebGL2: o HyperFrames renderiza no Chrome, que o possui.
• Preenchimentos de aquarela não podem ficar totalmente escuros (como aquarela real): use uma aguada para áreas escuras. Mais armadilhas em references/p5brush-notes.md.
• O caso de uso redraw funciona melhor com uma pessoa, rosto frontal ou três quartos.