by Morknag & NotLoctus
LIVE PREVIEW
PROFILE
// your account and overlay link
Account
Overlay Link
Add these URLs as Browser Sources in OBS. Use ▶ TEST to fire a live alert into OBS right now.
Overlay Name
Session
Loading session info...
Setup Wizard
Run the setup wizard again to reconfigure your overlay from scratch.
INTEGRATIONS
// event sources and tip platforms
Event Source
Streamer.bot is the recommended option — direct event push, lower latency, tip platform support, and full control over routing. Twitch Direct works instantly with no extra software, great for getting started.
📡
Twitch Direct
Quick start · no extra software
Streamer.bot
Direct push · tips · full control
RECOMMENDED
✅  Overlay connects to Twitch automatically when OBS loads the browser source. Already using Streamer.bot? Switch above for lower latency and tip platform support.
Tips & Donations
Twitch doesn't send tip/donation events. Connect Streamlabs or StreamElements to receive them in real-time — no OAuth, just paste your token below.
⚠️  No tip source configured. Tip and donation events won't fire in the overlay until you add a Streamlabs or StreamElements token below.
📺 Twitch Charity Donations ?
Show overlay alerts for Twitch charity campaign donations. Requires an active charity campaign on your channel — this is separate from tips sent via Streamlabs or StreamElements.
Streamlabs streamlabs.com/dashboard → Account Settings → API Settings → Your Socket API Token
StreamElements StreamElements Dashboard → Account → Channels → JWT Token
Connection Status
Twitch EventSubAlways active
Twitch CharityDisabled
Streamer.botNot configured
StreamlabsNo token
StreamElementsNo token
THEMES
// theme, bar appearance, and colours
Bar Theme
Pick a preset colour theme — or choose Custom to edit bar colors manually.
Dark
Cyberpunk
Fire
Ice
Void
Emerald
Gold
Rose
Minimal
Custom
Always show bar
Bar stays visible at all times. Turn off to only appear when events fire.
Background Banner
Optional image displayed behind the bar in OBS. Glow and color settings still apply on top.
Corner Radius
All corners 6px
Text Theme
Pick a colour preset for the channel name and event text — independent from the bar theme.
Green
Cyan
Purple
Orange
Gold
Rose
Ice
White
Red
Custom
Fonts
Display fonts for the channel name and event text on the overlay.
CHANNEL NAME FONT
Morknag
EVENT TEXT FONT
New follower! 👤
Text Size
Control the font size of each text element on the overlay.
Channel Name 28px
Main Event Text 30px
Secondary Text 22px
Dimensions
EVENTS
// configure each event slot — icon, colour, message, and behaviour
FOLLOW
👤
💜
SUB
🌟
GIFT SUB
Alert text (auto): {gifter} gifted {recipient} a sub! 🎁
This format is automatic — the thank-you message shows after.
🎁
🎀
🕐 Show in bar for minutes after triggered
CHEER
💎
TIP
💰
🤑
RAID
Alert text (auto): {channel} raided with {viewers} viewers!
This format is automatic — the thank-you message shows after.
⚔️
🚨
🕐 Show in bar for minutes after triggered
EFFECTS
// overlay visual effects
Inactive Icon Dim
Opacity of non-active icons during an alert 0.25
Scan Lines
CRT-style horizontal lines
Glitch Sweep
Highlight line sweeps the bar
Vignette
Dark edges, focus to center
Film Grain
Subtle noise texture
Corner Brackets
HUD-style corner accents
RGB Line
Chromatic sweep (cyan/red/purple)
Flicker
Random opacity flicker, CRT feel
ANIMATION
// timing and speed
Channel Name Effect
Bar Entrance
AUTO-ROTATION
// cycle through last known events on a timer
Settings
Enable auto-rotation
Cycle recent events on a timer when idle
Name watermark
Channel name glows alone after the bar exits before the next rotation
Watermark Duration (s) 10
Time Between Rotations 5 min
HYPE TRAIN
// trading-card overlay for Twitch hype trains
Enable Hype Train Overlay
When off, the hype train overlay won't appear in OBS and the URL is hidden from the Profile page.
Preview
🚂
Save settings first to load preview
Display Mode
Choose which visual style appears in OBS when a hype train starts. Add the URL from the OBS Browser Source URL card below as a Browser Source — use the sizes in the guide below.
🃏
Card
Trading card, centred
📢
Banner
Wide bar overlay
🚂
Loco
Animated locomotive
Minimal
Text + progress only
OBS Browser Source — Recommended Sizes
🃏
Card
400 × 500 px
✅ Allow transparency Position: corner of screen
⚠️  Allow transparency must be checked in the browser source properties — otherwise OBS renders a solid background behind the overlay.
Entry & Behaviour
Show level number on card
Displays the current hype train level (1–5) prominently on the overlay.
Auto-hide when hype train ends
Overlay animates out automatically when the hype train expires or completes.
Show countdown timer
Displays a live countdown on the overlay showing how long until the hype train expires.
Linger after end (seconds) ? 8
Progress Bar
Customise the hype train progress bar that fills as viewers contribute.
OBS Browser Source URL
Quick copy for your active display mode. Change the mode above and this updates automatically.
MUSIC PLAYER
// YouTube Music · Spotify · any player via OBS
Enable Music Player
Shows the OBS URL in the Overlay Link section when enabled.
ADMIN
// registered users — visible to morknag only
Registered Users
Send Update Message
// posts a formatted embed to the support Discord channel
// unsaved changes

⚡ FIRE TEST ALERT

Fires a fake event into your live overlay. OBS picks it up within 3 seconds — no need to refresh.

⚙ OBS BROWSER SOURCE SETUP

1Copy your Alert Bar URL from the Overlay Link card above.
2Open OBS → Sources panel → click + → choose Browser Source.
3Paste the URL. Set Width to match your bar width (default 800) and Height to match bar height (default 90).
4Check Transparent background — required for the bar to float over your scene.
5Click OK. Position the source at the top or bottom of your scene.
6Right-click the source → Transform → Fit to Screen if you need it full width.
7Save your scene. The overlay will auto-update when you change settings here — no need to refresh OBS.
💡 Use a separate Browser Source for the Hype Train and Music Player — each has its own OBS URL.