Your HTML scene.
On your stream.

Get the HTML scene you want to show

Trying it for the first time? Download the free Starting Soon sample from itch.io. Extract the ZIP and use singularity-starting-soon.html in the next step. It has fixed generic text, a cyan galaxy and a five-minute countdown; you do not need to export anything or buy the kit.

Using the full kit? Extract the purchased ZIP, open index.html in a recent desktop browser, and choose Starting Soon, Be Right Back, or Stream Ending. Set your channel name, colors, message, optional logo and countdown, then click Download scene.

Keep your HTML scene in a permanent folder. Each export contains one scene and its saved settings. OBS needs the scene file, rather than the ZIP or the editor.

The full kit also includes a ready-to-use folder with three scenes and placeholder channel text.

Add a Browser Source

1. Select or create the OBS scene that should contain your screen.
2. In Sources, choose + → Browser and give the source a clear name.
3. Enable Local file, then select your extracted sample or exported HTML scene.
4. Set Width: 1920 and Height: 1080, then confirm.

The width and height set the webpage's viewport. OBS supports both web addresses and local HTML files; see its Browser Source reference.

Fit the screen and check the layers

Select the source and use Transform → Fit to Screen if needed. If your canvas has a different aspect ratio, fitting a 16:9 design can leave space around it; stretching can distort the scene.

Sources higher in the list appear above those below them. Singularity screens are opaque, full-frame animations, so they cover anything beneath them. Use separate OBS scenes for Starting Soon, BRB and Ending if you want to switch between these screens and gameplay.

The official OBS Sources Guide explains layer order and transform controls.

Choose how the countdown restarts

A Singularity countdown begins when its HTML scene loads. Enable Refresh browser when scene becomes active if you want a fresh countdown whenever you return to that OBS scene.

Shutdown source when not visible unloads the webpage while hidden. Loading it again also starts a new Singularity countdown. If you want continuity while switching away and back, leave both options off and test the behavior in your setup.

Do a short rehearsal before going live

Run the scene for several minutes alongside your usual game, camera and other sources. Check that text is readable, switching behaves as expected, and the stream stays smooth. OBS also recommends a test lasting several minutes in its Quick Start Guide.

In the full kit, start at Medium quality. If the animation is too demanding, choose Low, export again, select the new file in OBS and refresh the source. The free sample uses Medium and has no quality controls. Quality settings are targets, not guaranteed frame rates. Complex Browser Sources can use significant resources; see OBS performance guidance.