Playroom: Retro-3D-Browser-Arcade

Erstelle eine vollständige, spielbare Browser-Arcade namens „Playroom“ mit einer nostalgischen Hardware-Ästhetik der späten 1980er und einer zurückhaltenden, zeitgemäßen Editorial-Oberfläche. Verwende Three.js für das Rendering und lade separate GLB-Assets für CRT-Monitor, Konsole, Controller und Spiele-Cartridges. Liefere eine funktionierende Anwendung, kein statisches Mock-up. Art Direction: Verwende einen warmen, gebrochen weißen Hintergrund, gealtertes elfenbeinfarbenes Plastik, anthrazitfarbene Details, gedämpftes Salbeigrün, staubiges Terrakotta und verblasstes Blau. Kombiniere Überschriften in Space Grotesk mit kleinen Labels in DM Mono. Ergänze dünne Trennlinien, großzügigen Weißraum, dezente technische Annotationen und eine kompakte Navigation. Vermeide Neon-Cyberpunk-Ästhetik, glänzende Dashboard-Karten und übermäßige Verläufe. Die Startseite sollte wie ein sorgfältig arrangiertes Produktfoto wirken. Platziere den CRT prominent auf der rechten Seite, die Konsole links, eine aufrecht und sicher in der Konsole sitzende Cartridge sowie einen Controller davor. Verbinde die Geräte mit geschwungenen Kabeln, die an ihren tatsächlichen Anschlüssen anliegen. Verwende weiches gerichtetes Licht, glaubwürdige Kontaktschatten, abgerundete Kanten und leicht raue Kunststoffmaterialien. Verhindere Überschneidungen zwischen den Objekten. Gib der Startseite eine langsame, filmische Orbitbewegung von einer Seite zur anderen. Ermögliche es den Nutzern, die Ansicht per Drag zu drehen, und lasse die Bewegung anschließend sanft wieder einsetzen. Füge um ausgewählte Hardwaredetails dezente, langsam wandernde Datenimpulse hinzu. Der CRT sollte eine geloopte Pixel-Art-Standby-Szene mit einem kleinen Maskottchen, dezenten Scanlines und der Typografie „PLAYER ONE“ anzeigen. Verwende das gelbe T- und das weiße V-Logo präzise auf den Gesichtern der Maskottchen. Ein prominenter „POWER ON“-Button oder ein Klick auf die Konsolenszene soll eine durchgängige Transition starten. Führe die Kamera in Richtung CRT-Bildschirm, blende einen animierten Datenstrom ein und erweitere die Szene schrittweise auf den gesamten Viewport. Bedecke dabei durchgehend den oberen und unteren Rand. Zeige die Cartridge-Sammlung durch einen weichen Übergang von dunkel zu hell, ohne plötzlich eingeblendetes Overlay oder abrupten Kamerasprung. Die Sammlung enthält drei unterschiedliche, aufrecht stehende Cartridges: das salbeigrüne Snake, das terrakottafarbene Breakout und das blaue Blocks. Jede besitzt eine klare Cover-Typografie und ein kleines animiertes Maskottchen, das oben darauf sitzt. Verwende dezentes Wippen, Anheben beim Hover und sanftes Neigen. Unterstütze sowohl das Klicken auf die 3D-Cartridges als auch barrierearme Textbuttons darunter. Jede Auswahl öffnet eine spielbare Spieloberfläche. Snake enthält Nahrungsketten und zeitlich begrenzte Bonusfrüchte. Breakout bietet mehrere Brick-Layouts sowie Power-ups für Paddle oder Multiball. Blocks enthält eine Vorschau des nächsten Steins, einen Landungs-Geist und eine Punktewertung für das Löschen von Reihen. Stelle klare Anweisungen, Punktestände, Pausieren, Neustart und eine Zurück-Navigation bereit. Unterstütze Tastatursteuerung und Touch-Buttons sowie die lokale Speicherung von Bestwerten. Halte Bildschirminhalte und Cartridge-Labels als separate Laufzeittexturen, damit der Text scharf bleibt. Bewahre benannte Modellteile für Interaktionen und die Animation der Maskottchen. Integriere Ladefeedback, einen nutzbaren Fallback für den Fall, dass 3D-Assets nicht geladen werden können, responsive Layouts, sichtbaren Tastaturfokus und Unterstützung für reduzierte Bewegung. Strukturiere das Projekt sauber, überprüfe alle drei Spiele und Übergänge und bereite es für das Deployment auf GitHub und Vercel vor.