Uma Landing Page imersiva e poética, desenvolvida com WebGL e animações avançadas para promover o espetáculo teatral "Baleia", inspirado na obra de Graciliano Ramos.
Este projeto nasceu do desafio de traduzir a atmosfera poética, seca e onírica de uma peça de teatro físico para o ambiente digital. O objetivo central foi criar uma vitrine de alta conversão para a venda de ingressos na Funarte SP, mantendo a integridade artística e a identidade visual do espetáculo.
A solução é uma Experiência Digital Imersiva, que guia o utilizador através de uma "travessia" visual, utilizando scroll dinâmico e renderização de ponta para prender a atenção do início ao fim.
- Hero Section WebGL (Interação 3D): Utilização da biblioteca PixiJS para criar um efeito de paralaxe líquido através de um Displacement Map. A imagem do elenco reage ao movimento do cursor ou toque, criando profundidade real.
- Galeria Cinemática (Pinned Scroll): Substituição do carrossel convencional por uma galeria horizontal atrelada ao scroll vertical via GSAP ScrollTrigger. A página "fixa" no ecrã enquanto as cenas do espetáculo deslizam lateralmente.
- Elenco Dinâmico & Modais: Gestão de 21 perfis de atores através de estruturas de dados em JS. Os cartões são minimalistas e revelam biografias completas em modais responsivos com foco no retrato.
- Feed Instagram Simulado: Grade personalizada com CSS Grid que replica a interface da rede social, gerando tráfego orgânico e conversão de seguidores.
- Acessibilidade Nativa: Integração total do widget VLibras, garantindo inclusão digital para a comunidade surda.
O projeto prioriza a performance e fluidez, utilizando JavaScript puro para manipulação do DOM e bibliotecas especializadas para renderização visual.
- HTML5 Semântico: Estrutura otimizada para SEO e acessibilidade.
- CSS3 Avançado:
- Mobile-First: Design desenhado nativamente para dispositivos móveis e escalado para desktop.
- Design System: Paleta de cores baseada em tons terrosos (#28201b) e azuis teatrais (#3c5378, #5792ca, #7cc1e6).
- Trava de Proporção: Uso de
object-fit: covere containers flexíveis para garantir que as fotos nunca distorçam em nenhum dispositivo.
- JavaScript (ES6+):
- PixiJS: Motor de renderização WebGL para o Hero interativo.
- GSAP & ScrollTrigger: Motor de animações para efeitos de entrada, paralaxe interno e scroll horizontal.
- Vídeo Nativo: Integração de vídeo local de alta performance sem dependência de plataformas externas.
- Redução de Ruído: No Hero, os botões foram removidos para permitir que a força visual do elenco e o efeito de paralaxe sejam os protagonistas do primeiro impacto.
- Hierarquia Literária: Combinação da fonte Inter (moderna e legível) com a Playfair Display (clássica e serifada), evocando o tom literário da obra de Graciliano Ramos.
- Trava de Imagem no Mobile: Ajuste técnico via CSS para que os retratos no elenco e nos modais mantenham a mesma proporção e centralização em todos os tamanhos de ecrã, evitando cortes indesejados nos rostos.
- Contexto de Conversão: O calendário de apresentações agrupa datas próximas, reduzindo o esforço cognitivo do utilizador antes de clicar para comprar no Sympla.
Contribuições são bem-vindas! Se você tiver sugestões ou melhorias, sinta-se à vontade para abrir uma issue ou um pull request.
Conecte-se comigo no LinkedIn: Ana Julia
Este projeto está sob a licença MIT.
Desenvolvido por Ana Julia Toriani Pessoa