PTENES
Blackout Smartphone

A cidade inteirana palma da mão.

Um celular completo que dá vida ao roleplay.

Um celular inteiro dentro do GTA RP, 46 apps, conversando com o servidor em tempo real.

Dentro do jogoTempo realBrasil + Los Santos

  • React 18
  • Vite 5
  • Zustand 4
  • Tailwind CSS 3
  • JavaScript (JSX)
  • FiveM NUI
Blackout Smartphone

A cidade inteirana palma da mão.

Um celular completo que dá vida ao roleplay.

  • React 18
  • Vite 5
  • Zustand 4
  • Tailwind CSS 3
  • JavaScript (JSX)
  • FiveM NUI

Um celular inteiro dentro do GTA RP, 46 apps, conversando com o servidor em tempo real.

Dentro do jogoTempo realBrasil + Los Santos

  • React 18
  • Vite 5
  • Zustand 4
  • Tailwind CSS 3
  • JavaScript (JSX)
  • FiveM NUI

PortfólioBlackout Smartphone

O que é

Um celular inteiro, dentro do GTA RP.

Não é um menu com botões: é um sistema operacional em React que abre por cima do jogo, tela inicial, central de controle, notificações e 46 apps, do banco digital ao Orkut, conversando com o servidor em tempo real.

  1. 01O jogador puxa o celular
  2. 02Abre um dos 46 apps
  3. 03O app conversa com o servidor
  4. 04O aviso chega sozinho

A escala

Por trás da tela de vidro, um sistema inteiro.

Contado no código do celular: o sistema, os apps, a ponte com o jogo e o estado que liga tudo.

17.791

linhas de código

  • React 18
  • Vite 5
  • Zustand
  • Tailwind CSS
Sistema
Casca do aparelho, Dynamic Island, tela inicial em duas páginas, central de controle e notificações.
Apps
Cada app é um componente próprio, aberto a partir de um registro único, entrar um app novo é uma linha.
Ponte com o jogo
Um canal só para falar com o FiveM: 65 operações de ida e 15 eventos de volta, em tempo real.
Estado
Zustand guarda o celular inteiro, apps abertos, avisos, ajustes, e a ligação em curso num estado à parte.

46

apps na tela inicial

  • Conversa
  • Redes
  • Dinheiro
  • Cidade
  • Jogos
Conversa
Telefone, SMS, WhatsApp, contatos, Discord e o MSN.
Redes e encontros
Instagram, X, TikTok, YouTube, LinkedIn, Twitch, Orkut e Tinder.
Dinheiro e cidade
Nubank, Fleeca Bank, PayPal, Uber, Waze, iFood, Mercado Livre, Páginas Amarelas, Weazel News e Tor.
Dia a dia e jogos
Câmera, fotos, notas, calculadora, App Store, Chrome e Spotify; truco, campo minado, Tamagotchi e Colheita Feliz.

Cada app com a cara do original e o conteúdo da cidade do jogo: ruas de Los Santos, comércios do servidor, gente do RP.

Anatomia

Tudo o que um celular de verdade tem, no lugar de sempre.

Cada detalhe foi desenhado para o jogador reconhecer em um segundo: a ilha no topo, a barra de status, o aviso por cima do app aberto, a central que desce com um gesto, e a sensação de abrir e fechar um app de verdade.

Barra de status

Hora, sinal e bateria

A barra que todo jogador espera ver no alto, hora, sinal, Wi-Fi e bateria, em qualquer app.

Tela inicial

Duas páginas de apps

Os ícones em duas páginas que deslizam com o dedo ou arrastadas com o mouse, feitas para o toque e para a tela do jogo.

Gestos

Abrir e fechar como deve ser

O app abre crescendo e fecha voltando, na curva de movimento dos sistemas móveis; a barra de baixo leva de volta ao início.

A tela inicial do Blackout Smartphone, com a grade de apps e o dock

Dynamic Island

A ilha que avisa

No topo, como num aparelho moderno: ligação, música e avisos aparecem ali, sem tirar o jogador do que está fazendo.

Central de controle

Um gesto, oito atalhos

Dados, Wi-Fi, Bluetooth, modo avião, lanterna, não perturbe, câmera e timer, com brilho e volume em barras, numa camada de vidro.

Notificações

O aviso por cima do app

Mensagem, Pix, corrida aceita: o banner desce por cima de qualquer app aberto e sai de cena sozinho.

Dock

Os quatro de sempre

Telefone, SMS, WhatsApp e banco fixos na base, a um toque de qualquer página.

Tempo real

O celular não espera. O servidor avisa.

Num servidor de RP, metade da vida acontece sem o jogador pedir: a ligação que toca, o Pix que cai, a corrida aceita. Por isso a ponte com o jogo é de mão dupla, o app pergunta quando precisa, e o servidor empurra o aviso no instante em que algo acontece.

Ida · o app pergunta

Abrir uma conversa, mandar um Pix, pedir comida: o app chama o servidor e espera a resposta, 65 operações, cada uma com tempo máximo de 10 segundos.

  1. App
  2. fetchBackend
  3. NUI callback
  4. client.lua
  5. Servidor
Volta · o servidor avisa

