Kimi API for Vision-to-Code Generation

Crea una pagina HTML completa in un unico file per un gioco arcade Snake giocabile, con tutto il CSS e il JavaScript incorporati e zero dipendenze esterne, CDN, immagini o font. Disegna la griglia su un canvas con una moderna palette neon su sfondo scuro, movimento fluido e una morbida scia luminosa dietro al serpente. Supporta i controlli con frecce e WASD, oltre ai gesti di swipe sui dispositivi touch, mostra il punteggio in tempo reale e un record persistente, e aumenta gradualmente la velocità del gioco man mano che il punteggio cresce. Attiva una piccola esplosione di particelle ogni volta che il cibo viene mangiato, mostra un overlay animato di game over con un pulsante di riavvio e mantieni il layout responsive, così che la griglia resti centrata e leggibile sia su desktop sia su mobile.

Crea un singolo file HTML completamente autonomo (tutto il CSS e il JavaScript incorporati, assolutamente nessuna dipendenza esterna, CDN, immagine o web font) che renderizzi un "terrario digitale vivente" interattivo: un barattolo di vetro sigillato al centro dello schermo, contenente una mini foresta pluviale autosufficiente che cresce in tempo reale. Aperto in qualsiasi browser moderno, deve funzionare subito a 60fps senza alcun passaggio di build. Scena principale e layout: centra la composizione in modo simmetrico, trattando il barattolo di vetro come il palco principale su uno sfondo scuro profondo e vignettato (gradiente radiale da un centro morbido illuminato di muschio che sfuma verso bordi quasi neri), così che tutta l'attenzione ricada sul barattolo. Renderizza tutto su un HTML5 Canvas a finestra intera, stratificato sotto veri elementi DOM/CSS glassmorphism: la parete del barattolo deve mostrare autentiche qualità del vetro — riflessi curvi di rifrazione, una brillante striscia di rim-light speculare, una lieve sfocatura satinata e goccioline di condensa sparse con minuscole lenti — ottenute con gradienti radiali/lineari sovrapposti, backdrop-filter blur, tratti bianchi semitrasparenti e morbide box-shadow. Dentro il barattolo, sul fondo, c'è un terriccio scuro e umido e una tenue foschia volumetrica che deriva lentamente. I tre livelli tecnici che devono sovrapporsi e coesistere (qui si distingue un modello debole da uno forte: un modello debole produrrà un'immagine statica, uno forte renderà vivo l'intero barattolo): 1. Crescita ricorsiva con L-system: rampicanti, fronde di felce e muschi sono generati da un L-system / algoritmo di ramificazione ricorsiva e animano il loro dispiegarsi nel tempo: gli steli si allungano, i rami si suddividono, le fronde si srotolano, le foglie scalano in ingresso con easing. La crescita è organica e leggermente randomizzata per ramo (variazione dell'angolo, assottigliamento dello spessore, decadimento della lunghezza), così che al ricaricamento non esistano due piante identiche. 2. Sistema di particelle: mote luminose ambrate simili a lucciole (a decine) fluttuano e ondeggiano nella foschia con un morbido bagliore additivo e una leggera parallasse, insieme a particelle ascendenti di condensa/polline; le particelle reagiscono in modo sottile alle piante appena cresciute. 3. Ciclo di illuminazione giorno-notte: un loop continuo di luce ambientale sposta la key light dall'alto da alba bianco freddo → tramonto dorato caldo → notte indaco profonda e ritorno, ricolorando di conseguenza l'intera scena, i riflessi del vetro, la foschia e i toni delle piante. Le piante mostrano fototropismo: gli steli si piegano e inclinano le punte verso la direzione corrente della luce mentre si muove. Interazione principale: facendo clic in qualsiasi punto sulla parete o all'interno del barattolo, un singolo seme cade nel terriccio alla posizione x del clic, e quel seme attraversa una vita completa e visibile in sequenza: cade e si posa, germina in un germoglio, il germoglio si ramifica ricorsivamente tramite L-system, poi a maturità sboccia in un piccolo fiore luminoso; ogni fase è easing e chiaramente leggibile, con una morbida increspatura/sbuffo di polvere all'atterraggio. Più clic generano più piante, che coesistono e continuano a crescere, riempiendo gradualmente il terrario fino a trasformarlo in un intrico più fitto. Includi un paio di controlli inline discreti in pulsanti pill glassmorphic (ad esempio "Reimposta terrario" e un toggle "Giorno/Notte: auto ⇄ trascina", in cui l'utente possa scorrere l'ora del giorno, più una pausa opzionale). Fornisci una tenue riga di suggerimento ("tocca il vetro per piantare un seme") che svanisca dopo la prima interazione. Palette e atmosfera: fogliame verde inchiostro di foresta e verde-giallo muschioso, bagliore ambra/miele per le mote luminose e le fioriture, tinte vetro color teal freddo sul barattolo, lavaggi oro caldo e indaco freddo lungo la transizione giorno-notte. La sensazione generale è quieta, respirante, meditativa: movimento lento e gentile, nessuna transizione brusca. Requisiti tecnici: usa requestAnimationFrame con delta-time, così che l'animazione sia indipendente dal frame rate; rendi il canvas responsive al ridimensionamento della finestra con scaling corretto del devicePixelRatio e mantieni il barattolo centrato; limita in modo sensato il numero di particelle/rami affinché resti fluido; mantieni tutta la casualità seedata per pianta, così che la crescita appaia naturale. Tutto — geometria, bagliore, vetro, foschia, illuminazione, particelle e piante ricorsive — deve essere disegnato o calcolato via codice, con zero asset esterni. Consegna solo il documento HTML completo, pronto da salvare come unico file .html e aprire.