Set up your stream overlay in OBS.

01 / Give your files a permanent home

Extract the entire ZIP before adding anything to OBS. Keep the folder somewhere you will not move or delete during a cleanup. Read its README and keep the licence with your files. These are individual assets; the pack does not include an OBS scene collection or automatic installer.

Full-pack scenes are 1920 × 1080. Set your OBS base canvas to match if that suits your broadcast, or scale the artwork proportionally to your existing canvas. Changing the canvas can affect your other scenes, so check those too.

02 / Add a static scene

1. Create or select a scene in OBS. In Sources, choose + → Image and give the source a recognizable name.
2. Choose a PNG from scenes/. For the free sample, choose starting.png.
3. Fit and position the image on your canvas. Keep its proportions; check the edges and text in the preview.
4. Repeat for Starting, BRB, Ending, and Offline as needed. Use the exported PNGs for Image sources; the SVGs are your editable originals.

An Image source can preserve a PNG’s alpha transparency. A full scene screen is intentionally opaque; a webcam frame has a transparent opening. OBS Image source reference.

03 / Load a personalized browser scene

1. Open PERSONALIZE.html from the full pack in a desktop browser and save a scene using Download OBS scene. You can also use the included browser-source.html default.
2. Add a Browser source in OBS, enable Local file, and select your saved HTML.
3. Set the Browser source’s Width to 1920 and Height to 1080. These describe its rendering area, independently of your output resolution.
4. Use a separate saved file for each desired state. Refresh the Browser source after replacing a file.

The saved scene includes its artwork and fonts. It does not need hosting or a remote font download. The scene state stays fixed: it does not detect when your stream starts or ends. Its moving rail is decorative, not a timer. OBS Browser source reference.

04 / Frame your camera

Add your camera using the appropriate video capture source for your operating system. Select the camera in its properties, then add the webcam PNG as an Image source above the camera in the Sources list.

Use the wide frame for a 16:9 camera crop or the square frame for a square crop. At original size, the wide frame’s opening is 960 × 540 and the square opening is 640 × 640; both begin 32 pixels from the left and 24 from the top. Position and crop the camera to fill that opening. Scale both sources together if you need a smaller frame, keeping the frame’s proportions intact.

OBS uses Video Capture Device on Windows and macOS, and the V4L2 variant on Linux. Available resolution and frame-rate options depend on the camera. OBS video capture reference.

When the picture looks wrong

A source is blank or missing

Check its visibility and file path. Extracted files must still exist at that path. Re-select the file if you moved it; refresh a Browser source after an HTML change.

The camera opening looks solid

Use the original transparent PNG, rather than a screenshot or JPEG. Put the frame above the camera and ensure an opaque scene image is not covering both.

The text looks different after editing

Install the supplied TTF fonts before editing SVGs. Check whether your characters are supported. The HTML export embeds fonts, but the bundled font does not cover every script or emoji.

The layout feels crowded

Check it at broadcast size. Shorten a tagline, reduce a long name in your vector editor, or choose a smaller camera layout that leaves gameplay and interface text visible.