GPT 6 Astra for Computer Use

Crea una pagina web HTML interattiva completa e contenuta in un unico file, intitolata “Midnight Letterpress Accident Laboratory”. Restituisci esclusivamente il documento HTML finito, con tutto il CSS e il JavaScript incorporati. Deve aprirsi e funzionare direttamente in un browser moderno, senza dipendenze esterne, CDN, librerie, font, link a immagini, file SVG o altre risorse. Questa è una pagina web responsive, non un’immagine fissa in formato 16:9 né una composizione su canvas; deve adattarsi con naturalezza a schermi desktop, tablet e dispositivi mobili. Costruisci un simulatore tattile di tipografia sperimentale in cui l’utente compone una stampa trascinando singoli blocchi di caratteri in piombo su un foglio centrale, ruotandoli e riposizionandoli, quindi regolando la quantità d’inchiostro, la pressione della pressa e l’umidità della carta prima di azionare una grande leva meccanica d’impressione. Il risultato stampato deve reagire proceduralmente a questi parametri: l’inchiostro in eccesso causa sbavature e controforme intasate, una quantità ridotta d’inchiostro crea bordi secchi e spezzati, la pressione modifica l’incisione e la deformazione, l’umidità aumenta la sfumatura e il danneggiamento delle fibre della carta, un posizionamento imperfetto dei caratteri crea un fuori registro e le impressioni ripetute producono ombre sfalsate e immagini fantasma. Consenti più passaggi colore usando esclusivamente rosso vermiglio, blu oltremare e giallo acido, con una sovrastampa realistica, ordine dei livelli visibile, visibilità per singolo livello, annullamento/ripristino passo passo e la possibilità di sollevare l’angolo della carta per rivelare la stampa in evoluzione. Concentra il dramma visivo principale sull’istante in cui il rullo della pressa si è appena sollevato e la stampa finita sta per essere rivelata. La carta centrale deve sembrare un palcoscenico teatrale. Disponi blocchi tipografici, rulli d’inchiostrazione, pinzette, perni di registro, ritagli, indicatori e controlli in un anello asimmetrico attorno a essa. Rendi tutto tramite CSS, elementi HTML, Canvas e texture procedurali, adottando lo stile ruvido della serigrafia fisica e del collage artigianale: bordi strappati, grana fibrosa della carta, pigmento irregolare, puntinatura mezzatinta, metallo graffiato, macchie d’inchiostro, frammenti di nastro adesivo, lieve prospettiva, registro imperfetto e ombre stratificate. Evita gradienti lucidi, stile SaaS sterile, schede generiche, colori cyberpunk al neon, immagini fotorealistiche, emoji, illustrazioni stock e geometrie vettoriali perfettamente pulite. Includi un ampio inventario di caratteri mobili con lettere, punteggiatura, numeri e diversi blocchi decorativi. Gli utenti devono poter trascinare i blocchi dall’inventario all’area di composizione, selezionare più blocchi, ruotarli tramite maniglie o scorciatoie da tastiera, spostarli con i tasti freccia, eliminarli o duplicarli e modificare il contenuto testuale senza perdere l’aspetto fisico del blocco. Aggiungi guide di allineamento attivabili o disattivabili, mantenendo però piccole irregolarità manuali. Fornisci stati hover, attivo, selezionato, disabilitato e focus chiaramente distinguibili. Supporta interazioni tramite puntatore e touch, controlli da tastiera intuitivi, etichette accessibili e indicatori di focus visibili. Crea tre controlli tattili per quantità d’inchiostro, pressione e umidità, i cui valori aggiornino in tempo reale l’anteprima della carta, la simulazione della texture, gli indicatori, le etichette di avviso e il comportamento ambientale della macchina. Il sistema deve rivelare stati d’incidente giocosi con combinazioni estreme, come violente esplosioni d’inchiostro, lettere raddoppiate, caratteri scivolati, crepe frastagliate nelle fibre, vibrazioni del rullo e segni di registro schizzati, mantenendo comunque leggibile la composizione. Aggiungi un registro compatto degli esperimenti che annoti ogni impressione e i relativi parametri. Gli utenti devono poter selezionare un colore di passaggio, azionare la leva trascinandola lungo un arco convincente, assistere a un ciclo di stampa breve ma dettagliato e poi sollevare la carta. L’animazione deve includere la resistenza della leva, la vibrazione della macchina, il movimento del rullo, la compressione della carta, particelle di polvere, un lieve tremolio della lampada e una pausa carica di suspense prima della rivelazione. Rispetta prefers-reduced-motion. Rendi annullamento e ripristino realmente funzionali per posizionamento, rotazione, modifiche dei parametri, stampa, passaggi colore e azioni di rivelazione. Includi i controlli Reimposta, Incidente casuale, Riinchiostra, Aggiungi passaggio, Annulla e Ripristina, oltre a un breve suggerimento introduttivo che scompaia dopo l’interazione. Precompila la pagina con un poster intrigante parzialmente composto, così che la prima visualizzazione sia ricca dal punto di vista visivo, ma fai in modo che ogni elemento importante resti modificabile. Aggiungi un feedback visivo sottile, simile a un suono, senza usare risorse audio. Mantieni, quando pratico, texture procedurali deterministiche affinché l’annullamento ripristini lo stesso aspetto. L’esperienza deve sembrare cerimoniale, artigianale, tesa e maliziosamente incontrollabile, non semplicemente decorativa. Dai priorità ai dettagli raffinati dell’interazione, all’accoppiamento convincente dei parametri, agli artefatti di stampa procedurali stratificati, ai tempi di animazione curati e a una composizione responsive eccellente. Usa HTML semantico e JavaScript vanilla pulito e ben strutturato. La risposta finale deve contenere esclusivamente il documento HTML completo ed eseguibile.

