Extrator de Efeitos Web

Use este plugin quando o usuário fornecer a URL de um site e pedir ao OpenDesign para recriar, remixar ou aprender com seus efeitos visuais. É especialmente útil para fundos de herói, cenas WebGL, animações Canvas, efeitos de shader, rastros de cursor, movimento acionado por rolagem, tipografia animada e padrões de interação que são difíceis de entender apenas com capturas de tela.

Este fluxo de trabalho é inspirado na habilidade web-shader-extractor com licença MIT do lixiaolin94/skills, adaptada para o fluxo de trabalho de recriação de sites e artefatos editáveis do OpenDesign.

Escopo

O objetivo é produzir um artefato OpenDesign fiel e editável que preserve o efeito visual e a lógica de interação do site de referência, substituindo conteúdo privado, marcas registradas, código de rastreamento e lógica de aplicativo não essencial.

Extraia apenas o que for necessário para entender e recriar o comportamento visual:

• Estrutura do layout, comportamento da viewport, breakpoints e ritmo de composição
• Cor, tipografia, modos de mesclagem, gradientes, textura, iluminação e pós-processamento
• Tempo de movimento, easing, gatilhos de rolagem, resposta do ponteiro e loops de animação ociosos
• Detalhes do pipeline Canvas, WebGL, Three.js, shader, partículas e framebuffer
• Ativos estáticos públicos necessários para paridade visual, com proveniência anotada

Não copie conteúdo de produto privado, estado oculto do aplicativo, dados do usuário, análises, fluxos de autenticação ou lógica de negócios não relacionada.

Fluxo de Trabalho

1. Preparar a Captura

Comece a partir da URL fornecida e defina o efeito exato a ser recriado. Se o usuário for vago, inspecione primeiro a primeira viewport e infira o efeito provável.

Antes de extrair detalhes de tempo de execução, prefira um contexto de navegador que possa avaliar scripts de página e inspecionar o estado do canvas/WebGL. Se o Chrome DevTools MCP estiver disponível, use-o para interceptação em tempo de execução. Se não estiver disponível, continue com a automação de navegador mais forte disponível e declare claramente que a captura de shader/tempo de execução pode estar incompleta.

Registre:

• URL e carimbo de data/hora da captura
• Tamanhos de viewport para testar, geralmente desktop e mobile
• Alvo de efeito principal e alvos de efeito de fallback
• Pistas de framework do HTML, requisições de rede, globais e assinaturas de pacotes

2. Inspeção em Tempo de Execução

Capture evidências de tempo de execução antes de simplificar qualquer coisa.

Inspecione:

• Árvore DOM, estilos computados, fontes, variáveis CSS, propriedades personalizadas e nomes de animação
• Elementos Canvas, contextos WebGL, atributos do renderizador, extensões suportadas e dimensionamento de resolução
• Marcadores de framework globais como THREE, BABYLON, __NEXT_DATA__, __NUXT__, vite, GSAP, Lenis, Framer Motion ou globais de cena personalizados
• Pacotes JS em rede, imagens, vídeos, fontes, LUTs, texturas, HDRIs e arquivos de dados

Quando WebGL estiver presente e as ferramentas permitirem injeção antes do carregamento da página, intercepte:

• gl.shaderSource() para origem de vértice e fragmento
• Chamadas gl.uniform*() para nomes e valores observados
• gl.bindFramebuffer() para entender a ordem de renderização de multipass
• gl.drawArrays() e gl.drawElements() para entender a ordem de chamadas de desenho
• Configuração de textura e buffer quando isso afeta a aparência final

Quando 2D Canvas estiver presente, inspecione o loop de renderização, primitivas de desenho, fontes de imagem, operações de composição e tratamento de proporção de pixels do dispositivo.

3. Extrair o Modelo Visual

Transforme a captura bruta em um modelo visual compacto:

• Grafo de cena ou pilha de camadas
• Lista de ativos com origem, dimensões e função
• Lista de shaders/materiais com uniforms e dependências
• Mapa de movimento com gatilho, duração, easing, comportamento de repetição e diferenças responsivas
• Mapa de interação para tratamento de ponteiro, teclado, rolagem, redimensionamento e redução de movimento
• Incertezas conhecidas, como branches de pacotes minificados ou valores de tempo de execução que não puderam ser observados

Prefira evidências a suposições. Se um efeito não puder ser observado diretamente, marque-o como uma inferência.

4. Reconstruir no OpenDesign

Crie um artefato web autônomo que possa ser inspecionado e editado.

Escolha a implementação mais simples que preserve o efeito:

• DOM/CSS estático para referências apenas de layout
• Animação CSS ou WAAPI para movimento simples
• GSAP para movimento sequenciado ou vinculado à rolagem
• Canvas 2D para efeitos procedurais 2D
• WebGL2 nativo para efeitos de shader de tela cheia compactos
• Three.js quando a referência usa padrões 3D, câmeras, materiais, texturas, pós-processamento ou GPGPU

Mantenha a reconstrução autônoma, a menos que uma dependência reduza materialmente a complexidade. Se dependências forem usadas, carregue-as de forma transparente e revisável.

Regras importantes de reconstrução:

…