TomorrowLAN Quad Stream Overlays

HTML/CSS browser source overlays for OBS Studio (1920x1080) featuring a 2x2 quad stream layout for the TomorrowLAN gaming event.

Assets

File	Description
bg.png	Static dark blue matrix background image
logo_noyear.png	TomorrowLAN logo (cyan/white)

---

Overlay Files

Standard Layout (935x515 panels)

Panels fill the full canvas with 15px edge padding and 20px gap.

File	Background	Border Animation
quad_static.html	bg.png	None (solid cyan)
quad_glow.html	bg.png	Pulsing glow (12s cycle)
quad_breathe.html	bg.png	Breathing opacity/width (8s, staggered)
quad_bar.html	bg.png	Single traveling light bar (40s loop)
quad_dualbars.html	bg.png	Two chasing light bars (40s loop)
quad_wave.html	bg.png	Sequential panel highlight (12s cycle)
quad_matrix_static.html	Animated matrix	None (solid cyan)
quad_matrix_glow.html	Animated matrix	Pulsing glow
quad_matrix_breathe.html	Animated matrix	Breathing opacity/width
quad_matrix_bar.html	Animated matrix	Single traveling light bar
quad_matrix_dualbars.html	Animated matrix	Two chasing light bars
quad_matrix_wave.html	Animated matrix	Sequential panel highlight

Gap Layout (780x439 panels, exact 16:9)

330px vertical gap between columns, 96px row gap. Panels are exactly 16:9.

File	Background	Border Animation
quad_gap_static.html	bg.png	None (solid cyan)
quad_gap_glow.html	bg.png	Pulsing glow
quad_gap_breathe.html	bg.png	Breathing opacity/width
quad_gap_bar.html	bg.png	Single traveling light bar
quad_gap_dualbars.html	bg.png	Two chasing light bars
quad_gap_wave.html	bg.png	Sequential panel highlight
quad_gap_matrix_static.html	Animated matrix	None (solid cyan)
quad_gap_matrix_glow.html	Animated matrix	Pulsing glow
quad_gap_matrix_breathe.html	Animated matrix	Breathing opacity/width
quad_gap_matrix_bar.html	Animated matrix	Single traveling light bar
quad_gap_matrix_dualbars.html	Animated matrix	Two chasing light bars
quad_gap_matrix_wave.html	Animated matrix	Sequential panel highlight

Standalone

File	Description
bg_matrix.html	Full-screen animated matrix background (no panels)

---

OBS Setup

Adding the Overlay

1. Add a Browser Source in OBS
2. Check Local file and select the overlay HTML file
3. Set Width to 1920 and Height to 1080
4. If streaming at 60 FPS, set the browser source FPS to 60 (default is 30)
5. Layer game/camera sources below the overlay in the source list

Game Source Transform (Edit Transform - Ctrl+E)

Right-click a game source > Edit Transform (or Ctrl+E) and enter the exact values below.

For all sources, set:

• Positional Alignment: Top Left
• Bounding Box Type: Scale to inner bounds
• Alignment in Bounding Box: Center

---

Standard Layout — Edit Transform Values

Panel size: 935 x 515

Source	Pos X	Pos Y	Bounding Box W	Bounding Box H
Set 1 (top-left)	15	15	935	515
Set 2 (top-right)	970	15	935	515
Set 3 (bottom-left)	15	550	935	515
Set 4 (bottom-right)	970	550	935	515

These panels are slightly wider than 16:9 (935:515 = ~1.815:1 vs 1.778:1). A 1920x1080 game source with "Scale to inner bounds" will be cropped ~6px top and bottom — barely noticeable. Use "Scale to outer bounds" instead if you prefer thin black bars on the sides with no crop.

---

Gap Layout — Edit Transform Values

Panel size: 780 x 439 (exact 16:9)

Source	Pos X	Pos Y	Bounding Box W	Bounding Box H
Set 1 (top-left)	15	91	780	439
Set 2 (top-right)	1125	91	780	439
Set 3 (bottom-left)	15	626	780	439
Set 4 (bottom-right)	1125	626	780	439

These panels are exactly 16:9. A 1920x1080 game source fits perfectly — no cropping, no black bars.

---

Visual Layout Reference

Standard:

┌──────────────────────────────────────────────────┐
│                       15px                       │
│    ┌──────────────────┐  ┌──────────────────┐    │
│    │ Set 1   935x515  │  │ Set 2   935x515  │    │
│    │ (15, 15)         │  │ (970, 15)        │    │
│    └──────────────────┘  └──────────────────┘    │
│                     20px gap                     │
│    ┌──────────────────┐  ┌──────────────────┐    │
│    │ Set 3   935x515  │  │ Set 4   935x515  │    │
│    │ (15, 550)        │  │ (970, 550)       │    │
│    └──────────────────┘  └──────────────────┘    │
│                       15px                       │
└──────────────────────────────────────────────────┘

Gap:

┌──────────────────────────────────────────────────┐
│                       91px                       │
│   ┌────────────────┐        ┌────────────────┐   │
│   │ Set 1  780x439 │  330px │ Set 2  780x439 │   │
│   │ (15, 91)       │        │ (1125, 91)     │   │
│   └────────────────┘        └────────────────┘   │
│                       96px                       │
│   ┌────────────────┐        ┌────────────────┐   │
│   │ Set 3  780x439 │        │ Set 4  780x439 │   │
│   │ (15, 626)      │        │ (1125, 626)    │   │
│   └────────────────┘        └────────────────┘   │
│                       15px                       │
└──────────────────────────────────────────────────┘

---

Color Palette

Color	Hex	Usage
Cyan	#00d4ff	Panel borders, matrix rain trail
Light cyan	#80eaff	Animated glow highlights
Dark navy	#0a1628	Matrix background base
White	#ffffff	Matrix leading characters