Três estações, um mascote-guia e um World Tour de um minuto. Cada estação mostra uma ideia acontecendo. O primeiro mundo ensina três hábitos pra usar IA no dia a dia.
Não é um vídeo nem um slide: é um palco em miniatura no browser. O aluno passeia, clica num pedestal, vê a máquina funcionar e lê, ao lado, o que está acontecendo e o que lembrar.
Um minuto guiado: chegar (3 s) → aproximar (3 s) → demonstrar (6 s) → segurar o resultado (5 s) em cada estação, com um card sincronizado à ação. Pausar, reiniciar, mudar a velocidade, sair.
Orbitar, aproximar, deslocar, resetar. Clicar num pedestal abre a estação, roda e repete a demonstração no seu ritmo. Teclado, mouse e toque.
Todo o texto e as estações vivem num único arquivo de configuração. Ensinar outra coisa é editar esse arquivo; a câmera, os cards e o tour continuam iguais.
Segue a receita do field guide Build a Learning World (Mark Kashef, Early AI Adopters): seis partes, ritmo de câmera fixo e um checklist de aceite. O mundo atual ensina três hábitos:
Um pedido chega a um portão fechado e vai pra revisão. O segundo passa na checagem: o portão abre e a roda (a ação) gira. Peça pra IA confirmar antes de enviar, pagar, apagar.
Um card de instruções entra na gaveta do projeto e os dois colegas ficam conectados. Guarde as instruções num lugar só; todo mundo, e a IA, lê o mesmo.
O formato da resposta passa, mas a fonte diz 20 + 30 + 40. O total vira 90 e a data, sem fonte, fica em aberto. Resposta bem formatada não é resposta certa.
O site é 100% estático. Não há backend, chave de API, banco nem Blender envolvidos.
Chrome, Edge, Firefox ou Safari 15+. Não precisa de GPU dedicada, mas ajuda. Funciona no celular.
# abrir o mundo publicado https://inematds.github.io/astra3dany/app/
Só pra rodar localmente ou trocar o assunto. Desenvolvido e testado com Node 24.
node -v # v20 ou mais novo npm -v
Pra clonar o repositório. As versões do Vite e do Babylon.js ficam travadas no package-lock.
git clone https://github.com/inematds/astra3dany.git
Os passos 1 e 2 são pra quem só quer visitar. Do 3 em diante, pra quem quer rodar localmente ou ensinar outra coisa.
Abra o mundo e clique no botão laranja World Tour. Em um minuto a câmera visita as três estações, roda cada demonstração e segura o resultado enquanto o card explica. No fim aparece o recap com os três hábitos.
https://inematds.github.io/astra3dany/app/ # Pausar/Retomar · Reiniciar · 0,75× · Sair (ou Esc)
Clique num pedestal (ou nos botões 01/02/03). Ver de perto e rodar aproxima a câmera e roda a demonstração; Repetir roda de novo; Vista ampla recua. Fora do tour a câmera é livre:
| Ação | Mouse | Teclado | Toque |
|---|---|---|---|
| Orbitar | arrastar | setas | um dedo |
| Aproximar / afastar | roda, botões + e − | + / − | pinça |
| Deslocar (pan) | shift + arrastar, botão direito | — | dois dedos |
| Voltar ao enquadramento | Reset | R | Reset |
Acrescente ?diagnostics à URL pra ver fps e resolução. O botão Reduzir movimento troca as animações de câmera por cortes secos (e respeita a preferência do sistema).
Clone, instale as versões travadas e suba o servidor de desenvolvimento.
git clone https://github.com/inematds/astra3dany.git cd astra3dany/game npm ci # Vite 8.2.2 + Babylon.js 9.25.0, exatamente como no lock npm run dev # http://127.0.0.1:43220
Edite game/src/mundo.config.js: título, intro, público, mascote e as três estações (nome, princípio, explicação, sequência, observações por segundo da demonstração, takeaway e poses de câmera). Todo texto do site vem daí.
// game/src/mundo.config.js — uma estação { id: 'portao', demo: 'portao', x: -3, principio: 'Confirme antes de agir', titulo: 'Uma checagem que pode parar uma ação.', sequencia: ['Pedido', 'Checagem', 'Ação'], observacoes: [[1.5, 'O pedido se aproxima…'], [2.8, 'Checagem falhou…'], [6, 'Checagem passou…']], takeaway: 'Peça pra IA confirmar antes de agir: enviar, pagar, apagar.', camera: { wide: {…}, closeStart: {…}, closeEnd: {…} }, }
Precisa de uma mecânica nova? Crie um módulo em game/src/estacoes/ com { reset(), update(demoTime), foco, pick } e registre em DEMOS no main.js. Os três existentes servem de molde.
Os testes leem o config e conferem duração, os 5 s de hold e as frases por fase. Depois olhe no browser: vista ampla, close-up, meio da demonstração e resultado, no desktop e no celular.
npm test # 7 testes de timeline e legendas (node --test) npm run build # gera ../app/ (estático, caminhos relativos) npm run preview # http://127.0.0.1:43221 — inspecione o build que vai pro ar
Commite a pasta app/ e faça push. O GitHub Pages serve da raiz da branch main; o mesmo build roda em Vercel, Netlify ou Here.Now apontando pra app/.
git add app && git commit -m "build" && git push # app: https://inematds.github.io/astra3dany/app/ # guia: https://inematds.github.io/astra3dany/guia/
Capturas da inspeção (desktop 1280 px e celular 390 px). O relatório completo está em evidence/revisao.md no repositório.
Pra você não descobrir na hora errada.
Blender não estava disponível na máquina de build, então o Any é gerado proceduralmente. Um GLB feito no Blender pode ser plugado pelo config (pernas Perna1..4 ganham o andar).
1,2 MB comprimido, por causa do Babylon.js. A primeira carga em 4G leva alguns segundos; ainda não há code-splitting.
Desktop e celular foram inspecionados em Chromium sem GPU. Nenhum aparelho físico, Safari, Firefox ou gesto de toque real ainda; os fps medidos não representam um dispositivo de verdade.
As demonstrações são animações determinísticas. Voz, música e perguntas ficam pra uma próxima versão.
Textos em português, no config. Não há i18n; traduzir é copiar o config.
Botões e painéis navegáveis por teclado, card do tour em aria-live, reduced-motion. A cena 3D em si não tem descrição além dos cards.
Na ordem em que fazem diferença pra quem aprende.