GratuitoBarbearia★★★★★

Barbearia Bravus

Atmosfera cinematográfica com scroll coreografado.

HTMLCSSJSGSAPLenis
Ver preview ao vivo ↗

Conceito

Sobre o projeto

Experiência cinematográfica com transições coreografadas e linguagem visual masculina premium. O ritmo do scroll conduz narrativa de autoridade e estilo.

Identidade visual

Paleta

background

#0f0f0f

primary

#d61c1c

accent

#f5f5f5

muted

#b3b3b3

Display

Chakra Petch

Corpo

Montserrat

Entregáveis

O que está incluído

  • ✓Preview ao vivo do projeto publicado
  • ✓Conceito de design + paleta + tipografia
  • ✓Prompt universal mestre
  • ✓Mapa de seções detalhado
  • ✓Especificação de implementação + animações
  • ✓Lista de assets necessários
  • ✓Checklist de QA para fidelidade visual
  • ✓Nota de personalização por nicho

Blueprint completo

Pacote técnico

Versão: v1.0 · Abril 2026

Mapa de seções

  • Header com navegação compacta
  • Hero de impacto com CTA central
  • Sequência cinematográfica por scroll
  • Serviços com destaque de ticket
  • Equipe e prova social
  • Contato com mapa e WhatsApp

Implementação

  • Estruturar sequência de hero + portal scroll em wrapper dedicado para controle de pinning.
  • Seção de serviços com cards de preço e destaque de oferta principal.
  • Equipe com cards e estados hover para redes sociais.
  • Contato com mapa embutido e CTA WhatsApp em destaque.

Animações

  • Preloader com progress bar e saída vertical (0.8s).
  • Sequência cinematográfica em três frames com GSAP ScrollTrigger.
  • Reveal de cards com offsets direcionais por seção.
  • Cursor customizado apenas em dispositivos pointer:fine.

Prompt universal mestre

Crie um website de barbearia premium de página única (single-page) para '[NOME_BARBEARIA]' com estética dark cinematográfica. Arquitetura: HTML + CSS + JavaScript vanilla + GSAP 3 + Lenis (scroll suave). Estrutura do arquivo: index.html + assets/css/styles.css + assets/js/main.js.

LIBS VIA CDN (adicione no final do body antes de main.js):
gsap@3.14.1/dist/gsap.min.js
gsap@3.14.1/dist/ScrollTrigger.min.js
swiper@12/swiper-bundle.min.js
lenis@1/dist/lenis.min.js
remixicon 4.6.0 (no <head>)

FONTES GOOGLE (no <head>): Chakra Petch (400, 500, 700) | Montserrat (300..900 + italic) | Playfair Display (400, 400 italic)

---

1. TOKENS DE DESIGN — adicione no início do styles.css:
:root {
  --first-color: #d61c1c; --first-color-alt: #b31717;
  --first-color-glow: rgba(214, 28, 28, 0.3);
  --body-color: hsl(0, 0%, 6%);
  --container-color: hsl(0, 0%, 10%);
  --title-color: hsl(0, 0%, 95%);
  --text-color: hsl(0, 0%, 70%);
  --text-color-light: hsl(0, 0%, 55%);
  --glass-bg: hsla(0, 0%, 10%, .7);
  --glass-border: hsla(0, 0%, 100%, .1);
  --border-color: hsla(0, 0%, 30%, .4);
  --body-font: "Montserrat", sans-serif;
  --second-font: "Chakra Petch", sans-serif;
  --serif-font: "Playfair Display", serif;
  --transition-fast: .3s ease;
  --transition-smooth: .5s cubic-bezier(.4, 0, .2, 1);
}
body { background: var(--body-color); color: var(--text-color); font-family: var(--body-font); overflow-x: hidden; }
h1,h2,h3,h4 { font-family: var(--second-font); font-weight: 700; color: var(--title-color); line-height: 120%; }
.container { max-width: 1120px; margin-inline: 1.5rem; }
.section { padding-block: 5rem 1rem; }

