Ya-ha-ha! You found this page!
Esse projeto foi criado como o objetivo de ser uma experiência interativa para a entrega de um presente a um ente querido, totalmente inspirado no universo de The Legend of Zelda: Breath of the Wild.
A ideia foi transformar a simples entrega de um gift card da DLC "Zelda Expansion Pass" em uma experiência imersiva, narrativa e emocional.
Este projeto conduz o herói (usuário) por uma jornada progressiva, inspirada em desafios lógicos recompensadores, assim como em Breath of the Wild.
A jornada começa de forma sutil, convidando à exploração e à curiosidade, sem revelar imediatamente seu objetivo final. Conforme o herói interage, novas camadas da experiência são desbloqueadas, unindo narrativa, ritmo e elementos audiovisuais.
Tudo acontece de maneira intencionalmente controlada, utilizando timing, pausas e transições para gerar impacto emocional. O encerramento permite que a experiência seja revisitada, observada com mais calma e reinterpretada.
- HTML5
- CSS3 (animações, transições)
- JavaScript (controle de estados, eventos, fluxo narrativo)
- ChatGPT como ferramenta de apoio técnico
- Estruturação de um fluxo narrativo interativo usando JavaScript
- Gerenciamento de estados e modais sem frameworks
- Criação de animações e transições focadas em experiência do usuário
- Atenção ao timing, ritmo e ao impacto emocional
- Organização de código e separação de responsabilidades
Atualmente, o projeto encontra-se com a experiência visual e narrativa finalizadas, entregando o resultado esperado em termos de imersão e impacto. O código segue em evolução, com foco atual no refinamento técnico, especialmente no CSS, organização de estilos e melhoria gradual de boas práticas após a consolidação da experiência.
Desde o início, o foco principal foi replicar a sensação da tela de missões de Breath of the Wild utilizando apenas HTML, CSS e JavaScript puro. Esse escopo inicial, pensado para ser simples, acabou se expandindo organicamente conforme novas ideias surgiam.
Como consequência, algumas decisões técnicas priorizaram ritmo, timing e experiência do usuário em detrimento de uma arquitetura perfeita desde o início. A responsividade, por exemplo, foi pensada principalmente para desktop, com media queries ainda em desenvolvimento, assim como melhorias no uso de variáveis CSS e compatibilidade entre navegadores.
O escopo inicial deste projeto era simples: replicar a sensação da tela de missões de Breath of the Wild utilizando apenas HTML, CSS e JavaScript, como um exercício visual e narrativo.
No entanto, à medida que novas ideias surgiam, o projeto passou a crescer organicamente, incorporando narrativa, interações, sons, timing e múltiplas telas. Esse crescimento exigiu cuidado constante com organização de arquivos, separação de responsabilidades e manutenção da clareza do código, mesmo com o aumento da complexidade.
Parte dos áudios utilizados neste projeto foi inspirada e/ou obtida a partir de recursos disponíveis publicamente relacionados a The Legend of Zelda: Breath of the Wild, com destaque para materiais encontrados no site The Sounds Resource.
Além disso, referências visuais e de animação foram estudadas diretamente a partir do jogo, utilizando gravações próprias e revisões de vídeos para analisar transições, ritmos e comportamentos de interface, buscando a maior fidelidade possível à experiência original.
Este projeto foi entregue de forma local, através de um pendrive, contendo a experiência completa, imagens personalizadas e o código real da recompensa final.
Por questões de segurança da informação e caráter pessoal do presente, algumas partes do conteúdo, como o código da DLC, imagens dos créditos (fotos de família) e a mensagem final, não estão presentes na versão pública hospedada no GitHub Pages.
A experiência foi executada integralmente de forma offline no dia da entrega, reforçando o cuidado com o contexto, a surpresa e o aspecto emocional do presente.
Apesar de o resultado visual e narrativo já estar consolidado, o código ainda passa por um processo contínuo de refinamento.
Entre os pontos em evolução estão a padronização de estilos no CSS, uso mais extensivo de variáveis, melhoria de compatibilidade entre navegadores e expansão da responsividade, que atualmente prioriza a experiência em desktop.
A intenção, neste momento, é utilizar o projeto como base para aplicar melhorias técnicas progressivas agora que o resultado final da experiência já está definido.
Feedbacks, sugestões de melhoria e discussões sobre boas práticas são muito bem-vindos.
Este projeto também representa um processo de aprendizado contínuo, e ideias sobre organização de código, arquitetura, acessibilidade, responsividade ou experiência do usuário são sempre bem recebidas.