Ver o Som

## Som Visível — Prompt de Produção

Crie **“Som Visível”**, uma experiência científica interativa refinada e voltada ao público, desenvolvida com **Three.js**. Transforme o som em belas formas 3D responsivas que qualquer pessoa possa explorar, sem conhecimento de música ou ciência. Entregue um **site publicado** e um **vídeo de mostra cinematográfico em MP4**.

A experiência deve remeter a um museu de ciência interativo premium: visualmente marcante, de compreensão imediata, divertida e cientificamente rigorosa. Projete para um público amplo, em desktop e dispositivos móveis.

### PRIMEIRA EXPERIÊNCIA

Abra com uma escultura sonora luminosa, em movimento lento, sobre um fundo de azul-meia-noite profundo. Use tipografia em marfim quente, detalhes em ciano elétrico, violeta e coral discreto. Mantenha a composição elegante e a interface minimalista.

Exiba o título **“Veja o que o som pode fazer.”** Ofereça três pontos de entrada claros:

- **Tocar um som** — inicie imediatamente um exemplo de áudio selecionado e sua visualização.
- **Usar meu microfone** — visualize a voz da pessoa usuária ou os sons ao redor.
- **Enviar áudio** — explore um arquivo de áudio local.

Permita que visitantes vivenciem algo envolvente com um clique. Ofereça exemplos integrados para que o acesso ao microfone e o envio de arquivos sejam opcionais. Antes da reprodução, execute uma prévia silenciosa claramente identificada.

### TRÊS FORMAS DE EXPLORAR

**1. Escultura Sonora — visualização artística de áudio**

Crie um campo escultural de partículas e fitas fluidas que responda suavemente à análise de áudio em tempo real. Associe frequências baixas a movimentos amplos, frequências médias a detalhes estruturais e frequências altas a detalhes finos e cintilantes. Deixe o volume influenciar a escala e a energia sem saltos bruscos.

Faça com que fala, palmas, cantoolar e música gerem respostas visivelmente diferentes. Identifique este modo como uma interpretação artística do som.

**2. Explorador de Ondas — compreenda o sinal**

Exiba uma forma de onda animada ao lado de um espectro de frequências, com uma apresentação espacial opcional. Explique de modo simples: a forma de onda mostra como o sinal muda ao longo do tempo; o espectro mostra seu conteúdo de frequências.

Inclua um gerador de tons interativo, com controles de frequência e volume claramente identificados. Permita comparar um tom puro com um tom mais rico e observar a diferença. Use um volume inicial suave, transições de áudio fluidas e um controle de parada evidente. Explique que a amplitude visual representa o nível do sinal de entrada, não a intensidade sonora física calibrada.

**3. Padrões de Ressonância — explore a vibração**

Mostre uma placa vibratória virtual com partículas semelhantes a areia formando padrões nodais. Ofereça vários modos de vibração cuidadosamente implementados para exploração ao alterar a frequência de excitação.

Baseie os padrões em um modelo documentado de placa, com geometria e condições de contorno definidas. Explique que as partículas se acumulam perto de regiões de vibração mínima. Identifique a experiência como uma simulação educacional e descreva suas simplificações. Mantenha os efeitos decorativos visualmente distintos do modelo científico.

### FACILITE A DESCOBERTA

Ofereça convites curtos e contextuais, como **“Tente cantarolar uma nota constante”, “Bata palmas uma vez”** e **“Compare um tom baixo com um tom alto.”** Associe cada um a uma resposta imediatamente visível.

Mantenha os controles avançados recolhidos. Ofereça controles de pausa, redefinição, tela cheia, sensibilidade e intensidade do movimento. Preserve estados claros da fonte de áudio e da reprodução ao alternar entre modos. Use uma explicação breve e acessível para cada modo, sem cobrir a cena.

### ÁUDIO E PRIVACIDADE

Use a **Web Audio API** para reprodução e análise, com suavização estável e normalização adequada. Solicite acesso ao microfone somente depois que a pessoa usuária o selecionar. Processe localmente a entrada do microfone e os arquivos enviados; não envie, armazene nem transmita o áudio. Reestilize os três modos com um tema de aurora: adicione um gradiente de aurora verde-violeta que se desloque lentamente ao fundo de azul-meia-noite, recolora as partículas e fitas da escultura sonora em turquesa e violeta e dê aos grãos dos padrões de ressonância um leve brilho frio. Mantenha o texto em marfim, reduza o brilho geral para criar uma atmosfera de contemplação do céu noturno e não altere nenhuma interação. Mostre um indicador persistente de microfone e um controle claro **“Parar microfone”** que libere o microfone. Desative o monitoramento do microfone pelos alto-falantes para evitar microfonia. Lide adequadamente com permissão negada, dispositivos indisponíveis, arquivos não compatíveis, silêncio e áudio interrompido.

Use áudio integrado com licença CC0 verificada ou licença apropriada e inclua um manifesto de licenças dos recursos.

### QUALIDADE VISUAL E TÉCNICA

