> For the complete documentation index, see [llms.txt](https://theobsidianstudio-1.gitbook.io/theobsidianstudio-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://theobsidianstudio-1.gitbook.io/theobsidianstudio-docs/assets/obs_loadingscreen.md).

# OBS\_LOADINGSCREEN

**Obsidian Loading Screen** is a premium, modern, and fully customizable loading screen for FiveM servers. It transforms the boring default loading screen into an immersive, feature-rich experience that engages players before they even join your server.

### ✨ Key Features

**🎨 Visual Features**

| Feature                 | Description                                             |
| ----------------------- | ------------------------------------------------------- |
| **Dynamic Backgrounds** | Support for images, videos, slideshows, or solid colors |
| **Floating Orbs**       | Animated particle effects that follow your theme color  |
| **Smooth Animations**   | Professional fade, slide, and transition effects        |
| **Responsive Design**   | Works on any screen size (1080p, 1440p, 4K, ultrawide)  |
| **Custom Themes**       | 5 built-in themes + unlimited custom colors             |
| **Blur Effects**        | Background blur and opacity controls                    |
| **Crossfade Slideshow** | Smooth transitions between background images            |

**🎵 Music Player**

| Feature               | Description                                 |
| --------------------- | ------------------------------------------- |
| **Full Audio Player** | Play, pause, skip, previous, volume control |
| **Visualizer**        | Real-time audio frequency bars (optional)   |
| **Playlist Support**  | Add unlimited songs to your playlist        |
| **Shuffle Mode**      | Random song playback                        |
| **Repeat Modes**      | Repeat all songs or repeat single song      |
| **Album Art**         | Display custom cover art per song           |
| **Progress Bar**      | Click anywhere to seek through song         |
| **Volume Slider**     | Independent volume control                  |

**👥 Team Section**

| Feature                 | Description                                              |
| ----------------------- | -------------------------------------------------------- |
| **Staff Showcase**      | Display your server staff team                           |
| **Discord Integration** | Shows real-time Discord status (Online/Idle/DND/Offline) |
| **Social Links**        | Discord and Twitter links per member                     |
| **Custom Avatars**      | Upload custom images for each member                     |
| **Hover Effects**       | Smooth animations on card hover                          |
| **Status Rings**        | Colored rings around avatars showing online status       |

**📝 Changelogs**

| Feature              | Description                                            |
| -------------------- | ------------------------------------------------------ |
| **Version History**  | Display server update history                          |
| **Entry Types**      | Feature, Bugfix, Update categories with colored badges |
| **Dates & Versions** | Show release dates and version numbers                 |
| **Clean Layout**     | Organized, easy-to-read design                         |
| **Scrollable Area**  | Support for unlimited entries                          |

**⌨️ Keybinds Section**

| Feature              | Description                                                      |
| -------------------- | ---------------------------------------------------------------- |
| **Visual Keyboard**  | Interactive keyboard layout showing key functions                |
| **Category Tabs**    | Organize keybinds by category (General, Vehicles, Actions, etc.) |
| **Highlight System** | Keys with functions are highlighted                              |
| **Function Labels**  | Shows what each key does                                         |
| **Customizable**     | Add/remove any keybind                                           |

**📊 Server Status (NEW v1.0.1)**

| Feature               | Description                                           |
| --------------------- | ----------------------------------------------------- |
| **Real-time Uptime**  | Shows how long server has been running                |
| **Player Count**      | Live player count with progress bar                   |
| **Server IP Display** | Shows connect information                             |
| **Service Status**    | Monitor custom services (Database, Discord Bot, etc.) |
| **Auto-refresh**      | Updates every 30 seconds                              |
| **Offline Detection** | Automatically shows when server is down               |

**⚖️ Rules Modal (NEW v1.0.1)**

| Feature                   | Description                               |
| ------------------------- | ----------------------------------------- |
| **Required Reading**      | Players must accept rules before entering |
| **Remember Choice**       | Show only once per player (localStorage)  |
| **Custom Rules**          | Add unlimited rules                       |
| **Checkbox Verification** | Must check box to proceed                 |
| **Elegant Design**        | Professional modal with glow effects      |
| **Toggle Option**         | Can be enabled/disabled in config         |

**💡 Hint System**

| Feature                 | Description                           |
| ----------------------- | ------------------------------------- |
| **Rotating Tips**       | Shows helpful messages on a timer     |
| **Custom Messages**     | Add your own hints                    |
| **Configurable Timing** | Control interval and display duration |
| **Styled Box**          | Beautiful design with theme colors    |

**🖼️ Gallery Viewer**

| Feature               | Description                     |
| --------------------- | ------------------------------- |
| **Image Gallery**     | Showcase server screenshots     |
| **Fullscreen Viewer** | Click images to expand          |
| **Navigation**        | Previous/next buttons           |
| **Captions**          | Optional image labels           |
| **Camera Button**     | Floating button to open gallery |

**🎮 Discord Integration**

| Feature            | Description                          |
| ------------------ | ------------------------------------ |
| **Multiple Boxes** | Show up to 3 Discord/social boxes    |
| **Custom Icons**   | Each box can have its own icon       |
| **Member Count**   | Shows online members (with fallback) |
| **Direct Invite**  | One-click join buttons               |
| **Hover Effects**  | Smooth animations on interaction     |

**🔧 Settings Panel**

| Feature                 | Description                    |
| ----------------------- | ------------------------------ |
| **Theme Switcher**      | Change colors in real-time     |
| **Custom Color Picker** | Choose any color you want      |
| **Persistent Settings** | Saves preferences locally      |
| **5 Preset Themes**     | Purple, Dark, Blue, Red, Green |

**🎯 Navigation**

| Feature                | Description                                        |
| ---------------------- | -------------------------------------------------- |
| **6 Main Tabs**        | Home, Changelogs, Team, Keybinds, Status, Settings |
| **Smooth Transitions** | Animated tab switching                             |
| **Responsive Buttons** | Hover effects and active states                    |
| **Customizable**       | Add/remove tabs easily                             |

**🎨 Customization Options**

| Feature                | Description                        |
| ---------------------- | ---------------------------------- |
| What You Can Customize | How                                |
| Colors                 | Theme system + custom color picker |
| Logo                   | Replace `img/logo.png`             |
| Background             | Images, videos, slideshows         |
| Music                  | Add MP3 files to `audio/` folder   |
| Team Members           | Edit members array in config       |
| Keybinds               | Edit binds array in config         |
| Discord Links          | Edit boxes array in config         |
| Rules                  | Edit rules array in config         |
| Hints                  | Edit messages array in config      |
| Gallery                | Edit images array in config        |
| Loading Bar            | Position, style, colors            |
| Navigation             | Add/remove tabs                    |

#### 🎯 **Benefits for Server Owners** <a href="#benefits-for-server-owners" id="benefits-for-server-owners"></a>

| Benefit                           | Description                            |
| --------------------------------- | -------------------------------------- |
| **Professional First Impression** | Shows players you care about quality   |
| **Reduce Support Tickets**        | Keybinds section shows controls        |
| **Build Trust**                   | Team section shows who runs the server |
| **Keep Players Informed**         | Changelogs show server progress        |
| **Increase Discord Members**      | Easy one-click join buttons            |
| **Show Server Activity**          | Live player count and uptime           |
| **No Framework Lock**             | Works with ANY server type             |
| **Zero Dependencies**             | No extra resources needed              |
| **Optimized Performance**         | Won't affect in-game FPS               |
| **Easy to Update**                | Simple drag-and-drop updates           |

#### 📊 **Technical Specifications** <a href="#technical-specifications" id="technical-specifications"></a>

| Specification          | Details                      |
| ---------------------- | ---------------------------- |
| **Version**            | 1.0.1                        |
| **File Size**          | \~5 MB (core)                |
| **Dependencies**       | None                         |
| **Frameworks**         | ESX, QBCore, Standalone, any |
| **FiveM Version**      | Any version                  |
| **Audio Formats**      | MP3, OGG                     |
| **Image Formats**      | PNG, JPG, JPEG, WEBP, GIF    |
| **Video Formats**      | MP4                          |
| **Performance Impact** | None while in-game           |

#### ✅ **Why Choose Obsidian?** <a href="#why-choose-obsidian" id="why-choose-obsidian"></a>

1. **Professional Quality** - Clean, modern design
2. **Easy to Use** - Simple config file, no coding needed
3. **Feature Rich** - Everything you need in one package
4. **Regular Updates** - Constantly improving
5. **Great Support** - Fast, helpful responses
6. **Fair Price** - One-time payment, lifetime updates
7. **Proven Track Record** - Used by hundreds of servers

#### 🎯 **Perfect For** <a href="#perfect-for" id="perfect-for"></a>

* ✅ Roleplay servers
* ✅ Racing servers
* ✅ Deathmatch servers
* ✅ Freeroam servers
* ✅ Any FiveM server that wants to look professional!


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://theobsidianstudio-1.gitbook.io/theobsidianstudio-docs/assets/obs_loadingscreen.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.