Communitygithub.com

alexgreensh/anidoodle

Imagens, filmes e peças interativas desenhados inteiramente em código. Oferece 31 estilos, composição musical, consistência de personagens e reprodução determinística, sem ativos gerados.

O que é anidoodle?

anidoodle é uma skill para criação de imagens estáticas, timelapses de desenho, filmes narrativos, vídeos explicativos e animações web interativas — tudo gerado por código puro, sem ativos baixados ou gerados externamente. Cada quadro é produzido por uma função determinística a partir de um seed, e cada amostra de áudio é composta e sintetizada programaticamente, garantindo que a mesma fonte produza os mesmos pixels e sons em qualquer máquina, em qualquer tamanho ou duração. A skill suporta 31 estilos artísticos, desde woodcut até toy brick, e permite combinar estilos a partir de imagens de referência. Ela também oferece fluxos de trabalho para manter personagens consistentes entre diferentes estilos, ensinar desenho, criar partituras musicais e sincronizar efeitos sonoros. O processo começa com uma entrevista guiada para definir o que está sendo criado, em qual estilo, formato, duração, som e personagens. Em seguida, segue sete leis fundamentais: toda peça tem um ponto, declare o realismo, estilo é uma forma de marcar, prove o visual em UM quadro, o contrato é absoluto (sem não-determinismo), música precisa de um plano, e um dirige e um constrói enquanto ambos documentam. A engine principal está em engine/, com ferramentas para scaffolding, renderização (still e filme), verificação de determinismo e contrato, detecção de silêncio em movimento, e exportação para MP4, GIF, WebM, APNG ou HTML player offline. Há quatro backends suportados: Playwright, HTML Player, Remotion e Hyperframes. A skill é recomendada para desenvolvedores que querem criar animações e mídias programáticas com alta fidelidade artística e reprodutibilidade. Plataformas suportadas: sistemas com Node.js, npm Playwright (para renderização headless) e navegador Chromium.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/alexgreensh/anidoodle/tree/HEAD/skills/anidoodle

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

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?

CriandoLeia
Uma imagem estática: hero, spot, capa, cartão, pôster, uma sérieFluxo 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 ambienteFluxo de loop abaixo, references/formats.md
Um filme narrativo, qualquer duraçãoFluxo de filme abaixo, references/workflows/long-film.md
Um vídeo explicativo ou infográficoreferences/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 à interfacereferences/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 pessoareferences/workflows/adapt-a-style.md
Uma partitura ou trilha sonorareferences/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.ts renderiza 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 em references/working-method.md.

As sete leis

  1. 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
  2. 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
  3. Um estilo é uma forma de fazer marcas. Mude o meio, a borda e a ordem das marcas, além da paleta. → references/styles.md
  4. 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
  5. O contrato é absoluto. Puro em (frame, env) (e o log de entrada, para peças interativas), apenas rng(seed), sem relógio, sem ctx.filter. Nada gerado ou baixado; imagens que a pessoa traz podem ser incorporadas, fixadas por hash. → references/determinism-and-contract.md
  6. 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/
  7. 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
FerramentaO que faz
scaffold.mjsum projeto com uma imagem estática e/ou filme; --duration, --format ou --size, --fps, --bpm
still.mjs / render.mjsquadros 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.mjsdeterminismo, contrato, silêncio, artefato; --self-test prova que pode falhar
registry.mjs / gallery.mjsa lista de estilos a partir das próprias placas / a folha de galeria
docs-check.mjsfalha quando qualquer contagem, comprimento ou caminho de estilo na documentação discorda do código
verify-export.mjsQA 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.mjsrenderiza e mede uma partitura; check a valida (tonalidade, master, guards, stems, novelty)
sfx.mjso 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 e references/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.

Habilidades Relacionadas