Star Border Overlay
Star Border Overlay is a transparent OBS browser source that sends glowing, pixel-edged synthwave stars around the visible alpha edge of another OBS source. The star population follows the number of unique recent Twitch and YouTube chatters reported by Streamer.bot, and each chatter keeps their own moving star that pulses when they speak. A companion web page builds the configured browser-source URL.
Platforms: OBS browser source, Web (URL builder)
Product page: desertice.tech/products/star-border-overlay
Who it’s for: OBS streamers using Streamer.bot with Twitch and/or YouTube chat
Features
Section titled “Features”- Connects directly to OBS WebSocket and Streamer.bot WebSocket from the browser source
- Traces the named source’s alpha silhouette through nested scenes, groups, cropping, bounds, rotation, and flips
- One-shot alpha scan at startup with every later frame driven by WebGL; no continuous screenshot polling
- Counts unique Twitch and YouTube chatters in a rolling window, with bot exclusions by default
- A chatter’s message pulses their own star; when the identity expires, that star fades away
- Visual presets for themes (brand, cyan, deep blue) and styles (balanced, soft glow, comet trails, crisp)
- Performance controls for FPS, render scale, star count, and trail length
- On-page debug panel (debug=1) tracing connection, activity, and renderer state without chat content
Requirements
Section titled “Requirements”- OBS Studio with OBS WebSocket enabled (usual port 4455)
- Streamer.bot with its WebSocket server enabled (usual port 8080)
- Twitch and/or YouTube chat events configured in Streamer.bot
- Node.js 24 or newer only for local development
Install
Section titled “Install”- Open the hosted setup page (the site’s index page)
- Enter the exact OBS source name and your OBS/Streamer.bot connection settings
- Copy the generated URL
- Add an OBS Browser source and paste the URL
- Set the browser source width and height to the OBS base canvas size (e.g. 1920x1080)
- Keep “Shutdown source when not visible” off if you want connections to stay warm while another scene hides the overlay
- OBS and Streamer.bot passwords go in the URL fragment after #, which browsers never send to the server; treat the full copied URL as a secret and never paste it into chat, screenshots, or source control
- If a hosted HTTPS page can’t open plain ws:// connections on your LAN, run the builder locally (npm run build && npm run preview) and use the LAN address, or select WSS for trusted TLS proxies
- Allow the configured WebSocket ports through the firewall on the OBS/Streamer.bot computer and never expose them to the public internet
- Reload the browser source to rescan after changing the source’s underlying alpha shape without replacing the source
Using it
Section titled “Using it”- Stars follow the count of unique recent Twitch and YouTube chatters; common bots (streamelements, nightbot, streamlabs, fossabot, and others) are excluded by default, and you can add comma-delimited exclusions in the builder
- Pick a theme (brand, cyan, deep blue) and a style (balanced, soft glow, comet trails, crisp) in the builder
- For a constrained streaming PC start with 30 FPS, render scale 0.75 or 1, and 24 maximum stars
- Use the builder’s “Simulate chat message” button to test the reaction path without connecting OBS or Streamer.bot
- Add debug=1 to the overlay URL for an on-page diagnostics panel that is safe to copy (it excludes passwords, payloads, and chat content)
Troubleshooting
Section titled “Troubleshooting”No stars appear at all
Section titled “No stars appear at all”Use the debug panel: received=0 means Streamer.bot delivered no chat event; a growing rejection counter identifies why events were declined; accepted>0 with uniqueUsers=0 points to activity-window timing.
Stars render but nothing moves on screen
Section titled “Stars render but nothing moves on screen”In the debug panel, stars>0 with drawCount=0 points to WebGL state, and drawCount=1 with an invisible result points to composition or visual settings.
The border doesn’t match the source’s shape
Section titled “The border doesn’t match the source’s shape”The alpha contour is scanned once at startup. Reload the browser source to rescan after changing the source’s underlying alpha shape.
Does the overlay continuously capture screenshots of my scene?
Section titled “Does the overlay continuously capture screenshots of my scene?”No. It takes one initial screenshot, analyzes the alpha edge locally, releases the buffer, and drives every later frame through WebGL.
Is it safe to share my overlay URL?
Section titled “Is it safe to share my overlay URL?”No. The complete URL contains your OBS and Streamer.bot passwords in the fragment. Remove the fragment before sharing, and rotate any password exposed elsewhere.