Ctrlk
StoreDiscordYouTube
For the complete documentation index, see llms.txt. This page is also available as Markdown.

Full Configuration Guide

This document explains every available option in the provided config.js file and how each setting affects the nm1 Loading screen

Video Background

js

video: {
    source: '...',
    blur: '0px',
    volume: 0.2
}
Property
Type
Description

source

string

Direct URL to the background video (.mp4 recommended). Also used for the dynamic preload — changing this is all you need to do.

blur

string

CSS blur value. Use '0px' for no blur, e.g. '4px' to blur

volume

number

Initial volume for music. Range: 0.0 (muted) to 1.0 (full)

Music

js

music: {
    enabled: true,
    playlist: [
        {
            artist: "ARTIST NAME",
            song:   "SONG NAME",
            cover:  'https://...',
            source: 'https://...'
        }
    ]
}
Property
Type
Description

enabled

boolean

Set to true to use a separate audio track. Video will be muted automatically. Set to false to use the video's own audio instead.

playlist[]

array

List of songs. The ⏮ / ⏭ buttons cycle through all entries. No limit on how many you add.

playlist[].artist

string

Artist name displayed on the music card

playlist[].song

string

Song name displayed on the music card

playlist[].cover

string

URL to the album/cover artwork image

playlist[].source

string

Direct URL to the audio file (.mp3 recommended). Host on FiveManage and paste the r2 URL.

💡 When a track ends it automatically advances to the next song in the playlist. All volume and play/pause controls target the audio player, not the video.

Project / Branding

js

Property
Type
Description

titlePart1

string

First part of the large center title (rendered in the accent color)

titlePart2

string

Second part of the large center title (rendered in white)

description

string

Subtitle text displayed below the title

color

string

Primary accent color (hex). Applied to highlights, particles, and active elements

topbarLabel

string

Text shown in the top-left status bar

version

string

Version tag shown in the top-right corner

Social Links

js

Each entry in the socials array creates a clickable icon button. You can add or remove as many as you like.

Property
Type
Description

icon

string

Font Awesome 6 class string (e.g. fa-brands fa-twitter)

link

string

URL that opens when the icon is clicked

Server Tips

js

Tips are displayed one at a time in the bottom-left tip box and rotate every 5 seconds with a fade transition. Add as many strings as you want.

Team Modal

js

Property
Type
Description

showTeamButton

boolean

Set to false to hide the "OUR TEAM" button entirely

team[].name

string

Staff member's display name

team[].role

string

Staff member's role (displayed in uppercase)

team[].avatar

string

URL to the member's avatar image

💡 The team grid is inside a scrollable modal, so there is no member limit. Click the backdrop or the ✕ button to close it.

How It Works (Technical)

Loading & Shutdown Flow

  1. When the player connects, client.lua immediately creates a black scripted camera to prevent the default GTA bridge camera from showing.

  2. The HTML loading screen (index.html) is displayed by FiveM via the loadscreen manifest entry.

  3. config.js is loaded first in the <head> and immediately injects a <link rel="preload"> for the background video using Config.video.source, so the video starts buffering before any other asset loads.

  4. The client script polls until three conditions are all true: the network session has started, the player is active, and the player ped exists.

  5. After a 2-second safety delay, it sends a { action: "shutdown" } NUI message to the loading screen, triggering a fade-out animation on the HTML side.

  6. After 800ms, ShutdownLoadingScreen() and ShutdownLoadingScreenNui() are called, the custom camera is destroyed, and the screen fades back in cleanly over 1 second.

Progress Bar

The loading bar is driven by FiveM's native loadProgress events sent to the NUI. The status text updates automatically through the following stages:

Event
Status Text

startInitFunctionOrder

Initializing Session...

initFunctionInvoking

Loading: <resource name>

startDataFileEntries

Loading Map Assets...

onLogLine

Shows the raw log line message

PreviousInstallationNextMedia Hosting

Last updated