GPT 6 Astra for Computer Use

Crie uma página da web HTML interativa completa, em um único arquivo, intitulada “Laboratório de Acidentes de Tipografia Midnight”. Exiba apenas o documento HTML finalizado, com todo o CSS e JavaScript incorporados. A página deve abrir e funcionar diretamente em um navegador moderno, sem dependências externas, CDNs, bibliotecas, fontes, links de imagens, arquivos SVG ou outros recursos. Esta é uma página responsiva, não uma imagem fixa em 16:9 nem uma composição em canvas; ela deve se adaptar naturalmente a telas desktop, tablet e mobile. Crie um simulador tátil de tipografia experimental no qual o usuário compõe uma impressão arrastando blocos individuais de tipos de chumbo para uma folha central, girando-os e reposicionando-os, e então ajustando a quantidade de tinta, a pressão da prensa e a umidade do papel antes de puxar uma enorme alavanca mecânica de impressão. O resultado impresso deve responder proceduralmente a esses parâmetros: excesso de tinta causa sangramento e obstrução dos contra-grafismos, pouca tinta cria bordas secas e quebradas, a pressão altera a indentação e a deformação, a umidade aumenta o espalhamento e os danos às fibras do papel, o posicionamento imperfeito dos tipos cria desalinhamento de registro e impressões repetidas produzem sombras deslocadas e imagens fantasma. Permita várias passagens de cor usando apenas vermelho vermelhão, azul ultramarino e amarelo ácido, com mistura realista de sobreposição, ordenação de camadas visível, visibilidade por camada, desfazer/refazer passo a passo e a possibilidade de levantar o canto do papel para revelar a impressão em evolução. Congele o drama visual principal no instante em que o rolo da prensa acabou de subir e a impressão finalizada está prestes a ser revelada. O papel central deve parecer um palco teatral. Organize blocos tipográficos, rolos de tinta, pinças, pinos de registro, retalhos, medidores e controles em um anel assimétrico ao seu redor. Use uma base de papel ósseo quase branco e cinza-chumbo, iluminada por uma lâmpada de trabalho branco-quente que incide diagonalmente a partir do canto superior esquerdo. Renderize tudo com CSS, elementos HTML, Canvas e texturas procedurais em um estilo físico de serigrafia bruta e colagem artesanal: bordas rasgadas, granulação fibrosa do papel, pigmento irregular, pontos de meio-tom, metal riscado, manchas de tinta, fragmentos de fita, leve perspectiva, registro imperfeito e sombras em camadas. Evite gradientes brilhantes, estilo SaaS estéril, cartões genéricos, cores neon cyberpunk, imagens fotorrealistas, emoji, ilustrações de banco de imagens e geometria vetorial perfeitamente limpa. Inclua um inventário substancial de tipos móveis com letras, pontuação, numerais e vários blocos decorativos. Os usuários devem poder arrastar blocos do inventário para a área de composição, selecionar vários blocos, girá-los usando alças ou atalhos de teclado, deslocá-los com as teclas de seta, excluí-los ou duplicá-los e editar o conteúdo textual sem perder a aparência física do bloco. Adicione guias de encaixe que possam ser ativadas ou desativadas, mas preserve pequenas irregularidades manuais. Forneça estados claros de foco ao passar o cursor, ativo, selecionado, desativado e foco de teclado. Suporte interação por ponteiro e toque, controles de teclado intuitivos, rótulos acessíveis e indicadores de foco visíveis. Crie três controles táteis para quantidade de tinta, pressão e umidade, cujos valores atualizem em tempo real a prévia do papel, a simulação de textura, os medidores, os rótulos de alerta e o comportamento ambiente da máquina. O sistema deve revelar estados de acidente lúdicos em combinações extremas, como explosões violentas de tinta, letras duplicadas, tipos deslocados, rachaduras irregulares nas fibras, trepidação do rolo e marcas de registro salpicadas, mantendo a composição legível. Adicione um registro compacto do experimento que grave cada impressão e seus parâmetros. Os usuários devem poder selecionar uma cor de passagem, pressionar a alavanca arrastando-a por um arco convincente, assistir a um ciclo de impressão curto, porém detalhado, e depois descascar o papel. A animação deve incluir resistência da alavanca, vibração da máquina, movimento do rolo, compressão do papel, partículas de poeira, leve oscilação da lâmpada e uma pausa de suspense antes da revelação. Respeite prefers-reduced-motion. Faça com que desfazer e refazer funcionem de verdade para posicionamento, rotação, alterações de parâmetros, impressão, passagens de cor e ações de revelação. Inclua controles de Reset, Random Accident, Re-ink, Add Pass, Undo e Redo, além de uma dica concisa de introdução que desapareça após a interação. Inicialize a página com um pôster parcialmente composto e intrigante para que a primeira visualização seja visualmente rica, mas permita que todos os elementos importantes continuem editáveis. Adicione feedback visual sutil semelhante a sons sem usar recursos de áudio. Garanta texturas procedurais determinísticas sempre que possível, para que desfazer restaure a mesma aparência. A experiência deve parecer cerimonial, artesanal, tensa e maliciosamente incontrolável, em vez de meramente decorativa. Priorize detalhes refinados de interação, acoplamento convincente entre parâmetros, artefatos de impressão procedurais em camadas, sincronização de animação bem trabalhada e uma composição responsiva excelente. Use HTML semântico e JavaScript vanilla limpo e bem estruturado. A resposta final deve conter apenas o documento HTML completo e executável.

