nCore Warp Drive Loading – 3D warp tunnel loading screen documentation

A warp tunnel loading screen for FiveM. Free, with the full code.

nCore Development · intelnpc.com · Resource: ncore_warpdrive_loading · Version: see fxmanifest.lua

What it is#

While the game loads, the camera flies through a tunnel of neon rings and hexagon gates, and it gets faster as the progress goes up. A big progress ring sits around the server name. At 100% the tunnel accelerates into hyperspace and flashes white. The player's name, tips, rules, news, staff and a music player are on top.

It needs no framework, no database and no other resource. No music ships with it, you add your own tracks.

Features#

The tunnel#

• A real-time 3D scene: neon rings, rotating hexagon gates, partial ring segments, light streaks, dust, a grid wall and a glowing core. The tunnel itself is 8 draw calls. Bloom and the motion trails run as extra full-screen passes on top.
• The progress sets the speed, brightness, density, streak length and field of view. scene.reactToProgress turns that off.
• On every beat of the music a shockwave runs down the tunnel and the ring pulses. The real beat needs tracks inside the resource. With a track link, or with no music, a steady 120 BPM pulse runs.
• Finale at real 100%: hyperspace acceleration, a white flash and a burst around the ring. scene.finale turns it off.
• Bloom (scene.bloom.*) and motion trails. Shape and look keys in scene.tunnel.*: bend, roll, fov, trails, colorCycle, density, gates, arcs, wall, shockwave, core. scene.speed scales the flight speed.
• Quality high, medium, low or auto. Low uses fewer rings, streaks and dust, drops the grid wall and the motion trails and renders at 75% of the resolution. On auto it starts on high (medium above about 4.2 million pixels) and steps down one level when frames take too long, with a line in F8 when it does.
• A frame cap (scene.maxFps, 10 to 240, 60 by default) and a render scale (scene.renderScale, 0.25 to 1). It drops to half resolution while the rules gate is open.
• If WebGL 2 is missing or the scene fails, a 2D fallback with color glows, soft streaks and floating particles takes over. One F8 warning says why. scene.enabled: false shows the 2D version on every PC.
• The tunnel pauses while the window is hidden and releases the graphics context after the fade out.
• Over a background video or image the tunnel turns off or stays as a light overlay (scene.withMedia, 'off' or 'overlay').
• With reduced motion on in the system, the tunnel stops traveling and the flash is off.

Progress ring and status#

• A ring with a gradient arc, a pulsing head, 84 minor ticks, numbered stage ticks that light up and a big percentage.
• "Stage nn / total" with 7 stage names. The game's log lines replace the stage name for a moment. "Ready - Welcome to the city" at 100%.
• The ring moves by itself up to 90% until the game reports progress, then follows it.
• A status chip with the Online label and dot, players against slots and ping.
• The title is your server name with color codes removed, unless you set brand.title. Pre-title, subtitle and footer are yours too.
• A logo above or in place of the title.
• A welcome line with the FiveM name. I also try to read the character name from QBox, QBCore or ESX, but the screen can close before the character is loaded, so expect the FiveM name most of the time. playerName in the config only sets the name in the browser preview.
• Rotating tips with F-keys and /commands drawn as key caps.
• Social buttons with icons. In game a click opens the link.

Look#

• Theme with 14 colors that drive the interface and the tunnel.
• Optional background video with an ordered source list and fallbacks, or an image slideshow with a slow zoom. Both are off by default. assets/video/README.txt explains formats and why a link is better than a big file in the resource.
• Pattern overlay, scrim, vignette, film grain, corner brackets and rising particles, each with a switch.
• The layout scales with the screen height and has a tall layout for narrow screens.

Info panel#

• A tab bar with a card deck at the bottom: Rules (numbered cards), News (tag, date, title and lines, only when there is news, 8 entries by default) and Staff (avatar letter, name, role, badge). The selected tab stays when news refreshes.

Music#

• Your own .mp3 or .ogg tracks with previous, play/pause, next, a volume slider and a numbered popup list.
• Elapsed and total time with a thin progress line.
• Shuffle, loop and autoplay. The first click or key press starts the music if the browser blocks it.
• A spectrum visualizer (4 to 48 bars, 14 by default) and a waveform line. The real spectrum needs local tracks, if any track is a remote link it uses a synthetic signal.
• The volume is remembered for the next join. The music fades out over 0.7 seconds at the end.

