01 / Home Screen & Device Shell
Designing a device, not just an interface
A complete tablet shell with dynamic status bar, clock widget, gesture home indicator, and dock supporting branded game applications.
In-Game Tablet — Operating System for FiveM
A production NUI tablet for players, combining a custom device shell, gesture navigation, multitasking, Notes, custom Leaflet map coordinates, and real in-game economy logic.
Production FiveM NUIVue 3.5 · Pinia · ViteGesture Navigation & MultitaskingCustom Leaflet CRS & Economy
Make a web interface stop feeling like a web interface and start feeling like a device that belongs inside the game.
In roleplay, immersion breaks the moment an interface feels like a floating webpage. What started as a simple tablet request grew into a full operating system running inside CEF — with gestures, multitasking, persistent state, game coordinate projection, and economic mechanics that support active gameplay.
Device Shell & Dock→
Gesture Multitasking→
Continuous Notes→
Leaflet World Projection→
Economy & Purchase Flow→
Optimized CEF Engine
From native mobile interaction paradigms to real-time multiplayer game mechanics.
02 / Multitasking & App Switcher
Multitasking as part of roleplay workflow
Swipe up from the bottom bar opens the app switcher where players can quickly flip between active apps without losing in-game context.
03 / Notes & Workspace Mood
One continuous surface instead of nested panels
Searchable, tag-filtered notes where the chosen accent color softly permeates the entire app surface including the status bar area.
04 / Real Estate & Custom Leaflet Map
Location is not metadata — it is the decision
GTA V in-game coordinates mapped directly into Leaflet, allowing full spatial discovery, price alerts, and side-column property inspection.
05 / Purchase & Economy Mechanics
The purchase screen is part of the game economy
Visually separated instant purchase (with +10% self-service fee) and weekly rental paths with mortgage calculation and co-ownership permissions.
Under the hood
Web Animations API over GSAP
Replaced GSAP with a native Web Animations wrapper resolving animation.finished promises to eliminate CEF tab-freeze glitches in FiveM when views are hidden.
Custom Leaflet Coordinate Reference System
Mapped GTA V 3D world coordinates directly into Leaflet to project real-time property markers without relying on standard geographic latitude and longitude.
Performance & Microtask Batching
Migration from Vue CLI to Vite & Pinia cut bundle size from 246 kB to 140 kB, zero vulnerabilities, with microtask settings batching and frozen object reactivity.
0 kBProduction Bundle Size (-43%)
0Vulnerabilities (Migrated to Vite)
0Performance & Motion Modes
0%Touch & Gesture Metaphor
“
The interface should feel like an object that belongs in the world.”