Three weeks ago a variety streamer with around 600 average viewers came to us with a screenshot. Her sub alert was a white rectangle with Times New Roman text that said "NEW SUBSCRIBER: username" in 24pt. It wasn't ironic. It was just the StreamElements default she'd never changed in two years of streaming. Her channel had real production value everywhere else — custom panels, a hand-drawn avatar, scene transitions with actual timing. But every sub notification was a white rectangle teleporting onto a dark overlay layer like it was a Word document attachment.
That disconnect is more common than you'd think, and it's almost always traceable to the same handful of design decisions — or non-decisions. Here's what actually matters when you're building an alert overlay that doesn't embarrass the rest of your production.
Your Latency Budget Is Not Infinite
Alert overlays live inside OBS as a browser source URL. Your stream's viewers see them with anywhere from 2 to 15 seconds of broadcast delay depending on encoding settings, CDN buffering, and whether they're on low-latency mode. Your alert itself has its own latency stack on top of that: EventSub webhook delivery from Twitch's servers to your alert service, the alert service processing and queuing the notification, the browser source polling or receiving a push event, then the animation firing.
In practice, Tangia's EventSub relay typically delivers events within 1–3 seconds of the trigger. The browser source in OBS receives the signal and begins the animation. Total perceived latency from the viewer action to the overlay firing is usually in the 3–6 second range on a well-configured setup. The mistake most streamers make is designing an alert animation that's 8–12 seconds long and then complaining chat reacted before the alert even appeared.
The 4-Second Rule for Alert Duration
An alert that runs longer than 4 seconds is competing with your content for attention, not adding to it. This isn't aesthetics — it's a latency mismatch problem. By the time an alert fires, chat has already seen the event. They've already typed the PogChamp or the GGs. A 10-second animation of a bouncing sub train car is a distraction to people who already processed the event. Four seconds is enough to register, celebrate, and return to gameplay. Six seconds if the animation is visually dense. Beyond that you're burning your audience's attention budget.
FIFO vs. LIFO: Queue Order Is an Aesthetic Decision
When multiple alerts come in fast — during a sub train or a hype train — queue order becomes a design question most streamers never consciously answer. First-in, first-out (FIFO) is the honest approach: alerts fire in the order they were triggered, which means the person who subbed first gets acknowledged first. Last-in, first-out (LIFO) prioritizes the most recent event, which creates visual excitement at the cost of fairness to earlier subs.
We're not saying LIFO is wrong. Some streamers prefer it during sub trains specifically because it keeps the energy focused on the current moment. But it's a decision that should be made deliberately, not by accident because that was the default setting. Tangia's queue manager defaults to FIFO for exactly this reason — the default should be the fair option, and you can override it per event type.
"The queue order is the vibe. FIFO says 'everyone gets their moment.' LIFO says 'the party is right now.' Pick one and own it."
Sound Layering Is Where Most Overlays Break
Sound design on alert overlays is a disaster zone. The most common failure pattern: streamer has desktop audio going to OBS, has a game audio source, has alert sounds coming through the browser source — and all three are at default volume levels that were never balanced against each other. The result is an alert sound that either gets completely buried in game audio or fires at a volume that makes chat type "CLIP THAT" sarcastically because it blew out their headphones.
The Browser Source Audio Problem in OBS
OBS treats browser source audio as its own audio source track. If you haven't explicitly routed it and set levels, OBS will pick up whatever the browser source outputs at full volume. The browser source itself renders in a Chromium instance that has its own audio context — it's not inheriting your OBS master volume. This means your alert sound level is set in two places simultaneously: in the alert configuration (what sound plays, at what gain) and in OBS's mixer channel for that specific browser source.
The fix is straightforward but easy to miss: set your alert sounds to roughly 80–90% in the alert config, then use OBS's audio mixer to bring the browser source audio track to a level that balances with game audio in your headphone monitoring. The OBS mixer level is your fine-trim. This also lets you mute alerts during specific OBS scenes (like an AFK scene) without turning off the entire browser source.
Sound Queue Depth and the Overlap Problem
When viewers pile in during a hype train and each one triggers a sound alert, the sounds stack. If your alerts have no queue and no cooldown, you get six sounds firing within two seconds, creating a noise wall that communicates nothing except chaos. A max queue depth of 3–4 simultaneous pending alerts, with a 2-second minimum gap between fires, is about the right balance between acknowledging everyone and keeping audio coherent. Beyond that, you're better off batching them into a "x viewers subscribed" consolidated alert rather than firing individually.
OBS Browser Source CSS: The Controls You Actually Have
One of the underused capabilities of an OBS browser source is the Custom CSS field. It lets you inject CSS directly into the page your browser source is rendering. For alert overlays that are served as web pages (which is what the Tangia browser source URL delivers), this means you can override font families, animation timing functions, and layout without touching any alert config panel.
A practical example: if your overlay's default font is Roboto but your stream panels use Space Grotesk, you can inject * { font-family: 'Space Grotesk', sans-serif !important; } into the Custom CSS field and the alert's text will match your branding. This doesn't affect the logic or the queue, just the rendering. It's the cheapest visual coherence win available on the platform.
The most useful Custom CSS overrides for alert overlay browser sources:
- Font family override: Match your panels and stream branding without touching alert config
- Animation timing function:
* { animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important; }smooths most default ease-in-out animations - Alert container background: Force transparency if the overlay is rendering a white flash on load —
body { background: transparent !important; } - Text size reduction: If alert text is rendering too large for your layout, a scoped font-size on the container element will scale it down without breaking alignment
There's a caveat: the Custom CSS field has a character limit in OBS (around 1000 characters depending on version), and injecting complex animation overrides can conflict with the overlay's existing CSS specificity. Keep it to targeted overrides, not wholesale style rewrites.
EventSub vs. PubSub: Why It Matters for Your Alert Timing
Twitch deprecated PubSub in 2024 in favor of EventSub, and this has concrete implications for how alerts behave. PubSub was a WebSocket connection that fired events in near-real-time but had no persistent delivery guarantees — if your connection dropped for 200ms, you missed the event. EventSub uses a webhook model (or a WebSocket EventSub subscription for tools that support it) with delivery retries, which means events are more reliably delivered but with slightly more infrastructure in the path.
The practical difference: on EventSub, alert delivery is more reliable across reconnects, but it's still platform-dependent. Tangia can't override Twitch's own delivery timing — we relay what EventSub delivers to us. If Twitch's webhook delivery is delayed on their end (which happens occasionally during high-traffic events), your alerts will fire late regardless of how your overlay is configured. This is a platform-level constraint, not a tool-level one, and it's worth understanding so you don't chase configuration ghosts when alerts are occasionally slow during major events.
The design constraints of alert overlays — latency budgets, audio routing, queue limits, CSS scope — aren't arbitrary limitations. They're the forcing functions that separate streamers who have thought through their production from streamers who haven't. The best-looking alert setups we see aren't the ones with the most effects; they're the ones where every decision was made on purpose.
If you want a queue that actually manages order and respects your audio balance, Tangia's overlay configurator gives you queue depth, sound level, and cooldown controls in one panel. Free tier includes the core queue. Five minutes to set up via OBS browser source URL.