Vamos conversar

Best Foe

Uma experiência digital que traduz a intensidade do hardcore em identidade, movimento e presença online.

Cliente
Best Foe · João Pessoa (PB)
Escopo
Direção criativa · Web design · UX/UI · Creative development · Motion
Ano
2026

Desenvolvido por Tatuí Tech e apresentado com autorização da banda.

Site da Best Foe em notebook e celular

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

  1. Hero

    Vídeos dos shows com filtro vermelho, título manifesto, player do Spotify e o diabo da capa animado ao lado.

  2. Pré-loader

    O botão de entrada toca a introdução de “Warning”, e o EP segue sozinho no player oficial do Spotify.

  3. Capa interativa

    Um shader WebGL faz as cores da capa saírem do registro, como numa impressão serigráfica, e seguirem o cursor.

  4. Ao vivo

    Catorze fotos de dois shows num grid editorial, com lightbox navegável pelo teclado.

  5. 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.

Sistema visual: cores, tipografia Archivo e IBM Plex Mono e a direção de cartaz
Arte do EP de Daniel Ete com o diabo que sai da capa

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.

Hero do site da Best Foe no desktop, em tamanho real
Hero do site com vídeo dos shows em vermelho, título manifesto e player do Spotify
Pré-loader do site no celular, com o botão Entrar com som
Seção do EP Hardcore Is Not Dead com a capa interativa e a lista de faixas
Seção Ao vivo com o grid de fotos dos shows
Agenda com o próximo show e o contato da banda
Filme do projeto, gravado com o site real em funcionamento. Trilha instrumental gerada para o filme; não usa músicas da banda.

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.

Quatro telas do site no celular
Hero do site no celular
Seção do EP no celular, com a capa e a lista de faixas
Agenda e contato no celular

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.
Visitar o site

bestfoehc.com (abre em nova aba)

Outros projetos

Ver todos os projetos