Doubao Seed API for Reasoning and Coding

Crie uma página HTML completa em um único arquivo — um documento .html com todo o CSS e JavaScript embutidos, zero dependências externas, sem links de CDN, sem fontes da web, sem arquivos de imagem nem data URIs. Todo elemento visual deve ser desenhado proceduralmente em tempo de execução com a Canvas 2D API ou SVG inline; não deve haver bitmaps, fotografias nem emoji em lugar nenhum. A página é um canvas generativo em tempo real com um título como "Campo de Colheita — Estúdio de Geometria Aérea", e todo o conceito é uma vista de cima, em perspectiva divina, de uma terra agrícola cultivada que o usuário molda com sliders enquanto uma única colheitadeira pixelada avança por ela, apagando faixas ordenadas da lavoura bruta — o momento silencioso e satisfatório em que a ordem é cortada do caos. Composição e renderização: preencha toda a viewport com uma grade retangular regular de talhões de campo semelhantes a centeio, dispostos em formas vetoriais planas com uma elevação isométrica / pseudo-2.5D sutil, para que cada talhão pareça um bloco baixo, não um retângulo plano. Ilumine a cena com um único sol de entardecer direcional vindo de um canto (quente, em ângulo baixo); cada talhão e a colheitadeira devem projetar uma sombra longa e suave na direção oposta para reforçar a solidez geométrica e blocada do campo. A paleta é uma família contida e elegante de tons terrosos: amarelo-mostarda, ocre, verde-oliva e um único acento de terra queimada umbra tostada para o solo recém-revolvido — sem neon, sem primárias puras, mantenha um visual sofisticado e discreto. O estilo geral combina vetor plano com microrrelevo isométrico, preciso e arquitetônico. Comportamento vivo: dentro de cada talhão, renderize linhas finas de semeadura em sulcos (linhas paralelas delgadas) com densidade ajustável. Uma colheitadeira pixelada — um pequeno sprite blocado desenhado com alguns retângulos — é o ÚNICO elemento em movimento e a única coisa que rompe a simetria da grade. Ela avança lentamente por um percurso em espiral para dentro ou por uma rota boustrophedon serpenteante (回字 / vai e vem) pelos talhões. Enquanto se move, ela deve "apagar" a lavoura em pé diretamente na sua faixa de corte e deixar para trás listras de colheita em tempo real — faixas cortadas alternando claro e escuro, como um gramado aparado ou a trilha real da plataforma de uma colheitadeira — pintadas permanentemente no campo até o reset. A colheita é uma animação contínua e autônoma via requestAnimationFrame; vê-la preencher o campo deve transmitir uma sensação calma e hipnótica. Interatividade — todos os controles são sliders (além de alguns pequenos toggles/botões) em um painel lateral ou inferior limpo e minimalista, e todos devem responder ao vivo sem recarregar a página: um slider para o número de talhões do campo (resolução da grade, por exemplo, de 3×3 até 12×12), um slider para a densidade das linhas de semeadura, um slider para o matiz da lavoura (deslocando a cultura em pé pela faixa mostarda-ocre-oliva), um slider para o progresso da colheita ou velocidade da colheitadeira, e um toggle para alternar o caminho da colheitadeira entre espiral e boustrophedon. Inclua um botão sutil de Reset/Replantar que regenere o campo e reinicie a passada. Alterar a quantidade de talhões ou a densidade deve regenerar o layout suavemente; arrastar o matiz deve recolorir em tempo real. Torne tudo totalmente responsivo para que a grade e as sombras sejam recalculadas ao redimensionar a janela, mantenha a taxa de quadros fluida e garanta que o código seja limpo e autossuficiente para abrir corretamente com um duplo clique no arquivo. Isto não é um jogo nem um dashboard — é um instrumento de arte generativa. Leve a geometria procedural, a animação do percurso e a vinculação dos parâmetros tão longe quanto possível; a qualidade do sombreamento isométrico, as longas sombras de entardecer e a nitidez das listras de colheita são o que deve fazer esta renderização se destacar.

