Full setup instructions

Everything you need after buying a pack: files, OBS setup, timer, webcam frames, and the stinger transition.

On this page 1. What’s in your download 2. Add scenes in OBS (Browser Sources) 3. Starting Soon timer 4. Webcam frames (Chatting & Gameplay) 5. Stinger transition (.mov) 6. Recommended layer order 7. Tips & troubleshooting 8. License & support

1. What’s in your download

Each pack is a .zip file. Unzip it first. Inside you should see:

File	What it is
`starting-soon.html`	Full-screen “Starting Soon” + countdown timer
`brb.html`	Full-screen “Be Right Back”
`ending-soon.html`	Full-screen “Ending Soon”
`just-chatting.html`	Transparent overlay with webcam frame
`gameplay.html`	Transparent overlay with webcam frame + LIVE tag
`stinger-neon-purple.mov`	Video stinger for scene transitions
`HOW-TO-ADD-IN-OBS.txt`	Short text guide (same info as this page)
`STINGER-README.txt`	Stinger-only quick steps

2. Add scenes in OBS (Browser Sources)

Open OBS Studio.
Create a scene (e.g. “Starting Soon”, “Gameplay”, “BRB”).
Sources → + → Browser.
Check Local file.
Browse to the matching .html file from your unzipped pack.
Set Width: 1920 and Height: 1080.
Optional: enable Shutdown source when not visible and Refresh browser when scene becomes active.

Suggested scenes

Starting Soon → starting-soon.html
BRB → brb.html
Just Chatting → webcam + just-chatting.html on top
Gameplay → game capture + webcam + gameplay.html on top
Ending → ending-soon.html

3. Starting Soon timer

Default countdown is 5 minutes.

Edit while live (recommended)

Right-click the Browser source → Interact.
Press E on your keyboard to show timer controls.
Set minutes/seconds → click Set (or Pause).
Press E again to hide the controls (viewers won’t see them).

Or set minutes in the URL

In the Browser source, you can use a custom local path with a query, for example:

file:///C:/Overlays/starting-soon.html?minutes=10

Replace the path with your real file location. Use ?minutes=10 for 10 minutes, etc.

4. Webcam frames (Chatting & Gameplay)

Add your Video Capture Device (webcam) as a source.
Place it under the overlay Browser source.
Resize/crop the webcam so it sits inside the neon frame on screen.
Frame size is controlled in the HTML CSS (.webcam-frame) if you want to edit width/height/position.

Tip: Gameplay and Just Chatting overlays are transparent in the center so your game or desk cam shows through. Only the frame, tags, and accents are drawn on top.

5. Stinger transition (.mov)

Every pack includes stinger-neon-purple.mov (same professional stinger for all color variants).

OBS → Settings → Scene Transitions.
Click + → choose Stinger.
Video file → select stinger-neon-purple.mov from your pack folder.
Set a Transition Point (try 500–800 ms; adjust until the cut feels right).
Optionally set this stinger as your default transition.
Switch scenes using that transition to play the animation.

Note: The stinger video is one shared design. Your pack’s HTML scenes use that pack’s neon colors; the stinger is the same file across packs.

6. Recommended layer order

Bottom → top for a Gameplay scene:

Game Capture / Display Capture
Webcam (cropped to the frame)
Overlay Browser source (gameplay.html)
Optional: StreamElements / Streamlabs alerts or chat (if you use them)

7. Tips & troubleshooting

Fonts look wrong: OBS needs internet once so Google Fonts can load. After that they often cache.
Transparent background missing: Don’t put a solid color on the Browser source. Use a transparent canvas.
Timer controls visible on stream: Press E again in Interact to hide them, or stop Interact.
Stinger won’t play: Confirm the path to the .mov, try a shorter transition point, and ensure the file isn’t blocked by the OS.
Wrong size: Browser source must be 1920×1080 for these layouts.
Phone = browse only: You can view the site on mobile. Buying and downloads work on a computer. Set up overlays in OBS on PC.

8. License & support

For personal streaming use (Twitch, YouTube, Kick, etc.).
Do not resell or redistribute the pack files.
Not affiliated with OBS Project, Twitch, YouTube, or any game publisher.
Digital goods — see our Refund Policy, Terms, and License.

Questions before or after purchase? Use the contact form on the home page.

Browse packs Home