licher255/svg-techo

O que svg-techo faz?

Use os módulos JavaScript reutilizáveis em assets/lib/. Altere a aparência através de parâmetros do gerador. Estenda o módulo apropriado quando uma tarefa precisar de um novo comportamento e, em seguida, verifique seus pontos de entrada normais.

Pontos de entrada

• assets/lib/index.mjs exporta materialKinds, svgKinds, referencePresets, renderSvg(kind, options) e createLightRenderer(canvas, options).
• assets/lib/index.d.mts fornece declarações TypeScript.
• scripts/render-svg.mjs é a CLI Node.
• scripts/self-test.mjs verifica geometria, limites de entrada, determinismo, loops e entrada RGBA.
• scripts/browser-check.html verifica decodificação SVG, WebGL, alpha, fase e descarte.

Resolva esses caminhos relativamente a este SKILL.md. Copie o diretório completo assets/lib/ para o código-fonte versionado do projeto de destino antes de importá-lo, preservando as importações internas dos módulos.

Fluxo de trabalho

1. Identifique o propósito do ativo, dimensões, paleta, animação e requisitos de transparência. Leia os tokens de design existentes do projeto antes de escolher as cores.
2. Leia a referência da API. Copie referencePresets[kind] e edite a configuração aninhada options[kind] do gerador. Confirme o significado de raio, espaçamento, contagem e largura do traço.
3. Para sites ou vídeos de marketing, leia a seção relevante do guia de integração. Mantenha parâmetros e semente junto com o projeto para que versões posteriores possam reproduzir o ativo.
4. Execute o código e inspecione a saída real. Verifique dimensões SVG, transparência e recorte. Verifique compilação, renderização e limpeza do WebGL. Verifique contagem de quadros de vídeo, transições de loop e alpha no fluxo de trabalho de destino.
5. Entregue o código solicitado, exemplos de invocação, configuração e arquivos de saída. Documente os parâmetros reais usados.

Módulos

Módulo	Responsabilidade
geometry.mjs	Despacha para geometry-a, geometry-b e dot-matrix
dot-matrix.mjs	Dimensões de pontos, lacunas de borda, formas e layouts
fields.mjs	Despacha para fields-audited para contornos, meio-tom, ASCII e código de pixel
light.mjs	Renderização de rastro e chama WebGL com fase explícita
common.mjs	Validação compartilhada, aleatoriedade com semente, normalização de fase, escape XML

Regras de extensão

• Mantenha os geradores SVG puros e determinísticos. Geradores estáticos permanecem estáticos, a menos que o chamador altere seus parâmetros específicos. WebGL e contornos com movimento ativado aceitam fase.
• Mantenha a semente fixa entre quadros de vídeo. Derive parâmetros de animação do número do quadro.
• Atualize exportações, declarações, documentação de parâmetros e verificações relevantes ao adicionar um tipo ou parâmetro.
• Reutilize a biblioteca ao adaptar para React, Three.js ou Remotion.
• A matriz de pontos usa dotMatrix.dotSize, spacing, layout e range. Seu diâmetro padrão é 8 e a lacuna de borda é 24. A densidade segue o espaçamento ou linhas/colunas.
• Inspecione gráficos transparentes no fundo pretendido. Valide o alpha do vídeo decodificado no editor de destino.
• Use dados comerciais e um codificador padrão para códigos de barras legíveis por máquina.

Exemplos de tarefas

• Gerar SVGs de contorno com as cores da marca e reter seus parâmetros.
• Animar hudLines.rotation a partir do número do quadro do Remotion.
• Usar RGBA de imagem de produto como uma máscara alpha de meio-tom ou entrada ASCII.
• Ajustar os parâmetros de direção e energia do renderizador de luz para uma sobreposição em loop.