ASCII Magic
Open tool

Animated ASCII overlays for OBS and streams

Use animated ASCII art as a browser source in OBS or Streamlabs for starting soon screens, borders and overlays.

Loading the builder…

/WHY

Starting soon, be right back and ending screens are on screen for minutes at a time, so they need to move without being loud. A slow ASCII scene does exactly that and makes a channel instantly recognisable.

The builder gives you a browser source link for OBS, Streamlabs and Twitch Studio that fills your canvas and plays the piece live, an overlay page with your own words on top, a transparent version for a corner of your game scene, and a 10 second video loop for tools that only take video.

/EXAMPLES

Ready-made examples to copy

Each one is complete. Copy it as it is, or change the piece name to any piece in the library.

OBS browser source

Sources > + > Browser. Paste the link, set 1920 by 1080, tick Shutdown source when not visible so it uses no CPU off screen.

URL:    https://www.ascii-magic.com/ascii/embed?piece=starry-ridge&fit=cover&credit=0
Width:  1920
Height: 1080
[x] Shutdown source when not visible
[x] Refresh browser when scene becomes active

Transparent corner overlay

A small animated piece over your game, with no background.

URL:    https://www.ascii-magic.com/ascii/embed?piece=spinning-torus&bg=transparent&fit=contain&credit=0
Width:  480   Height: 270
Custom CSS:
body { background-color: rgba(0, 0, 0, 0) !important; margin: 0; overflow: hidden; }

Vertical for TikTok and Shorts

The same piece filling a 1080 by 1920 canvas.

URL:    https://www.ascii-magic.com/ascii/embed?piece=matrix-rain&fit=cover&credit=0
Width:  1080
Height: 1920

Countdown on the starting screen

Add this inside the overlay page from the builder, under the text.

<div id="t" style="position:absolute;top:8%;left:0;right:0;text-align:center;font:700 64px ui-monospace,monospace;color:#fff"></div>
<script>
  let left = 5 * 60;
  setInterval(() => { left = Math.max(0, left - 1); t.textContent = String(Math.floor(left / 60)).padStart(2, "0") + ":" + String(left % 60).padStart(2, "0"); }, 1000);
</script>

How to do it

  1. Save the snippet below as overlay.html on your computer.
  2. In OBS, add a Browser source and point it at the file.
  3. Set the source size, and keep the page background transparent.

/GUIDE

Performance while you stream

A browser source runs a real browser inside OBS. The pieces draw on a canvas with a cached glyph atlas, which is light, but anything you add costs CPU alongside your game and encoder. Tick Shutdown source when not visible, and use the video loop instead if your machine is already near its limit.

Text on top

Overlay text is drawn by the overlay page, not burned into the art, so you can change it per stream without exporting anything. Keep it large: at 1080p, viewers on phones see your stream at a fraction of its size.

Pieces that work well for this

Open any of them to copy the code or export.

Aurora CurtainsDemoscene
Circuit TraceRules & Frames
CRT Test CardDemoscene
Pulsing Dot RuleRules & Frames
Double Line FrameRules & Frames
Endless CorridorDemoscene
FireworksDemoscene
Heartbeat RuleRules & Frames

/FAQS

Animated ASCII overlays for OBS and streams: frequently asked questions

Q. How do I make an animated starting soon screen?
Choose the Starting soon scene, pick a slow piece such as Retro Synth Sunset or Synthwave Grid, and type your big and small text. Then add the overlay to your streaming software as a browser source, or download the 10-second video loop. The piece moves gently for as long as viewers wait.
Q. How do I add an animated ASCII OBS overlay?
In OBS, go to Sources, press plus, choose Browser, and paste the builder's browser source URL with the width and height it lists. Tick Shutdown source when not visible so it uses no processing power off screen. For your own text on top, tick Local file instead and choose the overlay.html file from the builder.
Q. What is a stream overlay?
A stream overlay is a graphic layered over or around your video: a starting soon screen, a be right back card, a border or a small animation in a corner. Here, each overlay is a web page that plays an ASCII piece, which your streaming software shows through a browser source.
Q. Can I make be right back and ending screens with the same builder?
Yes. The Scene option switches between Starting soon, Be right back, Thanks for watching and Corner overlay. Each one updates the preview, the default text and the link. Use the same piece across all of them so your channel looks consistent from the first minute to the last.
Q. How do I make the overlay background transparent in OBS?
Set Background to Transparent in the builder, which adds bg=transparent to the link, then paste the OBS custom CSS from the builder into the browser source's Custom CSS box. The piece then floats over your game or camera. Corner overlay works best this way, sized small in one corner.
Q. How do I put my own words on the starting soon screen?
Use the Overlay with your text tab. Save it as overlay.html, then in the browser source tick Local file and choose it. Your big and small text are drawn over the art by the page itself, so you can edit them before each stream without exporting anything.
Q. Can I add a countdown timer to my starting soon screen?
Yes. Paste the countdown snippet from the examples on this page into your overlay.html, under the text, and set the number of minutes. It counts down once a second in large monospace digits. Tick Refresh browser when scene becomes active so the timer starts fresh each time.
Q. Which canvas sizes does the overlay builder support?
It supports 1920 by 1080, 2560 by 1440, and vertical 1080 by 1920 for short-form vertical video. Pick the one that matches your streaming canvas, and use the same width and height in the browser source settings so the piece fills the frame without black bars.
Q. Will a stream overlay slow down my stream?
A little, because a browser source runs a real browser inside your streaming software. Pieces draw on a canvas, which is light, but they share the computer with your game and encoder. Tick Shutdown source when not visible, and if your machine is near its limit, use the 10-second video loop instead.
Q. Does the ASCII overlay work in Streamlabs and Twitch Studio?
Yes. Both have a browser source or web page layer that takes the same link, width and height as OBS. Paste the URL from the builder, set the size to match your canvas, and the piece plays live. The video loop works in any tool that accepts a video file.
Q. Why is my OBS browser source black or blank?
Usually the URL is incomplete or the size does not match your canvas. Copy the whole link from the builder, set the width and height it lists, and press Refresh on the source. For a transparent overlay, check that the link has bg=transparent and that the custom CSS is pasted.
Q. Can I use these overlays on a monetized channel?
Yes. The library is MIT licensed, so you can use the overlays, video loops and art on monetized streams, sponsored broadcasts and client channels. A credit in your panels or description is welcome but not required. The same applies to clips and highlights that include them.

Other ways to use it

Each one has its own builder.

Slides

ASCII art for slides and presentations

Drop animated ASCII art into Keynote, PowerPoint or Google Slides as a GIF or video, for title slides and section breaks.

Portfolio

ASCII art for a developer portfolio

Make a developer portfolio stand out with an animated ASCII hero, a terminal-style about section and live ASCII charts.

Dashboard

ASCII charts for status pages and dashboards

Animated ASCII bar charts, gauges, sparklines and uptime bars for status pages, internal dashboards and terminal tools.

AI agent

ASCII art with AI coding agents

Tell Claude, Cursor or any AI coding agent to add an animated ASCII piece to your project. Copy-paste instructions included.

Email

ASCII art GIFs for newsletters and email

Export animated ASCII art as a GIF for newsletters and email, where scripts and video do not play.

README

Animated ASCII art for a GitHub README

Put an animated ASCII banner, scene or loader at the top of your GitHub README. Copy a GIF or SVG, no build step, works in GitHub's dark and light themes.