Blackout Smartphone

The whole cityin the palm of your hand.

A complete phone that brings roleplay to life.

A whole phone inside GTA RP, 46 apps, talking to the server in real time.

Inside the gameReal timeBrazil + Los Santos

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

The whole cityin the palm of your hand.

A complete phone that brings roleplay to life.

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

A whole phone inside GTA RP, 46 apps, talking to the server in real time.

Inside the gameReal timeBrazil + Los Santos

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

What it is

A whole phone, inside GTA RP.

Not a menu with buttons: an operating system in React that opens over the game, home screen, control centre, notifications and 46 apps, from the digital bank to Orkut, talking to the server in real time.

  1. 01The player pulls out the phone
  2. 02Opens one of 46 apps
  3. 03The app talks to the server
  4. 04The alert arrives on its own

Scale

Behind the glass, a whole system.

Counted in the phone's code: the system, the apps, the game bridge and the state that ties it all together.

17,791

lines of code

  • React 18
  • Vite 5
  • Zustand
  • Tailwind CSS
System
The device shell, Dynamic Island, a two-page home screen, control centre and notifications.
Apps
Every app is its own component, opened from a single registry, adding a new app is one line.
Game bridge
One channel to talk to FiveM: 65 outgoing operations and 15 incoming events, in real time.
State
Zustand holds the whole phone, open apps, alerts, settings, and the active call in a separate state.

46

apps on the home screen

  • Messaging
  • Social
  • Money
  • City
  • Games
Messaging
Phone, SMS, WhatsApp, contacts, Discord and MSN.
Social and dating
Instagram, X, TikTok, YouTube, LinkedIn, Twitch, Orkut and Tinder.
Money and city
Nubank, Fleeca Bank, PayPal, Uber, Waze, iFood, Mercado Livre, Yellow Pages, Weazel News and Tor.
Everyday and games
Camera, photos, notes, calculator, App Store, Chrome and Spotify; truco, minesweeper, Tamagotchi and Colheita Feliz.

Every app looks like the original and carries the game city's content: Los Santos streets, server businesses, RP people.

Anatomy

Everything a real phone has, right where it belongs.

Every detail was designed for the player to recognise in a second: the island at the top, the status bar, the alert over the open app, the control centre that slides down with a gesture, and the feel of opening and closing a real app.

Status bar

Time, signal and battery

The bar every player expects at the top, time, signal, Wi-Fi and battery, in every app.

Home screen

Two pages of apps

Icons across two pages that slide with a finger or drag with the mouse, built for touch and for the game screen.

Gestures

Opening and closing done right

Apps grow open and shrink back on the motion curve of mobile systems; the bottom bar takes you home.

The Blackout Smartphone home screen, with the app grid and the dock

Dynamic Island

The island that tells you

At the top, like a modern phone: calls, music and alerts show up there without pulling the player out of what they're doing.

Control centre

One gesture, eight shortcuts

Data, Wi-Fi, Bluetooth, airplane mode, torch, do not disturb, camera and timer, with brightness and volume sliders on a glass layer.

Notifications

The alert over the app

A message, a payment, a ride accepted: the banner slides over any open app and leaves on its own.

Dock

The usual four

Phone, SMS, WhatsApp and the bank pinned at the bottom, one tap from any page.

Real time

The phone doesn't wait. The server tells it.

On an RP server, half of life happens without the player asking: the call that rings, the payment that lands, the ride accepted. That's why the bridge to the game runs both ways, the app asks when it needs to, and the server pushes the alert the moment something happens.

Out · the app asks

Opening a chat, sending a payment, ordering food: the app calls the server and waits for the answer, 65 operations, each with a 10-second limit.

  1. App
  2. fetchBackend
  3. NUI callback
  4. client.lua
  5. Server
Back · the server tells

