Um baile que começa no site: a porta de entrada da Book Nook Eventos
Bailes imersivos pra quem ama leitura e fantasia. O site tinha que dar a sensação de entrar na história — e ser história, convite, vitrine, galeria e bilheteria ao mesmo tempo.
A porta, o próximo baile e as edições: três dos seis atos da home. Recortes sem fundo: a pedir.
Escopo do projeto
A Book Nook Eventos é a iniciativa de dois jovens apaixonados por leitura e pelo mundo de fantasia, que pensaram em como juntar uma comunidade de pessoas que amam esse universo de um jeito que elas aproveitem juntas. Essas pessoas querem sair, conhecer gente nova — mas onde vão? A resposta foi um baile interativo e imersivo, open bar e open food, pra viver uma noite como se fosse dentro do mundo de fantasia.
O objetivo do site era trazer essa sensação de fantasia já no carregamento, como se a pessoa estivesse entrando na própria história, e ao mesmo tempo contar uma história, ser um convite, uma vitrine dos próximos eventos, uma galeria das experiências que as pessoas já viveram e a bilheteria dos próximos bailes. A marca funcionava — 70,8 mil seguidores, uma edição esgotada, direção de arte de verdade. O site, não: um erro fatal de PHP servia 500 em 8 das 11 páginas. Refiz a home em cima da única metáfora que a marca já tinha: um livro que se abre.
Papel
Web Designer, Front-end & Back-end
Auditoria, conceito, direção de arte e o front inteiro — HTML, CSS, JavaScript, GSAP e Three.js —, mais um painel em PHP que reescreve o HTML estático. Agosto a setembro de 2026.
Desafios
O que o site anterior tinha, quando eu cheguei:
-
01
8 de 11 páginas em HTTP 500
Um erro fatal de PHP derrubou o site e ninguém viu — o cache ainda servia três páginas
-
02
robots.txt em 5xx
Motivo documentado pro Google parar de rastrear o domínio inteiro
-
03
O evento anunciado não existia
Três botões de compra levavam pra home do marketplace; o baile real não era citado
-
04
Três endereços, duas regras de idade
Pra mesma noite, espalhados entre home, ingressos e marketplace
-
05
Lorem ipsum em produção
E o llms.txt da hospedagem entregava esse texto às IAs como propósito da empresa
-
06
Zero h1, 6 pares reprovando em AA
Nenhum título de página no site inteiro; contraste abaixo do mínimo
Performance nunca foi o problema: LCP de 2.164 ms na home, CLS 0,023, TTFB 65 ms — o cache do WP Rocket segurava as três páginas vivas e mascarava o erro fatal.
Soluções
-
01
A página é o livro
Livro 3D em couro, em Three.js, com relevo por bump map e páginas que curvam no giro
-
02
Um fio de ouro costura os atos
Desenha-se na rolagem e liga os seis atos sem a palavra “seção”
-
03
Edições como envelopes lacrados
Aba em clip-path, lacre em SVG, tablist de verdade por baixo — seta, Home e End funcionam
-
04
Disciplina de tipografia
Display só na marca, títulos, capitular e citação. Parágrafo vai na fonte de corpo
-
05
Três cenas que degradam bem
Poeira de luz, borboletas Bézier e silhuetas em canvas — cada uma só monta se puder
-
06
Painel pro cliente
PHP pequeno que reescreve o HTML; visitante nunca toca em PHP, dados ficam fora da raiz
A porta de entrada: o herói que abre o livro
A versão antiga ficou obsoleta
A página anterior era uma estrutura espalhada em páginas diferentes. Isso saía da intenção que a marca tinha — encantar no primeiro momento — e do foco em conversão que a página precisava ter. Um usuário muitas vezes já qualificado, que chegava da bio do Instagram querendo ir ao próximo baile, demorava a entender onde comprar o ingresso.
A versão nova junta tudo numa home só e na ordem certa: a porta, o próximo baile com o ingresso, as edições passadas e a galeria — a história primeiro, a compra no lugar em que a pessoa já está convencida.
Micro vitórias de UX
Tablist de verdade por baixo
role="tab" / tabpanel: seta, Home e End funcionam; sem JS o capítulo I fica aberto
A seção não muda de altura na troca
Painéis na mesma célula de grid; hidden tira da árvore de acessibilidade sem tirar o espaço
O maço roda em círculo
Cópia do conjunto de cada lado, scrollLeft volta sem animação; nada anda sozinho
Setas somem quando não há o que paginar
Com folga de 8 px, porque calc((100% - vão)/2) sobrava 3 px e ligava as setas à toa
Nenhuma virada de seção termina em linha reta
Halo com overflow-x: clip, foto com mask-image, largura de tela em vez de 120vw
Três cenas que só montam se puderem
Elemento existe, há WebGL, movimento reduzido desligado, a pessoa já entrou; falhou, a página roda sem a camada
O painel do cliente
Os donos do evento editam tudo sozinhos
Os donos do evento criam e editam todo o conteúdo do próximo baile por conta própria — nome, data, convite, arte, link do ingresso, as edições passadas e a galeria — sem tocar em código e sem me chamar. O que mudar ali entra na home na hora.
Segurança que não pesa no site
Cada pessoa tem conta própria, com senha e código de aplicativo. Os dados do painel ficam fora do alcance de qualquer visitante, e o site público continua estático, leve e sem porta aberta — o painel protege sem comprometer a estrutura.
Resultados
8 → 0
páginas fora do ar antes e depois — e uma home que conta a história, convida e vende o baile que existe
O funil voltou: da bio do Instagram direto pro baile
Isto é a home. O resto do sitemap segue o mesmo conceito e ainda não foi construído: em sete páginas o template compartilhado passa a valer e a decisão de stack é refeita. Se a v2 foi ao ar em booknookeventos.com, o “0” passa a ser medido — a confirmar.
Veja funcionando
A página inteira, dentro do portfólio — carrega do começo quando você pedir, porque a abertura faz parte do projeto. Os links de compra e de contato estão desativados nesta cópia.