Rules gate#

• Off by default. Set setr wdl:rulesGate 1.
• Holds the screen until the player accepts. Scroll to the end first, a version badge, a Decline button that disconnects with a reason in your language, a dimmed and blurred background.
• Once per rules version or on every join (wdl:rulesMode).
• If another resource closes the loading screen while the gate is open, the same panel opens again above the game.
• Acceptances go to data/rules_accepted.json with the player's identifier, the rules version, the time and the player's name. That is personal data, so mention it in your privacy text.
• The client script holds the screen, so treat the gate as a prompt for the player. The server saves the answer and drops a player who declines, but it does not check on its own that anyone accepted.

Live news and tips#

• data/news.json and data/tips.json, or JSON links (wdl:newsUrl, wdl:tipsUrl) fetched every 5 minutes (wdl:contentRefreshMinutes). Pushed content comes first, then links, then files, then config and language file. data/README.txt shows the file format.
• The files are read again when a player connects, so a saved change shows up for the next one.
• SetNews and SetTips for other resources. Up to 12 news entries and 30 tips, plain text only. If a link fails, the content already loaded stays.

Connecting#

• At connect the server hands over the player's name, count, slots, server name, the newest 4 news and 10 tips.
• It works next to queue, whitelist, allowlist and anticheat resources, and next to monitor, vmenu and easyadmin. Detection is by resource name. wdl:useDeferrals forces it on or off.
• The screen waits for the session, then the gate, then fades out for 0.7 seconds.

Languages and tools#

• 10 languages: English, Hungarian, German, French, Italian, Spanish, Brazilian Portuguese, Polish, Czech and Dutch. Copy locales/en.json to add yours.
• demo.html plays a scripted take of about 50 seconds in your browser. See Browser demo.
• The optional dev dock (devDock) adds a Replay button. Each part of the screen starts on its own.
• Fonts, icons and the 3D library ship inside the resource, so there are no outside requests unless you set a media link.

Commands, exports and events#

-- client
if exports.ncore_warpdrive_loading:IsLoadingScreenDone() then
    -- the screen is gone and the rules gate is answered
end

AddEventHandler('ncore_warpdrive_loading:finished', function()
    -- fires once, when the screen is done
end)

-- server: returns true when at least one entry was usable
exports.ncore_warpdrive_loading:SetNews({
    { title = 'Winter update', date = '2026-07-24', tag = 'Update', body = { 'Two new legal jobs at the docks.' } }
})
exports.ncore_warpdrive_loading:SetTips({ 'Press F1 to open your phone.' })

Pushed lists win over the links and the files until you push again. Push an empty list and the links or the files are used again.

Requirements#

• WebGL 2 on the player PC for the tunnel. Others get the 2D fallback.
• Nothing else. QBox, QBCore and ESX are optional, for the character name when it loads in time.
• Instant first-frame data needs a FiveM build with deferrals.handover.

Config files#

• config.js for the tunnel, theme, media, music, panels and gate look.
• locales/*.json for all texts.
• data/news.json and data/tips.json, see data/README.txt.
• server.cfg convars, see below.

Convars#

Set them with setr above ensure ncore_warpdrive_loading.

Install steps are in INSTALLATION.md.

Browser demo#

Double-click demo.html and it opens in your desktop browser with every feature playing, straight from the folder. It reads your config.js, so you see your colors, brand texts, staff and music. The news and tips are demo samples, and so are the rules unless you set rules in config.js. Players never download the demo files.

Start options go after demo.html?, joined with &, for example demo.html?theme=sunset&lang=hu&clean=1.

The 5 color presets only exist in the demo. To use one on your server, copy its colors from THEMES in demo/demo.js into theme in config.js.

Opened from disk, the spectrum bars and the beat use the synthetic signal. Served over http they follow the real audio. The browser holds sound until the first click, so click once after each restart.

FAQ and troubleshooting#

Support#

Support is on intelnpc.com and I reply within 72 hours.

nCore Warp Drive Loading is made by nCore Development. It is not approved, sponsored or endorsed by Rockstar Games.