Tutorials

Step-by-step video tutorial scripts for all NXPRM apps — from first login to live performance. Select an app below to browse its tutorials.

HazR — Real-time MIDI Visual Performance

HazR turns your MIDI controller into a live visual instrument. Eight tutorials take you from account creation through to multi-platform streaming, custom Python generators, and the external API.

Tutorial 1

Getting Started

Account setup, first login, interface tour.

~5 min · Beginner

Tutorial 2

MIDI Setup & First Performance

Connect your controller, understand note mapping.

~8 min · Beginner

Tutorial 3

Visual Patterns & Controls

Master every slider and unlock Artist patterns.

~10 min · Intermediate

Tutorial 4

Live Performance Tips

Stage setup, fullscreen, best practices.

~7 min · Advanced

Tutorial 5 Venue only

Live Streaming to All Platforms

RTMP & SRT endpoints, platform setup, OBS mode, and browser streaming.

~13 min · Venue

Tutorial 6 Artist+

Presets & MIDI CC Mapping

Save snapshots of your visual state, recall them instantly, and map any slider to a physical knob.

~8 min · Artist+

Tutorial 7 Artist+

Setlist, Custom Generators & Modes

Build a cue sequence for your set and write your own Python visual algorithms.

~10 min · Artist+

Tutorial 8 Venue only

Multi-Display, Logo Overlay & External API

Mirror visuals to a second screen, add a branded logo, and control HazR remotely via API.

~8 min · Venue

Tutorial 1

Getting Started with HazR

~5 min · Beginner

Objective: The viewer creates an account, logs in, and gets oriented in the dashboard.

Screen requirements: Browser open at nxprm.io/hazr, then dashboard.

Opening — 0:00

[Black screen fades in. Ambient drone begins. Title card: "HazR by NXPRM — Tutorial 1: Getting Started"]

"Welcome. HazR turns your MIDI controller into a live visual instrument. In this first tutorial, we're going to get you set up from scratch — creating an account, navigating the dashboard, and making sure everything is ready for your first session. This should take about five minutes."

Section 1 — What is HazR? (0:30)

[Screen: hazr landing page scrolling slowly]

"HazR is a browser-based app. There's nothing to install. You open a URL, connect your MIDI keyboard or controller, and your playing is instantly translated into generative visuals — particles, geometric patterns, colour fields, all reacting in real time to what you play and how hard you play it."

"You can use it for live performance projected on a screen behind you, for studio experimentation, or just for the experience of watching music become light."

[Cut to 5-second clip of live performance footage or screen-captured demo]

Section 2 — Creating your account (1:15)

[Screen: hazr → clicking "Launch App" button]

"To get started, go to nxprm.io/hazr and click Launch App."

[Browser redirects to auth.nxprm.io Keycloak registration page]

"You'll be taken to the NXPRM identity portal. Click Register and fill in your email and a password. You'll receive a confirmation email — click the link inside it to activate your account."

[Show inbox, click link, page confirms activation]

"That's your account. Free forever to start — no credit card needed."

Section 3 — The Dashboard (2:30)

[Screen: dashboard/index.html]

"After logging in, you land on your HazR dashboard. Let's take a quick tour."

