Moustache Studio: landing page imersiva para barbearia, com parallax e motion

Projeto conceitual desenvolvido pela ALB Seven. O Moustache Studio não é um cliente real: a barbearia, os barbeiros, o endereço na Savassi, os preços e os números exibidos são fictícios, e o rodapé do site diz isso. O que existe de concreto é a landing page, publicada em mustache.albseven.com, construída para responder a uma pergunta de design: como seria o site de uma barbearia que trata o ofício como arte?

O problema do setor

Site de barbearia costuma ser um template com fotos de banco, tipografia vintage e um botão de agendamento. Funciona, mas não diferencia ninguém. Uma barbearia que cobra por ritual, e não só por corte, precisa que o site transmita o mesmo cuidado com detalhe que a cadeira promete. Ao mesmo tempo, quem acessa está no celular e quer agendar; a estética não pode atrapalhar a navegação nem punir quem prefere menos movimento.

As decisões de projeto

• Dark e industrial, sem clichê vintage. A paleta parte de asfalto e grafite, com off-white no texto e dois acentos: dourado envelhecido e cobre nos marcadores de seção. Playfair Display nos títulos, com itálico nas palavras de destaque, e IBM Plex Mono em rótulos e botões. O par comunica tradição com precisão técnica.
• Um bigode que se desenha. O hero abre com um bigode em SVG traçado por stroke-dasharray. Ao rolar, ele cresce, sobe, desfoca e some, enquanto a foto de fundo desce devagar e o texto desce mais rápido. Nos cantos, uma moldura técnica com etiquetas em mono e, na base, uma faixa de palavras em marquee.
• Parallax em três velocidades. Fundo entre 0,2x e 0,6x, meio a 1x e frente entre 1,1x e 1,4x, aplicado com useScroll e useTransform do Framer Motion. A seção Sobre tem foto em preto e branco com parallax lento e texto revelado linha a linha por máscara.
• Menu de serviços em pilha. Cada um dos seis serviços é um card sticky; o próximo desliza por cima e o de baixo encolhe um pouco, dando profundidade à lista de preços.
• Galeria pinada e cards dos mestres. A galeria trava na tela e o trilho de fotos corre na horizontal conforme o scroll vertical, com cada foto em profundidade diferente e cor só no hover. Os três barbeiros entram em stagger, com parallax interno na imagem e a linha de agenda revelada ao passar o mouse.
• Encerramento em cortina. O CTA final é uma seção fixa revelada por baixo do conteúdo, com botão magnético que acompanha o cursor. O rodapé traz endereço e horário fictícios, mas os contatos são os da ALB Seven, para que o interesse gerado pelo demo chegue à agência.
• Movimento que sabe parar. prefers-reduced-motion é respeitado no CSS global e componente a componente: o desenho do bigode, o cursor customizado e o botão magnético desligam o efeito. O cursor próprio só aparece em ponteiro fino; no toque, vale o cursor nativo. Imagens com alt e loading="lazy".
• Bilíngue. Um dicionário PT/EN em src/lib/i18n.tsx alimenta todas as seções, com a escolha guardada em localStorage e detectada do idioma do navegador na primeira visita.

Stack

React 18 com TypeScript, Vite 6, Tailwind CSS v4 via plugin @tailwindcss/vite (sem arquivo de configuração) e Framer Motion 11. As seções abaixo da dobra são carregadas com lazy e Suspense, em chunks separados, para o hero aparecer antes do resto do bundle. As fotos são placeholders do Unsplash, o que o README do projeto deixa registrado.

O que isso demonstra

Que uma página guiada por scroll pode ter personalidade de editorial e ainda assim ser acessível, leve no primeiro paint e navegável no celular. A barbearia é inventada; o código, as escolhas de motion e a página no ar são reais.