Estudo de caso - Produto web completo + uma experiência mobile desenhada do zero
Gol Contra de ponta a ponta: o jogo web inteiro mais uma experiência mobile separada, desenhada para o celular. Convex, Next.js, Motion e GSAP.
- Cliente
- Own Goal
- Ano
- Serviço
- Produto em Tempo Real, UI de Jogo, Experiência Mobile
Visão geral
Gol Contra, o produto inteiro
Own Goal / Gol Contra é um jogo de dedução social em tempo real sobre futebol e manipulação de resultado. Levante a taça com vitórias limpas, ou entregue o clube para a máfia sem ninguém perceber.
A gente construiu a experiência web inteira e a experiência mobile inteira. Convex para a sala ao vivo, Next.js para o produto, Motion e GSAP para a noite de jogo. O mobile foi inventado para a mão, e não redirecionado do desktop para uma tela menor.
Processo
Como a gente entregou
Game design → produto
Dedução social no vestiário: os jogadores leais perseguem cinco vitórias limpas; a máfia precisa de seis jogos manipulados. Capitão → escalação → voto secreto → tática.
Tempo real no Convex
Salas, presença, papéis secretos, votos e a súmula da partida vivem todos no Convex, que dá sincronização reativa para 5 a 10 jogadores sem uma stack de socket própria.
Experiência web completa
Construímos o produto web inteiro em Next.js: landing, sala, escalação, votação, prancheta, dossiê e súmula, com o Motion conduzindo a coreografia de estados.
Mobile do zero
Nova arquitetura de informação e novas interações, pensadas primeiro para o polegar — cada ação precisa merecer o espaço no celular em vez de herdá-lo do desktop.
Motion + GSAP
Motion para presença de interface e layout compartilhado. GSAP para as sequências mais pesadas: viradas de papel, revelações de voto e as transições de fase que dão clima de noite de jogo.
Web
O jogo web completo
Tela inicial
Vestiário
Escalação
Votação
Dossiê · Prancheta · Súmula
Mobile · do zero
Uma segunda superfície de produto, feita para o celular
O mobile foi desenhado do zero para não virar um redirecionamento das ações de desktop numa tela pequena. Nova arquitetura de informação, novos padrões de interação, a mesma sala do Convex.
Navegação inferior, aprovar e rejeitar ocupando a tela toda, revelação confidencial de papel e anéis de trilha feitos para uma mão só. Cada controle precisa merecer o espaço no celular.
Revelação de papel
Votação mobile
Trilhas
Stack e prova
Convex para a sala. Motion para a noite.
Presença ao vivo sincronizada pelo Convex
Trilha do título para o elenco leal
Trilha da manipulação para a máfia
own-goal.mellofattura.com
Tecnologias
- Next.js
- Convex
- Motion
- GSAP
- React
- TypeScript
- Tailwind
- Vercel
O Convex é dono do estado autoritativo do jogo: salas, papéis, votos e trilhas. O Next.js entrega as duas superfícies que construímos, o jogo web completo e a experiência mobile desenhada do zero. O Motion cuida da presença de interface; o GSAP assume as batidas cinematográficas mais longas.