NZXT-ESC is the most advanced custom LCD screen editor for NZXT Kraken Elite coolers. Design fully personalized LCD layouts with MP4/GIF backgrounds, custom metrics, text, dividers, clocks, dates, Pinterest/YouTube media, and more all synced live inside NZXT CAM via Web Integration.

Built for creators, enthusiasts, and PC modders who demand complete control.

Free for personal use only commercial use is strictly prohibited.

I’m actually not a software developer. This project came together in about 20 days, and along the way I learned a lot — and made plenty of mistakes too. Right now, I’m rewriting it from scratch with everything I’ve learned so far. I’ll be back with a much bigger and cleaner update soon 🚀

🇬🇧 English • 🇹🇷 Türkçe • 🇩🇪 Deutsch • 🇪🇸 Español • 🇧🇷 Português-BR • 🇫🇷 Français • 🇮🇹 Italiano • 🇯🇵 日本語

• 🚀 Quick Start
  • Method 1 — Direct Launch (Recommended)
  • Method 2 — Manual Installation (Inside NZXT CAM)
  • Recommended: Rename the Integration Card
• 🎛 Using the Editor (Configure Button)
• 💡 What Makes NZXT-ESC Special?
  • 1. Design-Oriented Editing Experience
  • 2. Full Element-Based Overlay Engine
  • 3. Real-Time LCD Synchronization
  • 4. Advanced Media Engine
  • 5. Preset System (Early Access)
• 🌍 Supported Languages
• 🧪 Technical Details
• 🔧 Developer Information
• 🕛 Version History
• 🔗 Links
• 📜 License

NZXT-ESC works INSIDE NZXT CAM using the "Web Integration" feature. There are two ways to install it:

1. Copy this into your browser's address bar:

   nzxt-cam://action/load-web-integration?url=https://mrgogo7.github.io/nzxt-esc/
   

2. Press Enter.
3. Your browser will display a question: "Open nzxt-cam link with NZXT CAM?" → Approve / Allow
4. NZXT CAM will launch automatically.
5. You will see a confirmation window: Load Web Integration? Are you sure you would like to load the following web integration?

   https://mrgogo7.github.io/nzxt-esc/
   

6. Press "Load".
7. After loading, open the "Custom Web Integration" card.

1. Open NZXT CAM.
2. Go to: Lighting → Kraken Elite V2 → LCD Display
3. Change the display mode to: Web Integration
4. Find the card named: Custom Web Integration
5. Click "Settings".
6. Enter the URL:

   https://mrgogo7.github.io/nzxt-esc/
   

7. Press "Apply".
8. Then press: Add as Card
9. A new Web Integration card called "My Web Integration" will appear.
10. Select "My Web Integration".
11. Press "Configure" to open the NZXT-ESC editor.

NZXT CAM assigns the default name "My Web Integration". To rename:

1. Select "My Web Integration".
2. Press "Edit".
3. Change the fields to: Title:

   Elite Screen Customizer
   

   Description:

   NZXT Elite Screen Customizer (NZXT-ESC)
   

This helps distinguish the integration from others.

All editing is performed INSIDE NZXT CAM via the "Configure" button.

Inside the editor you can:

• Add / remove metric, text, and divider elements (up to 20 elements per overlay)
• Adjust position, rotation, scale, opacity, and color
• Choose MP4 / GIF / PNG / JPG background media
• Use Local Media files stored in the browser via IndexedDB
• Manage presets (Import, Export, Duplicate, Delete, Rename, Apply)
• Use overlay preset templates (Single, Dual, Triple, Quadruple InfoGraphic layouts)
• Import overlay presets with Replace or Append options
• Quickly switch between favorite presets via the Quick Favorites dropdown
• Preview all changes in real time on your Kraken Elite LCD

No external URL or config.html is required anymore.

NZXT-ESC is not a theme pack — it is a full, design-oriented layout editor built specifically for the Kraken Elite LCD.

It offers complete creative freedom far beyond what NZXT CAM supports natively.

NZXT CAM does not allow:

• Free element positioning
• Element scaling or rotation
• Custom text overlays
• Transparent colors
• MP4 backgrounds
• YouTube backgrounds
• Pinterest URLs
• Mixed media + overlay combinations

NZXT-ESC enables all of these.

• Free drag-and-drop placement
• Rotation and scaling per element
• Transform handles around the circular LCD preview
• Arrow-key micro adjustments
• Minimal and distraction-free interface
• Accurate circular preview matching real hardware

You can freely add and customize:

Metric — Display CPU/GPU/VRM/RAM values live from NZXT CAM.

Text — Labels, titles, custom lines with outline, rotation, and full styling.

Divider — Visual separators with adjustable thickness, length, and angle.

Clock — Digital time with 12h/24h modes, custom formatting, outline, rotation, and full transform support.

Date — Fully customizable date formats (DD.MM.YYYY, MMM DD, YYYY-MM-DD, etc.), outline, rotation, transform support.