Quando algo acontece na cidade, o aviso chega sozinho ao celular certo, 15 eventos em tempo real, ouvidos por qualquer app aberto.

  1. Servidor
  2. emitNet
  3. client.lua
  4. SendNUIMessage
  5. App

  • Telefoneagora

    Ligação recebida

    Oficina do Bairro está ligando

  • WhatsAppagora

    Lucas

    Chego em 5 min, tô na Vinewood

  • Nubank1 min

    Pix recebido

    A Ana te mandou um Pix

  • Uber2 min

    Motorista a caminho

    Carlos · Kuruma preto · 3 min

  • Tinder4 min

    It's a Match!

    Você e a Bia curtiram um ao outro

  • Mercado Livre6 min

    Seu anúncio foi vendido

    O comprador já está a caminho

  • iFood9 min

    Saiu para entrega

    Burger Shot · chega em 12 min

  • Weazel News12 min

    Plantão

    Perseguição na Great Ocean Highway

  • Mão dupla

    O app pergunta e o servidor avisa: pedido e evento no mesmo celular, sem atualizar a tela.

  • Nunca trava

    Toda chamada ao servidor tem tempo máximo de 10 segundos: se o jogo demorar, o app segue em vez de congelar.

  • Sabe onde está

    Três verificações detectam se o celular está dentro do FiveM ou num navegador comum, o mesmo código serve aos dois.

  • A ligação atravessa os apps

    A chamada em curso mora num estado próprio: dá para atender no meio do feed e continuar navegando.

Brasil + Los Santos

Memória afetiva brasileira, no mapa de Los Santos.

O celular fala a língua de quem joga: o Orkut dos recados, o MSN do “chamar atenção”, o truco da mesa de bar, lado a lado com o banco, o jornal e o submundo da cidade do jogo.

  • Brasil

    Orkut

    Recados e comunidades

    Perfil, recados, amigos e comunidades, a rede que marcou uma geração, de volta dentro do RP.

  • Brasil

    MSN

    O “chamar atenção” voltou

    Contatos online, conversas e o botão que fazia a janela tremer, a nostalgia vira conversa entre personagens.

  • Brasil

    Truco

    A mesa de truco no bolso

    O jogo de carta da mesa de bar, para matar o tempo entre uma cena e outra.

  • Brasil

    Colheita Feliz

    A fazenda que todo mundo teve

    Plantar, comprar sementes, cuidar dos bichos e disputar o ranking da cidade.

  • Cidade

    Páginas Amarelas

    O comércio da cidade num toque

    O catálogo dos negócios do servidor: quem vende, quem conserta, quem atende.

  • Los Santos

    Weazel News

    O jornal da cidade do jogo

    Notícias e plantões de Los Santos direto no celular, o canal que só existe no universo do GTA.

  • Los Santos

    Fleeca Bank

    O banco das ruas do GTA

    Saldo e últimas transações no banco que todo jogador conhece, ao lado de um banco digital completo.

  • Roleplay

    Tor

    O lado escuro da cidade

    Navegação anônima e anúncios sem rastro: no RP, o submundo também precisa de um endereço.

As tecnologias

Do que é feito, peça por peça

O celular é uma tela leve que roda dentro do jogo e conversa com ele o tempo todo. Escolha uma peça para ver o que ela faz aqui e em que arquivo está.

9tecnologias, em 4 camadas

Tela

Estado

Jogo

Construção

Dentro do celular

O celular aberto, app por app.

As melhores telas do celular rodando: o sistema, as conversas, o dinheiro, as redes, o Brasil retrô, a cidade, a mídia e os jogos, cada uma do jeito que o jogador vê.

32telas no celular

Tela inicial com grade de apps e dock

01 de 03 · Tela inicial com grade de apps e dock

App reservado

Há um app neste celular que ninguém viu ainda.

Ele existe, está pronto e já tem lugar na tela inicial, com cadeado. Faz parte de uma ideia que ainda não foi revelada. Daqui, só dá para ver as pistas.

Arquivo · acesso restritoConfidencial
Status
Pronto. Só não entra nesta vitrine.
Onde mora
Na primeira página da tela inicial, atrás de um cadeado.
Quando abre
Ocupa a tela inteira, como os grandes do celular.
O que é
██████████████████████
Codinome
██████████
Pista
Não é só mais um app: é a peça de uma ideia maior.
Estreia
████████████

Passe a lanterna sobre o arquivo.

Protótipo

Pegue o celular. Ele funciona no navegador.

O mesmo código que roda no jogo, aberto para qualquer pessoa: abra os apps, leia as conversas, peça uma corrida, veja o feed. Com dados fictícios, nada é salvo, nada é coletado.

  • Roda no navegador, sem instalar e sem servidor
  • O mesmo código do jogo, com o modo de demonstração ligado
  • Dados fictícios: nada é salvo nem coletado

Protótipo pronto

A tela inicial

A cidade ao fundo e o celular na mão: é só tocar num app.

Tela cheia

O protótipo é uma demonstração: os perfis, as conversas e os saldos foram inventados para ela.

Próximo projeto04 / 51

GTA RP: scripts e ferramentasBC Security AuditorApp desktop que escaneia bases de servidor de GTA RP, classifica ameaças por gravidade, confere integridade de arquivos e gera relatórioTauri 2.10Tauri Dialog 2.7React 19.2TypeScript 5.9← AnteriorMeu Natal Digital
Início