O que anidoodle faz?
Imagens, filmes e peças interativas desenhados inteiramente em código. Uma função pura pinta cada quadro; outra compõe e sintetiza cada amostra de áudio. A mesma fonte recria os mesmos pixels e o mesmo som em qualquer máquina, em qualquer tamanho, em qualquer duração.
O motor é a metade fácil. O trabalho é descartado porque não tinha propósito, porque o assunto era um ícone de si mesmo, porque um estilo era apenas uma troca de paleta, porque a música não tinha forma, ou porque a pessoa gastou sua paciência aprovando fragmentos. Esta skill carrega o ofício que impede cada um desses problemas.
Comece perguntando, depois construa
Leia references/workflows/start-here.md e execute sua coleta: uma pergunta de cada vez, apenas
o que a solicitação deixar em aberto, sua recomendação primeiro. O que eles estão fazendo, em qual
estilo (mostre a folha de galeria, https://github.com/alexgreensh/anidoodle/blob/main/skills/anidoodle/assets/styles.jpg; a lista está em references/styles/INDEX.md), qual
formato (1x1, 9x16, 16x9, 4x5 ou qualquer L x A), quanto
tempo (qualquer duração; nunca limite), qual som (silencioso ou um estilo musical e clima), quais
personagens. "Você escolhe" significa escolha e diga o porquê em uma linha. Escreva as respostas
em um breve briefing antes de desenhar.
O que você está fazendo?
| Criando | Leia |
|---|---|
| Uma imagem estática: hero, spot, capa, cartão, pôster, uma série | Fluxo de imagem estática abaixo, references/formats.md |
| Uma imagem que se desenha (timelapse, making-of) | references/workflows/drawing-process.md |
| Um loop, adesivo, logotipo animado, cabeçalho ambiente | Fluxo de loop abaixo, references/formats.md |
| Um filme narrativo, qualquer duração | Fluxo de filme abaixo, references/workflows/long-film.md |
| Um vídeo explicativo ou infográfico | references/workflows/explainer.md |
| Um vídeo de lançamento ou produto (capturas de tela da pessoa são bem-vindas) | references/workflows/launch-video.md; construa com references/workflows/launch-video-kit.md |
| Uma animação web interativa que reage à interface | references/workflows/interactive.md |
| Uma aula de desenho, ou "como desenho isto?" | references/workflows/teach-drawing.md |
| Um personagem mantido idêntico em qualquer estilo (woodcut a toy brick) | references/workflows/character-consistency.md, references/anatomy.md |
| Um estilo combinado a partir da imagem da pessoa | references/workflows/adapt-a-style.md |
| Uma partitura ou trilha sonora | references/music/README.md |
- Música: escreva sua própria partitura para o filme (
references/music/README.md);node tools/music.mjs check <score.ts#export>deve PASSAR antes de um humano ouvir. - Efeitos sonoros:
references/music/sound-design.md. 14 efeitos em camadas e seedados, acionados por quadro do filme (filmSfx); a partitura abaixa, e cada cue deve estar dentro de 6 dB dela. Efeitos apenas em mudanças reais de direção, um riser + um impacto por filme. - Vídeos de lançamento:
launchTemplate.tsrenderiza o lançamento de um produto a partir de dados: prompts, placas desenhadas para ele, uma partitura escrita para ele, palavras, linhas de instalação; hábitos que economizam tokens estão emreferences/working-method.md.
As sete leis
- Toda peça tem um ponto. Uma imagem estática: uma ideia, um assunto focal, uma luz. Um filme: uma
transformação, um payoff, um token que retorna. →
references/storytelling.md - Declare o realismo. Nomeie a anatomia, a vista e a referência que você abriu, para animais,
objetos e pessoas igualmente. →
references/realism-and-craft.md,references/anatomy.md - Um estilo é uma forma de fazer marcas. Mude o meio, a borda e a ordem das marcas,
além da paleta. →
references/styles.md - Prove o visual em UM quadro, depois construa do início ao fim. Depois disso, portões custam mais do que
economizam. →
references/working-method.md - O contrato é absoluto. Puro em
(frame, env)(e o log de entrada, para peças interativas), apenasrng(seed), sem relógio, semctx.filter. Nada gerado ou baixado; imagens que a pessoa traz podem ser incorporadas, fixadas por hash. →references/determinism-and-contract.md - Música recebe um plano, nunca um adjetivo. Um estilo, um clima por seção, as notas como dados, depois
medições. Você não pode ouvi-la, então um humano ouve antes de ser enviada. →
references/music/ - Um dirige, um constrói, ambos escrevem tudo. Quando uma sessão se degrada, reinicie; os
arquivos são a memória. →
references/working-method.md
Fluxos de trabalho
Imagem estática. (1) Diga a ideia em uma frase; nomeie o assunto focal e a luz. (2) Abra referência real
para tudo que existe, e anote qual. (3) Escolha o estilo e leia primeiro o cabeçalho de sua placa. (4) Desenhe
na ordem daquele meio. (5) Renderize com still.mjs no tamanho total, execute a passagem de detalhes
em recortes (rostos, mãos, pés, juntas; references/craft-bar.md), critique por escrito. ✋ Uma aprovação. (6) Entregue todo
tamanho e formato solicitados a partir da mesma fonte, e diga que reproducible foi impresso.
Loop. Como uma imagem estática, mais: todo movimento é periódico ao longo do loop, o assunto nunca para, algo se move a cada segundo. Verifique a emenda (último quadro contra quadro 0). ✋ Uma aprovação, no arquivo em movimento.
Filme. (1) A história em três frases (configuração, transformação, payoff) e o token; para filmes mais longos, uma espinha mais uma linha por capítulo. Se você não consegue escrever, pare. (2) A grade: um batida é 60 x fps / bpm quadros, o bpm da partitura do briefing; uma tabela de cues contém cada número de quadro e um verificador é executado ao carregar. (3) Referência real para tudo que existe. (4) UM quadro de visual, o quadro mais difícil, criticado por escrito. ✋ Aprovação. (5) UMA amostra de música de 8 segundos. ✋ Aprovação. (6) Construa o filme inteiro; verificações mecânicas são executadas continuamente. (7) Revise uma vez a partir do arquivo renderizado: uma folha de contato por batida, cada corte como um par, os números de silêncio. Uma lista de correções classificadas, uma reconstrução. (8) ✋ Aprovação final. Diga o que você verificou e o que não pode.
No máximo três portões de aprovação. Aprovação é um orçamento; gaste-o onde estar errado é caro.
A barra de ofício
O teste: um ilustrador humano orgulhoso enviaria isto, ou é uma montagem mecânica de formas? A
tabela completa de indicadores está em references/craft-bar.md. Os que afundam a maioria dos trabalhos: sujeitos construídos
a partir de elipses, um estilo recolorido em outro, coisas que aparecem gradualmente em vez de serem desenhadas,
pessoas com juntas de borracha, e um personagem desenhado de forma diferente de toma para toma.
Sem silêncio em nada que se move: algo visivelmente muda a cada segundo. Um filme que se desenha
declara kind: "drawing" e é julgado em um patamar mais fino; um congelamento ainda falha.
O motor
engine/ é o núcleo de arte portátil mais as ferramentas. engine/src/canvas-core não sabe
nada sobre o DOM ou qualquer backend. W, H, fps e durationFrames vêm do meta do filme.
Movimentos de câmera (pans, zooms, paralaxe, shake) vêm de engine/src/canvas-core/camera.ts:
references/camera.md. render.mjs --blur N renderiza com motion blur (N subquadros calculados em
luz linear por quadro); o caminho padrão não é alterado.
node <skill>/engine/tools/scaffold.mjs ~/art --film intro --format 9x16 --duration 12 # segundos
cd ~/art && npm install && npx playwright-core install chromium
node tools/still.mjs intro --frame 0 --out out/look.png --scale 2 # uma imagem estática, com seu hash
node tools/render.mjs intro # MP4; --out x.gif|x.webm|x.apng
node tools/gate.mjs intro # determinismo, contrato, silêncio
node tools/emit.mjs intro --out out/intro.html # um player offline autocontido
| Ferramenta | O que faz |
|---|---|
scaffold.mjs | um projeto com uma imagem estática e/ou filme; --duration, --format ou --size, --fps, --bpm |
still.mjs / render.mjs | quadros desenhados duas vezes com hashes (--frames a,b,c --sheet em um navegador) / a peça em qualquer formato (--from/--to, --poster-frame, --hashes) |
gate.mjs | determinismo, contrato, silêncio, artefato; --self-test prova que pode falhar |
registry.mjs / gallery.mjs | a lista de estilos a partir das próprias placas / a folha de galeria |
docs-check.mjs | falha quando qualquer contagem, comprimento ou caminho de estilo na documentação discorda do código |
verify-export.mjs | QA no arquivo renderizado: quadros, duração, partitura; opt-in primeiro quadro, emenda de loop, --delivery |
test.mjs (npm test) | suítes de unidade em engine/test/, sem navegador |
music.mjs | renderiza e mede uma partitura; check a valida (tonalidade, master, guards, stems, novelty) |
sfx.mjs | o kit de efeitos sonoros: list, one, kit <dir>, test |
Quatro backends, um núcleo de arte: playwright, html-player, remotion, hyperframes.
→ references/backends-and-adapters.md
Exemplos trabalhados
- As placas de estilo em
engine/src/canvas-core/: cada mão tem uma imagem estática e um filme dela sendo desenhada, com a receita no cabeçalho ereferences/styles/<id>.md. - MECHANICAL LEPIDOPTERA em
example/: um filme de 47 s com partitura.scaffold.mjs ~/study --example.
Estude-os. Não os copie. A barra de ofício não é satisfeita por herança.
Limites honestos
Você não pode ouvir a partitura, assistir ao filme em movimento ou usar a peça interativa. Toda afirmação sobre
elas vem de uma medição ou de um humano; diga qual. Uma marca de verificação verde é uma afirmação até você
re-executá-la. Renderize um quadro em --scale 2 antes de confiar em uma imagem estática: uma camada blitada através da
transformação errada parece correta em 1x e quebra em 2x.