<!-- skill: Stream Overlays | version: 1.0.0 | description: Alerts, scenes and widgets for polished Twitch streams | category: Video & Design -->
## Instructions
- Design overlays at 1920x1080 canvas, keep action safe 90% and title safe 80% clear for game HUD elements.
- Build core scenes: Starting Soon, BRB, Live (game + cam + alerts), Chatting, Ending — 5 minimum before going live.
- Use alerts for follow/sub/bits/donation/raid with 4-6s duration, distinct SFX, and text-to-speech capped at 200 chars.
- Add milestone widgets: follower goal bar, sub counter, hype train progress, keep fonts 24px+ for 1080p readability.
- Code widgets in StreamElements/Streamlabs: custom CSS for fonts, animations under 500ms, test with emulator events.
- Keep lower-thirds and webcam frames on-brand: 8-16px radius, 2px accent border, subtle shadow, no full-screen clutter.
- Animate with restraint: fade/slide 200-300ms Ease-Out, Lottie/WebM for alerts, avoid looping backgrounds over 5Mbps.
- Ensure contrast: white text with 60% black scrim behind chat/alerts, test on bright gameplay (Fortnite/Valorant).
- Set audio ducking: alert volume -12dB under mic, monitor via OBS Stats (no dropped frames, CPU under 60%).
- Version overlays: `overlay-live-v03`, export scene collection JSON backup weekly to cloud + USB.
- Test all scenes offline with Record (not Stream), click every widget, verify mobile portrait crop looks clean.
- Credit artists and keep source files (PSD/Figma/AE) in project folder for seasonal reskins.
## Examples
- Alert pack: Follow slide-in + pop SFX, Sub confetti burst 5s, Raid host banner with auto-shoutout clip.
- Starting scene: 1080p loop 8s, countdown timer widget, recent follower ticker, low-volume lo-fi bed -24dB.
- BRB scene: Blurred game freeze + chat box right, cam off, Be-Right-Back 64px with animated dots.
## Workflows
### 1. Overlay build
1. Define palette + 2 fonts (display + mono for counters), export PNG/WebM assets.
2. Build 5 scenes in OBS, add Browser sources for StreamElements widgets.
3. Style CSS, set alert durations/volumes, add goal bars.
4. Emulator-test every event, record dry run, backup JSON.
### 2. Live polish pass
1. Check safe areas on game HUD, shrink cam to 320px corner.
2. Balance audio: mic -6dB, game -18dB, alerts -12dB.
3. Enable streamer.bot auto-shoutout + milestones to chat.
## Templates
```text
Scene list:
1-Starting (timer+chat) 2-Live (game fullscreen + cam PiP + alerts top) 3-Chatting (cam large + chat side) 4-BRB (blur + timer) 5-Ending (highlights + socials)
Widget CSS snippet:
.alert { font-family: Inter; border: 2px solid #7C3AED; border-radius: 12px; animation: slideIn 250ms ease-out; }
Alert timing: Follow 4s | Sub 6s | Donation 6s + TTS | Raid 8s + shoutout
Backup: obs-scene-2026-10-14.json + /assets (PNG/WebM/MP3) + fonts.zip
```
## Tools
- OBS Studio scenes + Browser sources, StreamElements / Streamlabs dashboards.
- Design: Figma, After Effects (WebM export), LottieFiles, Epidemic Sound SFX.
- Bots: Streamer.bot, Nightbot, Fossabot for commands and auto-clips.
## Advanced
- Drive overlays with WebSockets: auto-swap scenes on game capture change, trigger alerts via channel-point redeems.
- Build dynamic data widgets: live K/D, speedrun timer, poll results via StreamElements API + custom JS.
- Optimize performance: convert MOV to WebM VP9, cap loops at 30fps, hardware decode on, limit browser sources to 5.
- A/B test alerts: track follow-through rate per design, keep winner, iterate monthly with seasonal variants.
## Documentation
- OBS Wiki: Scenes/Sources, Browser source CSS, Stats + Logs.
- StreamElements/Streamlabs docs: widget variables, emulator, loyalty + goal APIs.
- Internal: brand kit (hex/fonts), asset license log, scene JSON changelog.
### QA checklist
- [ ] 5 scenes built (Starting/Live/Chatting/BRB/Ending), safe areas 90/80% clear.
- [ ] Alerts 4-6s tested via emulator, TTS capped 200 chars, volumes ducked.
- [ ] Fonts 24px+ readable on 1080p + mobile crop, scrim 60% behind text.
- [ ] CPU under 60%, 0 dropped frames in 5-min record test, WebM loops 30fps.
- [ ] Scene JSON backed to cloud + USB, artist credits + licenses filed.
### Go-live snippet
```text
Audio: mic -6dB / game -18dB / alerts -12dB / bed -24dB | 48kHz stereo.
Scenes: hotkeys F1 Starting F2 Live F3 Chatting F4 BRB F5 Ending.
Widgets: goal bar top, event list side, chat box 360px right, alerts center-top.
Backup: obs-scene-2026-10-14.json + /assets + fonts.zip before every stream.
```
- Pairs obs-streaming for encoding/scenes and twitch-growth for milestones.
- Complements sound-design ducking and voice-acting mic technique for clarity.