diff --git a/README.md b/README.md index 26d9dfb..74fc8c1 100644 --- a/README.md +++ b/README.md @@ -17,45 +17,63 @@ HTML/CSS browser source overlays for OBS Studio (1920x1080) featuring a 2x2 quad 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 | +#### Static background (bg.png) + +| Static | Glow | Breathe | +|--------|------|---------| +| ![static](previews/quad_static.png) | ![glow](previews/quad_glow.gif) | ![breathe](previews/quad_breathe.gif) | +| `quad_static.html` | `quad_glow.html` | `quad_breathe.html` | + +| Bar | Dual Bars | Wave | +|-----|-----------|------| +| ![bar](previews/quad_bar.gif) | ![dualbars](previews/quad_dualbars.gif) | ![wave](previews/quad_wave.gif) | +| `quad_bar.html` | `quad_dualbars.html` | `quad_wave.html` | + +#### Animated matrix background + +| Static | Glow | Breathe | +|--------|------|---------| +| ![matrix static](previews/quad_matrix_static.gif) | ![matrix glow](previews/quad_matrix_glow.gif) | ![matrix breathe](previews/quad_matrix_breathe.gif) | +| `quad_matrix_static.html` | `quad_matrix_glow.html` | `quad_matrix_breathe.html` | + +| Bar | Dual Bars | Wave | +|-----|-----------|------| +| ![matrix bar](previews/quad_matrix_bar.gif) | ![matrix dualbars](previews/quad_matrix_dualbars.gif) | ![matrix wave](previews/quad_matrix_wave.gif) | +| `quad_matrix_bar.html` | `quad_matrix_dualbars.html` | `quad_matrix_wave.html` | ### 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 | +#### Static background (bg.png) + +| Static | Glow | Breathe | +|--------|------|---------| +| ![gap static](previews/quad_gap_static.png) | ![gap glow](previews/quad_gap_glow.gif) | ![gap breathe](previews/quad_gap_breathe.gif) | +| `quad_gap_static.html` | `quad_gap_glow.html` | `quad_gap_breathe.html` | + +| Bar | Dual Bars | Wave | +|-----|-----------|------| +| ![gap bar](previews/quad_gap_bar.gif) | ![gap dualbars](previews/quad_gap_dualbars.gif) | ![gap wave](previews/quad_gap_wave.gif) | +| `quad_gap_bar.html` | `quad_gap_dualbars.html` | `quad_gap_wave.html` | + +#### Animated matrix background + +| Static | Glow | Breathe | +|--------|------|---------| +| ![gap matrix static](previews/quad_gap_matrix_static.gif) | ![gap matrix glow](previews/quad_gap_matrix_glow.gif) | ![gap matrix breathe](previews/quad_gap_matrix_breathe.gif) | +| `quad_gap_matrix_static.html` | `quad_gap_matrix_glow.html` | `quad_gap_matrix_breathe.html` | + +| Bar | Dual Bars | Wave | +|-----|-----------|------| +| ![gap matrix bar](previews/quad_gap_matrix_bar.gif) | ![gap matrix dualbars](previews/quad_gap_matrix_dualbars.gif) | ![gap matrix wave](previews/quad_gap_matrix_wave.gif) | +| `quad_gap_matrix_bar.html` | `quad_gap_matrix_dualbars.html` | `quad_gap_matrix_wave.html` | ### Standalone -| File | Description | -|------|-------------| -| `bg_matrix.html` | Full-screen animated matrix background (no panels) | +| Preview | File | +|---------|------| +| ![bg matrix](previews/bg_matrix.gif) | `bg_matrix.html` — Full-screen animated matrix background (no panels) | --- diff --git a/previews/bg_matrix.gif b/previews/bg_matrix.gif new file mode 100644 index 0000000..6b1b2a3 Binary files /dev/null and b/previews/bg_matrix.gif differ diff --git a/previews/quad_bar.gif b/previews/quad_bar.gif new file mode 100644 index 0000000..cab459c Binary files /dev/null and b/previews/quad_bar.gif differ diff --git a/previews/quad_breathe.gif b/previews/quad_breathe.gif new file mode 100644 index 0000000..a29c2ef Binary files /dev/null and b/previews/quad_breathe.gif differ diff --git a/previews/quad_dualbars.gif b/previews/quad_dualbars.gif new file mode 100644 index 0000000..144e843 Binary files /dev/null and b/previews/quad_dualbars.gif differ diff --git a/previews/quad_gap_bar.gif b/previews/quad_gap_bar.gif new file mode 100644 index 0000000..a190e06 Binary files /dev/null and b/previews/quad_gap_bar.gif differ diff --git a/previews/quad_gap_breathe.gif b/previews/quad_gap_breathe.gif new file mode 100644 index 0000000..0322c6b Binary files /dev/null and b/previews/quad_gap_breathe.gif differ diff --git a/previews/quad_gap_dualbars.gif b/previews/quad_gap_dualbars.gif new file mode 100644 index 0000000..c72d5d2 Binary files /dev/null and b/previews/quad_gap_dualbars.gif differ diff --git a/previews/quad_gap_glow.gif b/previews/quad_gap_glow.gif new file mode 100644 index 0000000..5d4932d Binary files /dev/null and b/previews/quad_gap_glow.gif differ diff --git a/previews/quad_gap_matrix_bar.gif b/previews/quad_gap_matrix_bar.gif new file mode 100644 index 0000000..db01a92 Binary files /dev/null and b/previews/quad_gap_matrix_bar.gif differ diff --git a/previews/quad_gap_matrix_breathe.gif b/previews/quad_gap_matrix_breathe.gif new file mode 100644 index 0000000..44f0e0a Binary files /dev/null and b/previews/quad_gap_matrix_breathe.gif differ diff --git a/previews/quad_gap_matrix_dualbars.gif b/previews/quad_gap_matrix_dualbars.gif new file mode 100644 index 0000000..a14672b Binary files /dev/null and b/previews/quad_gap_matrix_dualbars.gif differ diff --git a/previews/quad_gap_matrix_glow.gif b/previews/quad_gap_matrix_glow.gif new file mode 100644 index 0000000..5e2875c Binary files /dev/null and b/previews/quad_gap_matrix_glow.gif differ diff --git a/previews/quad_gap_matrix_static.gif b/previews/quad_gap_matrix_static.gif new file mode 100644 index 0000000..496f16c Binary files /dev/null and b/previews/quad_gap_matrix_static.gif differ diff --git a/previews/quad_gap_matrix_wave.gif b/previews/quad_gap_matrix_wave.gif new file mode 100644 index 0000000..26a6520 Binary files /dev/null and b/previews/quad_gap_matrix_wave.gif differ diff --git a/previews/quad_gap_static.png b/previews/quad_gap_static.png new file mode 100644 index 0000000..1e0fd3e Binary files /dev/null and b/previews/quad_gap_static.png differ diff --git a/previews/quad_gap_wave.gif b/previews/quad_gap_wave.gif new file mode 100644 index 0000000..3bc101d Binary files /dev/null and b/previews/quad_gap_wave.gif differ diff --git a/previews/quad_glow.gif b/previews/quad_glow.gif new file mode 100644 index 0000000..69c9551 Binary files /dev/null and b/previews/quad_glow.gif differ diff --git a/previews/quad_matrix_bar.gif b/previews/quad_matrix_bar.gif new file mode 100644 index 0000000..94d0e22 Binary files /dev/null and b/previews/quad_matrix_bar.gif differ diff --git a/previews/quad_matrix_breathe.gif b/previews/quad_matrix_breathe.gif new file mode 100644 index 0000000..b84ccf8 Binary files /dev/null and b/previews/quad_matrix_breathe.gif differ diff --git a/previews/quad_matrix_dualbars.gif b/previews/quad_matrix_dualbars.gif new file mode 100644 index 0000000..45881b5 Binary files /dev/null and b/previews/quad_matrix_dualbars.gif differ diff --git a/previews/quad_matrix_glow.gif b/previews/quad_matrix_glow.gif new file mode 100644 index 0000000..6e65b91 Binary files /dev/null and b/previews/quad_matrix_glow.gif differ diff --git a/previews/quad_matrix_static.gif b/previews/quad_matrix_static.gif new file mode 100644 index 0000000..f87dcfe Binary files /dev/null and b/previews/quad_matrix_static.gif differ diff --git a/previews/quad_matrix_wave.gif b/previews/quad_matrix_wave.gif new file mode 100644 index 0000000..217b45d Binary files /dev/null and b/previews/quad_matrix_wave.gif differ diff --git a/previews/quad_static.png b/previews/quad_static.png new file mode 100644 index 0000000..3b6aec3 Binary files /dev/null and b/previews/quad_static.png differ diff --git a/previews/quad_wave.gif b/previews/quad_wave.gif new file mode 100644 index 0000000..0d41067 Binary files /dev/null and b/previews/quad_wave.gif differ