FiveM Loadscreen Ember Studios

Ember Loadscreen v1

The first seconds on your server already shape the player's impression. Ember Loadscreen v1 turns the FiveM loading process into a cinematic presentation with parallax scenes, dynamic time-of-day variations, music, promotions, live server information and configurable loading progress.

Cinematic Loadscreen Parallax Scenes Music Player Queue Support
Live server data 3 progress modes Browser preview Config.js customization
00 / Overview
The server experience starts before spawn

Turn loading time into part of your server's identity.

Ember Loadscreen v1 is designed around presentation rather than a static background and logo. Multi-layer cinematic scenes, server information, music and promotional content keep players engaged while FiveM prepares the session.

Use the loading screen to introduce the server atmosphere, surface important information and promote new content before the player even enters the world.

// SESSION_INITIALIZING
01 / Cinema
Multi-layer visual presentation

Replace the static loading image with scenes that actually feel alive.

01 Layers · Motion · Depth

Cinematic Parallax

Multi-layer scenes move independently to create a sense of depth, motion and perspective rather than presenting players with one flat background.

02 Zoom · Scene · Motion

Dynamic Zoom Effects

Scene movement can include cinematic zoom behavior for cityscapes, roads, night drives and other visual compositions.

03 Branding · Atmosphere

Server-Focused Visual Identity

Scenes, colors and presentation can be customized around the visual language of your own FiveM community.

04 GTA Online Inspired

Game-Like Presentation

The overall experience takes inspiration from cinematic GTA-style loading presentation while remaining configurable for your server.

02 / Time
Dynamic atmosphere

Let the loadscreen change character as the world moves through the day.

Ember Loadscreen includes multiple time-of-day visual profiles that can automatically change according to the in-game time.

01 / DAWN

Dawn

Soft pink tones for early-morning atmosphere.

02 / DAY

Day

Brighter presentation designed around daylight scenes.

03 / DUSK

Dusk

Warm orange lighting for the transition into evening.

04 / NIGHT

Night

Darker city and sky styling for nighttime sessions.

03 / Promote
Loading time becomes useful screen space

Show players what changed before they start asking in Discord.

Featured promotion panels can be used to highlight important server content directly during loading.

01 Updates · News

Server Updates

Highlight recent changes and important announcements directly inside the loading experience.

02 Jobs · Content

New Jobs & Features

Introduce newly added jobs, systems and gameplay features before players enter the city.

03 Vehicles · Events

Cars & Events

Promote new vehicle releases, scheduled events and other community activities.

04 Rules · Links

Rules & Server Information

Surface important rules, links or server-specific information in a place every connecting player already sees.

04 / Music
Built-in audio experience

Give the server a soundtrack before the player reaches the spawn menu.

// EMBER_MUSIC_PLAYER Multiple Tracks / Shuffle / Volume / Mute
Now playing Your Server Soundtrack
01 Playlist · Tracks

Multiple Audio Tracks

Configure several tracks instead of forcing every connection to use one repeating song.

02 Shuffle · Playback

Shuffle Mode

Track playback can be shuffled for more variation between loading sessions.

03 Volume · Mute

Player Audio Controls

Volume adjustment and mute controls allow players to control the loadscreen audio experience.

04 Visualizer · Waveform

Animated Music Visualizer

A waveform-style visualizer gives the audio component a more polished visual presence while music is playing.

05 / Live Data
Useful information while connecting

Show the state of the server instead of leaving players staring at a progress bar.

Ember Loadscreen can display live server information including player count, server status, framework information, region data and optional player details when configured.

Server Status Online Display server availability or maintenance state.
Players Live Show current player-count information.
Framework Dynamic Display server framework information such as QBCore or ESX.
Region Visible Present configured server-region information.
06 / Progress
Choose how loading progress is presented

Three loading modes give you control over how the progress experience feels.

01 / REAL

Real Progress

Present actual loading progress based on the available FiveM loading information.

02 / SIMULATED

Smooth Simulation

Use a smoother simulated presentation when visual consistency matters more than directly mirroring every loading-stage movement.

03 / HYBRID

Hybrid Mode

Blend actual progress information with smoother visual behavior for a more controlled loading experience.

07 / Queue
Designed to fit existing server flows

Keep the visual experience consistent even when players are waiting in queue.

Queue integration is supported through an export-based approach, allowing compatible queue resources to pass relevant information into the loadscreen.

Instead of treating queueing and loading as two disconnected screens, server owners can integrate the Ember interface into the surrounding connection experience.

// QUEUE_INTEGRATION_READY
08 / Config
Customize without rebuilding the interface

Control the visual identity from one configuration file.

The supplied configuration is centered around web/js/config.js, allowing server owners to change core presentation options without redesigning the loadscreen from scratch.

// CONFIGURATION

Make Ember look like your server.

Customize scene content, themes, music, promotional information, colors, text and links from the provided configuration structure. This keeps routine branding changes separate from the core interface.

web/js/config.js
// Illustrative configuration layout
theme: "server-brand",
music: [...],
promotions: [...],
scenes: [...],
links: [...],
colors: { ... }
09 / Preview
Test outside FiveM

Preview visual changes in your browser before restarting the server.

01 Browser · Preview

Browser Preview Mode

Open the provided index.html in a browser to preview the loadscreen presentation without launching FiveM.

02 Faster · Iteration

Quicker Visual Changes

Test colors, scenes, text and other visual configuration changes before deploying them to the live server.

10 / Technical
Feature overview

Built around presentation, customization and useful connection information.

// EMBER_LOADSCREEN_V1 FiveM / UI / Loading Experience
Resource Type
FiveM Loadscreen Cinematic server loading-screen resource by Ember Studios.
Scene System
Parallax Multi-layer scenes with dynamic movement and zoom-style effects.
Time Profiles
4 Variations Dawn, day, dusk and night visual presentation.
Progress Modes
3 Modes Real, simulated and hybrid loading-progress presentation.
Music
Multi-Track Shuffle, volume, mute and waveform-style visualizer support.
Server Information
Live Data Player count, status, framework, region and optional player details can be presented when configured.
Queue Support
Export Based Designed to integrate with compatible existing queue systems.
Configuration
config.js Main visual and content settings are managed through web/js/config.js.
Ember Studios / FiveM Loadscreen

Your loading screen is the first interface every connecting player sees. Make it feel like part of the server.

Ember Loadscreen v1 combines cinematic parallax scenes, dynamic time-of-day presentation, featured promotions, multi-track music, live server data, three loading-progress modes, queue support and centralized configuration into one customizable FiveM loading experience.

Do not make players wait on a static screen. Make the wait part of the experience.