Crie um único arquivo HTML autossuficiente (apenas CSS e JavaScript inline — absolutamente sem bibliotecas externas, CDNs, frameworks, fontes ou URLs de imagem) que renderize uma bancada interativa de desmontagem de um mecanismo de relógio de bolso mecanicamente plausível, desenhada inteiramente com SVG e/ou Canvas. A página deve abrir e executar corretamente com um duplo clique em qualquer navegador moderno, com tudo calculado e animado em tempo real. A CENA. Uma vista superior de um mecanismo de relógio de latão explodido, disposto sobre uma bancada de oficina. Renderize, como arte vetorial viva, um tambor de mola principal, um trem de engrenagens empilhado (roda do tambor → roda central → terceira roda → quarta roda → roda de escape), uma âncora que oscila para frente e para trás, um volante de balanço com uma espiral de cabelo, e ponteiros de hora/minuto/segundo varrendo um aro de capítulos sutil. Desenhe dentes de engrenagem reais (flancos em estilo evolvente, não círculos simples), engrenamento correto nos círculos primitivos e eixos, rubis, pontes e parafusos visíveis. Todo o conjunto é composto concentricamente ao redor do núcleo do movimento; o painel de controle fica recolhido em um canto escuro. A MECÂNICA (este é o ponto — faça simular de verdade, não fingir). Modele o trem de engrenagens com relações reais: a velocidade angular de cada roda é igual à da vizinha multiplicada pela razão negativa das respectivas contagens de dentes, de modo que engrenagens acopladas visivelmente contrarrotem em velocidades proporcionais e os dentes se intertravem sem se sobrepor nem deslizar. O escapamento deve realmente marcar o tempo: a roda de escape avança um dente por vez em passos discretos, travada e liberada pela âncora oscilante, que é acionada pelo volante de balanço balançando em uma batida fixa. Cada liberação ("tick") produz um passo nítido na roda de escape e um tick audível usando a Web Audio API (sintetizado, sem arquivos de áudio). O ponteiro dos segundos avança no ritmo do escapamento; os ponteiros de minuto e hora derivam dele pelas relações de engrenagem. Acione a animação com requestAnimationFrame e tempo decorrido real para que a temporização permaneça precisa. AS INTERAÇÕES (todas devem responder ao vivo). - Uma coroa/botão de corda arrastável: arraste-a (mouse ou toque) para dar corda na mola principal — um medidor de corda se preenche e a espiral da mola aperta visivelmente. Solte para deixar a energia armazenada descarregar, alimentando o trem; o movimento funciona até a mola desenrolar e então desacelera até parar. - Um slider de "rate" que escala a batida/velocidade de funcionamento para que você possa vê-lo marcar lentamente ou disparar. - Um slider de "explode" que separa continuamente os componentes empilhados ao longo de seus eixos, de totalmente montado a um diagrama explodido em leque, com interpolação suave, linhas-guia conectoras entre peças separadas e tudo ainda girando corretamente em qualquer nível de explosão. - Passe o mouse (ou toque) em qualquer componente para agir como uma lupa de relojoeiro: destaque essa peça, escureça o restante e exiba um callout flutuante com o nome da peça e uma descrição de uma linha da sua função. - Botões: Dar corda, Liberar, Reset. O VISUAL. Estética industrial realista de oficina de relojoaria: latão envelhecido quente, cinza-aço desgastado, fundo preto-tinta profundo, brilhos metálicos nítidos, dentes de engrenagem finamente gravados e pontes chanfradas. Simule um único feixe de luz de janela vindo do canto superior esquerdo sobre a bancada, para que as peças projetem sombras suaves e alongadas, e faça os brilhos especulares percorrerem as faces das engrenagens enquanto elas giram. Use gradientes, filtros e granulação sutil para dar profundidade. Controles e rótulos em estilo HUD, limpos e legíveis, no canto escuro. REQUISITOS. Tudo em um arquivo .html; layout responsivo que escala para a viewport; animação suave a 60fps; sem gráficos placeholder — o movimento deve ser desenhado proceduralmente e acoplado mecanicamente de verdade, de modo que um modelo capaz produza um relógio que realmente recebe corda, engrena e faz tick, enquanto um modelo fraco colapsa em círculos giratórios estáticos. Adicione comentários inline breves nomeando as relações de engrenagem e a lógica do escapamento.