PTENES
Blackout Smartphone

La ciudad enteraen la palma de la mano.

Un celular completo que le da vida al roleplay.

Un celular entero dentro de GTA RP, 46 apps, hablando con el servidor en tiempo real.

Dentro del juegoTiempo realBrasil + Los Santos

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

La ciudad enteraen la palma de la mano.

Un celular completo que le da vida al roleplay.

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

Un celular entero dentro de GTA RP, 46 apps, hablando con el servidor en tiempo real.

Dentro del juegoTiempo realBrasil + Los Santos

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

PortafolioBlackout Smartphone

Qué es

Un celular entero, dentro de GTA RP.

No es un menú con botones: es un sistema operativo en React que se abre sobre el juego, inicio, centro de control, notificaciones y 46 apps, del banco digital al Orkut, hablando con el servidor en tiempo real.

  1. 01El jugador saca el celular
  2. 02Abre una de las 46 apps
  3. 03La app habla con el servidor
  4. 04El aviso llega solo

La escala

Detrás del vidrio, un sistema entero.

Contado en el código del celular: el sistema, las apps, el puente con el juego y el estado que lo une todo.

17.791

líneas de código

  • React 18
  • Vite 5
  • Zustand
  • Tailwind CSS
Sistema
La carcasa del aparato, Dynamic Island, inicio en dos páginas, centro de control y notificaciones.
Apps
Cada app es un componente propio, abierto desde un registro único, sumar una app nueva es una línea.
Puente con el juego
Un solo canal para hablar con FiveM: 65 operaciones de ida y 15 eventos de vuelta, en tiempo real.
Estado
Zustand guarda el celular entero, apps abiertas, avisos, ajustes, y la llamada en curso en un estado aparte.

46

apps en el inicio

  • Chats
  • Redes
  • Dinero
  • Ciudad
  • Juegos
Chats
Teléfono, SMS, WhatsApp, contactos, Discord y el MSN.
Redes y citas
Instagram, X, TikTok, YouTube, LinkedIn, Twitch, Orkut y Tinder.
Dinero y ciudad
Nubank, Fleeca Bank, PayPal, Uber, Waze, iFood, Mercado Livre, Páginas Amarillas, Weazel News y Tor.
Día a día y juegos
Cámara, fotos, notas, calculadora, App Store, Chrome y Spotify; truco, buscaminas, Tamagotchi y Colheita Feliz.

Cada app con la cara del original y el contenido de la ciudad del juego: calles de Los Santos, comercios del servidor, gente del RP.

Anatomía

Todo lo que tiene un celular de verdad, en su lugar de siempre.

Cada detalle fue diseñado para que el jugador lo reconozca en un segundo: la isla arriba, la barra de estado, el aviso sobre la app abierta, el centro que baja con un gesto, y la sensación de abrir y cerrar una app de verdad.

Barra de estado

Hora, señal y batería

La barra que todo jugador espera ver arriba, hora, señal, Wi-Fi y batería, en cualquier app.

Inicio

Dos páginas de apps

Los íconos en dos páginas que se deslizan con el dedo o se arrastran con el mouse, hechas para el toque y para la pantalla del juego.

Gestos

Abrir y cerrar como debe ser

La app se abre creciendo y se cierra volviendo, con la curva de movimiento de los sistemas móviles; la barra de abajo lleva al inicio.

La pantalla de inicio del Blackout Smartphone, con la cuadrícula de apps y el dock

Dynamic Island

La isla que avisa

Arriba, como en un teléfono moderno: llamadas, música y avisos aparecen ahí sin sacar al jugador de lo que está haciendo.

Centro de control

Un gesto, ocho atajos

Datos, Wi-Fi, Bluetooth, modo avión, linterna, no molestar, cámara y temporizador, con brillo y volumen en barras, sobre una capa de vidrio.

Notificaciones

El aviso sobre la app

Un mensaje, un pago, un viaje aceptado: el banner baja sobre cualquier app abierta y se va solo.

Dock

Los cuatro de siempre

Teléfono, SMS, WhatsApp y el banco fijos abajo, a un toque desde cualquier página.

Tiempo real

El celular no espera. El servidor avisa.

En un servidor de RP, la mitad de la vida pasa sin que el jugador lo pida: la llamada que suena, el pago que llega, el viaje aceptado. Por eso el puente con el juego va en los dos sentidos, la app pregunta cuando lo necesita, y el servidor empuja el aviso en el instante en que algo pasa.

Ida · la app pregunta

Abrir un chat, enviar un pago, pedir comida: la app llama al servidor y espera la respuesta, 65 operaciones, cada una con un máximo de 10 segundos.

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