When something happens in the city, the alert reaches the right phone on its own, 15 real-time events, heard by any open app.

  1. Server
  2. emitNet
  3. client.lua
  4. SendNUIMessage
  5. App
  • Phonenow

    Incoming call

    The neighbourhood garage is calling

  • WhatsAppnow

    Lucas

    Be there in 5, I'm in Vinewood

  • Nubank1 min

    Payment received

    Ana sent you money

  • Uber2 min

    Driver on the way

    Carlos · black Kuruma · 3 min

  • Tinder4 min

    It's a Match!

    You and Bia liked each other

  • Mercado Livre6 min

    Your listing sold

    The buyer is on the way

  • iFood9 min

    Out for delivery

    Burger Shot · arriving in 12 min

  • Weazel News12 min

    Breaking

    Chase on the Great Ocean Highway

  • Both ways

    The app asks and the server tells: requests and events on the same phone, without refreshing the screen.

  • Never freezes

    Every call to the server has a 10-second limit: if the game is slow, the app moves on instead of hanging.

  • Knows where it runs

    Three checks detect whether the phone is inside FiveM or in a regular browser, the same code serves both.

  • Calls cross apps

    The active call lives in its own state: answer it in the middle of the feed and keep browsing.

Brazil + Los Santos

Brazilian nostalgia, on the map of Los Santos.

The phone speaks its players' language: Orkut's scrapbook, MSN's “nudge”, truco from the corner bar, side by side with the bank, the newspaper and the underworld of the game's city.

  • Brazil

    Orkut

    Scraps and communities

    Profile, scraps, friends and communities, the network that defined a generation, back inside RP.

  • Brazil

    MSN

    The “nudge” is back

    Online contacts, chats and the button that shook the window, nostalgia turned into talk between characters.

  • Brazil

    Truco

    A truco table in your pocket

    The card game from the corner bar, to pass the time between one scene and the next.

  • Brazil

    Colheita Feliz

    The farm everyone had

    Plant, buy seeds, look after the animals and fight for the city ranking.

  • City

    Yellow Pages

    The city's businesses, one tap away

    The server's business directory: who sells, who fixes, who serves.

  • Los Santos

    Weazel News

    The game city's newspaper

    Los Santos news and breaking alerts right on the phone, the channel that only exists in the GTA universe.

  • Los Santos

    Fleeca Bank

    The bank of GTA's streets

    Balance and recent transactions at the bank every player knows, next to a complete digital bank.

  • Roleplay

    Tor

    The city's dark side

    Anonymous browsing and untraceable listings: in RP, the underworld needs an address too.

The technologies

What it is made of, piece by piece

The phone is a lightweight screen that runs inside the game and talks to it all the time. Pick a piece to see what it does here and which file it is in.

9technologies, in 4 layers

Screen

State

Game

Build

Inside the phone

The phone, open, app by app.

The best screens of the phone running: the system, messaging, money, social, Brazilian retro, the city, media and games, each one exactly as the player sees it.

32screens on the phone

Home screen with app grid and dock

01 of 03 · Home screen with app grid and dock

Reserved app

There's an app on this phone that nobody has seen yet.

It exists, it's ready and it already has a spot on the home screen, behind a lock. It's part of an idea that hasn't been revealed yet. From here, all you can see are the clues.

File · restricted accessClassified
Status
Ready. It just isn't part of this showcase.
Where it lives
On the first page of the home screen, behind a lock.
When it opens
It takes the whole screen, like the phone's big apps.
What it is
██████████████████████
Codename
██████████
Clue
It isn't just another app: it's a piece of a bigger idea.
Launch
████████████

Move the flashlight over the file.

Prototype

Pick up the phone. It runs in the browser.

The same code that runs in the game, open to anyone: open the apps, read the chats, order a ride, scroll the feed. With fictional data, nothing is saved, nothing is collected.

  • Runs in the browser, nothing to install, no server
  • The same code as the game, with demo mode on
  • Fictional data: nothing is saved or collected

Prototype ready

The home screen

The city behind and the phone in hand: just tap an app.

Full screen

The prototype is a demo: the profiles, chats and balances were invented for it.