Playroom: Fliperama retrô 3D no navegador

Crie um fliperama completo e jogável no navegador chamado “Playroom”, com uma estética nostálgica de hardware do fim dos anos 1980 e uma interface editorial contemporânea e contida. Use Three.js para a renderização e carregue assets GLB separados para o monitor CRT, o console, o controle e os cartuchos de jogos. Entregue uma experiência funcional, não uma maquete estática. Direção de arte: use um fundo branco quente, plástico marfim envelhecido, detalhes em carvão, verde-sálvia suave, terracota dessaturada e azul desbotado. Combine títulos em Space Grotesk com rótulos pequenos em DM Mono. Adicione linhas divisórias finas, bastante espaço em branco, anotações técnicas sutis e uma navegação compacta. Evite o estilo cyberpunk neon, cards de dashboard brilhantes e gradientes em excesso. A página inicial deve lembrar uma fotografia de produto cuidadosamente composta. Posicione o CRT em destaque, mais à direita; o console, à esquerda; um cartucho na vertical, encaixado com segurança no console; e um controle à frente. Conecte os dispositivos com cabos curvos que cheguem aos soquetes correspondentes. Use iluminação direcional suave, sombras de contato convincentes, bordas arredondadas e materiais de plástico levemente ásperos. Evite interseções entre os objetos. Dê à página inicial uma órbita lateral lenta e cinematográfica. Permita que os usuários arrastem para girar a visualização e, em seguida, retome suavemente o movimento ocioso. Adicione pulsos de dados contidos, que percorram lentamente detalhes selecionados do hardware. O CRT deve exibir uma cena de espera em pixel art, em loop, com um mascote pequeno, scanlines sutis e a tipografia “PLAYER ONE”. Use corretamente o logotipo amarelo T e branco V nos rostos dos mascotes. Um botão “POWER ON” em destaque, ou um clique na cena do console, deve iniciar uma única transição contínua. Aproxime suavemente a câmera da tela do CRT, introduza um fluxo de dados animado e amplie gradualmente a cena até cobrir toda a viewport. Cubra as bordas superior e inferior durante todo o processo. Revele a coleção de cartuchos por meio de uma transição suave do escuro para o claro, sem uma sobreposição que apareça de repente nem um salto abrupto da câmera. A coleção contém três cartuchos distintos, todos na vertical: Snake em verde-sálvia, Breakout em terracota e Blocks em azul. Cada um tem uma tipografia de capa nítida e um pequeno mascote animado apoiado sobre ele. Use um balanço sutil, elevação ao passar o cursor e uma inclinação suave. Permita tanto clicar nos cartuchos 3D quanto usar botões de texto acessíveis abaixo deles. Cada seleção abre uma interface de jogo jogável. Snake inclui sequências de comida e frutas bônus temporizadas. Breakout inclui vários layouts de blocos e power-ups para a raquete ou multibola. Blocks inclui uma prévia da próxima peça, uma sombra de posicionamento e pontuação por remoção de linhas. Forneça instruções claras, pontuação, pausar, reiniciar e navegação para voltar. Aceite controles pelo teclado e botões de toque, com persistência local da melhor pontuação. Mantenha o conteúdo da tela e os rótulos dos cartuchos como texturas de runtime separadas, para que o texto permaneça nítido. Preserve as partes nomeadas dos modelos para interação e animação dos mascotes. Inclua feedback de carregamento, um fallback utilizável caso os assets 3D falhem, layouts responsivos, foco visível do teclado e suporte a movimento reduzido. Organize o projeto de forma limpa, verifique os três jogos e as transições e deixe tudo pronto para implantação no GitHub e na Vercel.