Every element supports:

✔ Rotation ✔ Resizing ✔ Outline color & thickness ✔ Drag positioning ✔ X/Y offsets ✔ Z-order control

Overlay Preset System

Quickly apply pre-configured layouts using the template picker modal. Choose from Single, Dual, Triple, or Quadruple InfoGraphic templates, each with optimized positioning and styling. Templates can be imported with Replace (overwrites existing elements) or Append (adds to existing elements) modes. When appending, zIndex values are automatically normalized to prevent rendering conflicts. The system supports up to 20 overlay elements per configuration.

Inside the Editor:

🕑 Clock Element

A fully customizable digital time overlay supporting:

12h / 24h formats

Real-time updates

Rotation, resizing, outline

Full transform engine support

Works exactly like Metric and Text elements

📅 Date Element

A flexible date overlay with:

Custom format input (DD.MM.YYYY, MMM DD, YYYY-MM-DD, etc.)

Automatic multilingual month/day names

Rotation, outline, transform support

Same workflow as other visual elements

🎛 Background Media

Choose MP4 / GIF / PNG / JPG / YouTube / Pinterest or local media.

🎨 Theme & color controls

Full color picker with outline + alpha + stepper support.

✨ Layout interactions

Drag, resize, rotate, delete, duplicate, reorder.

Supports: MP4, GIF, PNG, JPEG

Pinterest boards

YouTube videos (with safe warning modal)

Local browser files

Automatically downscales heavy content to prevent Kraken LCD overload.

NZXT-ESC now includes a built-in system to load local images or videos directly into the editor.
Files are securely stored in IndexedDB and never leave your device.

Supported file types:

• JPG / PNG / GIF
• MP4 video
• Max size: 150 MB

Key features:

• Fully offline usage — no external hosting required
• Works with rotation, scale, fit/align, and all transform tools
• Real-time LCD synchronization identical to remote media
• Each preset may contain one local media reference
• Local media is not included inside exported preset files
• Upon import, presets that used local media will display a warning and allow re-selection

This system enables true offline, privacy-friendly backgrounds while remaining 100% compatible with the editor’s transform engine.

YouTube Integration Highlights:

• YouTube videos play on the actual LCD (autoplay/mute/loop supported)
• The editor’s Preview cannot play YouTube videos due to embedded-player restrictions
• Instead, a red draggable placeholder is shown
• Users can:
  • Position the YouTube video
  • Scale the video
  • Apply align/fit settings
  • Place any overlay elements on top
• The LCD always reflects the final result in real-time
• All standard background tools work with YouTube seamlessly

Fit modes:

• Cover — fill entire display
• Contain — maintain full aspect ratio
• Fill — stretch to fit (optional)

This makes NZXT-ESC the first full YouTube-capable LCD editor for NZXT CAM.

Create unlimited presets

Export or import presets

Append or overwrite existing layouts

Automatic conflict resolution

Multi-tab preset synchronization

Available actions:

• Import
• Export
• Delete
• Duplicate
• Rename
• Apply

Presets store the full layout as JSON.

Overlay Preset Import/Export

Export your overlay element configurations as .nzxt-esc-overlay-preset files for backup or sharing. Import overlay presets with validation and error handling. When importing, choose Replace mode to overwrite existing elements or Append mode to add new elements while preserving current ones. The import system includes automatic ID generation for template elements and zIndex normalization for appended content.

Quick Favorites Dropdown

Hovering over the Preset Manager button reveals a compact dropdown listing up to 10 favorite presets (marked with ★). Each entry displays the preset name, favorite status, and an "active" indicator for the currently applied preset. Selecting an item immediately applies that preset using the same atomic merge and autosave logic as the full manager. The dropdown features smooth fade-in/fade-out animations and includes a direct link to open the full Preset Manager interface. This provides an extremely fast workflow for users who frequently switch between a small set of preferred presets.

• Exported preset files do not include the local media binary
• Importing a preset that previously used local media shows a guided warning
• Users can reselect the file via the new Browse modal
• All existing preset functions (Apply, Duplicate, Rename, Delete) fully support local media references
• Switching presets automatically loads the appropriate local media from IndexedDB (if available)

NZXT-ESC supports multiple languages for a localized user experience. Switch between languages using the language selector in the editor header.

All translations are maintained in a single TypeScript file for easy management and updates.

• React 18
• TypeScript
• Vite bundler
• LocalStorage sync + event broadcasting
• Circular LCD-aware render engine
• AABB + rotation transform math
• Overlay preset system with template-based element generation
• Automatic ID assignment and zIndex normalization
• Multi-language UI support (English, Turkish, Spanish, German, Portuguese, French, Italian, Japanese)

Clone and Install:

git clone https://github.com/mrgogo7/nzxt-esc
cd nzxt-esc
npm install

Start Dev Server:

npm run dev

Expose on LAN for NZXT CAM testing:

