Uma academia de baseball com a Seleção Brasileira no elenco — e uma página à altura
Plataforma de formação em baseball com atletas da Seleção Brasileira que atuam no Japão. A página tinha que fazer o valor do curso ser percebido antes de qualquer promessa — então o campo virou o layout.
Herói, escalação e planos: as três dobras que carregam a venda. Recortes sem fundo: a pedir.
Escopo do projeto
A Prospect Academy é uma plataforma de formação e aprendizado pra jovens que querem melhorar no baseball — por amor ao esporte ou por carreira profissional — com professores e atletas que atuam no Japão e representam a Seleção Brasileira. O produto é uma comunidade de treinamento em vídeo com três níveis e mentoria direta no topo, do Vitor Ito: shortstop da Seleção, elenco do World Baseball Classic.
O objetivo era simples: trazer pra página toda a credibilidade que esses professores já têm, com o know-how da jornada deles transformado em conteúdo prático e aplicável — e uma sensação premium que faz o valor do curso ser percebido não só por quem ele é, mas pelo que ele aparenta ser. Saímos de um layout simples em HTML pra um modelo dinâmico, interativo, que engaja desde o início e guia a pessoa numa experiência que remete ao esporte em toda seção: da bola de baseball da abertura à escalação e aos planos.
Papel
Product Designer & Front-end
Auditoria da página original, conceito, direção de arte e o front inteiro, sem build — abre com duplo clique, de propósito, pra o cliente editar sem toolchain. As rodadas de revisão aconteceram em agosto de 2026 (o caso publicado diz quatro; a nota do cliente registra dez — a decidir).
Desafios
O que a página anterior deixava na mesa:
-
01
A prova mais forte, jogada fora
Atletas da Seleção como quatro fotinhos de 140 px — sem posição, camisa ou clube
-
02
Planos duplicados
O bloco de planos aparecia duas vezes, idêntico: ~1.200 palavras repetidas
-
03
Dois checkouts pro mesmo plano
Cedo ou tarde alguém mede o errado
-
04
Fundamentos em triplicata
Um carrossel do Elementor renderizando o mesmo texto três vezes
-
05
Nenhum depoimento
A nota 4,8 em mais de 500 avaliações não apontava pra lugar nenhum
-
06
Layout de template
Seções empilhadas de largura igual, sem escala — baseball só no assunto, nunca na forma
Soluções
-
01
A abertura é uma bola em Three.js
Costura em canvas, girando até a tela; no impacto a cortina abre e o herói aparece
-
02
A escalação é o campo visto de cima
SVG com cada atleta na posição que joga. Clicar abre a ficha. “Você” está no home plate
-
03
Os planos são as bases
Primeira base é o Básico, terceira é o VIP, home plate é o VIP Black — no centro, onde a corrida fecha
-
04
Placar, fita rolante, costura
Números num placar de estádio, aulas numa fita, a costura da bola como fio condutor
-
05
Ausência declarada, nunca chute
Dois atletas sem posição registrada: a ficha diz isso em vez de inventar
-
06
Corrida pelas bases por scroll
Sticky nativo depois que o pin do GSAP introduziu um salto — medido, não suposto
O herói da página: o LED, a Seleção em escala e a bola em Three.js
O que as rodadas de revisão mudaram: a copy e a postura da página
A página anterior era truncada: formas sem consistência entre si e três blocos de planos repetidos, um atrás do outro, separados por uma seção só. Tudo nela queria vender — e o efeito era o contrário: dava um ar de desespero que puxava pra baixo a percepção de um produto que tem a Seleção Brasileira no elenco.
As rodadas de revisão trocaram essa abordagem por algo pontual e intencional. A oferta aparece uma vez, no lugar certo da corrida — as bases —, e o resto da página constrói o valor antes de pedir qualquer coisa: quem ensina, o que se aprende, os números da comunidade. A copy foi reescrita nesse mesmo espírito: menos “compre agora”, mais “é isso que você entra pra fazer”.
- Três blocos de planos, um atrás do outroUma oferta, no home plate
- Copy de urgência em toda dobraCopy que constrói valor antes de pedir
- Formas e cards sem consistênciaUm sistema: campo, placar, fichas de scout
Micro vitórias de UX
Letra feita de pontos
radial-gradient em grade de 3 px recortado por background-clip: text; brilho por drop-shadow
O til do NÃO
Acento de caixa alta estourava a caixa e saía transparente; padding-block .2em com margem negativa resolve
A bola congela no celular
Abertura roda em todo lugar; o giro contínuo para em ≤ 900 px e com movimento reduzido
CLS de 0,145 pra 0,004
Fallback com métrica casada (size-adjust, ascent-override) em vez de preload, que quebrava sob file://
Ausência declarada
Dois atletas sem posição registrada: a ficha diz isso em vez de inventar
Preço num arquivo só
precos.js alimenta os três cards, os três checkouts e o JSON-LD
O campo como sistema
A escalação é o campo
Campo visto de cima, em SVG, com cada atleta na posição que joga: Vitor Ito no shortstop, Oscar Nakaoshi no monte, Lucas Rojo no quadro interno, Murilo Gouvea no bullpen, Felipe Natel e Pedro Okuda no dugout. Clicar abre a ficha com posição, camisa e mão de rebater ou arremessar. Um marcador é “Você”, no home plate — o time inteiro está em campo por causa do aluno.
Os planos são as bases
Primeira base é o Básico, terceira é o VIP, e o home plate é o VIP Black, desenhado no formato do home plate e no centro da composição, onde a corrida se fecha. O seletor mensal, semestral e anual troca preço e link de checkout; o VIP Black avisa que só existe mensal.
O placar: a comunidade em números
Os números da comunidade — aulas no ar, elenco, nota, reviews, garantia — vivem num placar de estádio: lâmpadas de LED âmbar em grade de 3 px, contagem B/S/O no rodapé e os dígitos que sobem quando a seção entra na tela. É a prova social com a cara do esporte, não uma fileira de métricas genérica.
O style guide: o que sustenta a consistência
O escopo era pequeno — uma página, sem design system — mas a inconsistência da versão anterior mostrava o custo de não ter regra nenhuma. O style guide é o que faz cada dobra parecer parte da mesma coisa: três famílias tipográficas com papel fixo, uma paleta de noite com dois acentos, uma unidade de 8 px pra todo espaço, e os componentes que carregam o esporte na forma, iguais em qualquer seção.
Cores
- Noite#01020Dfundo da página
- Noite 2 e 3#0C1226cartões e superfícies
- Ouro#FFC72Cação principal, LED do placar
- Azul#1F4FFFação secundária, VIP
- Costura#E23744detalhe, seleção de texto
- Gelo#EDF1FFtexto — 18,9:1 sobre a noite
- Gelo médio#AEB9DAtexto de apoio — 9,1:1
- Papel#F4F5F0fichas de scout
Tipografia
- Seja o próximo prospect
- A comunidade em números
- Tudo do Plano Básico mais o grupo fechado no WhatsApp com os atletas da Seleção.
Espaço
Unidade de 8 px. Margem lateral de 20 a 80 px conforme a tela; miolo de 1360 px. Nada de valor solto: todo espaço é múltiplo da unidade.
- 8entre rótulo e número
- 16dentro de cartões
- 24entre cartões
- 40entre blocos
- 64entre seções (mín.)
- 96entre seções (máx.)
Componentes-chave
Botão chanfrado
Cantos cortados por clip-path, caixa alta, sobe 2 px no hover — ouro pra ação principal, azul pro VIP, linha pro secundário.
- 0reviews declaradas
Dígito de LED
Número em grade de pontos de 3 px recortada por background-clip: text, com brilho âmbar. Conta de zero ao entrar na tela.
- ProspectO treinoEscalaçãoPlanosEntrar
Notch de navegação
O menu some ao descer e volta em 0,3 s ao subir, flutuando com vidro escuro e o mesmo chanfro.
- Prospect Academy · Nível 01Construir a baseInicianteFichaVitor ItoShortstop · #7 · rebate D
Ficha de scout
Papel creme, moldura dupla e carimbo; vira no hover pra mostrar posição, camisa e mão de rebater.
Resultados
1 página · 1 ação
assinar um dos três planos — de uma página simples em HTML pra uma experiência que remete ao esporte em toda seção
Mesmo preço, mesmo checkout: o que mudou foi o valor percebido
A família tipográfica é o item em aberto: o cliente está escolhendo uma fonte mais próxima da marca, e trocar mexe em uma folha de estilo e três variáveis. Número de conversão pós-publicação: não medido.
Veja funcionando
A página inteira, dentro do portfólio — carrega do começo quando você pedir, porque a abertura faz parte do projeto. Os links de compra e de contato estão desativados nesta cópia.
