A memória que nos inspirou

Quem cresceu nos anos 90 lembra: rasgar o pacote de salgadinho e encontrar um tazo holográfico. Juntar tampinhas de refrigerante para trocar por bonequinhos de gelatina. Correr até a banca para comprar o pacotinho de figurinhas e descobrir se finalmente veio aquela difícil.

Não era só sobre o objeto. Era a expectativa antes de abrir. A surpresa do que vinha dentro. A troca com o amigo no recreio. O álbum espalhado na mesa da sala enquanto a família inteira ajudava a colar figurinha. Eram rituais que transformaram produtos em memórias — e memórias em afeto.

Quando a Editora Pixel nos trouxe o projeto Enaldinho na Copa — 10 livros, 23 Cabeçudinhos colecionáveis de 19 seleções — entendemos na hora: essa coleção é o tazo de uma nova geração.

O desafio

Não era criar um site. Era traduzir para o digital aquela mesma emoção que a gente sentiu na infância. A ansiedade de abrir o pacote. A alegria de encontrar o raro. A vontade de mostrar para todo mundo.

O Enaldinho já tinha 45 milhões de inscritos no YouTube. As crianças já o conheciam. O que faltava era dar um lar para a coleção — um lugar onde o universo ganhasse vida e a família pudesse participar junto.

A emoção de descobrir

Criamos uma roleta onde cada criança descobre qual Cabeçudinho é o seu. Não é sobre ganhar um prêmio. É sobre reproduzir no digital aquele frio na barriga de abrir o pacote sem saber o que vem dentro — a mesma sensação que fazia a gente correr até a banca nos anos 90.

A cada dia, uma nova chance de girar. Uma nova seleção para descobrir. Um novo motivo para a criança voltar e dizer “mãe, olha qual saiu hoje!”. Porque colecionar nunca foi sobre ter tudo — é sobre a jornada até completar.

Toda criança merece colecionar

Acessibilidade não é um item de checklist. É a certeza de que toda criança, independente de como acessa a internet, vai conseguir explorar a coleção, girar a roleta e viver a mesma emoção. Construímos o site pensando na trajetória de cada criança até esse universo — porque se uma ficasse de fora, a gente teria falhado.

A tecnologia que some

A melhor tecnologia é a que a criança não percebe. O site carrega instantaneamente porque criança não espera. As imagens são leves porque nenhum Cabeçudinho pode travar no meio do caminho. Cada detalhe técnico existe por um único motivo: para que nada atrapalhe a magia.

No desktop, efeitos de luz e partículas dão vida ao universo do Enaldinho. No celular, redesenhamos tudo para o espaço vertical — porque a maioria das crianças acessa pelo celular dos pais, e a experiência precisa ser impecável ali também.

Quando a família decide, o caminho é curto

Pais compram. Mas compram quando confiam. Então tornamos o caminho da compra o mais transparente possível — sem intermediários, sem fricção, direto para os varejos parceiros. O botão está sempre ali, mas nunca atrapalha. Porque respeitar o tempo do visitante também é parte da experiência.

O som antes do jogo

Quem já jogou FIFA sabe: a partida começa antes do apito. Começa naquela tela de escalação, com a trilha crescendo enquanto você escolhe os jogadores. A expectativa já é parte da experiência.

Quisemos isso pro site. Ao entrar, o apito do pênalti toca — e a trilha de fundo entra sem pausa, como se o jogo tivesse começado. É a identidade sonora do universo Enaldinho na Copa: uma camada de imersão que transforma visita em vivência.

E fizemos isso com um único arquivo de 1.3MB. Sem bibliotecas de áudio, sem players pesados, sem segundos extras de carregamento. O site manteve nota 98 no Lighthouse depois do som — porque identidade sonora não precisa custar performance.

O que construímos

Um universo digital para uma coleção que resgata o melhor da nossa infância: a emoção de colecionar, a alegria de completar e a memória de ter feito isso em família. Se a gente conseguiu fazer uma criança puxar a mãe pelo braço e dizer “vem ver!” — então fizemos nosso trabalho.

---

Dados para nerds

Para quem quer saber o que roda por baixo da magia.

Stack

• Astro (SSG) — zero JavaScript de framework no bundle final
• HTML semântico + CSS puro para animações
• Imagens otimizadas em WebP com lazy loading

Performance

• 0 de Cumulative Layout Shift — nada pula na tela
• 0KB de JS de framework entregue ao navegador
• 480ms de build time para o site inteiro (3 páginas)
• Todas as imagens comprimidas em WebP, servidas no tamanho exato

Acessibilidade

• WCAG AA compliance
• Navegação completa por teclado
• Contrastes validados em todos os elementos interativos
• Alt texts descritivos em todas as imagens
• Estrutura semântica com landmarks e headings hierárquicos

Identidade Sonora

• Arquivo único de 1.3MB (penalty + trilha ambiente concatenados via ffmpeg)
• Splash screen de entrada como gatilho para autoplay (sem hacks de browser)
• Loop inteligente: intro toca uma vez, trilha ambiente repete sem gap
• Botão de mute persistente (localStorage) — o controle é sempre do visitante
• Zero dependências de áudio — API nativa do browser, sem bibliotecas

Funcionalidades

• Hero imersivo com efeitos de partículas e raios de luz (desktop)
• Layout responsivo redesenhado para mobile (não é encolhido — é repensado)
• Showcase dos 23 Cabeçudinhos com sistema de raridades (Lendários, Ouro, Prata, Bronze)
• Roleta interativa com reset diário e cupom real de desconto
• Catálogo de 10 livros com status de disponibilidade
• Identidade sonora imersiva com splash de entrada e trilha ambiente
• CTAs contextuais com links diretos para varejos parceiros
• Header fixo com acesso permanente à compra
• Formulário de contato

Compatibilidade

• Chrome, Firefox, Safari, Edge
• iOS Safari, Chrome Android
• Responsivo de 320px a 2560px

100% Open Source

• Do framework ao deploy, toda a stack é construída com tecnologia aberta
• Astro, HTML, CSS, JavaScript — sem dependência de plataforma proprietária
• Tratamento e geração de imagens com modelos abertos de IA (Flux)
• Gestão de arquivos e colaboração via Nextcloud
• Sem vendor lock-in. O código é do cliente, roda em qualquer lugar