How to Add Scrolling Text to OBS

There are two practical ways to use scrolling text in OBS: load a small HTML file as a Browser Source, or render the animation to a video file and add it as a Media Source.

Browser Source method

Use the Scrolling Text Generator to create the animation, then download the complete HTML file. In OBS, add a Browser Source and select the local-file option. Match the browser-source width and height to the layout you designed.

This method keeps text sharp at the chosen browser-source resolution and makes it easy to edit the HTML later. If the background should be transparent, keep the generated container background transparent and avoid a page-level solid background.

Video method

Use the Scrolling Text Video Maker when you want a reusable media asset. WebM is a useful browser-generated format and can support transparency in compatible encoding paths. The tool must show the actual format it can generate in the current browser rather than labeling unsupported output as MP4.

Practical sizing

For a 1920×1080 scene, a lower-third ticker might be only 1920×120 or 1920×160. Creating a full 1080p animation when the text occupies a narrow strip wastes encoding work and storage.

Keep motion readable on stream

Use a slower duration than you think you need, especially for long messages. Stream compression and viewer screen size make fast thin text harder to read than it looks in a browser preview.

For repeating headlines, the News Ticker Generator is usually a better fit than one long message because each item stays structured and can have its own separator.

More guides