Crie uma página da web HTML interativa completa, refinada e em um único arquivo, intitulada “Teatro de Paisagem Sonora de Ramen à Meia-Noite”. Exiba apenas o documento HTML final, com todo o CSS e JavaScript incorporados. Ele deve funcionar diretamente em um navegador moderno, sem etapa de build e sem dependências externas, bibliotecas, fontes, imagens, arquivos de áudio, recursos CDN, solicitações de rede ou recursos vinculados. Crie uma cena expressiva ambientada em uma loja surreal de ramen à meia-noite. O objeto central é um único feixe contínuo de noodles elásticos, renderizado com Canvas, SVG ou uma combinação cuidadosamente integrada de ambos. O feixe de noodles deve atravessar diagonalmente o primeiro plano e parecer fisicamente tangível: os usuários podem agarrá-lo em qualquer ponto com o mouse ou toque, arrastá-lo, esticá-lo, chicoteá-lo, dobrá-lo sobre si mesmo e soltá-lo. Implemente uma física de mola convincente com inércia, amortecimento, gravidade, múltiplos segmentos conectados, resposta a colisões e movimento secundário visível. Mantenha a simulação estável mesmo durante arrastamentos agressivos, mudanças rápidas de direção, redimensionamento da janela ou interações repetidas. Organize pelo menos três tigelas distintas de ramen e vários ingredientes ao longo de um arco amplo pela composição, criando um ritmo visual marcante ao redor do noodle diagonal. Cada tigela deve ter seu próprio padrão ilustrado de caldo, identidade cromática, rótulo e personalidade sonora. Quando o noodle tocar ou cair em uma tigela, acione uma resposta audiovisual sincronizada: uma batida percussiva exclusiva sintetizada com a Web Audio API, uma explosão crescente de vapor, sprays de partículas verde-cebolinha, ondulações no caldo, pequenas gotas, tremulação do registro de serigrafia e onomatopeias animadas no estilo de caligrafia japonesa, como “ZURU!”, “PON!”, “JUU!” ou “BASHAN!”, criadas com texto estilizado em vez de fontes externas. A intensidade da colisão deve afetar o volume, o tom, a quantidade de partículas, o tamanho das ondulações, a escala das letras e a força da animação. O áudio deve começar somente após a primeira interação do usuário e incluir um controle claro de silenciar/ativar o som. O estado visual culminante deve evocar um quadro congelado em que o noodle está dramaticamente esticado no ar enquanto o caldo permanece suspenso pouco antes de espirrar. Dê suporte a isso com um controle “FREEZE THE SPLASH” e a tecla Space: ao entrar no modo de congelamento, aplique uma breve transição impactante, suspenda a cena física sem perder seu estado, enfatize as gotas no ar e a tensão do noodle esticado, exiba uma tipografia cinética marcante com aparência de pôster e preserve um brilho sutil procedural das linhas para que a página continue viva. Pressionar Space ou o controle novamente deve retomar a cena sem interrupções. Adicione um controle de reset, um indicador compacto do estado do som e uma leitura discreta ao vivo de “tempo/impacto” orientada pelas colisões recentes. Os controles de teclado devem ser descobríveis em um pequeno painel de ajuda integrado: Space alterna o congelamento, R redefine, M silencia e as teclas de seta aplicam impulsos direcionais ao noodle. Use uma combinação visual sofisticada de design de pôster vintage em serigrafia e animação procedural de linhas. Um fundo índigo profundo deve dominar a cena, interrompido pelo calor localizado do fogo do fogão ao redor das tigelas e dos pontos de colisão. Use cores especiais em camadas — vermelho vermelhão, amarelo gengibre, verde-cebolinha, creme quente e quase preto — com texturas de meio-tom, bordas de tinta ásperas, leve desalinhamento cromático, sombras gráficas marcantes e linhas de contorno animadas. O resultado deve parecer artesanal e teatral, em vez de brilhante ou fotorrealista. Inclua vapor ambiente sutil, brilho trêmulo do fogão, granulação flutuante e linhas em movimento, preservando forte contraste e controles legíveis. Evite o estilo cyberpunk neon genérico. Faça a composição ser responsiva em telas desktop largas, tablet e mobile; isto é uma página da web, portanto não force uma proporção fixa de 16:9. Adapte fluidamente o posicionamento das tigelas, a tipografia, os controles, os limites da simulação e as áreas de toque sem cortar conteúdo essencial. Use pointer events para unificar o tratamento de mouse, caneta e toque. Impeça a rolagem da página somente enquanto o noodle estiver sendo manipulado ativamente. Respeite prefers-reduced-motion reduzindo a animação ambiente, mas mantendo a interação principal funcional. Preserve um desempenho fluido por meio de reutilização eficiente de partículas ou limites rígidos de partículas, requestAnimationFrame, renderização consciente de device-pixel-ratio com um limite de resolução adequado e tratamento de coordenadas seguro durante o redimensionamento. Requisitos de conteúdo e acabamento: inclua um tratamento atmosférico para o título, um convite curto de uma linha à interação, três ou mais tigelas identificadas, várias coberturas visualmente distintas, palavras sonoras manuscritas contextuais, estados de controle refinados, estilos de foco claros, rótulos acessíveis para botões e uma dica discreta de interação que desapareça após o primeiro uso. A cena inicial já deve parecer um pôster colecionável finalizado antes de qualquer interação, enquanto o estado ativo deve se transformar em um brinquedo rítmico animado, com feedback em camadas e movimento emergente surpreendente. Restrições negativas: nenhum recurso ou dependência externa; nenhuma URL de imagem; nenhum áudio pré-gravado; nenhum framework; nenhum placeholder inacabado; nenhum comentário TODO; nenhum controle quebrado; nenhum canvas fixo em 16:9; nenhuma interface padrão simples; nenhum fundo baseado apenas em gradientes genéricos; nenhum emoji usado como arte principal; nenhum excesso de texto explicativo; nenhum áudio reproduzido automaticamente; nenhum crescimento descontrolado de partículas; nenhuma física frágil que exploda ou produza valores NaN; nenhuma interação que funcione somente com mouse; e nenhuma saída além do documento HTML completo e único.