This tool designs a rotating card for your overlay - stream schedule, socials,
whatever you want on loop. It exports as a StreamElements Custom widget, so it
lives in your cloud overlay and works from any machine you stream on.
Getting it into StreamElements (one-time)
1) StreamElements overlay editor → + → STATIC / CUSTOM → Custom widget.
2) Select the new widget → left panel → OPEN EDITOR.
3) In each of the HTML, CSS and JS tabs: select all, delete StreamElements' sample,
paste the box with the same name. In FIELDS: paste our FIELDS box if
“Tweakable in StreamElements” is on; otherwise clear it to {}. Leave DATA alone.
4) Click DONE, then SAVE the overlay, then drag/resize the widget box where you want
the card (for a bottom strip start around 640 by 90). The full walkthrough with
screenshots is in the How to use tab, section 1.
To update it later, redesign here and re-paste. Everything is baked into the three
blocks - slides, icons (inlined SVG), fonts (Google Fonts import).
Or make it tweakable: tick “Tweakable in StreamElements” above the export
boxes and a fourth FIELDS block appears. Paste it into the editor's FIELDS tab and
your slide text, font (StreamElements' own Google-font picker), colors, and all four timing knobs
become editable in the widget's left settings panel - no re-pasting for everyday tweaks.
Structural changes (shapes, animations, icons, adding slides) still come from the studio.
Slides
Each slide is an optional icon + a line of text. Reorder with the arrows. One slide
shows at a time: it animates in, stays for Time on screen, animates out, then
after the Gap the next takes its place. After the last slide, the
Pause between rotations (up to 10 minutes) is added before the loop restarts -
use it to keep the overlay subtle. A single slide just stays on screen.
Ticker mode
Switch Layout mode to Scrolling ticker for a continuous news-ticker strip
instead of one-at-a-time tiles: all slides scroll in a seamless loop at a real
pixels-per-second speed, with a choice of direction and separator glyph. The strip fills
whatever widget box you draw (short content is repeated automatically). Card shape,
entrance animations, and per-tile timing don't apply in this mode - the background,
border, glow, fonts, and per-slide accent colors all still do.
Icons
Platform logos are fetched from simple-icons while you design and embedded into the
export - the live widget doesn't load anything at runtime. “Platform colors”
uses each brand's official color; “Custom” tints all icons one color.
If you're offline while designing, brand icons fall back to a CDN <img>
(needs internet on the streaming side) - a toast will warn you.
QR code slides
Pick “QR code…” as a slide's icon and enter the link in the
slide's âš™ panel - the QR is generated while you design and embedded as SVG, so
the live widget never fetches anything. It stays black-on-white on a small white card:
that contrast (and the white margin) is what makes phone cameras scan it reliably over
stream footage. Keep QR size (Icons panel) at 90px+ at 1080p, give the slide a
longer Seconds on screen via âš™, and use Pause between rotations so it
appears every few minutes instead of constantly - the classic “scan my
socials” pattern.
OBS tips
The rotation clock is wall-time based, so it stays correct even when OBS throttles or
restarts hidden browser sources - no settings juggling needed. Still, keep
“Shutdown source when not visible” OFF for smoothest behavior, and know
that a browser-source FPS of 30 is plenty. The animated-gradient background moves via
GPU-friendly transforms, not repaints.
Sizing
The card fills the widget box you draw, so font/icon sizes here are real pixels at
1080p. For a lower-third bar, draw a wide box; for a corner pill, a smaller one.