Overview
Alert Studio Pro is VMSC's alert design surface — the pop-up graphics and sounds that play when someone follows, subscribes, gifts, or triggers a custom event. Its shell was rebuilt to match Overlay Editor Pro's compositor-grade look and feel, so if you already know your way around the overlay editor, Alert Studio Pro will feel immediately familiar. The alert engine underneath — elements, transforms, animations, and how alerts get served to OBS — is unchanged and just as reliable as before.
Alerts are rendered by a standalone alert engine running on VMSC's overlay server. You embed the alert URL in OBS as a browser source, and VMSC pushes alerts to it in real time.
The Studio Shell
- Left dock — every element in the current alert, in stacking order. Reorder, hide, rename, or delete an element from here (delete uses a deliberate two-click confirm, so a stray click can't remove an element).
- Canvas — the visual workspace. Drag, resize, and rotate elements directly; hold Shift and click to multi-select, then move, resize, or rotate the whole group together.
- Inspector — the selected element's properties, grouped by type: Transform (position, size, rotation), and then Text, Image, Video, or Shape fields depending on what's selected. Only the sections relevant to the current selection are shown.
- Bottom dock — per-element enter/exit animation, duration, and easing controls.
Canvas Controls
| Action | How |
|---|---|
| Zoom | Scroll wheel |
| Pan | Hold Space and drag |
| Copy / Paste | Ctrl+C / Ctrl+V |
| Delete selected | Delete |
| Select all | Ctrl+A |
| Nudge | Arrow keys (hold Shift for a bigger step) |
Snap guidelines appear while dragging an element, aligning its edges and center to other elements and the canvas boundary for pixel-perfect placement.
Undo & Redo
Ctrl+Z and Ctrl+Y (or the ↼ / ↽ buttons in the toolbar) cover the full active alert's state — not just element moves and additions, but the alert's own duration, animation choice, sound, and any custom CSS you've written. Rapid edits (dragging a slider, typing in a field) are coalesced into a single undo step instead of one step per keystroke, so undo steps back through meaningful changes rather than every intermediate value.
File Drag-and-Drop
Drag image or video files from your desktop directly onto the canvas to create the corresponding element at the drop position. Supported formats include PNG, JPG, GIF, WebP, MP4, and WebM.
Animations
Every element gets an independent enter animation, exit animation, and easing curve — you're not locked into a matched enter/exit pair.
Enter Animations (25+)
Enter animations play when the alert appears. Examples include: Fade In, Slide In (from any direction), Zoom In, Bounce In, Flip In, Rotate In, Elastic In, Back In, Light Speed In, Roll In, Swing In, Tada, Pulse, Wobble, Jello, Rubber Band, Head Shake, Hinge, Jack In The Box, Flash, and Heart Beat.
Exit Animations
Exit animations play independently when the alert is dismissed — pick one explicitly, or leave it unset to auto-pair with whichever entrance animation you chose:
| Exit animation |
|---|
| Fade Out |
| Slide Out (Up / Down / Left / Right) |
| Shrink |
| Bounce Out |
| Zoom Out |
| Spin Out |
| Hinge |
| Roll Out |
| Light Speed Out |
Easing
Each animation's timing curve is independently selectable:
| Easing | Feel |
|---|---|
| Ease Out | Fast start, gentle finish (the default for most presets) |
| Ease In | Gentle start, fast finish |
| Ease In-Out | Gentle on both ends |
| Linear | Constant speed, no easing |
| Bouncy | Slight overshoot past the target before settling — a playful "pop" |
Each animation can also be configured with its own duration (ms) and delay (ms) to fine-tune the timing.
Standalone Alert Engine
Alerts are rendered by a standalone engine served at:
/alerts/{instanceId}?alert={alertId}
This URL is what you add as a browser source in OBS. The engine handles:
- Sequential queue — Multiple alerts are queued and played one at a time in order.
- Sound sync — Alert sounds are synchronized with the enter animation so they play at the right moment.
- Template variables — Use placeholders like
{user},{amount}, and{message}that are replaced with real event data at render time. - Cloudflare tunnel — The alert URL works through the tunnel, so OBS on a remote machine can use it.
Auto-Triggers from Stream Events
Alerts can be linked to stream events so they fire automatically. For example, you can configure a follow alert to play every time a new viewer follows, or a gift alert that triggers only for gifts above a certain value. Event binding is configured in the alert settings panel.
Event Alert Widget vs. Alert Studio Pro
The Overlay Gallery's Event Alert widget is a simpler, zero-setup spotlight popup for follows, subs, and gifts — good for getting something on screen immediately, but with no per-event customization. Reach for Alert Studio Pro when you want full creative control — custom layouts, per-event-type designs, specific sounds and conditions, and the animation/easing control described above.