2. PRELOADER:
.preloader { position:fixed; inset:0; z-index:9999; background:var(--body-color); display:flex; align-items:center; justify-content:center; }
Dentro: logo PNG (400px max 75vw) + barra abaixo (margin-top 2.5rem).
Logo: animation preloader-breathe 2.5s ease-in-out infinite — scale 1↔1.05 + filter drop-shadow(0 0 20px→50px rgba(214,28,28,0.3→0.6)).
Barra: 180×2px, bg rgba(255,255,255,0.08), overflow-hidden. Preenchimento interno: linear-gradient(90deg, #d61c1c, #ff6b6b), animation preloader-fill 2s ease-in-out forwards (width 0%→100%).
Saída: .preloader--hide { animation: preloader-exit 0.8s cubic-bezier(.4,0,.2,1) forwards } — translateY(-100%).

3. CURSOR CUSTOMIZADO (pointer:fine — desativar em touch):
Dois divs fixed pointer-events-none z-[9998]: .cursor-dot (8×8px, border-radius 50%, bg #d61c1c) + .cursor-outline (36×36px, border-radius 50%, border 1px solid rgba(214,28,28,0.5)).
Dot: segue mouse imediatamente (mousemove). Outline: lerp 0.12 em requestAnimationFrame.
Hover sobre a/button: dot scale 1.6 + outline scale 1.4, transition 0.2s.

4. HEADER (.header):
position:fixed; width:100%; top:0; left:0; z-index:1000.
Padrão: background transparent.
Classe .scroll-header (JS: scrollY > 80):
  .scroll-header::before { position:absolute; inset:0; background:var(--glass-bg); backdrop-filter:blur(16px); z-index:-1 }
  .scroll-header::after { position:absolute; bottom:0; left:0; width:100%; height:1px; background:linear-gradient(90deg, transparent, var(--first-color), transparent); background-size:200% 100%; animation:header-shimmer 3s ease-in-out infinite }
@keyframes header-shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
Logo (.nav__logo): Chakra Petch 700, letter-spacing 3px, cor branca. Hover: cor #d61c1c.
Links (.nav__link): Chakra Petch, small, weight 500, letter-spacing 2px, MAIÚSCULAS, cor var(--text-color). Hover/ativo: cor #d61c1c. Sublinhado animado: ::after { height:2px; bg:#d61c1c; width 0→100% no hover }.
Mobile (<1150px): .nav__menu { position:fixed; top:0; right:-100%; width:80%; height:100vh; padding:6rem 3rem 0; background:var(--body-color); border-left:1px solid var(--glass-border); transition:right var(--transition-smooth) }. .show-menu { right:0 }.

5. HERO (.home):
position:sticky; top:0; height:100vh; overflow:hidden.
Imagem de fundo (.home__bg-img): absolute inset-0, object-cover, filter:brightness(0.65).
Overlay lateral (.home__bg::after): linear-gradient(105deg, rgba(10,8,3,0.78) 0%, rgba(10,8,3,0.5) 40%, rgba(10,8,3,0.2) 65%, transparent).
Fade inferior (.home::after): absolute bottom-0, height:180px, linear-gradient(to top, #000 0%, transparent).
Grain (.home::before): SVG fractalNoise inset-0, opacity:0.03.
Título (.home__title): linear-gradient(135deg, #fff 0%, #d61c1c 50%, #b31717 100%) text-gradient; letter-spacing:4px; line-height:110%; mobile: clamp(2rem,8vw,3.5rem).
Descrição (.home__description): cor hsl(0,0%,85%), max-w 540px, line-height:170%; text-shadow: 0 1px 4px rgba(0,0,0,0.9), 0 2px 16px rgba(0,0,0,0.7).
Logo flutuante (.home__logo): 350px, filter:drop-shadow(0 0 50px rgba(214,28,28,0.3)); @keyframes floatLogo { 0%,100%{translateY(0)} 50%{translateY(-15px)} } 6s ease-in-out infinite.
Botão (.button): linear-gradient(135deg, #d61c1c, #b31717); Chakra Petch 700, small, letter-spacing:2px, maiúsculas; padding:1rem 2rem; rounded 0.5rem; box-shadow:0 4px 24px rgba(214,28,28,0.3); hover: translateY(-3px) shadow 0 8px 32px rgba(214,28,28,0.3).
Brilho botão (.button::before): left:-100%→100% transition 0.7s ease; linear-gradient(90deg, transparent, hsla(0,0%,100%,.3), transparent).

6. WRAPPER HERO+SEQUÊNCIA (.hero-sequence-wrapper):
Envolva .home E .apple-sequence-wrapper juntos em div.hero-sequence-wrapper (sem CSS próprio, apenas contêiner).
.apple-sequence-wrapper { position:relative; height:460vh; margin-top:-100vh; z-index:2 } (mobile:650dvh).
.apple-sequence { position:sticky; top:0; height:100vh; background:#000; overflow:hidden; clip-path:circle(0% at 50% 100%); will-change:clip-path }.
Canvas (.apple-sequence__bg-canvas): absolute inset-0, 100%×100%, will-change:contents. Carregue via JS um array de frames PNG em public/assets/video-frames/ (nomeados 0001.png a 0090.png ou similares). No ScrollTrigger onUpdate, calcule o índice do frame pela porcentagem do scroll e desenhe no canvas via ctx.drawImage.
Overlay (.apple-sequence__bg-overlay): absolute inset-0; radial-gradient(ellipse 100% 100% at 50% 50%, transparent 35%, hsla(0,0%,6%,0.7) 60%, var(--body-color) 90%) + box-shadow:inset 0 0 100px 60px var(--body-color).
3 frames de texto (.apple-sequence__frame): position absolute, centralizados, opacity:0 por padrão.
  Frame 1: eyebrow "ARTE · PRECISÃO · TRADIÇÃO" + headline "A arte da <em>precisão</em>". Headline em: gradient metálico linear-gradient(135deg, #fff 0%, #c4c4c4 40%, #fff 80%) text-gradient.
  Frame 2: 3 estatísticas ("+5.000 Clientes Satisfeitos | 7+ Anos de Tradição | 4 Barbeiros Experts"). Divisores: w-1px h-70px bg:linear-gradient(180deg, transparent, #d61c1c, transparent) opacity:0.35.
  Frame 3: ornamento ✦ + tagline "ONDE CADA CORTE É UMA <strong>OBRA-PRIMA</strong>". Strong .tagline-big: Playfair Display italic clamp(2.8rem,10vw,4.5rem); background:linear-gradient(135deg, #d61c1c 0%, #ff4545 25%, #fff 50%, #ff4545 75%, #d61c1c 100%) background-size:200% auto; @keyframes bloodShine { 0%{bg-pos:200% center} 100%{bg-pos:-200% center} } 5s linear infinite.
JS ScrollTrigger scrub:1 para clip-path e fade dos frames. Barra de progresso no rodapé (3px, linear-gradient(90deg, #d61c1c, #ff6b6b)).

7. SOBRE (.about):
Parallax: background-image url('...'), background-attachment:fixed, position:relative.
Overlay escuro: ::before rgba(0,0,0,0.45); ::after degradê top 350px de --body-color para transparent.
Duas colunas em desktop: dados (texto, counters, CTA) + imagem com frame decorativo.
Rótulo (.about__eyebrow): Chakra Petch, smaller size, letter-spacing:4px, MAIÚSCULAS, cor #d61c1c.
Descrição: font-family var(--serif-font), font-style:italic, line-height:180%.
Números: Chakra Petch 700, big size, cor #d61c1c, text-shadow:0 4px 16px rgba(0,0,0,0.8). Divisor: w-1px h-56px linear-gradient(180deg, transparent, #d61c1c, transparent) opacity:0.35.
Imagem: border-radius:1rem; box-shadow:0 0 40px rgba(214,28,28,0.3), 0 8px 30px rgba(0,0,0,0.4). Frame decorativo (.about__img-frame): inset:-10px, border:1px solid #d61c1c, opacity:0.18→0.35 no hover.
Badge sobre a imagem: "BRAVUS / BARBEARIA PREMIUM"; bg rgba(10,8,3,0.82) backdrop-blur(10px) border rgba(214,28,28,0.35) border-radius:2rem.
Reveal: .about__data { transform:translateX(-60px); opacity:0 → visible:opacity:1 translateX(0) 0.65s ease }.

8. TRABALHOS (.work) — galeria Swiper:
Swiper horizontal, loop:true, slidesPerView 1.2 (mobile) / 2.5 (768px) / 3.5 (1150px+), spaceBetween 16, grabCursor:true.
Card (.work__card): border-radius:1rem, overflow:hidden; hover: border-color rgba(214,28,28,0.3), box-shadow:0 0 20px rgba(214,28,28,0.12).
Imagem: height:350px, object-cover; hover: scale(1.08) brightness(0.65) transition 0.5s.
Overlay: linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.78) 100%).
Tag (.work__tag): bg #d61c1c, Chakra Petch 700, smaller, letter-spacing:1.5px, MAIÚSCULAS, padding:.35rem .9rem, rounded .35rem; hover: translateY(-3px) shadow 0 4px 20px rgba(214,28,28,0.45).
Botões de navegação: 48×48px circle, bg:var(--container-color), border:var(--border-color); hover: bg:#d61c1c, border:#d61c1c, shadow:0 4px 20px rgba(214,28,28,0.3).

9. SERVIÇOS (.service) — parallax-bg:
5 cards de serviço em coluna (desktop: 2 colunas: lista + testimonials).
Card (.service__card): padding:1.6rem 2rem; background:rgba(10,8,3,0.35); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.05); border-left:3px solid #d61c1c; border-radius:.75rem.
Hover: translateY(-4px) translateX(4px); box-shadow:0 0 20px rgba(214,28,28,0.3), 0 4px 16px rgba(0,0,0,0.3).
Ícone: 48×48px, linear-gradient(135deg, #d61c1c, #b31717), rounded .5rem, cor fundo da barbearia.
Preço: Chakra Petch 700, h2 size, cor #d61c1c.
Card em destaque (.service__card--featured): border:#d61c1c, box-shadow:0 0 0 1px rgba(214,28,28,0.3). Badge "POPULAR": bg:#d61c1c, Chakra Petch 700, 0.625rem, abs top-.5rem right-.75rem.
Serviços padrão (substitua pelos reais): CORTE ADULTO R$60 | CORTE INFANTIL R$35 | BARBA COMPLETA R$45 | PEZINHO R$25 | CORTE + BARBA R$90 (POPULAR).
Testimonials (.service__testimonials): bg:var(--container-color), border:var(--border-color), border-radius:1rem, padding:2rem. Swiper de 3 depoimentos com paginação — bullet ativo: bg:#d61c1c, width:24px, border-radius:4px.

10. BARBEIROS (.expert):
Grade 2 colunas (mobile) / 4 colunas (1150px+).
Card (.expert__card): overflow:hidden, text-align:center; hover: translateY(-8px), box-shadow:0 10px 30px rgba(0,0,0,0.5).
Foto: object-cover. Ao hover: scale(1.05) 0.5s ease.
Overlay glow: linear-gradient(to top, rgba(214,28,28,0.25), transparent 60%); opacity:0→1 no hover 0.3s.
Overlay social (.expert__overlay): absolute inset-0, flex itens centralizados; ícones LinkedIn + Instagram + Facebook em #d61c1c, opacity:0→1 no hover.
Nome (.expert__name): Chakra Petch 700. Cargo (.expert__profession): text-color-light, smaller, letter-spacing.
Barbeiros padrão: Jonh Deep (Mestre Barbeiro) | Max Pell (Estilista Sênior) | João Silva (Barbeiro) | Carlos Mendes (Barbeiro).

11. CONTATO (.contact):
2 colunas (desktop): CTA+mapa | info.
Botão WhatsApp: .button.button--whatsapp; texto "Agende Via WhatsApp <ícone>".
Mapa: Google Maps iframe 100% width, height:300px, border-radius:1rem, border:0.
3 unidades com endereço + telefone + horário. Ícones RemixIcon.
Horário geral: Seg-Sáb 9h-20h | Dom 9h-18h.

12. RODAPÉ (.footer):
4 colunas: brand (logo + descrição + e-mail) | menu | fale conosco | redes sociais.
Redes: Facebook, Instagram, X, YouTube. Copyright: © [ano] [NOME_BARBEARIA].

13. ANIMAÇÕES REVEAL (IntersectionObserver):
.reveal { opacity:0; transform:translateY(22px); transition:opacity 0.65s ease, transform 0.65s ease }
.reveal.visible { opacity:1; transform:translateY(0) }
About data: translateX(-60px) em vez de Y.

14. MÍDIAS OBRIGATÓRIAS: pasta public/assets/video-frames/ com frames PNG sequenciais (mín. 60 frames) para a sequência cinematográfica; hero-barbearia.png 1920×1080; 10+ work-img-N.png de trabalhos realizados; logo-sem-fundo.png + favicon.png; backgrounds/background-1.png para parallax; expert-img-N.png fotos dos barbeiros.

15. PERSONALIZE: substitua [NOME_BARBEARIA], #d61c1c pela cor da marca, endereços e telefones reais, WhatsApp real (api.whatsapp.com/send?phone=55...), fotos reais da equipe e trabalhos, preços reais.

Assets necessários

  • ObrigatórioFrames da sequência: Conjunto de imagens para canvas/scroll sequence
  • ObrigatórioFotos de trabalhos: Galeria de cortes e barbas (mínimo 10)
  • ObrigatórioLogotipo: PNG transparente e versão compacta

Checklist de QA

  • Validar suavidade da sequência em desktop e fallback adequado em mobile.
  • Checar legibilidade de texto sobre imagem em todos os breakpoints.
  • Confirmar funcionamento de CTA WhatsApp em iOS e Android.

Nota de personalização

Atualize preços e localização. Mantenha a hierarquia visual e o contraste forte para preservar percepção premium.

Código-fonte

Repositório do projeto

Clone, rode localmente e adapte para o cliente. Use como base para qualquer projeto do nicho.

Repositório privado
Verificando acesso…

Explore também

Blueprints relacionados

Automotivo

Aura Motors V2

Showroom automotivo dark-premium com hero cinematográfico e inventário filtrável.

Ver blueprint →

Alimentação

Aura Burger

Identidade urbana para food brand premium.

Ver blueprint →