Crea una pagina web HTML interattiva completa, rifinita e contenuta in un unico file, intitolata “Midnight Ramen Soundscape Theater”. Restituisci esclusivamente il documento HTML finale, con tutto il CSS e il JavaScript incorporati. Deve funzionare direttamente in un browser moderno, senza fase di build e senza dipendenze esterne, librerie, font, immagini, file audio, risorse CDN, richieste di rete o asset collegati. Costruisci una scena interattiva espressiva ambientata in un surreale ristorante di ramen a mezzanotte. L’oggetto centrale è un unico fascio continuo di noodles elastici, renderizzato con Canvas, SVG o una combinazione accuratamente integrata dei due. Il fascio di noodles deve attraversare diagonalmente il primo piano e sembrare fisicamente tangibile: gli utenti devono poterlo afferrare in qualsiasi punto con mouse o touch, trascinarlo, allungarlo, farlo schioccare, ripiegarlo su sé stesso e rilasciarlo. Implementa una fisica elastica convincente con inerzia, smorzamento, gravità, più segmenti collegati, risposta alle collisioni e movimento secondario visibile. Mantieni la simulazione stabile anche durante trascinamenti aggressivi, rapidi cambi di direzione, ridimensionamenti della finestra o interazioni ripetute. Disponi almeno tre ciotole di ramen distinte e diversi ingredienti lungo un arco ampio che attraversi la composizione, creando un ritmo visivo deciso attorno al noodle diagonale. Ogni ciotola deve avere il proprio motivo illustrato del brodo, identità cromatica, etichetta e carattere sonoro. Quando il noodle tocca una ciotola o vi cade dentro, attiva una risposta audiovisiva sincronizzata: un battito percussivo unico sintetizzato con la Web Audio API, un getto crescente di vapore, spruzzi di particelle verde cipollotto, increspature nel brodo, piccole gocce, tremolio del registro in stile serigrafico e onomatopee animate scritte a mano in stile giapponese come “ZURU!”, “PON!”, “JUU!” o “BASHAN!”, create con testo stilizzato anziché con font esterni. L’intensità della collisione deve influenzare volume, tonalità, numero di particelle, dimensione delle increspature, scala delle lettere e forza dell’animazione. L’audio deve iniziare solo dopo la prima interazione dell’utente e includere un controllo chiaro per disattivare/riattivare l’audio. Lo stato visivo culminante deve evocare un fermo immagine in cui il noodle è spettacolarmente teso nell’aria mentre il brodo resta sospeso appena prima dello schizzo. Supporta questa modalità con un controllo “CONGELA LO SCHIZZO” e con la barra spaziatrice: entrando in modalità congelata, applica una breve transizione energica, sospendi la scena fisica senza perderne lo stato, enfatizza le gocce sospese e la tensione del noodle allungato, mostra una tipografia cinetica audace in stile poster e conserva un sottile tremolio procedurale delle linee affinché la pagina continui a sembrare viva. Premendo di nuovo la barra spaziatrice o il controllo, la scena deve riprendere senza interruzioni. Aggiungi un controllo di ripristino, un indicatore compatto dello stato audio e una lettura discreta dal vivo di “tempo/impatto” guidata dalle collisioni recenti. I controlli da tastiera devono essere individuabili in un piccolo pannello integrato di aiuto: la barra spaziatrice attiva/disattiva il congelamento, R ripristina, M disattiva/riattiva l’audio e i tasti freccia applicano impulsi direzionali al noodle. Usa un ibrido visivamente sofisticato tra il design dei poster serigrafici vintage e l’animazione procedurale delle linee. Deve dominare uno sfondo indaco intenso, interrotto dal calore localizzato del fuoco dei fornelli attorno alle ciotole e ai punti di collisione. Usa colori spot stratificati — rosso vermiglio, giallo zenzero, verde cipollotto, crema calda e quasi nero — con texture mezzatinta, bordi d’inchiostro ruvidi, lieve fuori registro cromatico, ombre grafiche decise e linee di contorno animate. Il risultato deve sembrare artigianale e teatrale, non lucido o fotorealistico. Includi vapore ambientale discreto, bagliore tremolante dei fornelli, grana fluttuante e linee in movimento, mantenendo però un contrasto elevato e controlli leggibili. Evita lo stile cyberpunk generico al neon. Rendi la composizione responsive su schermi desktop ampi, tablet e dispositivi mobili; questa è una pagina web, quindi non imporre un rapporto fisso 16:9. Adatta fluidamente la posizione delle ciotole, la tipografia, i controlli, i limiti della simulazione e le aree touch senza ritagliare contenuti essenziali. Usa gli eventi del puntatore per unificare mouse, penna e touch. Impedisci lo scorrimento della pagina solo mentre il noodle viene manipolato attivamente. Rispetta prefers-reduced-motion riducendo l’animazione ambientale, ma mantenendo funzionale l’interazione principale. Mantieni prestazioni fluide tramite un sistema efficiente di riutilizzo delle particelle o limiti rigidi al loro numero, requestAnimationFrame, rendering consapevole del device-pixel-ratio con un limite ragionevole alla risoluzione e gestione delle coordinate sicura durante il ridimensionamento. Requisiti di contenuto e rifinitura: includi un trattamento atmosferico del titolo, un breve invito all’interazione su una sola riga, almeno tre ciotole etichettate, molteplici guarnizioni visivamente distinguibili, parole sonore scritte a mano in modo contestuale, stati dei controlli rifiniti, stili di focus chiari, etichette accessibili per i pulsanti e un suggerimento d’interazione discreto che svanisca dopo il primo utilizzo. La scena iniziale deve sembrare già un poster da collezione finito prima di qualsiasi interazione, mentre lo stato attivo deve trasformarsi in un giocattolo ritmico vivace, con feedback stratificati e movimenti emergenti sorprendenti. Vincoli negativi: nessun asset o dipendenza esterna; nessun URL di immagini; nessun audio preregistrato; nessun framework; nessun segnaposto incompleto; nessun commento TODO; nessun controllo non funzionante; nessun canvas fisso 16:9; nessuna interfaccia predefinita semplice; nessuno sfondo composto esclusivamente da gradienti generici; nessuna emoji usata come elemento grafico principale; nessun testo esplicativo eccessivo; nessun audio in autoplay; nessuna crescita incontrollata delle particelle; nessuna fisica fragile che esploda o produca valori NaN; nessuna interazione funzionante solo con il mouse; nessun contenuto al di fuori dell’unico documento HTML completo.