npm run dev -- --host

Build:

npm run build

Preview build:

npm run preview

Contributing:

• Open an Issue before starting major changes
• Keep PRs small and focused
• Use clear commit messages
• Follow project structure

Added Clock Element

Added Date Element

Added full digit/format parsing engine

Added multilingual month/day rendering

Added full i18n parity for all 8 languages

Added tooltip multiline support

Fixed bounding box calculations for new elements

Fixed resize/rotate parity with Text/Metric

Completed TypeScript strict-mode cleanup (TS6133 compliance)

Performance improvements & bug fixes

Release Date: 2025-11-26

• Local Media Backgrounds (IndexedDB)
  • Import JPG, PNG, GIF, or MP4 directly from your computer
  • Files stored securely via IndexedDB
  • Works offline
  • Compatible with all fit/scale/align transform modes
  • Fully synchronized to the Kraken LCD in real-time
  • URL field shows Local: filename.ext in multilingual format

• Exporting presets containing local media triggers a warning (media not included)
• Importing such presets displays a reselect message
• Preset switching automatically loads local media if available

• New Browse modal for selecting local media
• Full multilingual support for all local media messages
• New button icon + updated styling

• Improved media resolution pipeline
• Blob revocation + cleanup to prevent leaks
• Better error handling & i18n coverage

Additional Note:

• Introduced YouTube background support (LCD playback) with full positioning/scale alignment using the new placeholder-based Preview system.
• Unified transform math ensures proportional Preview ↔ LCD alignment.

Release Date: 2025-11-24

• Kraken LCD Real-Time Sync Overhaul
  Real-time LCD synchronization wasn't newly introduced, but the entire internal system has been rebuilt. The previous implementation relied on preset reload cycles and caused delays, missed updates, and snap-back behaviors. The new BroadcastChannel-based cross-tab sync architecture provides a stable, low-latency, frame-synced update flow.

• Overlay rendering reliability improvements
  When the runtime overlay state is empty, the system now safely falls back to stored preset overlay data.

• Background/media stability upgrade
  Removed transform snap-back on input changes.

• KrakenOverlay viewer optimization
  No longer reloads presets; now listens directly to runtime changes for instant updates.

• Fixed delayed LCD updates (previously updated only after drag end).

• Fixed missing overlays in Kraken view after refresh.

• Fixed duplicate React key warnings when appending overlay presets.

• Fixed media/background settings reverting during adjustments.

• Introduced a dedicated runtimeBroadcast.ts module for inter-tab communication.

• Added setElementsForPresetSilent() for safe runtime updates without broadcast loops.

• Updated useOverlayConfig() to properly handle krakenMode + storage fallback.

• Unified all overlay update sources into a single runtime-driven pipeline.

• BroadcastChannel falls back gracefully if unsupported.

• Runtime updates are deeply cloned before sync to prevent mutation issues.

• This release replaces the old sync architecture with a modern, stable, real-time pipeline.

• Overlay & Preset Manager Quality Upgrade Pack
• New Overlay Export Modal: Export now asks for a filename using a clean modal (supports ENTER key)
• New Preset Button: Instantly creates a brand-new empty preset with default values
• Improved Preset Manager UI: Reordered preset action buttons: Delete → Favorite → Duplicate → Rename → Apply
• Improved Overlay Management:
  • "Clear All Overlay Elements" now uses a confirmation modal
  • Delete key removes selected element (with confirmation modal)
  • Tooltip support added for all delete buttons
• Global Modal Usability Upgrades: All modals now support confirming via ENTER key
• ID Collision Fix for Overlay Preset Append: Fully resolved duplicate React key issue by regenerating element IDs on append
• General Stability Improvements: Runtime architecture preserved, autosave rules respected, and all FAZ-9 constraints remain intact

• Overlay preset system with template picker modal
• Single, Dual, Triple, and Quadruple InfoGraphic templates
• Overlay preset import/export with Replace and Append modes
• Element limit increased to 20 per overlay
• Automatic zIndex normalization for appended templates
• Dynamic template list generation from template definitions
• Enhanced error notifications for import/export operations
• Viewport-aware menu positioning improvements

• Element-based layout engine
• Rotation & scale transform system
• Selection highlight
• Arrow-key movement
• Legacy modes removed
• Full preset manager (Import/Export/Duplicate/Delete/Rename/Apply)
• Quick Favorites dropdown for instant preset switching
• UX and stability improvements

See GitHub Releases for older versions.

Repository: https://github.com/mrgogo7/nzxt-esc/

Support: GitHub Sponsors • Patreon • Buy Me a Coffee

Issues:

https://github.com/mrgogo7/nzxt-esc/issues

Personal Use License

Allowed: Personal use • Personal modifications • Redistribution with credit

Not Allowed: Commercial use • Selling, bundling, renting, or monetizing in any form

NZXT-ESC is a hobby and community-driven project intended only for personal use.