Best Foe
Uma experiência digital que traduz a intensidade do hardcore em identidade, movimento e presença online.
Desenvolvido por Tatuí Tech e apresentado com autorização da banda.

Contexto
A Best Foe é uma banda de hardcore de João Pessoa, na Paraíba. O site oficial foi lançado junto com o EP Hardcore Is Not Dead e reúne o disco, a banda, os shows, os vídeos, a agenda e o contato num só lugar.
A ideia era um site que abrisse no meio do show: alto, direto e feito para o celular, sem virar página institucional.
O que foi feito
Hero
Vídeos dos shows com filtro vermelho, título manifesto, player do Spotify e o diabo da capa animado ao lado.
Pré-loader
O botão de entrada toca a introdução de “Warning”, e o EP segue sozinho no player oficial do Spotify.
Capa interativa
Um shader WebGL faz as cores da capa saírem do registro, como numa impressão serigráfica, e seguirem o cursor.
Ao vivo
Catorze fotos de dois shows num grid editorial, com lightbox navegável pelo teclado.
Agenda e contato
A agenda lê as datas de um único arquivo e esconde o show depois que ele acontece. O contato vai direto para o WhatsApp e o Instagram da banda.
Direção visual
Cartaz colado no poste: a direção vem dos cartazes de show de rua, com papel rasgado, vermelho e preto chapados. Archivo e IBM Plex Mono na tipografia; o logo e a arte do EP, de Daniel Ete, entram como estão.


O site
Do pré-loader com som à agenda, cada seção trabalha como um bloco de cartaz: a capa vira interação, as fotos ao vivo ganham um grid editorial e o próximo show aparece sozinho.






Desktop e celular
Recomposto para o celular, não encolhido: botões centralizados, mini player fixo, agenda com o próximo show e contato direto pelo WhatsApp.




Ficha
- Autoria
- Direção criativa, design e desenvolvimento por Tatuí Tech. Apresentado no portfólio com autorização da banda.
- Arte do EP
- Daniel Ete
- Fotos
- Acervo da Best Foe
- Tecnologia
- Vite, JavaScript, WebGL2 e Spotify iFrame API
- Imagens e filme
- A fumaça do personagem foi animada com IA (Higgsfield, Kling) sobre a arte original, sem alterar o traço. O filme do case usa capturas do site real e trilha instrumental gerada com ElevenLabs Music.
bestfoehc.com (abre em nova aba)
Outros projetos
Ver todos os projetos Natalie Cavalcante2026UX/UI · Web Design · Design System — Site de psicóloga clínica
Fretto2026Estratégia · Design · Software — Plataforma web · Projeto conceito
Ninho2025Design de produto · Marca — App mobile · Projeto conceito
Capital Focus2026Marca · Site · App · Design system — Cliente em Vancouver