Estudo de caso - Seu gosto musical entrega você.
Quem Botou Essa? transforma a playlist da call em um fichário de suspeitos. Um party game musical em tempo real, na web e em um cliente nativo SwiftUI, conectados à mesma sala.
- Cliente
- Quem Botou Essa?
- Ano
- Serviço
- Design de produto, desenvolvimento web e iOS
Visão geral
Uma playlist. Vários suspeitos.
Em Quem Botou Essa?, de 3 a 12 amigos numa call escolhem músicas em segredo. No modo Clássico, cada preview toca por 30 segundos: o grupo aponta o suspeito, mas só descobre o culpado na revelação. No modo Charada, uma pessoa escreve uma pista, todo mundo responde com uma música, e o grupo ouve 10 segundos de cada carta para achar a de quem deu a pista.
Quem acertou ganha um ponto. Quem escolheu ganha um por acerto — mas fica com zero se todos acertarem. A pontuação inspirada em Dixit incentiva uma escolha que diga algo sobre você sem entregar tudo.
- Quem Botou Essa?
- Sala em tempo real
- Web + iOS nativo
- Motion + Motion+
Processo
Da call ao fichário de suspeitos.
Noir de brincadeira
Palco quase preto, spotlight âmbar e cards creme com grão de risografia. Coral no veredito, lima ácida no voto. Bricolage Grotesque, Geist e Geist Mono dão voz ao fichário.
Uma sala compartilhada
Convex guarda escolhas, votos e pontuação. Presença ao vivo e recuperação pelo mesmo apelido preservam a vaga de quem cai da call, incluindo música e placar.
O jogo no navegador
Next.js 16 leva o grupo da sala à busca no catálogo Apple Music, do preview ao palpite. A autoria da música só chega aos clientes na revelação.
Um cliente nativo em SwiftUI
O app iOS usa convex-swift para entrar na mesma sala da web. Criar, escolher, votar e acompanhar a revelação seguem o mesmo estado do jogo.
O tempo vira vinil
O aro do disco drena os 30 segundos. A agulha sobe ao fechar o voto; o próximo disco entra. Motion e Motion+ coreografam o carimbo, os títulos e a reordenação do placar.
No navegador
Da primeira música ao último carimbo.
Abra a sala
Fila de suspeitos
Escolha em segredo
O tempo é um vinil
Carimbo de culpado
Quem acertou?
Web no celular · iOS nativo
A mesma sala cabe na mão.
As telas abaixo são capturas da web a 390 × 844: lobby, vinil e revelação. A composição se reorganiza para manter os suspeitos e o palpite ao alcance do polegar.
O cliente nativo é feito em SwiftUI sobre o mesmo Convex. Web e iOS participam juntos; no app, o áudio usa AVPlayer, pausa em segundo plano e volta à posição atual do turno.
Suspeitos na mão
Vinil no celular
Veredito no celular
Stack e regras
Convex segura a sala. A música marca o tempo.
Amigos na mesma call, na web ou no iOS
O aro do vinil conta o tempo no Clássico
Um elenco próprio, compartilhado entre web e iOS
who-put-that.mellofattura.com
Tecnologias
- Next.js 16
- Convex
- Motion
- Motion+
- Apple Music API
- SwiftUI
- convex-swift
- Vercel
Convex mantém o estado autoritativo, as transições e a presença. Next.js 16 e SwiftUI são clientes da mesma sala. A busca usa Apple Music API em produção e iTunes no desenvolvimento local. Motion e Motion+ dão ritmo à web, publicada na Vercel.