Time Overlay guide
How to add a transparent countdown overlay for Twitch (OBS/Streamlabs)
To add a transparent countdown overlay for Twitch, export WebM (with alpha) from Time Overlay and add it as a Media Source in OBS or Streamlabs—the background is already cut out, so it reads over busy gameplay or webcam scenes. Twitch ended support for Twitch Studio after May 30, 2024, so this guide does not recommend it as a current production path. PNG sequence remains the alternate source when maximum visual quality matters.
Recommended Time Overlay export: WebM (with alpha) for streaming software. PNG sequence when quality matters more than file size.
- By
- yansoul
- Published
- Reviewed
Workflow map
Treat the timer as part of the scene system
Node 01
Design for scene
Node 02
Add media source
Node 03
Test stream output
What was verified for this guide
The overlay workflow was reviewed against current OBS source documentation and the Time Overlay export path. Twitch receives the composited OBS program feed; the local source must be tested at the actual streaming canvas and bitrate before going live.
- The timer asset is composited by the streaming application before Twitch receives the program output.
- OBS documents source ordering, sizing, local media, and alpha-capable PNG image sources.
- Readability must be checked at the delivered stream resolution and bitrate, not only in the local preview canvas.
Step 01
Pick a duration that matches the scene transition
BRB scenes usually want 60 to 180 seconds. Pre-stream countdowns can run 5 to 10 minutes. Test with the default 30s, then dial in the exact length for your routine.
Step 02
Export WebM with alpha
Choose a style preset that fits your stream aesthetic, then export 'WebM (with alpha)' from the export panel.
Step 03
Add to OBS or Streamlabs
Add a Media Source. Point it at the downloaded WebM. Enable Loop if the countdown should restart. Resize the source so the timer is readable but does not block your face cam.
Step 04
Test with a local recording before going live
Start a local OBS recording for 30 seconds. Confirm the alpha is preserved and the readability holds at your stream bitrate. Adjust opacity or position as needed.
Livestream troubleshooting
Case 01
Symptom
The timer is clear locally but unreadable on Twitch
Resolution
Record or preview at the actual output resolution and bitrate. Increase numeral size, reduce glow and thin strokes, and move the timer away from detailed gameplay.
Case 02
Symptom
The overlay covers chat, captions, or a webcam
Resolution
Use a safe corner template, test the scene with every dock or caption layer visible, and keep enough margin for mobile crops.
Case 03
Symptom
The countdown keeps looping after the scene ends
Resolution
Review the source's loop and visibility behavior, then test transitions into and out of the scene with a local recording before the broadcast.
First-party references
OBS documentation defines how the local asset enters the scene. Twitch receives the final encoded scene rather than the source file directly. Twitch's own notice documents why Twitch Studio is no longer included as a current workflow.
Time Overlay tips
If your streaming software lags on WebM playback, fall back to PNG sequence routed through an Image Slideshow Source. The transparency is identical and the CPU load shifts to image decoding, which most systems handle more predictably under live load.
Not sure which export format to pick? Compare every transparent overlay format by editor and browser support.
Continue with a related workflow
Related guide
OBS Timer Overlay: Add a Transparent Countdown Timer to OBS
Add a transparent countdown timer overlay to OBS Studio with WebM alpha as a Media Source, plus a PNG sequence fallback for precise loops.
Related guide
How to convert a PNG sequence to ProRes 4444 with alpha (ffmpeg)
Convert a Time Overlay PNG sequence to Apple ProRes 4444 with the alpha channel intact using the bundled script or a one-line ffmpeg command.