Use renderização refinada de partículas, profundidade convincente, bloom controlado, animações suaves e movimentos de câmera discretos. Mantenha o texto nítido e os controles legíveis. Evite piscadas agressivas e ruído visual excessivo.

Desenvolva uma aplicação Three.js de fácil manutenção, com geometria e shaders eficientes em GPU, buffers reutilizáveis, densidade de pixels limitada, contagens adaptativas de partículas e predefinições de qualidade. Analise o áudio localmente para que visitantes simultâneos não exijam processamento de áudio no servidor. Sirva recursos estáticos otimizados por meio de hospedagem compatível com CDN.

Busque desempenho fluido em desktops e desempenho utilizável em celulares intermediários. Meça a taxa de quadros real, o uso de memória e o comportamento de carregamento nos dispositivos testados. Pause renderizações desnecessárias quando a página estiver oculta e libere corretamente os recursos de áudio e GPU.

Ofereça suporte a toque, navegação por teclado, estados de foco visíveis, controles acessíveis a leitores de tela e redução de movimento. Disponibilize uma alternativa 2D leve quando WebGL não estiver disponível. Garanta que as informações essenciais sejam compreensíveis sem depender apenas de cor ou áudio.

### ENTREGÁVEIS

Publique o site concluído em uma **URL HTTPS** pública e funcional.

Produza um **MP4 H.264 de 30 a 45 segundos, 1920 × 1080**, disponível para download, com áudio licenciado sincronizado e renderizado a partir da aplicação real. Mostre um tom puro se tornando uma forma de onda, um som mais rico transformando a escultura e uma sequência de padrões de ressonância. Use reprodução determinística e captura de quadros estável para obter resultados limpos.

Entregue o projeto-fonte, recursos locais, manifesto de licenças, modelos científicos e mapeamentos de visualização documentados, instruções de publicação e um relatório conciso de verificação. Teste a experiência publicada em layouts para desktop e dispositivos móveis, fluxos de permissão do microfone, reprodução de áudio, envios, alternância de modos, acessibilidade e reprodução de vídeo. Informe com precisão os ambientes testados e as limitações restantes.

**NÃO INCLUA:** efeitos decorativos apresentados como simulações físicas, solicitações de permissão de microfone ao carregar a página, envios de áudio a um servidor, som reproduzido automaticamente, microfonia nos alto-falantes, controles excessivos, piscadas rápidas, rótulos ilegíveis, funcionalidades de preenchimento, layouts móveis quebrados, marcas-d’água ou alegações sem suporte de prontidão para produção.

## Som Visível — Prompt de Produção

Crie **“Som Visível”**, uma experiência científica interativa refinada e voltada ao público, desenvolvida com **Three.js**. Transforme o som em belas formas 3D responsivas que qualquer pessoa possa explorar, sem conhecimento de música ou ciência. Entregue um **site publicado** e um **vídeo de mostra cinematográfico em MP4**.

A experiência deve remeter a um museu de ciência interativo premium: visualmente marcante, de compreensão imediata, divertida e cientificamente rigorosa. Projete para um público amplo, em desktop e dispositivos móveis.

### PRIMEIRA EXPERIÊNCIA

Abra com uma escultura sonora luminosa, em movimento lento, sobre um fundo de azul-meia-noite profundo. Use tipografia em marfim quente, detalhes em ciano elétrico, violeta e coral discreto. Mantenha a composição elegante e a interface minimalista.

Exiba o título **“Veja o que o som pode fazer.”** Ofereça três pontos de entrada claros:

- **Tocar um som** — inicie imediatamente um exemplo de áudio selecionado e sua visualização.
- **Usar meu microfone** — visualize a voz da pessoa usuária ou os sons ao redor.
- **Enviar áudio** — explore um arquivo de áudio local.

Permita que visitantes vivenciem algo envolvente com um clique. Ofereça exemplos integrados para que o acesso ao microfone e o envio de arquivos sejam opcionais. Antes da reprodução, execute uma prévia silenciosa claramente identificada.

### TRÊS FORMAS DE EXPLORAR

**1. Escultura Sonora — visualização artística de áudio**

Crie um campo escultural de partículas e fitas fluidas que responda suavemente à análise de áudio em tempo real. Associe frequências baixas a movimentos amplos, frequências médias a detalhes estruturais e frequências altas a detalhes finos e cintilantes. Deixe o volume influenciar a escala e a energia sem saltos bruscos.

Faça com que fala, palmas, cantoolar e música gerem respostas visivelmente diferentes. Identifique este modo como uma interpretação artística do som.

**2. Explorador de Ondas — compreenda o sinal**

Exiba uma forma de onda animada ao lado de um espectro de frequências, com uma apresentação espacial opcional. Explique de modo simples: a forma de onda mostra como o sinal muda ao longo do tempo; o espectro mostra seu conteúdo de frequências.

Inclua um gerador de tons interativo, com controles de frequência e volume claramente identificados. Permita comparar um tom puro com um tom mais rico e observar a diferença. Use um volume inicial suave, transições de áudio fluidas e um controle de parada evidente. Explique que a amplitude visual representa o nível do sinal de entrada, não a intensidade sonora física calibrada.

