Case Study - Full web product + a mobile experience designed from zero
Gol Contra end to end: the complete web game plus a separate mobile experience designed for the phone. Convex, Next.js, Motion, and GSAP.
- Client
- Own Goal
- Year
- Service
- Realtime Product, Game UI, Mobile Experience
Overview
Gol Contra, the whole product
Own Goal / Gol Contra is a realtime social deduction game about football and match-fixing. Raise the trophy with clean wins, or hand the club to the mafia without anyone noticing.
We built the entire web experience and the entire mobile experience. Convex for the live room, Next.js for the product, Motion and GSAP for the night. Mobile was invented for the hand rather than redirected from the desktop into a smaller frame.
Process
How we shipped it
Game design → product
Social deduction in a locker room: loyal players chase five clean wins; the mafia needs six fixed matches. Captain → lineup → secret vote → tactics.
Realtime on Convex
Lobbies, presence, secret roles, votes, and the match log all live in Convex, which gives reactive sync for 5 to 10 players without a custom socket stack.
Full web experience
We built the complete web product in Next.js: landing, lobby, escalação, voting, clipboard, dossiê, and súmula, with Motion running the state choreography.
Mobile from zero
A new information architecture and new interactions, built thumb-first so every action has to earn its place on a phone instead of inheriting one from the desktop.
Motion + GSAP
Motion for UI presence and shared layout. GSAP for the heavier sequences: role flips, vote reveals, and the phase transitions that feel like match night.
Web
The complete web game
Landing
Vestiário
Escalação
Votação
Dossiê · Prancheta · Súmula
Mobile · from zero
A second product surface, built for the phone
Mobile was designed from scratch so it would not become a redirect of desktop actions onto a small screen. New information architecture, new interaction patterns, same Convex room.
Bottom navigation, full-bleed approve and reject, a confidential role reveal, and track rings built for one hand. Every control has to earn its place on the phone.
Role reveal
Votação mobile
Trilhas
Stack & proof
Convex for the room. Motion for the night.
Live presence synced through Convex
Title track for the loyal squad
Manipulation track for the mafia
own-goal.mellofattura.com
Technologies
- Next.js
- Convex
- Motion
- GSAP
- React
- TypeScript
- Tailwind
- Vercel
Convex owns the authoritative game state: lobbies, roles, votes, and tracks. Next.js ships both surfaces we built, the full web game and the mobile experience designed from zero. Motion handles UI presence; GSAP takes the longer cinematic beats.