Added previews

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) |
 
 ---