Playroom: sala giochi rétro 3D nel browser

Crea una sala giochi completa e giocabile nel browser chiamata “Playroom”, con un’estetica hardware nostalgica della fine degli anni Ottanta e un’interfaccia editoriale contemporanea e misurata. Usa Three.js per il rendering e carica asset GLB separati per il monitor CRT, la console, il controller e le cartucce dei giochi. Realizza un’esperienza funzionante, non un mockup statico. Direzione artistica: usa uno sfondo bianco caldo tendente al crema, plastica avorio effetto vissuto, dettagli color antracite, verde salvia desaturato, terracotta polverosa e blu sbiadito. Abbina titoli in Space Grotesk a piccole etichette in DM Mono. Aggiungi sottili linee divisorie, ampio spazio bianco, annotazioni tecniche discrete e una navigazione compatta. Evita lo stile cyberpunk al neon, le card lucide da dashboard e i gradienti eccessivi. La home page dovrebbe ricordare una fotografia di prodotto composta con cura. Posiziona il CRT in evidenza verso destra, la console verso sinistra, una cartuccia in verticale inserita saldamente nella console e il controller davanti. Collega i dispositivi con cavi curvi che arrivino alle prese corrette. Usa un’illuminazione direzionale morbida, ombre di contatto realistiche, bordi arrotondati e materiali plastici leggermente ruvidi. Evita le intersezioni tra gli oggetti. Dai alla home page un lento movimento orbitale cinematografico da un lato all’altro. Permetti agli utenti di trascinare per ruotare la visuale, quindi riprendi gradualmente il movimento automatico. Aggiungi discreti impulsi di dati in lento movimento attorno ad alcuni dettagli hardware selezionati. Il CRT dovrebbe mostrare una scena di standby in pixel art in loop, con una piccola mascotte, scanline discrete e la scritta “PLAYER ONE”. Usa accuratamente il logo con la T gialla e la V bianca sui volti delle mascotte. Un pulsante “POWER ON” in evidenza, oppure un clic sulla scena della console, dovrebbe avviare un’unica transizione continua. Avvicina gradualmente la camera allo schermo CRT, introduci un flusso di dati animato e amplia progressivamente la scena fino a occupare l’intero viewport. Mantieni sempre coperti i bordi superiore e inferiore. Mostra la raccolta di cartucce con una transizione fluida dal buio alla luce, senza overlay che compaiano all’improvviso né bruschi salti della camera. La raccolta contiene tre cartucce distinte in verticale: Snake color verde salvia, Breakout color terracotta e Blocks color blu. Ognuna presenta una tipografia nitida sulla copertina e una piccola mascotte animata appollaiata sopra. Usa un leggero movimento oscillatorio, un sollevamento al passaggio del mouse e una delicata inclinazione. Supporta sia il clic sulle cartucce 3D sia i pulsanti di testo accessibili sottostanti. Ogni selezione apre un’interfaccia di gioco giocabile. Snake include catene di cibo e frutti bonus a tempo. Breakout include diversi layout di mattoni e power-up per la racchetta o multiball. Blocks include l’anteprima del pezzo successivo, la sagoma del punto di atterraggio e il punteggio per la rimozione delle linee. Fornisci istruzioni chiare, punteggio, pausa, riavvio e navigazione per tornare indietro. Supporta i comandi da tastiera e i pulsanti touch, con salvataggio locale del record. Mantieni i contenuti dello schermo e le etichette delle cartucce come texture runtime separate, così il testo rimane nitido. Conserva i nomi delle parti dei modelli per l’interazione e l’animazione delle mascotte. Includi un feedback di caricamento, un fallback utilizzabile se gli asset 3D non vengono caricati, layout responsive, stato attivo della tastiera visibile e supporto per la riduzione del movimento. Organizza il progetto in modo ordinato, verifica tutti e tre i giochi e le transizioni e preparalo per il deployment su GitHub e Vercel.