DepthUI – Holographic UI for FiveM

Features

• Location-Based Activation: Display UI only when players enter defined zones.
• Customizable Styling: Adjust colors, sizes, padding, borders & transitions via config.js.
• Dynamic Text Lines: Support for titles, subtitles & multiple description lines.
• Smooth Transitions: Fade-in & fade-out effects for seamless integration.
• Zero Dependencies: Lightweight vanilla HTML, CSS & JS (optional jQuery snippet).

Installation

1. Download this repository as a ZIP.
2. Extract the DepthUI folder into your server’s resources directory.
3. Add ensure DepthUI to your server.cfg (or equivalent) and restart the server.

Configuration

All visual parameters are managed in config.js. Example:

const Config = {
  backgroundColor: 'rgba(0, 0, 0, 0.7)',
  borderColor: '#00e5ff',
  titleSize: '1.5rem',
  lineHeight: '1.25',
  padding: '0.75rem',
  width: '300px',
  fadeInDuration: 300,
  fadeOutDuration: 300
};

Define your hologram zones in client.lua:

zones = {
  {
    coord = vector3(200.0, -1000.0, 30.0),
    range = 5.0,
    textLines = {
      'Welcome to the tutorial area',
      'Press E to interact',
      'Follow the markers on your HUD'
    }
  }
};

Usage

• Define hologram zones in client.lua with coordinates, range & textLines.
• On player movement, send NUI messages to show/hide the hologram:

RegisterNetEvent('depthui:toggleZone', (data) => {
  SendNUIMessage({
    action: data.show ? 'show' : 'hide',
    content: data.textLines
  });
});

Use Cases

• Tutorial Areas: Guide new players through objectives.
• Roleplay Interactions: Provide job instructions or menu hints.
• Informational Markers: Highlight shop locations or POIs.

License

This project is released under the MIT License. Feel free to modify and redistribute.

Credits

Developed and maintained by the DepthUI team. Contributions welcome on GitHub.