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

ActionHow
ZoomScroll wheel
PanHold Space and drag
Copy / PasteCtrl+C / Ctrl+V
Delete selectedDelete
Select allCtrl+A
NudgeArrow 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:

EasingFeel
Ease OutFast start, gentle finish (the default for most presets)
Ease InGentle start, fast finish
Ease In-OutGentle on both ends
LinearConstant speed, no easing
BouncySlight 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.

You can also trigger alerts manually from rules using the Show Alert action, giving you full control over when and how alerts appear — including from an Action Flow Designer flow.

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.