Communitygithub.com

shfahiim/me

Crie um curta-metragem com aparência de desenho à mão ou impressão artesanal, onde cada quadro é desenhado por JavaScript no Canvas 2D a partir de um único arquivo HTML sobre um núcleo compartilhado, renderizado em mp4 com trilha sonora gerada por Web Audio.

O que é me?

Esta skill permite que agentes de IA (como Claude Code, Cursor ou Codex) gerem curtas-metragens animados com estética de desenho à mão ou impressão artesanal. Cada quadro é desenhado dinamicamente por JavaScript no Canvas 2D, a partir de um único arquivo HTML, utilizando um núcleo compartilhado e um sistema de paletas unificado. O resultado é renderizado em MP4 com uma trilha sonora gerada por Web Audio. A skill suporta quatro estilos visuais distintos — nanquim em papel envelhecido com hachuras, impressão risográfica com tintas fluorescentes, serigrafia chapada com retículas de pontos e minimalismo a grafite com seções rasgadas — todos animados em 'on twos' (12 fps), incluindo interlúdios em estilo blueprint, borrões de tinta, ondulações, montagens e crachás personalizados.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/shfahiim/me/tree/main/skill/hand-drawn-canvas-animation

Perguntar na sua IA favorita

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

Documentação

O que me faz?

Crie um curta-metragem com aparência de desenho à mão ou impressão artesanal, onde cada quadro é desenhado por JavaScript no Canvas 2D a partir de um único arquivo HTML sobre um núcleo compartilhado, depois renderizado em mp4 com trilha sonora gerada por Web Audio. Quatro estilos a partir de um núcleo e um sistema de paletas — nanquim em papel envelhecido com hachuras, impressão risográfica com tintas fluorescentes, serigrafia chapada com retículas de pontos e minimalismo a grafite com seções rasgadas — animados em "on twos" (12 fps), com interlúdios em estilo blueprint, borrões de tinta, ondulações, montagens e crachás personalizados.

Como Funciona

  1. O agente de IA gera um único arquivo HTML contendo todo o código JavaScript necessário.
  2. O JavaScript utiliza um núcleo compartilhado (core) para gerenciar a cena, animação e renderização.
  3. Um sistema de paletas unificado define as cores e texturas para cada um dos quatro estilos visuais.
  4. Cada quadro é desenhado no Canvas 2D da API HTML5.
  5. A trilha sonora é gerada programaticamente usando a Web Audio API.
  6. O resultado final é exportado como um arquivo MP4.

Estilos Visuais

  • Nanquim em Papel Envelhecido com Hachuras: Simula tinta preta sobre papel texturizado, com hachuras cruzadas para criar sombras.
  • Impressão Risográfica com Tintas Fluorescentes: Cores vibrantes e brilhantes, com efeito de impressão sobreposta e registro imperfeito.
  • Serigrafia Chapada com Retículas de Pontos: Estilo pop art com cores sólidas e padronagem de pontos.
  • Minimalismo a Grafite com Seções Rasgadas: Tons de cinza, textura de lápis e bordas irregulares simulando papel rasgado.

Requisitos

  • Navegador moderno com suporte a Canvas 2D e Web Audio.
  • Não são necessárias bibliotecas externas — tudo está contido no HTML gerado.

Como Usar

  1. Solicite ao agente de IA a criação de um curta com base neste skill.
  2. Especifique o estilo visual desejado (opcional, o padrão é "nanquim em papel envelhecido").
  3. O agente gerará o arquivo HTML completo.
  4. Abra o arquivo em um navegador para visualizar e salvar o MP4 gerado.

Exemplo de Prompt

"Crie um curta-metragem no estilo shfahiim/me usando o visual de impressão risográfica com tintas fluorescentes, com interlúdios em blueprint e borrões de tinta."

Notas Técnicas

  • Taxa de Quadros: 12 fps (animação em "on twos").
  • Renderização: Canvas 2D.
  • Áudio: Web Audio API para geração de trilha sonora procedural.
  • Saída: MP4 com codecs H.264 para vídeo e AAC para áudio.

Skill original: shfahiim/me

Habilidades Relacionadas