Cuando algo pasa en la ciudad, el aviso llega solo al celular correcto, 15 eventos en tiempo real, escuchados por cualquier app abierta.

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

  • Teléfonoahora

    Llamada entrante

    El taller del barrio está llamando

  • WhatsAppahora

    Lucas

    Llego en 5 min, estoy en Vinewood

  • Nubank1 min

    Pago recibido

    Ana te envió dinero

  • Uber2 min

    Conductor en camino

    Carlos · Kuruma negro · 3 min

  • Tinder4 min

    It's a Match!

    Tú y Bia se dieron like

  • Mercado Livre6 min

    Tu anuncio se vendió

    El comprador ya va en camino

  • iFood9 min

    En camino

    Burger Shot · llega en 12 min

  • Weazel News12 min

    Última hora

    Persecución en la Great Ocean Highway

  • Doble sentido

    La app pregunta y el servidor avisa: pedido y evento en el mismo celular, sin recargar la pantalla.

  • Nunca se traba

    Cada llamada al servidor tiene un máximo de 10 segundos: si el juego tarda, la app sigue en vez de congelarse.

  • Sabe dónde corre

    Tres verificaciones detectan si el celular está dentro de FiveM o en un navegador común, el mismo código sirve a los dos.

  • La llamada cruza las apps

    La llamada en curso vive en un estado propio: se puede atender en medio del feed y seguir navegando.

Brasil + Los Santos

Nostalgia brasileña, en el mapa de Los Santos.

El celular habla el idioma de quien juega: el Orkut de los mensajes, el MSN del “zumbido”, el truco de la mesa de bar, junto al banco, el periódico y el submundo de la ciudad del juego.

  • Brasil

    Orkut

    Mensajes y comunidades

    Perfil, mensajes, amigos y comunidades, la red que marcó una generación, de vuelta dentro del RP.

  • Brasil

    MSN

    Volvió el “zumbido”

    Contactos en línea, chats y el botón que hacía temblar la ventana, la nostalgia se vuelve charla entre personajes.

  • Brasil

    Truco

    La mesa de truco en el bolsillo

    El juego de cartas de la mesa de bar, para pasar el rato entre una escena y otra.

  • Brasil

    Colheita Feliz

    La granja que todos tuvieron

    Plantar, comprar semillas, cuidar los animales y pelear el ranking de la ciudad.

  • Ciudad

    Páginas Amarillas

    Los comercios de la ciudad en un toque

    El directorio de negocios del servidor: quién vende, quién arregla, quién atiende.

  • Los Santos

    Weazel News

    El periódico de la ciudad del juego

    Noticias y avisos de última hora de Los Santos en el celular, el canal que solo existe en el universo de GTA.

  • Los Santos

    Fleeca Bank

    El banco de las calles de GTA

    Saldo y últimas transacciones en el banco que todo jugador conoce, junto a un banco digital completo.

  • Roleplay

    Tor

    El lado oscuro de la ciudad

    Navegación anónima y anuncios sin rastro: en el RP, el submundo también necesita una dirección.

Las tecnologías

De qué está hecho, pieza por pieza

El celular es una pantalla liviana que corre dentro del juego y conversa con él todo el tiempo. Elige una pieza para ver qué hace aquí y en qué archivo está.

9tecnologías, en 4 capas

Pantalla

Estado

Juego

Construcción

Dentro del celular

El celular abierto, app por app.

Las mejores pantallas del celular en marcha: el sistema, los chats, el dinero, las redes, el Brasil retro, la ciudad, los medios y los juegos, cada una tal como la ve el jugador.

32pantallas en el celular

Pantalla de inicio con la cuadrícula de apps y el dock

01 de 03 · Pantalla de inicio con la cuadrícula de apps y el dock

App reservada

Hay una app en este celular que nadie ha visto todavía.

Existe, está lista y ya tiene lugar en la pantalla de inicio, con candado. Es parte de una idea que todavía no fue revelada. Desde aquí, solo se ven las pistas.

Archivo · acceso restringidoConfidencial
Estado
Lista. Solo no entra en esta vitrina.
Dónde vive
En la primera página del inicio, detrás de un candado.
Cuando abre
Ocupa la pantalla entera, como las grandes del celular.
Qué es
██████████████████████
Nombre clave
██████████
Pista
No es una app más: es la pieza de una idea mayor.
Estreno
████████████

Pasa la linterna sobre el archivo.

Prototipo

Toma el celular. Funciona en el navegador.

El mismo código que corre en el juego, abierto para cualquiera: abre las apps, lee los chats, pide un viaje, mira el feed. Con datos ficticios, nada se guarda, nada se recolecta.

  • Corre en el navegador, sin instalar y sin servidor
  • El mismo código del juego, con el modo de demostración activado
  • Datos ficticios: nada se guarda ni se recolecta

Prototipo listo

La pantalla de inicio

La ciudad al fondo y el celular en la mano: solo toca una app.

Pantalla completa

El prototipo es una demostración: los perfiles, los chats y los saldos fueron inventados para ella.

Siguiente proyecto04 / 51

GTA RP: scripts y herramientasBC Security AuditorApp de escritorio que escanea bases de servidores de GTA RP, clasifica amenazas por gravedad, verifica la integridad de archivos y genera informesTauri 2.10Tauri Dialog 2.7React 19.2TypeScript 5.9← AnteriorMeu Natal Digital
Inicio