Sistema 3D Digital

Nunca modelar a marca em 3D · trabalhar o AMBIENTE

O logo, o Brigaderinho, os selos, os adesivos — tudo permanece 2D, original, intocado. O sistema 3D vive ao redor desses elementos: cenários renderizados, sombras realistas, perspectivas, animações suaves.

Por quê? Modelar a marca em 3D real (estilo Pixar/render fotorrealista) descaracteriza. Vira genérico, perde personalidade local, destrói equity. O caminho premium é o oposto: marca 2D viva em ambiente 3D rico.

5 caminhos do 3D · recomendação

Mockup A · Cartão flutuante com sombra realista

Logo sobre cartão que parece flutuar acima da superfície. Hover suaviza a inclinação. Uso: hero de landing pages.

Desde 2015

Passe o mouse para ver o efeito · CSS perspective + transform + filter:drop-shadow

Mockup B · Caixa 3D · embalagem premium digital

Caixa renderizada em 3D com o logo sobre a face frontal. Permite visualizar embalagem premium em landing pages sem precisar fotografar. Uso: página de produto / hero de e-commerce / cardápio digital.

Passe o mouse para ver a caixa rotacionar · CSS 3D · 6 faces · transform-style:preserve-3d

Mockup C · Brigaderinho flutuante com animação

Mascote em animação suave de flutuação · sombra realista projetada · CSS keyframes. Uso: hero de Kit Escolar · seções infantis · funnel hub.

Mascote em animação suave · CSS @keyframes float · drop-shadow realista

Mockup D · Mini Funnel Hub (estilo Linktree premium)

Página vertical mobile-first com links elevados em 3D. Hover eleva ainda mais. Uso: link da bio do Instagram · hub central de todos os canais.

A Divina Brigaderia

Desde 2015 · Confeitaria de festa

Casamento · Aniversário · 15 anos · Corporativo

Fazer orçamento de festa

5-7 min · resposta no WhatsApp

→

Cardápio Bolos e Tortas

22+ sabores · personalizado

→

Combo Mini-Festa

5 a 35 pessoas · R$ 416-1.222

→

Kit Escolar Brigaderinho

Marmita · cup cake personalizado

→

Vem visitar a loja

Endereço · horários · localização

→

Cards 3D com hover elevando · sombras realistas em camadas · estilo Linktree premium

Mockup E · Hero com parallax e profundidade

Foto real da loja como fundo + camada escura + logo branco em 3D. Cria sensação imersiva. Uso: home page · hero de site institucional.

Desde 2015 · Confeitaria de Festa

A confeitaria de família que está aqui há mais de uma década e estará aqui pelos próximos cinquenta anos.

Foto real da loja + overlay escuro + logo branco + sombra realista · CSS background-attachment

A. Cartão 3D flutuante com sombra realista

.scene-3d {
  perspective: 1200px;
  perspective-origin: 50% 50%;
}
.card-3d {
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform: rotateX(8deg) rotateY(-12deg);
}
.card-3d:hover {
  transform: rotateX(2deg) rotateY(-4deg) scale(1.02);
}
.shadow-realistic {
  filter:
    drop-shadow(0 30px 30px rgba(89,58,56,0.25))
    drop-shadow(0 10px 10px rgba(230,59,122,0.15));
}

B. Brigaderinho flutuante (animação)

.floating {
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-12px) rotate(2deg); }
}

C. Link 3D com hover elevando (Funnel Hub)

.hub-link {
  background: white;
  border-radius: 12px;
  padding: 20px 28px;
  display: flex; align-items: center; justify-content: space-between;
  box-shadow:
    0 4px 12px rgba(61,40,38,0.08),
    0 1px 3px rgba(61,40,38,0.05);
  transition: all 0.3s;
  transform-style: preserve-3d;
}
.hub-link:hover {
  transform: translateY(-3px) translateZ(8px);
  box-shadow:
    0 12px 28px rgba(61,40,38,0.15),
    0 4px 8px rgba(61,40,38,0.08);
}

D. Caixa 3D · 6 faces rotacionável

.box-3d {
  width: 280px; height: 280px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-20deg) rotateY(35deg);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.box-face {
  position: absolute;
  width: 280px; height: 280px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 60px rgba(0,0,0,0.15);
}
.box-front  { transform: translateZ(140px); background: #3D2826; }
.box-back   { transform: translateZ(-140px) rotateY(180deg); background: #593A38; }
.box-right  { transform: rotateY(90deg) translateZ(140px); background: #2D1E1C; }
.box-left   { transform: rotateY(-90deg) translateZ(140px); background: #2D1E1C; }
.box-top    { transform: rotateX(90deg) translateZ(140px); background: #4B2F2D; }
.box-bottom { transform: rotateX(-90deg) translateZ(140px); background: #1A1212; }

Princípios não-negociáveis do 3D

• ❌ Nunca modelar o logo em 3D real (Blender, Cinema 4D)
• ❌ Nunca transformar o Brigaderinho em personagem 3D estilo Pixar
• ❌ Nunca usar 3D agressivo que distraia da marca (rotações exageradas · partículas)
• ❌ Nunca usar 3D em peças impressas (papelaria fica plana, sempre)
• ✅ Sempre a marca (logo, Brigaderinho) permanece 2D · ambiente é 3D
• ✅ Sempre sombras realistas, não digitais artificiais
• ✅ Sempre animações suaves (ease-in-out · 0.6s+)
• ✅ Sempre performance primeiro (testar em mobile antes de aprovar)

Próximo passo · Brandbook-D em ação

Este documento é o manual de princípios. A próxima etapa é colocar em prática · começamos pela aplicação que você priorizar:

• · Funnel Hub (1 sessão) — recomendado · ativo rápido + Instagram → tudo
• · Landing Page de Orçamento (2-3 sessões) — motor de venda já desenhado na Fase 1
• · Cardápio Digital (2-3 sessões) — moderniza os 7 PDFs atuais
• · Site Institucional (5-7 sessões) — presença completa

Manda qual quer atacar primeiro · eu construo direto em HTML/CSS com o sistema 3D aplicado.