**3. Padrões de Ressonância — explore a vibração**

Mostre uma placa vibratória virtual com partículas semelhantes a areia formando padrões nodais. Ofereça vários modos de vibração cuidadosamente implementados para exploração ao alterar a frequência de excitação.

Baseie os padrões em um modelo documentado de placa, com geometria e condições de contorno definidas. Explique que as partículas se acumulam perto de regiões de vibração mínima. Identifique a experiência como uma simulação educacional e descreva suas simplificações. Mantenha os efeitos decorativos visualmente distintos do modelo científico.

### FACILITE A DESCOBERTA

Ofereça convites curtos e contextuais, como **“Tente cantarolar uma nota constante”, “Bata palmas uma vez”** e **“Compare um tom baixo com um tom alto.”** Associe cada um a uma resposta imediatamente visível.

Mantenha os controles avançados recolhidos. Ofereça controles de pausa, redefinição, tela cheia, sensibilidade e intensidade do movimento. Preserve estados claros da fonte de áudio e da reprodução ao alternar entre modos. Use uma explicação breve e acessível para cada modo, sem cobrir a cena.

### ÁUDIO E PRIVACIDADE

Use a **Web Audio API** para reprodução e análise, com suavização estável e normalização adequada. Solicite acesso ao microfone somente depois que a pessoa usuária o selecionar. Processe localmente a entrada do microfone e os arquivos enviados; não envie, armazene nem transmita o áudio. Transforme a experiência em um recurso didático de física para o ensino fundamental II: identifique comprimento de onda, amplitude e frequência com seus termos e unidades em chinês nos modos de forma de onda e espectro, e explique ondas estacionárias e nós com um diagrama curto no modo de ressonância. Abra cada modo com uma introdução para sala de aula de até 60 caracteres chineses e termine-o com uma questão de múltipla escolha respondida na própria página; uma resposta correta desbloqueia o próximo modo de vibração. Mostre um indicador persistente de microfone e um controle claro **“Parar microfone”** que libere o microfone. Desative o monitoramento do microfone pelos alto-falantes para evitar microfonia. Lide adequadamente com permissão negada, dispositivos indisponíveis, arquivos não compatíveis, silêncio e áudio interrompido.

Use áudio integrado com licença CC0 verificada ou licença apropriada e inclua um manifesto de licenças dos recursos.

### QUALIDADE VISUAL E TÉCNICA

Use renderização refinada de partículas, profundidade convincente, bloom controlado, animações suaves e movimentos de câmera discretos. Mantenha o texto nítido e os controles legíveis. Evite piscadas agressivas e ruído visual excessivo.

Desenvolva uma aplicação Three.js de fácil manutenção, com geometria e shaders eficientes em GPU, buffers reutilizáveis, densidade de pixels limitada, contagens adaptativas de partículas e predefinições de qualidade. Analise o áudio localmente para que visitantes simultâneos não exijam processamento de áudio no servidor. Sirva recursos estáticos otimizados por meio de hospedagem compatível com CDN.

Busque desempenho fluido em desktops e desempenho utilizável em celulares intermediários. Meça a taxa de quadros real, o uso de memória e o comportamento de carregamento nos dispositivos testados. Pause renderizações desnecessárias quando a página estiver oculta e libere corretamente os recursos de áudio e GPU.

Ofereça suporte a toque, navegação por teclado, estados de foco visíveis, controles acessíveis a leitores de tela e redução de movimento. Disponibilize uma alternativa 2D leve quando WebGL não estiver disponível. Garanta que as informações essenciais sejam compreensíveis sem depender apenas de cor ou áudio.

### ENTREGÁVEIS

Publique o site concluído em uma **URL HTTPS** pública e funcional.

Produza um **MP4 H.264 de 30 a 45 segundos, 1920 × 1080**, disponível para download, com áudio licenciado sincronizado e renderizado a partir da aplicação real. Mostre um tom puro se tornando uma forma de onda, um som mais rico transformando a escultura e uma sequência de padrões de ressonância. Use reprodução determinística e captura de quadros estável para obter resultados limpos.

Entregue o projeto-fonte, recursos locais, manifesto de licenças, modelos científicos e mapeamentos de visualização documentados, instruções de publicação e um relatório conciso de verificação. Teste a experiência publicada em layouts para desktop e dispositivos móveis, fluxos de permissão do microfone, reprodução de áudio, envios, alternância de modos, acessibilidade e reprodução de vídeo. Informe com precisão os ambientes testados e as limitações restantes.

**NÃO INCLUA:** efeitos decorativos apresentados como simulações físicas, solicitações de permissão de microfone ao carregar a página, envios de áudio a um servidor, som reproduzido automaticamente, microfonia nos alto-falantes, controles excessivos, piscadas rápidas, rótulos ilegíveis, funcionalidades de preenchimento, layouts móveis quebrados, marcas-d’água ou alegações sem suporte de prontidão para produção.