[Cursor highlights each nav item as it's mentioned]

"At the top: Dashboard takes you back here. Launch App opens the visual engine. Resources brings you to documentation and tutorials. And Logout ends your session."

"On the main panel you can see links to the app, your profile, usage analytics, and payment and subscription management."

Section 4 — Launching the app (3:30)

[Screen: clicking "Launch App"]

"Click Launch App. The first time you do this, your browser may ask for permission to use MIDI devices — click Allow. This is how the app reads input from your controller."

[App loads. Status shows "Waiting for MIDI Input..."]

"The visual canvas is now running. At the top left you'll see the MIDI status. Right now it says 'Waiting for MIDI Input' — that's fine, we'll connect a device in the next tutorial."

"Even without a controller, you can press keys on your computer keyboard — A through L on the home row — to trigger visuals and audio."

[Demonstrator presses 'a', 'd', 'g' — visuals respond]

Closing (4:45)

"That's Tutorial 1 complete. You've created your account, explored the dashboard, and opened the app for the first time. In Tutorial 2, we'll connect a real MIDI controller and talk about how your notes map to visuals."

[Outro card: "Tutorial 2: MIDI Setup & First Performance → watch next"]

Tutorial 2

MIDI Setup & First Performance

~8 min · Beginner

Objective: Connect a physical MIDI controller and play the first real session.

Requirements: USB MIDI controller, Chrome browser, HazR account.

Opening — 0:00

[Title card: "Tutorial 2: MIDI Setup & First Performance"]

"In this tutorial we're connecting a real MIDI controller. I'm using a 25-key USB keyboard — any class-compliant MIDI device will work the same way."

Section 1 — Connecting the device (0:30)

[Camera on hands plugging USB cable into keyboard, other end into laptop]

"Plug your controller in via USB. On macOS, Windows, and Linux, class-compliant MIDI devices are plug-and-play — no drivers needed."

[Screen: Chrome, navigate to the HazR app]

"Open the HazR app. Watch the MIDI status in the top left."

[Status changes from "Waiting..." to "MIDI Input Connected"]

"There it is — 'MIDI Input Connected.' Your device is live."

Section 2 — Understanding MIDI messages (1:45)

"Every note you play sends two values: the note number — which key you pressed — and the velocity — how hard you pressed it. HazR uses both."

"The note number selects the colour scheme — lower notes lean towards the beginning of the palette, higher notes towards the end, cycling every 12 semitones. The velocity controls the density and brightness of the pattern."

Section 3 — First performance (3:30)

[Full screen: HazR app, pattern slider at 0]

"Let's play. I'll start with slow, deliberate single notes — watch how each one shifts the colour field."

[Play slow single notes — visuals respond with clear colour changes]

"Now I'll play a chord — three notes at once."

[Play chord — multiple visual layers]

"And now something fast — a rapid run up the keyboard."

[Play rapid ascending scale — patterns shift quickly]

Section 4 — Experimenting with the controls (5:30)

[Move pattern slider]

"While playing, you can change the pattern with the Patterns slider. Try different values — each one changes the algorithm used to build the particle grid."

[Adjust speed X]

"Speed X and Y scroll the field. Setting both to zero freezes it. For a hypnotic loop, set X to 0.3 and Y to 0.1."

[Click Fullscreen]

"And hit Fullscreen. This is what your audience sees."

Closing (7:30)

"That's your first real performance. In the next tutorial we go deeper into visual patterns — including the ten AI-generated patterns available to Artist subscribers."

Tutorial 3

Visual Patterns & Controls Deep Dive

~10 min · Intermediate

Objective: Master all sliders. Demonstrate Artist-tier Python patterns.

Requirements: HazR account. Artist tier recommended for full demo.

Opening — 0:00

[Title card: "Tutorial 3: Visual Patterns & Controls"]

"This is where HazR gets deep. We're going to walk through every control in the app, understand what's happening mathematically behind each pattern, and then unlock the AI-powered patterns available on the Artist tier."

Section 1 — The 10 local patterns (0:30)

"The first 10 patterns — models 0 through 9 — run entirely in your browser using JavaScript. They are instant. There is no network round-trip."

[Slider to 0]

"Pattern 0 — Random. Every trigger generates a completely fresh layout — widths and margins are randomised on each MIDI event."

[Slider to 7]

"Pattern 7 — Spiral. Particles spiral outward from the centre, with density modulated by angle. The geometry rotates slightly with each trigger."

[Slider to 9]

"Pattern 9 — Circular Field. Particles cluster densely at the centre and fade toward the edges. The full set: 0 Random, 1 Checkerboard, 2 Vertical Bars, 3 Symmetric Triangle, 4 Cascading Waves, 5 Alternating Stripes, 6 Noise Field, 7 Spiral, 8 Stacked Clusters, 9 Circular Field."

Section 2 — Shape, size, and speed in detail (3:30)

"Shapes selects the geometry of each particle from 10 distinct forms. At 0 — Rectangle. Then Circle, Triangle, Pentagon, Hexagon, Heptagon, Octagon, Parabola, Hyperbola, and at 9 — Star."

"Size is camera zoom. Lower numbers zoom out — you see the full grid, small and precise. Higher numbers zoom in — the grid fills your vision and becomes abstract. For projection, I usually sit around 15 to 25."

Section 3 — Artist patterns (10–19) (5:30)

[Switch to Artist-tier account. Slide pattern to 10 — badge appears.]

"If you're on the Artist or Venue plan, you get ten additional patterns — models 10 through 19. These patterns are generated on the server by a Python engine for every single MIDI note you play."

[Slider to 12]

"Pattern 12 — Reaction Diffusion. This is a Gray-Scott simulation — the same mathematics used to model animal skin patterns. Feed rate responds to your velocity. Kill rate responds to the note."

[Slider to 19]

"Pattern 19 — Gravity Wells. N-body field strength. The note determines how many wells exist; velocity sets their mass. Play a chord and the wells multiply, creating complex gravitational topographies."

Closing (9:30)

"That's the full visual toolkit. In Tutorial 4, we put everything together for a live performance context."

Tutorial 4

Live Performance Tips

~7 min · Advanced

Objective: Stage-ready setup for live projection performance.

Requirements: HazR account, MIDI controller, projector or second display recommended.

Opening — 0:00

[Title card: "Tutorial 4: Live Performance Tips"]

"This tutorial is about performance. Everything we've built so far is now in service of one thing: a live show."

Section 1 — Display setup (0:30)

"For live performance, you want HazR running on a separate display — a projector, a large LED panel, or a second monitor. Set your monitors to Extended Desktop, not Mirror. Then move the HazR browser window to the output display and press the Fullscreen button."

Section 2 — Pre-show checklist (2:00)

"One: confirm MIDI Input Connected before the show starts. Two: set your starting pattern — start with a local pattern (0–9) for instant response. Three: set Speed X and Y to your preference. Four: set the Size for your projection distance — lower zoom for large projectors. Five: check the browser audio against the venue PA."

Section 3 — Building a set (3:45)

"Think of a HazR set in three movements. Opening: slow pattern, light velocity, let the audience settle. Middle: introduce speed, switch patterns mid-phrase. Peak: Reaction Diffusion or Interference, play hard, dense chords. Resolution: pull speed back, reduce velocity, let the field come to rest."

Section 4 — Managing your session (5:30)

"If the network drops during a set, the local patterns — 0 through 9 — continue working perfectly. Only the Python-generated patterns (10 through 19) require the server connection. Your core performance is always robust."

Closing (6:45)

"You're set up, you know your instrument, and you know how to perform with it. Everything else is practice."

Tutorial 5 Venue only

Live Streaming to All Platforms

~13 min · Venue

Objective: Set up multi-platform live streaming from HazR via OBS (RTMP or SRT) and directly from the browser.

Requirements: Venue plan, active accounts on your intended platforms with live streaming access enabled.

Opening — 0:00

[Title card: "Tutorial 5: Live Streaming — Venue Feature"]

"If you're on the Venue plan, your HazR performance can go live — simultaneously — on Facebook, YouTube, Instagram, TikTok, Twitch, X, and any custom RTMP destination you choose. One session, every platform, at the same time. You can push from OBS using either RTMP or SRT — we'll cover both."

Section 1 — The Stream Management Page (0:45)

[Screen: HazR dashboard → click "Live Stream"]

"From your dashboard, open Live Stream. The page has two endpoint sections: RTMP Endpoint and SRT Endpoint. Both use the same stream key — you choose which protocol to push with based on your setup and network conditions."

Section 2 — Configuring Platform Destinations (2:00)

"Facebook Live: paste just the stream key starting FB- from Professional Dashboard → Go Live. YouTube: combine the Server URL and Stream Key from YouTube Studio into one string. Instagram: paste the full rtmp:// URL from the mobile app. TikTok: paste the full RTMP URL from TikTok Live Studio. Twitch: paste just the stream key starting live_. X: combine server and key into one URL. Custom RTMP: paste any standard RTMP endpoint."

[Click Save Destinations]

"Click Save Destinations. Your settings persist across sessions."

Section 3 — OBS with RTMP (5:30)

"In OBS: Settings → Stream → Service: Custom. Server: rtmp://nxprm.io:1935/hazr. Stream Key: paste your personal key. Set up a Window Capture source targeting the HazR App tab. Click Start Streaming — the server detects the stream and relays to every configured platform."

Section 4 — OBS with SRT (7:30)

"SRT is more resilient than RTMP over unstable connections — it handles packet loss and variable latency far better, making it the better choice for venue networks or cellular connections."

"In OBS 30 or later: Settings → Stream → Service: Custom. Server: paste the SRT URL from the SRT Endpoint section — it includes your stream key embedded in the URL as the stream ID. No separate stream key field is needed. Click Start Streaming. The server receives the SRT stream, converts it, and relays it to your configured platforms — exactly as with RTMP."

[Show the SRT URL field on the stream page — reveal and copy]

"The SRT URL is hidden by default since it contains your key. Click Show, then Copy, then paste into OBS."

Section 5 — Browser Streaming Mode (10:00)

"Click Start Browser Stream on the stream page. Select the HazR App tab from the screen-share picker. The Live badge appears — your browser captures the tab, encodes it, and sends it to all your configured platforms. No external software required."

Section 6 — Regenerating your stream key (12:00)

"If you need to rotate your key, click Regenerate Key. Both the RTMP and SRT URL fields update immediately. Any active OBS session using the old key will disconnect — update OBS before streaming again. Platform destinations are unaffected."

Closing (12:45)

"Your HazR session — live, everywhere, at once. Use RTMP for reliable studio setups, SRT for venues and unstable networks."

Tutorial 6 Artist+

Presets & MIDI CC Mapping

~8 min · Artist+

Objective: Save and recall visual states as presets, then bind slider parameters to physical knobs via MIDI CC.

Requirements: Artist or Venue plan. MIDI controller with knobs or faders recommended.

Opening — 0:00

[Title card: "Tutorial 6: Presets & MIDI CC Mapping"]

"Presets let you snapshot any visual configuration and recall it instantly. MIDI CC mapping lets you bind any slider to a physical knob or fader on your controller."

Section 1 — Saving a preset in-app (0:45)

"In the app, open the Presets panel. Click Save Current as Preset and give it a name. The preset captures every slider position — pattern, shape, size, speed, color mode, opacity, logo position — everything. It's saved to the server immediately and persists across sessions and devices."

Section 2 — Recalling a preset (2:00)

"Click the preset name. Every slider snaps to the saved positions in one instant transition. You can also manage your preset library from the Presets page in the dashboard."

Section 3 — What is MIDI CC? (3:30)

"CC messages — Control Change — are what your knobs, faders, and expression pedals send. Every physical control generates a CC number between 0 and 127 and a value between 0 and 127 when you move it. HazR can intercept those CC messages and route them to any visual parameter."

Section 4 — Creating a mapping (4:30)

"Go to the MIDI Mapping page in your dashboard. Choose the parameter — for example Color Mode. Enter the CC number your knob sends. Choose the MIDI channel or leave it on All Channels. Click Add Mapping. Go back to the app and turn your knob — the Color Mode slider moves in real time."

Section 5 — Useful mappings for live performance (6:00)

"A practical live setup: one fader for Size, one for Speed X, one for Speed Y, one for Color Mode, and a button mapped to Opacity so you can black out the visual with a single key press."

Closing (7:30)

"With presets and CC mapping, HazR becomes a hardware instrument. Your controller is no longer just playing notes — it's conducting the entire visual score."

Tutorial 7 Artist+

Setlist, Custom Generators & Custom Modes

~10 min · Artist+

Objective: Build a cue-based setlist for live performance, then write Python visual algorithms as Custom Generators and Custom Modes.

Requirements: Artist or Venue plan. Basic familiarity with Python is helpful.

Opening — 0:00

[Title card: "Tutorial 7: Setlist, Custom Generators & Custom Modes"]

"This tutorial covers three features that unlock the full creative depth of HazR. Setlists let you pre-script your entire performance as a sequence of cues. Custom Generators let you write your own Python pattern algorithms. And Custom Modes let you write logic that reacts to every MIDI note in real time, controlling any visual parameter dynamically."

Section 1 — Creating a Setlist (0:45)

"Open the Setlist page from the dashboard nav. Click Create Setlist and give it a name. Add your first cue — fill in the parameters for your opening visual and label it 'Intro'. Add as many cues as you need. Each row represents one scene. Reorder by dragging."

Section 2 — Triggering cues live (2:30)

"In the app, open the Setlist panel, load your setlist. Click Next Cue — every slider jumps to the values you saved for that cue instantly. One finger advances the entire visual state. You composed the performance in advance."

Section 3 — Custom Generators (4:00)

"Custom Generators let you write a Python function that receives note and velocity data and returns a 40-by-30 grid of values. The template function receives note (0–127) and velocity (0–127) and returns a list of columns with 'value' keys between 0 and 1. Click Test to preview the output, then Save. Back in the app, activate it from the Custom Generator panel."

Section 4 — Custom Modes (7:00)

"Custom Modes control HazR's visual sliders directly. Write a respond() function that receives note, velocity, and the list of all currently active notes — and returns a dictionary of parameter names and their new values. Available parameters: mode, pattern, shape, color_mode, particle_size, speed_x, speed_y, speed_z. Your function runs server-side on every MIDI input."

Closing (9:30)

"Setlists, Custom Generators, and Custom Modes take the instrument from reactive to compositional. In Tutorial 8, we cover multi-display mirroring, branded logo overlay, and the external API."

Tutorial 8 Venue only

Multi-Display, Logo Overlay & External API

~8 min · Venue

Objective: Mirror visuals to a second screen, overlay a branded PNG logo, and control HazR externally via the API.

Requirements: Venue plan. A second device or screen is recommended.

Opening — 0:00

[Title card: "Tutorial 8: Multi-Display, Logo Overlay & External API — Venue Features"]

"The Venue plan is built for installation, events, and professional performance. This tutorial covers three features that extend HazR beyond your single screen."

Section 1 — Multi-Display Mirroring (0:45)

"In the app, open the Mirror Screen panel. Click Go Live. A unique display URL is generated — a full-screen visual canvas that mirrors everything happening in your app in real time. Open it on any device with a browser: a projector laptop, a TV backstage, a tablet at the venue entrance. Every slider change you make is broadcast to all connected screens within milliseconds."

Section 2 — Logo Overlay (2:30)

"The Logo panel lets you overlay a transparent PNG on the visual canvas. Click Upload PNG and select your image. The Size slider controls the width in pixels (10–1000). Position X and Y move it anywhere on screen. The Opacity slider lets you ghost the logo — a setting around 0.2 to 0.4 gives a clean watermark effect. Logo parameters are saved with presets."

Section 3 — External API (4:30)

"From the API Keys page in the dashboard, generate a key prefixed with syn_. To send a visual update, make a POST request to /api/external/visual with your API key in the Authorization header and a JSON body specifying the parameters — pattern, color mode, speed X, and so on. You can also start and stop streaming via the API: POST to /api/external/stream/start and /api/external/stream/stop. The /api/external/usage endpoint returns live session data."

Section 4 — Putting it together (6:30)

"A full Venue setup: your main laptop runs the HazR app. The Mirror URL is open on the venue projector and at the DJ booth. Your logo is overlaid at 0.25 opacity. Four knobs map to color mode, speed X, speed Y, and opacity. Your setlist has 12 cues pre-programmed. HazR is a complete visual production system, and you are the director."

Closing (7:45)

"That's the full Venue toolkit. Full documentation is at nxprm.io/hazr."