Lilly - The Weight of Waiting

Descrição integral

Experiência interativa de 9 telas para totem touch, desenvolvida a partir de protótipo Figma para ativação presencial da Lilly (150 Years of Medicine) em convenção na Alemanha (Frankfurt / Berlim). O deck, em inglês para público internacional, narra o impacto do diabetes tipo 2 e do tempo de espera por tratamento, encerrando em uma transformação animada automática. Construído em HTML5 + JavaScript vanilla + CSS com nesting nativo, sem framework, sem build e sem dependências externas: um único index.html, assets SVG e um service worker.

Principais funcionalidades/módulos:
- Palco fixo: resolução exata do totem, rodando 1:1 sem reamostragem, com escala por transform para conferência em desktop e mobile.
- Navegação de totem: avanço por toque em qualquer ponto, swipe horizontal/vertical, setas do teclado e deep link por hash (#0 a #8) para operação e testes.
- Loop contínuo sem estado residual: o botão Finish devolve ao início limpo, reiniciando barra de progresso, contadores e animações a cada visitante.
- Operação 100% offline: service worker com precache tudo-ou-nada de 48 entradas, estratégia cache-first com revalidação em segundo plano, navegação resolvida para index.html e fontes servidas do próprio projeto — zero requisições externas.
- Cena do corpo com revelação progressiva: quatro etapas em uma única seção, com grupos de rótulos entrando por etapas.
- Animações fiéis ao design criado no figma.
- Contadores por Web Animations API, evitando números congelados quando o dispositivo entra em economia de energia.