Immersive HUD System for FiveM RP Servers
Designed to deliver real-time feedback through a sleek and immersive interface, the system provides essential player and vehicle data while maintaining full immersion and minimal visual clutter.
Features Overview
-
Player Status Indicators
Real-time health, armor, hunger, and thirst levels visualized with animated, color-coded bars. -
Voice Communication Feedback
Integrated voice status indicators with subtle activity pulse for active roleplay clarity. -
Vehicle HUD
Custom speedometer (MPH/KPH toggle), animated fuel gauge, and gear/RPM indicators — all designed with gameplay responsiveness in mind. -
Modern Animated UI
Transparent, clean layout using fluid css transitions to move the hud based off the player’s state (in or out of vehicle).
Tech Stack
| Technology | Role in Project |
|---|---|
| React | Dynamic, reusable component structure |
| Tailwind CSS | Utility-first styling for responsive UI |
| TypeScript | Type-safe logic and component props |
| Lua | Game-state sync with backend logic |
| Zustand | Lightweight state management and global store |
Contributions & Learnings
As the lead engineer on this project, I:
- Engineered modular React components with
TypeScript, ensuring reusability and maintainability. - Leveraged
Zustandfor reactive state updates, drastically reducing unnecessary component re-renders. - Built real-time data pipelines using Lua NUI callbacks for seamless HUD updates (e.g. health, fuel, speed).
- Created a responsive design system using Tailwind CSS, allowing fast iteration and consistent theming.
- Ensured pixel-perfect alignment and high-FPS performance, even in fast-paced gameplay environments.
Built to feel invisible until you need it. Designed for RP. Tuned for performance.
Thank you for viewing this! 👋