First version
Prof. Andy Couturier
1 month ago
commit
2702b38008
@ -0,0 +1,158 @@
|
||||
# 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 |
|
||||
@ -0,0 +1,119 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1920, height=1080">
|
||||
<title>TomorrowLAN Animated Matrix Background</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #0a1628;
|
||||
}
|
||||
#matrix {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="matrix" width="1920" height="1080"></canvas>
|
||||
<script>
|
||||
const canvas = document.getElementById('matrix');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const W = 1920;
|
||||
const H = 1080;
|
||||
const drops = [];
|
||||
const speeds = [];
|
||||
const chars = [];
|
||||
const trailLens = [];
|
||||
const colSizes = [];
|
||||
const colX = [];
|
||||
const colGlow = [];
|
||||
|
||||
// Place columns spaced by their character width so they don't overlap
|
||||
let x = 0;
|
||||
while (x < W) {
|
||||
const i = colSizes.length;
|
||||
colSizes[i] = 10 + Math.floor(Math.random() * 31);
|
||||
colX[i] = x;
|
||||
colGlow[i] = 0.05 + Math.random() * 0.45;
|
||||
drops[i] = Math.random() * (H / colSizes[i]);
|
||||
speeds[i] = 0.04 + Math.random() * 0.06;
|
||||
trailLens[i] = 16 + Math.floor(Math.random() * 12);
|
||||
const rows = Math.ceil(H / colSizes[i]) + 30;
|
||||
chars[i] = [];
|
||||
for (let j = 0; j < rows; j++) {
|
||||
chars[i][j] = Math.random() > 0.5 ? '1' : '0';
|
||||
}
|
||||
x += colSizes[i] * 0.75;
|
||||
}
|
||||
const columns = colSizes.length;
|
||||
|
||||
function draw() {
|
||||
ctx.fillStyle = 'rgba(10, 22, 40, 0.06)';
|
||||
ctx.fillRect(0, 0, W, H);
|
||||
|
||||
for (let i = 0; i < columns; i++) {
|
||||
const sz = colSizes[i];
|
||||
const x = colX[i];
|
||||
const y = drops[i] * sz;
|
||||
const row = Math.floor(drops[i]);
|
||||
const numRows = chars[i].length;
|
||||
|
||||
ctx.font = sz + 'px monospace';
|
||||
|
||||
const glowR = sz * 1.5;
|
||||
const cx = x + sz * 0.35;
|
||||
const g = colGlow[i];
|
||||
const grad = ctx.createRadialGradient(cx, y, 0, cx, y, glowR);
|
||||
grad.addColorStop(0, 'rgba(0, 212, 255, ' + g + ')');
|
||||
grad.addColorStop(0.5, 'rgba(0, 212, 255, ' + (g * 0.3) + ')');
|
||||
grad.addColorStop(1, 'rgba(0, 212, 255, 0)');
|
||||
ctx.fillStyle = grad;
|
||||
ctx.fillRect(cx - glowR, y - glowR, glowR * 2, glowR * 2);
|
||||
|
||||
const fadeRows = 6;
|
||||
const fade = Math.min(1, Math.max(0, (drops[i] + fadeRows) / fadeRows));
|
||||
|
||||
const ci = ((row % numRows) + numRows) % numRows;
|
||||
ctx.fillStyle = 'rgba(255, 255, 255, ' + fade + ')';
|
||||
ctx.fillText(chars[i][ci], x, y);
|
||||
|
||||
const tl = trailLens[i];
|
||||
for (let t = 1; t <= tl; t++) {
|
||||
const ti = (((row - t) % numRows) + numRows) % numRows;
|
||||
const baseAlpha = (1 - t / tl) * 0.6;
|
||||
const trailFade = Math.min(1, fade + t / fadeRows);
|
||||
ctx.fillStyle = 'rgba(0, 212, 255, ' + (baseAlpha * trailFade) + ')';
|
||||
ctx.fillText(chars[i][ti], x, y - sz * t);
|
||||
}
|
||||
|
||||
if (Math.random() < 0.002) {
|
||||
const ri = Math.floor(Math.random() * numRows);
|
||||
chars[i][ri] = Math.random() > 0.5 ? '1' : '0';
|
||||
}
|
||||
|
||||
drops[i] += speeds[i];
|
||||
|
||||
if (y > H + sz * 2) {
|
||||
drops[i] = Math.random() * -20;
|
||||
speeds[i] = 0.04 + Math.random() * 0.06;
|
||||
trailLens[i] = 16 + Math.floor(Math.random() * 12);
|
||||
colSizes[i] = 10 + Math.floor(Math.random() * 31);
|
||||
colGlow[i] = 0.05 + Math.random() * 0.45;
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(draw);
|
||||
}
|
||||
|
||||
ctx.fillStyle = '#0a1628';
|
||||
ctx.fillRect(0, 0, W, H);
|
||||
draw();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 7.5 MiB |
@ -0,0 +1,117 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1920, height=1080">
|
||||
<title>TomorrowLAN Quad Stream Overlay</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
font-family: 'Segoe UI', 'Arial', sans-serif;
|
||||
}
|
||||
|
||||
.background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
background: url('bg.png') center center / cover no-repeat;
|
||||
z-index: 0;
|
||||
clip-path: path(evenodd, "M0,0 H1920 V1080 H0Z M23,15 H942 Q950,15 950,23 V522 Q950,530 942,530 H23 Q15,530 15,522 V23 Q15,15 23,15Z M978,15 H1897 Q1905,15 1905,23 V522 Q1905,530 1897,530 H978 Q970,530 970,522 V23 Q970,15 978,15Z M23,550 H942 Q950,550 950,558 V1057 Q950,1065 942,1065 H23 Q15,1065 15,1057 V558 Q15,550 23,550Z M978,550 H1897 Q1905,550 1905,558 V1057 Q1905,1065 1897,1065 H978 Q970,1065 970,1057 V558 Q970,550 978,550Z");
|
||||
}
|
||||
|
||||
.grid {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
gap: 20px;
|
||||
padding: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.panel {
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.border-anim {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Shared SVG filter for glow effect -->
|
||||
<svg style="position:absolute;width:0;height:0">
|
||||
<defs>
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="8" result="blur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<div class="background"></div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="panel">
|
||||
<svg class="border-anim" viewBox="0 0 935 515">
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2680" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="0" to="-2880" dur="40s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-anim" viewBox="0 0 935 515">
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2680" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="0" to="-2880" dur="40s" begin="-10s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-anim" viewBox="0 0 935 515">
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2680" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="0" to="-2880" dur="40s" begin="-20s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-anim" viewBox="0 0 935 515">
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2680" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="0" to="-2880" dur="40s" begin="-30s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,108 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1920, height=1080">
|
||||
<title>TomorrowLAN Quad Stream Overlay - Breathe</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
font-family: 'Segoe UI', 'Arial', sans-serif;
|
||||
}
|
||||
|
||||
.background {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 1920px; height: 1080px;
|
||||
background: url('bg.png') center center / cover no-repeat;
|
||||
z-index: 0;
|
||||
clip-path: path(evenodd, "M0,0 H1920 V1080 H0Z M23,15 H942 Q950,15 950,23 V522 Q950,530 942,530 H23 Q15,530 15,522 V23 Q15,15 23,15Z M978,15 H1897 Q1905,15 1905,23 V522 Q1905,530 1897,530 H978 Q970,530 970,522 V23 Q970,15 978,15Z M23,550 H942 Q950,550 950,558 V1057 Q950,1065 942,1065 H23 Q15,1065 15,1057 V558 Q15,550 23,550Z M978,550 H1897 Q1905,550 1905,558 V1057 Q1905,1065 1897,1065 H978 Q970,1065 970,1057 V558 Q970,550 978,550Z");
|
||||
}
|
||||
|
||||
.grid {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 1920px; height: 1080px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
gap: 20px;
|
||||
padding: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.panel {
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.border-svg {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg style="position:absolute;width:0;height:0">
|
||||
<defs>
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="6" result="blur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<div class="background"></div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 935 515">
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="2" filter="url(#glow)">
|
||||
<animate attributeName="stroke-opacity" values="0.2;1;0.2" dur="8s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;3;1" dur="8s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 935 515">
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="2" filter="url(#glow)">
|
||||
<animate attributeName="stroke-opacity" values="0.2;1;0.2" dur="8s" begin="-2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;3;1" dur="8s" begin="-2s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 935 515">
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="2" filter="url(#glow)">
|
||||
<animate attributeName="stroke-opacity" values="0.2;1;0.2" dur="8s" begin="-4s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;3;1" dur="8s" begin="-4s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 935 515">
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="2" filter="url(#glow)">
|
||||
<animate attributeName="stroke-opacity" values="0.2;1;0.2" dur="8s" begin="-6s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;3;1" dur="8s" begin="-6s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,116 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1920, height=1080">
|
||||
<title>TomorrowLAN Quad Stream Overlay - Dual Bars</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
font-family: 'Segoe UI', 'Arial', sans-serif;
|
||||
}
|
||||
|
||||
.background {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 1920px; height: 1080px;
|
||||
background: url('bg.png') center center / cover no-repeat;
|
||||
z-index: 0;
|
||||
clip-path: path(evenodd, "M0,0 H1920 V1080 H0Z M23,15 H942 Q950,15 950,23 V522 Q950,530 942,530 H23 Q15,530 15,522 V23 Q15,15 23,15Z M978,15 H1897 Q1905,15 1905,23 V522 Q1905,530 1897,530 H978 Q970,530 970,522 V23 Q970,15 978,15Z M23,550 H942 Q950,550 950,558 V1057 Q950,1065 942,1065 H23 Q15,1065 15,1057 V558 Q15,550 23,550Z M978,550 H1897 Q1905,550 1905,558 V1057 Q1905,1065 1897,1065 H978 Q970,1065 970,1057 V558 Q970,550 978,550Z");
|
||||
}
|
||||
|
||||
.grid {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 1920px; height: 1080px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
gap: 20px;
|
||||
padding: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.panel {
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.border-anim {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg style="position:absolute;width:0;height:0">
|
||||
<defs>
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="8" result="blur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<div class="background"></div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="panel">
|
||||
<svg class="border-anim" viewBox="0 0 935 515">
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2680" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="0" to="-2880" dur="40s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2680" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="-1440" to="-4320" dur="40s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-anim" viewBox="0 0 935 515">
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2680" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="0" to="-2880" dur="40s" begin="-10s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2680" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="-1440" to="-4320" dur="40s" begin="-10s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-anim" viewBox="0 0 935 515">
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2680" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="0" to="-2880" dur="40s" begin="-20s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2680" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="-1440" to="-4320" dur="40s" begin="-20s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-anim" viewBox="0 0 935 515">
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2680" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="0" to="-2880" dur="40s" begin="-30s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2680" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="-1440" to="-4320" dur="40s" begin="-30s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,117 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1920, height=1080">
|
||||
<title>TomorrowLAN Quad Stream Overlay - Gap Bar</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
font-family: 'Segoe UI', 'Arial', sans-serif;
|
||||
}
|
||||
|
||||
.background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
background: url('bg.png') center center / cover no-repeat;
|
||||
z-index: 0;
|
||||
clip-path: path(evenodd, "M0,0 H1920 V1080 H0Z M23,91 H787 Q795,91 795,99 V522 Q795,530 787,530 H23 Q15,530 15,522 V99 Q15,91 23,91Z M1133,91 H1897 Q1905,91 1905,99 V522 Q1905,530 1897,530 H1133 Q1125,530 1125,522 V99 Q1125,91 1133,91Z M23,626 H787 Q795,626 795,634 V1057 Q795,1065 787,1065 H23 Q15,1065 15,1057 V634 Q15,626 23,626Z M1133,626 H1897 Q1905,626 1905,634 V1057 Q1905,1065 1897,1065 H1133 Q1125,1065 1125,1057 V634 Q1125,626 1133,626Z");
|
||||
}
|
||||
|
||||
.grid {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
display: grid;
|
||||
grid-template-columns: 780px 780px;
|
||||
grid-template-rows: 439px 439px;
|
||||
gap: 96px 330px;
|
||||
padding: 91px 15px 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.panel {
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.border-anim {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Shared SVG filter for glow effect -->
|
||||
<svg style="position:absolute;width:0;height:0">
|
||||
<defs>
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="8" result="blur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<div class="background"></div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="panel">
|
||||
<svg class="border-anim" viewBox="0 0 780 439">
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2218" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="0" to="-2418" dur="40s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-anim" viewBox="0 0 780 439">
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2218" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="0" to="-2418" dur="40s" begin="-10s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-anim" viewBox="0 0 780 439">
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2218" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="0" to="-2418" dur="40s" begin="-20s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-anim" viewBox="0 0 780 439">
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2218" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="0" to="-2418" dur="40s" begin="-30s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,108 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1920, height=1080">
|
||||
<title>TomorrowLAN Quad Stream Overlay - Gap Breathe</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
font-family: 'Segoe UI', 'Arial', sans-serif;
|
||||
}
|
||||
|
||||
.background {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 1920px; height: 1080px;
|
||||
background: url('bg.png') center center / cover no-repeat;
|
||||
z-index: 0;
|
||||
clip-path: path(evenodd, "M0,0 H1920 V1080 H0Z M23,91 H787 Q795,91 795,99 V522 Q795,530 787,530 H23 Q15,530 15,522 V99 Q15,91 23,91Z M1133,91 H1897 Q1905,91 1905,99 V522 Q1905,530 1897,530 H1133 Q1125,530 1125,522 V99 Q1125,91 1133,91Z M23,626 H787 Q795,626 795,634 V1057 Q795,1065 787,1065 H23 Q15,1065 15,1057 V634 Q15,626 23,626Z M1133,626 H1897 Q1905,626 1905,634 V1057 Q1905,1065 1897,1065 H1133 Q1125,1065 1125,1057 V634 Q1125,626 1133,626Z");
|
||||
}
|
||||
|
||||
.grid {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 1920px; height: 1080px;
|
||||
display: grid;
|
||||
grid-template-columns: 780px 780px;
|
||||
grid-template-rows: 439px 439px;
|
||||
gap: 96px 330px;
|
||||
padding: 91px 15px 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.panel {
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.border-svg {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg style="position:absolute;width:0;height:0">
|
||||
<defs>
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="6" result="blur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<div class="background"></div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 780 439">
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="2" filter="url(#glow)">
|
||||
<animate attributeName="stroke-opacity" values="0.2;1;0.2" dur="8s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;3;1" dur="8s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 780 439">
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="2" filter="url(#glow)">
|
||||
<animate attributeName="stroke-opacity" values="0.2;1;0.2" dur="8s" begin="-2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;3;1" dur="8s" begin="-2s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 780 439">
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="2" filter="url(#glow)">
|
||||
<animate attributeName="stroke-opacity" values="0.2;1;0.2" dur="8s" begin="-4s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;3;1" dur="8s" begin="-4s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 780 439">
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="2" filter="url(#glow)">
|
||||
<animate attributeName="stroke-opacity" values="0.2;1;0.2" dur="8s" begin="-6s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;3;1" dur="8s" begin="-6s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,116 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1920, height=1080">
|
||||
<title>TomorrowLAN Quad Stream Overlay - Gap Dual Bars</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
font-family: 'Segoe UI', 'Arial', sans-serif;
|
||||
}
|
||||
|
||||
.background {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 1920px; height: 1080px;
|
||||
background: url('bg.png') center center / cover no-repeat;
|
||||
z-index: 0;
|
||||
clip-path: path(evenodd, "M0,0 H1920 V1080 H0Z M23,91 H787 Q795,91 795,99 V522 Q795,530 787,530 H23 Q15,530 15,522 V99 Q15,91 23,91Z M1133,91 H1897 Q1905,91 1905,99 V522 Q1905,530 1897,530 H1133 Q1125,530 1125,522 V99 Q1125,91 1133,91Z M23,626 H787 Q795,626 795,634 V1057 Q795,1065 787,1065 H23 Q15,1065 15,1057 V634 Q15,626 23,626Z M1133,626 H1897 Q1905,626 1905,634 V1057 Q1905,1065 1897,1065 H1133 Q1125,1065 1125,1057 V634 Q1125,626 1133,626Z");
|
||||
}
|
||||
|
||||
.grid {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 1920px; height: 1080px;
|
||||
display: grid;
|
||||
grid-template-columns: 780px 780px;
|
||||
grid-template-rows: 439px 439px;
|
||||
gap: 96px 330px;
|
||||
padding: 91px 15px 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.panel {
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.border-anim {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg style="position:absolute;width:0;height:0">
|
||||
<defs>
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="8" result="blur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<div class="background"></div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="panel">
|
||||
<svg class="border-anim" viewBox="0 0 780 439">
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2218" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="0" to="-2418" dur="40s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2218" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="-1209" to="-3627" dur="40s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-anim" viewBox="0 0 780 439">
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2218" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="0" to="-2418" dur="40s" begin="-10s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2218" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="-1209" to="-3627" dur="40s" begin="-10s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-anim" viewBox="0 0 780 439">
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2218" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="0" to="-2418" dur="40s" begin="-20s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2218" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="-1209" to="-3627" dur="40s" begin="-20s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-anim" viewBox="0 0 780 439">
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2218" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="0" to="-2418" dur="40s" begin="-30s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2218" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="-1209" to="-3627" dur="40s" begin="-30s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,107 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1920, height=1080">
|
||||
<title>TomorrowLAN Quad Stream Overlay - Gap Glow</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
font-family: 'Segoe UI', 'Arial', sans-serif;
|
||||
}
|
||||
|
||||
.background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
background: url('bg.png') center center / cover no-repeat;
|
||||
z-index: 0;
|
||||
clip-path: path(evenodd, "M0,0 H1920 V1080 H0Z M23,91 H787 Q795,91 795,99 V522 Q795,530 787,530 H23 Q15,530 15,522 V99 Q15,91 23,91Z M1133,91 H1897 Q1905,91 1905,99 V522 Q1905,530 1897,530 H1133 Q1125,530 1125,522 V99 Q1125,91 1133,91Z M23,626 H787 Q795,626 795,634 V1057 Q795,1065 787,1065 H23 Q15,1065 15,1057 V634 Q15,626 23,626Z M1133,626 H1897 Q1905,626 1905,634 V1057 Q1905,1065 1897,1065 H1133 Q1125,1065 1125,1057 V634 Q1125,626 1133,626Z");
|
||||
}
|
||||
|
||||
.grid {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
display: grid;
|
||||
grid-template-columns: 780px 780px;
|
||||
grid-template-rows: 439px 439px;
|
||||
gap: 96px 330px;
|
||||
padding: 91px 15px 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.panel {
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.border-svg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg style="position:absolute;width:0;height:0">
|
||||
<defs>
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="2" result="blur">
|
||||
<animate attributeName="stdDeviation" values="2;18;2" dur="12s" repeatCount="indefinite"/>
|
||||
</feGaussianBlur>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<div class="background"></div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 780 439">
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2" filter="url(#glow)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 780 439">
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2" filter="url(#glow)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 780 439">
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2" filter="url(#glow)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 780 439">
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2" filter="url(#glow)"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,208 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1920, height=1080">
|
||||
<title>TomorrowLAN Quad Stream Overlay - Gap Matrix Bar</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
font-family: 'Segoe UI', 'Arial', sans-serif;
|
||||
}
|
||||
|
||||
#matrix {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
clip-path: path(evenodd, "M0,0 H1920 V1080 H0Z M23,91 H787 Q795,91 795,99 V522 Q795,530 787,530 H23 Q15,530 15,522 V99 Q15,91 23,91Z M1133,91 H1897 Q1905,91 1905,99 V522 Q1905,530 1897,530 H1133 Q1125,530 1125,522 V99 Q1125,91 1133,91Z M23,626 H787 Q795,626 795,634 V1057 Q795,1065 787,1065 H23 Q15,1065 15,1057 V634 Q15,626 23,626Z M1133,626 H1897 Q1905,626 1905,634 V1057 Q1905,1065 1897,1065 H1133 Q1125,1065 1125,1057 V634 Q1125,626 1133,626Z");
|
||||
}
|
||||
|
||||
.grid {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
display: grid;
|
||||
grid-template-columns: 780px 780px;
|
||||
grid-template-rows: 439px 439px;
|
||||
gap: 96px 330px;
|
||||
padding: 91px 15px 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.panel {
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.border-anim {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg style="position:absolute;width:0;height:0">
|
||||
<defs>
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="8" result="blur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<canvas id="matrix" width="1920" height="1080"></canvas>
|
||||
|
||||
<div class="grid">
|
||||
<div class="panel">
|
||||
<svg class="border-anim" viewBox="0 0 780 439">
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2218" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="0" to="-2418" dur="40s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-anim" viewBox="0 0 780 439">
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2218" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="0" to="-2418" dur="40s" begin="-10s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-anim" viewBox="0 0 780 439">
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2218" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="0" to="-2418" dur="40s" begin="-20s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-anim" viewBox="0 0 780 439">
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2218" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="0" to="-2418" dur="40s" begin="-30s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const canvas = document.getElementById('matrix');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const W = 1920;
|
||||
const H = 1080;
|
||||
const drops = [];
|
||||
const speeds = [];
|
||||
const chars = [];
|
||||
const trailLens = [];
|
||||
const colSizes = [];
|
||||
const colX = [];
|
||||
const colGlow = [];
|
||||
|
||||
// Place columns spaced by their character width so they don't overlap
|
||||
let x = 0;
|
||||
while (x < W) {
|
||||
const i = colSizes.length;
|
||||
colSizes[i] = 10 + Math.floor(Math.random() * 31);
|
||||
colX[i] = x;
|
||||
colGlow[i] = 0.05 + Math.random() * 0.45;
|
||||
drops[i] = Math.random() * (H / colSizes[i]);
|
||||
speeds[i] = 0.04 + Math.random() * 0.06;
|
||||
trailLens[i] = 16 + Math.floor(Math.random() * 12);
|
||||
const rows = Math.ceil(H / colSizes[i]) + 30;
|
||||
chars[i] = [];
|
||||
for (let j = 0; j < rows; j++) {
|
||||
chars[i][j] = Math.random() > 0.5 ? '1' : '0';
|
||||
}
|
||||
x += colSizes[i] * 0.75;
|
||||
}
|
||||
const columns = colSizes.length;
|
||||
|
||||
function draw() {
|
||||
ctx.fillStyle = 'rgba(10, 22, 40, 0.06)';
|
||||
ctx.fillRect(0, 0, W, H);
|
||||
|
||||
for (let i = 0; i < columns; i++) {
|
||||
const sz = colSizes[i];
|
||||
const x = colX[i];
|
||||
const y = drops[i] * sz;
|
||||
const row = Math.floor(drops[i]);
|
||||
const numRows = chars[i].length;
|
||||
|
||||
ctx.font = sz + 'px monospace';
|
||||
|
||||
const glowR = sz * 1.5;
|
||||
const cx = x + sz * 0.35;
|
||||
const g = colGlow[i];
|
||||
const grad = ctx.createRadialGradient(cx, y, 0, cx, y, glowR);
|
||||
grad.addColorStop(0, 'rgba(0, 212, 255, ' + g + ')');
|
||||
grad.addColorStop(0.5, 'rgba(0, 212, 255, ' + (g * 0.3) + ')');
|
||||
grad.addColorStop(1, 'rgba(0, 212, 255, 0)');
|
||||
ctx.fillStyle = grad;
|
||||
ctx.fillRect(cx - glowR, y - glowR, glowR * 2, glowR * 2);
|
||||
|
||||
const fadeRows = 6;
|
||||
const fade = Math.min(1, Math.max(0, (drops[i] + fadeRows) / fadeRows));
|
||||
|
||||
const ci = ((row % numRows) + numRows) % numRows;
|
||||
ctx.fillStyle = 'rgba(255, 255, 255, ' + fade + ')';
|
||||
ctx.fillText(chars[i][ci], x, y);
|
||||
|
||||
const tl = trailLens[i];
|
||||
for (let t = 1; t <= tl; t++) {
|
||||
const ti = (((row - t) % numRows) + numRows) % numRows;
|
||||
const baseAlpha = (1 - t / tl) * 0.6;
|
||||
const trailFade = Math.min(1, fade + t / fadeRows);
|
||||
ctx.fillStyle = 'rgba(0, 212, 255, ' + (baseAlpha * trailFade) + ')';
|
||||
ctx.fillText(chars[i][ti], x, y - sz * t);
|
||||
}
|
||||
|
||||
if (Math.random() < 0.002) {
|
||||
const ri = Math.floor(Math.random() * numRows);
|
||||
chars[i][ri] = Math.random() > 0.5 ? '1' : '0';
|
||||
}
|
||||
|
||||
drops[i] += speeds[i];
|
||||
|
||||
if (y > H + sz * 2) {
|
||||
drops[i] = Math.random() * -20;
|
||||
speeds[i] = 0.04 + Math.random() * 0.06;
|
||||
trailLens[i] = 16 + Math.floor(Math.random() * 12);
|
||||
colSizes[i] = 10 + Math.floor(Math.random() * 31);
|
||||
colGlow[i] = 0.05 + Math.random() * 0.45;
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(draw);
|
||||
}
|
||||
|
||||
// Fill initial background
|
||||
ctx.fillStyle = '#0a1628';
|
||||
ctx.fillRect(0, 0, W, H);
|
||||
|
||||
draw();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,195 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1920, height=1080">
|
||||
<title>TomorrowLAN Quad Stream Overlay - Gap Matrix Breathe</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
font-family: 'Segoe UI', 'Arial', sans-serif;
|
||||
}
|
||||
#matrix {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
z-index: 0;
|
||||
clip-path: path(evenodd, "M0,0 H1920 V1080 H0Z M23,91 H787 Q795,91 795,99 V522 Q795,530 787,530 H23 Q15,530 15,522 V99 Q15,91 23,91Z M1133,91 H1897 Q1905,91 1905,99 V522 Q1905,530 1897,530 H1133 Q1125,530 1125,522 V99 Q1125,91 1133,91Z M23,626 H787 Q795,626 795,634 V1057 Q795,1065 787,1065 H23 Q15,1065 15,1057 V634 Q15,626 23,626Z M1133,626 H1897 Q1905,626 1905,634 V1057 Q1905,1065 1897,1065 H1133 Q1125,1065 1125,1057 V634 Q1125,626 1133,626Z");
|
||||
}
|
||||
.grid {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 1920px; height: 1080px;
|
||||
display: grid;
|
||||
grid-template-columns: 780px 780px;
|
||||
grid-template-rows: 439px 439px;
|
||||
gap: 96px 330px;
|
||||
padding: 91px 15px 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
.panel {
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
}
|
||||
.border-svg {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg style="position:absolute;width:0;height:0">
|
||||
<defs>
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="6" result="blur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
<canvas id="matrix" width="1920" height="1080"></canvas>
|
||||
<div class="grid">
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 780 439">
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="2" filter="url(#glow)">
|
||||
<animate attributeName="stroke-opacity" values="0.2;1;0.2" dur="8s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;3;1" dur="8s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 780 439">
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="2" filter="url(#glow)">
|
||||
<animate attributeName="stroke-opacity" values="0.2;1;0.2" dur="8s" begin="-2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;3;1" dur="8s" begin="-2s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 780 439">
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="2" filter="url(#glow)">
|
||||
<animate attributeName="stroke-opacity" values="0.2;1;0.2" dur="8s" begin="-4s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;3;1" dur="8s" begin="-4s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 780 439">
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="2" filter="url(#glow)">
|
||||
<animate attributeName="stroke-opacity" values="0.2;1;0.2" dur="8s" begin="-6s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;3;1" dur="8s" begin="-6s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
const canvas = document.getElementById('matrix');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const W = 1920;
|
||||
const H = 1080;
|
||||
const drops = [];
|
||||
const speeds = [];
|
||||
const chars = [];
|
||||
const trailLens = [];
|
||||
const colSizes = [];
|
||||
const colX = [];
|
||||
const colGlow = [];
|
||||
|
||||
// Place columns spaced by their character width so they don't overlap
|
||||
let x = 0;
|
||||
while (x < W) {
|
||||
const i = colSizes.length;
|
||||
colSizes[i] = 10 + Math.floor(Math.random() * 31);
|
||||
colX[i] = x;
|
||||
colGlow[i] = 0.05 + Math.random() * 0.45;
|
||||
drops[i] = Math.random() * (H / colSizes[i]);
|
||||
speeds[i] = 0.04 + Math.random() * 0.06;
|
||||
trailLens[i] = 16 + Math.floor(Math.random() * 12);
|
||||
const rows = Math.ceil(H / colSizes[i]) + 30;
|
||||
chars[i] = [];
|
||||
for (let j = 0; j < rows; j++) {
|
||||
chars[i][j] = Math.random() > 0.5 ? '1' : '0';
|
||||
}
|
||||
x += colSizes[i] * 0.75;
|
||||
}
|
||||
const columns = colSizes.length;
|
||||
|
||||
function draw() {
|
||||
ctx.fillStyle = 'rgba(10, 22, 40, 0.06)';
|
||||
ctx.fillRect(0, 0, W, H);
|
||||
|
||||
for (let i = 0; i < columns; i++) {
|
||||
const sz = colSizes[i];
|
||||
const x = colX[i];
|
||||
const y = drops[i] * sz;
|
||||
const row = Math.floor(drops[i]);
|
||||
const numRows = chars[i].length;
|
||||
|
||||
ctx.font = sz + 'px monospace';
|
||||
|
||||
const glowR = sz * 1.5;
|
||||
const cx = x + sz * 0.35;
|
||||
const g = colGlow[i];
|
||||
const grad = ctx.createRadialGradient(cx, y, 0, cx, y, glowR);
|
||||
grad.addColorStop(0, 'rgba(0, 212, 255, ' + g + ')');
|
||||
grad.addColorStop(0.5, 'rgba(0, 212, 255, ' + (g * 0.3) + ')');
|
||||
grad.addColorStop(1, 'rgba(0, 212, 255, 0)');
|
||||
ctx.fillStyle = grad;
|
||||
ctx.fillRect(cx - glowR, y - glowR, glowR * 2, glowR * 2);
|
||||
|
||||
const fadeRows = 6;
|
||||
const fade = Math.min(1, Math.max(0, (drops[i] + fadeRows) / fadeRows));
|
||||
|
||||
const ci = ((row % numRows) + numRows) % numRows;
|
||||
ctx.fillStyle = 'rgba(255, 255, 255, ' + fade + ')';
|
||||
ctx.fillText(chars[i][ci], x, y);
|
||||
|
||||
const tl = trailLens[i];
|
||||
for (let t = 1; t <= tl; t++) {
|
||||
const ti = (((row - t) % numRows) + numRows) % numRows;
|
||||
const baseAlpha = (1 - t / tl) * 0.6;
|
||||
const trailFade = Math.min(1, fade + t / fadeRows);
|
||||
ctx.fillStyle = 'rgba(0, 212, 255, ' + (baseAlpha * trailFade) + ')';
|
||||
ctx.fillText(chars[i][ti], x, y - sz * t);
|
||||
}
|
||||
|
||||
if (Math.random() < 0.002) {
|
||||
const ri = Math.floor(Math.random() * numRows);
|
||||
chars[i][ri] = Math.random() > 0.5 ? '1' : '0';
|
||||
}
|
||||
|
||||
drops[i] += speeds[i];
|
||||
|
||||
if (y > H + sz * 2) {
|
||||
drops[i] = Math.random() * -20;
|
||||
speeds[i] = 0.04 + Math.random() * 0.06;
|
||||
trailLens[i] = 16 + Math.floor(Math.random() * 12);
|
||||
colSizes[i] = 10 + Math.floor(Math.random() * 31);
|
||||
colGlow[i] = 0.05 + Math.random() * 0.45;
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(draw);
|
||||
}
|
||||
|
||||
// Fill initial background
|
||||
ctx.fillStyle = '#0a1628';
|
||||
ctx.fillRect(0, 0, W, H);
|
||||
|
||||
draw();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,203 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1920, height=1080">
|
||||
<title>TomorrowLAN Quad Stream Overlay - Gap Matrix Dual Bars</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
font-family: 'Segoe UI', 'Arial', sans-serif;
|
||||
}
|
||||
#matrix {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
z-index: 0;
|
||||
clip-path: path(evenodd, "M0,0 H1920 V1080 H0Z M23,91 H787 Q795,91 795,99 V522 Q795,530 787,530 H23 Q15,530 15,522 V99 Q15,91 23,91Z M1133,91 H1897 Q1905,91 1905,99 V522 Q1905,530 1897,530 H1133 Q1125,530 1125,522 V99 Q1125,91 1133,91Z M23,626 H787 Q795,626 795,634 V1057 Q795,1065 787,1065 H23 Q15,1065 15,1057 V634 Q15,626 23,626Z M1133,626 H1897 Q1905,626 1905,634 V1057 Q1905,1065 1897,1065 H1133 Q1125,1065 1125,1057 V634 Q1125,626 1133,626Z");
|
||||
}
|
||||
.grid {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 1920px; height: 1080px;
|
||||
display: grid;
|
||||
grid-template-columns: 780px 780px;
|
||||
grid-template-rows: 439px 439px;
|
||||
gap: 96px 330px;
|
||||
padding: 91px 15px 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
.panel {
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
}
|
||||
.border-anim {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg style="position:absolute;width:0;height:0">
|
||||
<defs>
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="8" result="blur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
<canvas id="matrix" width="1920" height="1080"></canvas>
|
||||
<div class="grid">
|
||||
<div class="panel">
|
||||
<svg class="border-anim" viewBox="0 0 780 439">
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2218" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="0" to="-2418" dur="40s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2218" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="-1209" to="-3627" dur="40s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-anim" viewBox="0 0 780 439">
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2218" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="0" to="-2418" dur="40s" begin="-10s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2218" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="-1209" to="-3627" dur="40s" begin="-10s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-anim" viewBox="0 0 780 439">
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2218" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="0" to="-2418" dur="40s" begin="-20s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2218" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="-1209" to="-3627" dur="40s" begin="-20s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-anim" viewBox="0 0 780 439">
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2218" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="0" to="-2418" dur="40s" begin="-30s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2218" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="-1209" to="-3627" dur="40s" begin="-30s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
const canvas = document.getElementById('matrix');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const W = 1920;
|
||||
const H = 1080;
|
||||
const drops = [];
|
||||
const speeds = [];
|
||||
const chars = [];
|
||||
const trailLens = [];
|
||||
const colSizes = [];
|
||||
const colX = [];
|
||||
const colGlow = [];
|
||||
|
||||
// Place columns spaced by their character width so they don't overlap
|
||||
let x = 0;
|
||||
while (x < W) {
|
||||
const i = colSizes.length;
|
||||
colSizes[i] = 10 + Math.floor(Math.random() * 31);
|
||||
colX[i] = x;
|
||||
colGlow[i] = 0.05 + Math.random() * 0.45;
|
||||
drops[i] = Math.random() * (H / colSizes[i]);
|
||||
speeds[i] = 0.04 + Math.random() * 0.06;
|
||||
trailLens[i] = 16 + Math.floor(Math.random() * 12);
|
||||
const rows = Math.ceil(H / colSizes[i]) + 30;
|
||||
chars[i] = [];
|
||||
for (let j = 0; j < rows; j++) {
|
||||
chars[i][j] = Math.random() > 0.5 ? '1' : '0';
|
||||
}
|
||||
x += colSizes[i] * 0.75;
|
||||
}
|
||||
const columns = colSizes.length;
|
||||
|
||||
function draw() {
|
||||
ctx.fillStyle = 'rgba(10, 22, 40, 0.06)';
|
||||
ctx.fillRect(0, 0, W, H);
|
||||
|
||||
for (let i = 0; i < columns; i++) {
|
||||
const sz = colSizes[i];
|
||||
const x = colX[i];
|
||||
const y = drops[i] * sz;
|
||||
const row = Math.floor(drops[i]);
|
||||
const numRows = chars[i].length;
|
||||
|
||||
ctx.font = sz + 'px monospace';
|
||||
|
||||
const glowR = sz * 1.5;
|
||||
const cx = x + sz * 0.35;
|
||||
const g = colGlow[i];
|
||||
const grad = ctx.createRadialGradient(cx, y, 0, cx, y, glowR);
|
||||
grad.addColorStop(0, 'rgba(0, 212, 255, ' + g + ')');
|
||||
grad.addColorStop(0.5, 'rgba(0, 212, 255, ' + (g * 0.3) + ')');
|
||||
grad.addColorStop(1, 'rgba(0, 212, 255, 0)');
|
||||
ctx.fillStyle = grad;
|
||||
ctx.fillRect(cx - glowR, y - glowR, glowR * 2, glowR * 2);
|
||||
|
||||
const fadeRows = 6;
|
||||
const fade = Math.min(1, Math.max(0, (drops[i] + fadeRows) / fadeRows));
|
||||
|
||||
const ci = ((row % numRows) + numRows) % numRows;
|
||||
ctx.fillStyle = 'rgba(255, 255, 255, ' + fade + ')';
|
||||
ctx.fillText(chars[i][ci], x, y);
|
||||
|
||||
const tl = trailLens[i];
|
||||
for (let t = 1; t <= tl; t++) {
|
||||
const ti = (((row - t) % numRows) + numRows) % numRows;
|
||||
const baseAlpha = (1 - t / tl) * 0.6;
|
||||
const trailFade = Math.min(1, fade + t / fadeRows);
|
||||
ctx.fillStyle = 'rgba(0, 212, 255, ' + (baseAlpha * trailFade) + ')';
|
||||
ctx.fillText(chars[i][ti], x, y - sz * t);
|
||||
}
|
||||
|
||||
if (Math.random() < 0.002) {
|
||||
const ri = Math.floor(Math.random() * numRows);
|
||||
chars[i][ri] = Math.random() > 0.5 ? '1' : '0';
|
||||
}
|
||||
|
||||
drops[i] += speeds[i];
|
||||
|
||||
if (y > H + sz * 2) {
|
||||
drops[i] = Math.random() * -20;
|
||||
speeds[i] = 0.04 + Math.random() * 0.06;
|
||||
trailLens[i] = 16 + Math.floor(Math.random() * 12);
|
||||
colSizes[i] = 10 + Math.floor(Math.random() * 31);
|
||||
colGlow[i] = 0.05 + Math.random() * 0.45;
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(draw);
|
||||
}
|
||||
|
||||
// Fill initial background
|
||||
ctx.fillStyle = '#0a1628';
|
||||
ctx.fillRect(0, 0, W, H);
|
||||
|
||||
draw();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,182 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1920, height=1080">
|
||||
<title>TomorrowLAN Quad Stream Overlay - Gap Matrix Glow</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
font-family: 'Segoe UI', 'Arial', sans-serif;
|
||||
}
|
||||
#matrix {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
z-index: 0;
|
||||
clip-path: path(evenodd, "M0,0 H1920 V1080 H0Z M23,91 H787 Q795,91 795,99 V522 Q795,530 787,530 H23 Q15,530 15,522 V99 Q15,91 23,91Z M1133,91 H1897 Q1905,91 1905,99 V522 Q1905,530 1897,530 H1133 Q1125,530 1125,522 V99 Q1125,91 1133,91Z M23,626 H787 Q795,626 795,634 V1057 Q795,1065 787,1065 H23 Q15,1065 15,1057 V634 Q15,626 23,626Z M1133,626 H1897 Q1905,626 1905,634 V1057 Q1905,1065 1897,1065 H1133 Q1125,1065 1125,1057 V634 Q1125,626 1133,626Z");
|
||||
}
|
||||
.grid {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 1920px; height: 1080px;
|
||||
display: grid;
|
||||
grid-template-columns: 780px 780px;
|
||||
grid-template-rows: 439px 439px;
|
||||
gap: 96px 330px;
|
||||
padding: 91px 15px 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
.panel {
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
}
|
||||
.border-svg {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg style="position:absolute;width:0;height:0">
|
||||
<defs>
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="2" result="blur">
|
||||
<animate attributeName="stdDeviation" values="2;18;2" dur="12s" repeatCount="indefinite"/>
|
||||
</feGaussianBlur>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
<canvas id="matrix" width="1920" height="1080"></canvas>
|
||||
<div class="grid">
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 780 439">
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2" filter="url(#glow)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 780 439">
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2" filter="url(#glow)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 780 439">
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2" filter="url(#glow)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 780 439">
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2" filter="url(#glow)"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
const canvas = document.getElementById('matrix');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const W = 1920;
|
||||
const H = 1080;
|
||||
const drops = [];
|
||||
const speeds = [];
|
||||
const chars = [];
|
||||
const trailLens = [];
|
||||
const colSizes = [];
|
||||
const colX = [];
|
||||
const colGlow = [];
|
||||
|
||||
// Place columns spaced by their character width so they don't overlap
|
||||
let x = 0;
|
||||
while (x < W) {
|
||||
const i = colSizes.length;
|
||||
colSizes[i] = 10 + Math.floor(Math.random() * 31);
|
||||
colX[i] = x;
|
||||
colGlow[i] = 0.05 + Math.random() * 0.45;
|
||||
drops[i] = Math.random() * (H / colSizes[i]);
|
||||
speeds[i] = 0.04 + Math.random() * 0.06;
|
||||
trailLens[i] = 16 + Math.floor(Math.random() * 12);
|
||||
const rows = Math.ceil(H / colSizes[i]) + 30;
|
||||
chars[i] = [];
|
||||
for (let j = 0; j < rows; j++) {
|
||||
chars[i][j] = Math.random() > 0.5 ? '1' : '0';
|
||||
}
|
||||
x += colSizes[i] * 0.75;
|
||||
}
|
||||
const columns = colSizes.length;
|
||||
|
||||
function draw() {
|
||||
ctx.fillStyle = 'rgba(10, 22, 40, 0.06)';
|
||||
ctx.fillRect(0, 0, W, H);
|
||||
|
||||
for (let i = 0; i < columns; i++) {
|
||||
const sz = colSizes[i];
|
||||
const x = colX[i];
|
||||
const y = drops[i] * sz;
|
||||
const row = Math.floor(drops[i]);
|
||||
const numRows = chars[i].length;
|
||||
|
||||
ctx.font = sz + 'px monospace';
|
||||
|
||||
const glowR = sz * 1.5;
|
||||
const cx = x + sz * 0.35;
|
||||
const g = colGlow[i];
|
||||
const grad = ctx.createRadialGradient(cx, y, 0, cx, y, glowR);
|
||||
grad.addColorStop(0, 'rgba(0, 212, 255, ' + g + ')');
|
||||
grad.addColorStop(0.5, 'rgba(0, 212, 255, ' + (g * 0.3) + ')');
|
||||
grad.addColorStop(1, 'rgba(0, 212, 255, 0)');
|
||||
ctx.fillStyle = grad;
|
||||
ctx.fillRect(cx - glowR, y - glowR, glowR * 2, glowR * 2);
|
||||
|
||||
const fadeRows = 6;
|
||||
const fade = Math.min(1, Math.max(0, (drops[i] + fadeRows) / fadeRows));
|
||||
|
||||
const ci = ((row % numRows) + numRows) % numRows;
|
||||
ctx.fillStyle = 'rgba(255, 255, 255, ' + fade + ')';
|
||||
ctx.fillText(chars[i][ci], x, y);
|
||||
|
||||
const tl = trailLens[i];
|
||||
for (let t = 1; t <= tl; t++) {
|
||||
const ti = (((row - t) % numRows) + numRows) % numRows;
|
||||
const baseAlpha = (1 - t / tl) * 0.6;
|
||||
const trailFade = Math.min(1, fade + t / fadeRows);
|
||||
ctx.fillStyle = 'rgba(0, 212, 255, ' + (baseAlpha * trailFade) + ')';
|
||||
ctx.fillText(chars[i][ti], x, y - sz * t);
|
||||
}
|
||||
|
||||
if (Math.random() < 0.002) {
|
||||
const ri = Math.floor(Math.random() * numRows);
|
||||
chars[i][ri] = Math.random() > 0.5 ? '1' : '0';
|
||||
}
|
||||
|
||||
drops[i] += speeds[i];
|
||||
|
||||
if (y > H + sz * 2) {
|
||||
drops[i] = Math.random() * -20;
|
||||
speeds[i] = 0.04 + Math.random() * 0.06;
|
||||
trailLens[i] = 16 + Math.floor(Math.random() * 12);
|
||||
colSizes[i] = 10 + Math.floor(Math.random() * 31);
|
||||
colGlow[i] = 0.05 + Math.random() * 0.45;
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(draw);
|
||||
}
|
||||
|
||||
// Fill initial background
|
||||
ctx.fillStyle = '#0a1628';
|
||||
ctx.fillRect(0, 0, W, H);
|
||||
|
||||
draw();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,146 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1920, height=1080">
|
||||
<title>TomorrowLAN Quad Stream Overlay - Gap Matrix Static</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
font-family: 'Segoe UI', 'Arial', sans-serif;
|
||||
}
|
||||
#matrix {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
z-index: 0;
|
||||
clip-path: path(evenodd, "M0,0 H1920 V1080 H0Z M23,91 H787 Q795,91 795,99 V522 Q795,530 787,530 H23 Q15,530 15,522 V99 Q15,91 23,91Z M1133,91 H1897 Q1905,91 1905,99 V522 Q1905,530 1897,530 H1133 Q1125,530 1125,522 V99 Q1125,91 1133,91Z M23,626 H787 Q795,626 795,634 V1057 Q795,1065 787,1065 H23 Q15,1065 15,1057 V634 Q15,626 23,626Z M1133,626 H1897 Q1905,626 1905,634 V1057 Q1905,1065 1897,1065 H1133 Q1125,1065 1125,1057 V634 Q1125,626 1133,626Z");
|
||||
}
|
||||
.grid {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 1920px; height: 1080px;
|
||||
display: grid;
|
||||
grid-template-columns: 780px 780px;
|
||||
grid-template-rows: 439px 439px;
|
||||
gap: 96px 330px;
|
||||
padding: 91px 15px 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
.panel {
|
||||
position: relative;
|
||||
border: 2px solid #00d4ff;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="matrix" width="1920" height="1080"></canvas>
|
||||
<div class="grid">
|
||||
<div class="panel"></div>
|
||||
<div class="panel"></div>
|
||||
<div class="panel"></div>
|
||||
<div class="panel"></div>
|
||||
</div>
|
||||
<script>
|
||||
const canvas = document.getElementById('matrix');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const W = 1920;
|
||||
const H = 1080;
|
||||
const drops = [];
|
||||
const speeds = [];
|
||||
const chars = [];
|
||||
const trailLens = [];
|
||||
const colSizes = [];
|
||||
const colX = [];
|
||||
const colGlow = [];
|
||||
|
||||
// Place columns spaced by their character width so they don't overlap
|
||||
let x = 0;
|
||||
while (x < W) {
|
||||
const i = colSizes.length;
|
||||
colSizes[i] = 10 + Math.floor(Math.random() * 31);
|
||||
colX[i] = x;
|
||||
colGlow[i] = 0.05 + Math.random() * 0.45;
|
||||
drops[i] = Math.random() * (H / colSizes[i]);
|
||||
speeds[i] = 0.04 + Math.random() * 0.06;
|
||||
trailLens[i] = 16 + Math.floor(Math.random() * 12);
|
||||
const rows = Math.ceil(H / colSizes[i]) + 30;
|
||||
chars[i] = [];
|
||||
for (let j = 0; j < rows; j++) {
|
||||
chars[i][j] = Math.random() > 0.5 ? '1' : '0';
|
||||
}
|
||||
x += colSizes[i] * 0.75;
|
||||
}
|
||||
const columns = colSizes.length;
|
||||
|
||||
function draw() {
|
||||
ctx.fillStyle = 'rgba(10, 22, 40, 0.06)';
|
||||
ctx.fillRect(0, 0, W, H);
|
||||
|
||||
for (let i = 0; i < columns; i++) {
|
||||
const sz = colSizes[i];
|
||||
const x = colX[i];
|
||||
const y = drops[i] * sz;
|
||||
const row = Math.floor(drops[i]);
|
||||
const numRows = chars[i].length;
|
||||
|
||||
ctx.font = sz + 'px monospace';
|
||||
|
||||
const glowR = sz * 1.5;
|
||||
const cx = x + sz * 0.35;
|
||||
const g = colGlow[i];
|
||||
const grad = ctx.createRadialGradient(cx, y, 0, cx, y, glowR);
|
||||
grad.addColorStop(0, 'rgba(0, 212, 255, ' + g + ')');
|
||||
grad.addColorStop(0.5, 'rgba(0, 212, 255, ' + (g * 0.3) + ')');
|
||||
grad.addColorStop(1, 'rgba(0, 212, 255, 0)');
|
||||
ctx.fillStyle = grad;
|
||||
ctx.fillRect(cx - glowR, y - glowR, glowR * 2, glowR * 2);
|
||||
|
||||
const fadeRows = 6;
|
||||
const fade = Math.min(1, Math.max(0, (drops[i] + fadeRows) / fadeRows));
|
||||
|
||||
const ci = ((row % numRows) + numRows) % numRows;
|
||||
ctx.fillStyle = 'rgba(255, 255, 255, ' + fade + ')';
|
||||
ctx.fillText(chars[i][ci], x, y);
|
||||
|
||||
const tl = trailLens[i];
|
||||
for (let t = 1; t <= tl; t++) {
|
||||
const ti = (((row - t) % numRows) + numRows) % numRows;
|
||||
const baseAlpha = (1 - t / tl) * 0.6;
|
||||
const trailFade = Math.min(1, fade + t / fadeRows);
|
||||
ctx.fillStyle = 'rgba(0, 212, 255, ' + (baseAlpha * trailFade) + ')';
|
||||
ctx.fillText(chars[i][ti], x, y - sz * t);
|
||||
}
|
||||
|
||||
if (Math.random() < 0.002) {
|
||||
const ri = Math.floor(Math.random() * numRows);
|
||||
chars[i][ri] = Math.random() > 0.5 ? '1' : '0';
|
||||
}
|
||||
|
||||
drops[i] += speeds[i];
|
||||
|
||||
if (y > H + sz * 2) {
|
||||
drops[i] = Math.random() * -20;
|
||||
speeds[i] = 0.04 + Math.random() * 0.06;
|
||||
trailLens[i] = 16 + Math.floor(Math.random() * 12);
|
||||
colSizes[i] = 10 + Math.floor(Math.random() * 31);
|
||||
colGlow[i] = 0.05 + Math.random() * 0.45;
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(draw);
|
||||
}
|
||||
|
||||
// Fill initial background
|
||||
ctx.fillStyle = '#0a1628';
|
||||
ctx.fillRect(0, 0, W, H);
|
||||
|
||||
draw();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,203 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1920, height=1080">
|
||||
<title>TomorrowLAN Quad Stream Overlay - Gap Matrix Wave</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
font-family: 'Segoe UI', 'Arial', sans-serif;
|
||||
}
|
||||
#matrix {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
z-index: 0;
|
||||
clip-path: path(evenodd, "M0,0 H1920 V1080 H0Z M23,91 H787 Q795,91 795,99 V522 Q795,530 787,530 H23 Q15,530 15,522 V99 Q15,91 23,91Z M1133,91 H1897 Q1905,91 1905,99 V522 Q1905,530 1897,530 H1133 Q1125,530 1125,522 V99 Q1125,91 1133,91Z M23,626 H787 Q795,626 795,634 V1057 Q795,1065 787,1065 H23 Q15,1065 15,1057 V634 Q15,626 23,626Z M1133,626 H1897 Q1905,626 1905,634 V1057 Q1905,1065 1897,1065 H1133 Q1125,1065 1125,1057 V634 Q1125,626 1133,626Z");
|
||||
}
|
||||
.grid {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 1920px; height: 1080px;
|
||||
display: grid;
|
||||
grid-template-columns: 780px 780px;
|
||||
grid-template-rows: 439px 439px;
|
||||
gap: 96px 330px;
|
||||
padding: 91px 15px 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
.panel {
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
}
|
||||
.border-svg {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg style="position:absolute;width:0;height:0">
|
||||
<defs>
|
||||
<filter id="glow-dim" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="4" result="blur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<filter id="glow-bright" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="10" result="blur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
<canvas id="matrix" width="1920" height="1080"></canvas>
|
||||
<div class="grid">
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 780 439">
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2" filter="url(#glow-dim)"/>
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="3" filter="url(#glow-bright)">
|
||||
<animate attributeName="stroke-opacity" values="0;0;1;1;0;0;0;0;0" dur="12s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;1;4;4;1;1;1;1;1" dur="12s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 780 439">
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2" filter="url(#glow-dim)"/>
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="3" filter="url(#glow-bright)">
|
||||
<animate attributeName="stroke-opacity" values="0;0;0;0;1;1;0;0;0" dur="12s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;1;1;1;4;4;1;1;1" dur="12s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 780 439">
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2" filter="url(#glow-dim)"/>
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="3" filter="url(#glow-bright)">
|
||||
<animate attributeName="stroke-opacity" values="0;0;0;0;0;0;1;1;0" dur="12s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;1;1;1;1;1;4;4;1" dur="12s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 780 439">
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2" filter="url(#glow-dim)"/>
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="3" filter="url(#glow-bright)">
|
||||
<animate attributeName="stroke-opacity" values="1;0;0;0;0;0;0;0;1" dur="12s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="4;1;1;1;1;1;1;1;4" dur="12s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
const canvas = document.getElementById('matrix');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const W = 1920;
|
||||
const H = 1080;
|
||||
const drops = [];
|
||||
const speeds = [];
|
||||
const chars = [];
|
||||
const trailLens = [];
|
||||
const colSizes = [];
|
||||
const colX = [];
|
||||
const colGlow = [];
|
||||
|
||||
// Place columns spaced by their character width so they don't overlap
|
||||
let x = 0;
|
||||
while (x < W) {
|
||||
const i = colSizes.length;
|
||||
colSizes[i] = 10 + Math.floor(Math.random() * 31);
|
||||
colX[i] = x;
|
||||
colGlow[i] = 0.05 + Math.random() * 0.45;
|
||||
drops[i] = Math.random() * (H / colSizes[i]);
|
||||
speeds[i] = 0.04 + Math.random() * 0.06;
|
||||
trailLens[i] = 16 + Math.floor(Math.random() * 12);
|
||||
const rows = Math.ceil(H / colSizes[i]) + 30;
|
||||
chars[i] = [];
|
||||
for (let j = 0; j < rows; j++) {
|
||||
chars[i][j] = Math.random() > 0.5 ? '1' : '0';
|
||||
}
|
||||
x += colSizes[i] * 0.75;
|
||||
}
|
||||
const columns = colSizes.length;
|
||||
|
||||
function draw() {
|
||||
ctx.fillStyle = 'rgba(10, 22, 40, 0.06)';
|
||||
ctx.fillRect(0, 0, W, H);
|
||||
|
||||
for (let i = 0; i < columns; i++) {
|
||||
const sz = colSizes[i];
|
||||
const x = colX[i];
|
||||
const y = drops[i] * sz;
|
||||
const row = Math.floor(drops[i]);
|
||||
const numRows = chars[i].length;
|
||||
|
||||
ctx.font = sz + 'px monospace';
|
||||
|
||||
const glowR = sz * 1.5;
|
||||
const cx = x + sz * 0.35;
|
||||
const g = colGlow[i];
|
||||
const grad = ctx.createRadialGradient(cx, y, 0, cx, y, glowR);
|
||||
grad.addColorStop(0, 'rgba(0, 212, 255, ' + g + ')');
|
||||
grad.addColorStop(0.5, 'rgba(0, 212, 255, ' + (g * 0.3) + ')');
|
||||
grad.addColorStop(1, 'rgba(0, 212, 255, 0)');
|
||||
ctx.fillStyle = grad;
|
||||
ctx.fillRect(cx - glowR, y - glowR, glowR * 2, glowR * 2);
|
||||
|
||||
const fadeRows = 6;
|
||||
const fade = Math.min(1, Math.max(0, (drops[i] + fadeRows) / fadeRows));
|
||||
|
||||
const ci = ((row % numRows) + numRows) % numRows;
|
||||
ctx.fillStyle = 'rgba(255, 255, 255, ' + fade + ')';
|
||||
ctx.fillText(chars[i][ci], x, y);
|
||||
|
||||
const tl = trailLens[i];
|
||||
for (let t = 1; t <= tl; t++) {
|
||||
const ti = (((row - t) % numRows) + numRows) % numRows;
|
||||
const baseAlpha = (1 - t / tl) * 0.6;
|
||||
const trailFade = Math.min(1, fade + t / fadeRows);
|
||||
ctx.fillStyle = 'rgba(0, 212, 255, ' + (baseAlpha * trailFade) + ')';
|
||||
ctx.fillText(chars[i][ti], x, y - sz * t);
|
||||
}
|
||||
|
||||
if (Math.random() < 0.002) {
|
||||
const ri = Math.floor(Math.random() * numRows);
|
||||
chars[i][ri] = Math.random() > 0.5 ? '1' : '0';
|
||||
}
|
||||
|
||||
drops[i] += speeds[i];
|
||||
|
||||
if (y > H + sz * 2) {
|
||||
drops[i] = Math.random() * -20;
|
||||
speeds[i] = 0.04 + Math.random() * 0.06;
|
||||
trailLens[i] = 16 + Math.floor(Math.random() * 12);
|
||||
colSizes[i] = 10 + Math.floor(Math.random() * 31);
|
||||
colGlow[i] = 0.05 + Math.random() * 0.45;
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(draw);
|
||||
}
|
||||
|
||||
// Fill initial background
|
||||
ctx.fillStyle = '#0a1628';
|
||||
ctx.fillRect(0, 0, W, H);
|
||||
|
||||
draw();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,67 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1920, height=1080">
|
||||
<title>TomorrowLAN Quad Stream Overlay - Gap Static</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
font-family: 'Segoe UI', 'Arial', sans-serif;
|
||||
}
|
||||
|
||||
.background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
background: url('bg.png') center center / cover no-repeat;
|
||||
z-index: 0;
|
||||
clip-path: path(evenodd, "M0,0 H1920 V1080 H0Z M23,91 H787 Q795,91 795,99 V522 Q795,530 787,530 H23 Q15,530 15,522 V99 Q15,91 23,91Z M1133,91 H1897 Q1905,91 1905,99 V522 Q1905,530 1897,530 H1133 Q1125,530 1125,522 V99 Q1125,91 1133,91Z M23,626 H787 Q795,626 795,634 V1057 Q795,1065 787,1065 H23 Q15,1065 15,1057 V634 Q15,626 23,626Z M1133,626 H1897 Q1905,626 1905,634 V1057 Q1905,1065 1897,1065 H1133 Q1125,1065 1125,1057 V634 Q1125,626 1133,626Z");
|
||||
}
|
||||
|
||||
.grid {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
display: grid;
|
||||
grid-template-columns: 780px 780px;
|
||||
grid-template-rows: 439px 439px;
|
||||
gap: 96px 330px;
|
||||
padding: 91px 15px 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.panel {
|
||||
position: relative;
|
||||
border: 2px solid #00d4ff;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="background"></div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="panel"></div>
|
||||
<div class="panel"></div>
|
||||
<div class="panel"></div>
|
||||
<div class="panel"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,117 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1920, height=1080">
|
||||
<title>TomorrowLAN Quad Stream Overlay - Gap Wave</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
font-family: 'Segoe UI', 'Arial', sans-serif;
|
||||
}
|
||||
|
||||
.background {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 1920px; height: 1080px;
|
||||
background: url('bg.png') center center / cover no-repeat;
|
||||
z-index: 0;
|
||||
clip-path: path(evenodd, "M0,0 H1920 V1080 H0Z M23,91 H787 Q795,91 795,99 V522 Q795,530 787,530 H23 Q15,530 15,522 V99 Q15,91 23,91Z M1133,91 H1897 Q1905,91 1905,99 V522 Q1905,530 1897,530 H1133 Q1125,530 1125,522 V99 Q1125,91 1133,91Z M23,626 H787 Q795,626 795,634 V1057 Q795,1065 787,1065 H23 Q15,1065 15,1057 V634 Q15,626 23,626Z M1133,626 H1897 Q1905,626 1905,634 V1057 Q1905,1065 1897,1065 H1133 Q1125,1065 1125,1057 V634 Q1125,626 1133,626Z");
|
||||
}
|
||||
|
||||
.grid {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 1920px; height: 1080px;
|
||||
display: grid;
|
||||
grid-template-columns: 780px 780px;
|
||||
grid-template-rows: 439px 439px;
|
||||
gap: 96px 330px;
|
||||
padding: 91px 15px 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.panel {
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.border-svg {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg style="position:absolute;width:0;height:0">
|
||||
<defs>
|
||||
<filter id="glow-dim" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="4" result="blur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<filter id="glow-bright" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="10" result="blur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<div class="background"></div>
|
||||
|
||||
<!-- Wave: panels light up one after another in sequence 1→2→3→4→1... -->
|
||||
<div class="grid">
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 780 439">
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2" filter="url(#glow-dim)"/>
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="3" filter="url(#glow-bright)">
|
||||
<animate attributeName="stroke-opacity" values="0;0;1;1;0;0;0;0;0" dur="12s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;1;4;4;1;1;1;1;1" dur="12s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 780 439">
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2" filter="url(#glow-dim)"/>
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="3" filter="url(#glow-bright)">
|
||||
<animate attributeName="stroke-opacity" values="0;0;0;0;1;1;0;0;0" dur="12s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;1;1;1;4;4;1;1;1" dur="12s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 780 439">
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2" filter="url(#glow-dim)"/>
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="3" filter="url(#glow-bright)">
|
||||
<animate attributeName="stroke-opacity" values="0;0;0;0;0;0;1;1;0" dur="12s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;1;1;1;1;1;4;4;1" dur="12s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 780 439">
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2" filter="url(#glow-dim)"/>
|
||||
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="3" filter="url(#glow-bright)">
|
||||
<animate attributeName="stroke-opacity" values="1;0;0;0;0;0;0;0;1" dur="12s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="4;1;1;1;1;1;1;1;4" dur="12s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,107 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1920, height=1080">
|
||||
<title>TomorrowLAN Quad Stream Overlay - Glow</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
font-family: 'Segoe UI', 'Arial', sans-serif;
|
||||
}
|
||||
|
||||
.background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
background: url('bg.png') center center / cover no-repeat;
|
||||
z-index: 0;
|
||||
clip-path: path(evenodd, "M0,0 H1920 V1080 H0Z M23,15 H942 Q950,15 950,23 V522 Q950,530 942,530 H23 Q15,530 15,522 V23 Q15,15 23,15Z M978,15 H1897 Q1905,15 1905,23 V522 Q1905,530 1897,530 H978 Q970,530 970,522 V23 Q970,15 978,15Z M23,550 H942 Q950,550 950,558 V1057 Q950,1065 942,1065 H23 Q15,1065 15,1057 V558 Q15,550 23,550Z M978,550 H1897 Q1905,550 1905,558 V1057 Q1905,1065 1897,1065 H978 Q970,1065 970,1057 V558 Q970,550 978,550Z");
|
||||
}
|
||||
|
||||
.grid {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
gap: 20px;
|
||||
padding: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.panel {
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.border-svg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg style="position:absolute;width:0;height:0">
|
||||
<defs>
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="2" result="blur">
|
||||
<animate attributeName="stdDeviation" values="2;18;2" dur="12s" repeatCount="indefinite"/>
|
||||
</feGaussianBlur>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<div class="background"></div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 935 515">
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2" filter="url(#glow)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 935 515">
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2" filter="url(#glow)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 935 515">
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2" filter="url(#glow)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 935 515">
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2" filter="url(#glow)"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,208 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1920, height=1080">
|
||||
<title>TomorrowLAN Quad Stream Overlay - Animated Matrix</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
font-family: 'Segoe UI', 'Arial', sans-serif;
|
||||
}
|
||||
|
||||
#matrix {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
clip-path: path(evenodd, "M0,0 H1920 V1080 H0Z M23,15 H942 Q950,15 950,23 V522 Q950,530 942,530 H23 Q15,530 15,522 V23 Q15,15 23,15Z M978,15 H1897 Q1905,15 1905,23 V522 Q1905,530 1897,530 H978 Q970,530 970,522 V23 Q970,15 978,15Z M23,550 H942 Q950,550 950,558 V1057 Q950,1065 942,1065 H23 Q15,1065 15,1057 V558 Q15,550 23,550Z M978,550 H1897 Q1905,550 1905,558 V1057 Q1905,1065 1897,1065 H978 Q970,1065 970,1057 V558 Q970,550 978,550Z");
|
||||
}
|
||||
|
||||
.grid {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
gap: 20px;
|
||||
padding: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.panel {
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.border-anim {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg style="position:absolute;width:0;height:0">
|
||||
<defs>
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="8" result="blur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<canvas id="matrix" width="1920" height="1080"></canvas>
|
||||
|
||||
<div class="grid">
|
||||
<div class="panel">
|
||||
<svg class="border-anim" viewBox="0 0 935 515">
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2680" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="0" to="-2880" dur="40s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-anim" viewBox="0 0 935 515">
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2680" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="0" to="-2880" dur="40s" begin="-10s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-anim" viewBox="0 0 935 515">
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2680" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="0" to="-2880" dur="40s" begin="-20s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-anim" viewBox="0 0 935 515">
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2680" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="0" to="-2880" dur="40s" begin="-30s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const canvas = document.getElementById('matrix');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const W = 1920;
|
||||
const H = 1080;
|
||||
const drops = [];
|
||||
const speeds = [];
|
||||
const chars = [];
|
||||
const trailLens = [];
|
||||
const colSizes = [];
|
||||
const colX = [];
|
||||
const colGlow = [];
|
||||
|
||||
// Place columns spaced by their character width so they don't overlap
|
||||
let x = 0;
|
||||
while (x < W) {
|
||||
const i = colSizes.length;
|
||||
colSizes[i] = 10 + Math.floor(Math.random() * 31);
|
||||
colX[i] = x;
|
||||
colGlow[i] = 0.05 + Math.random() * 0.45;
|
||||
drops[i] = Math.random() * (H / colSizes[i]);
|
||||
speeds[i] = 0.04 + Math.random() * 0.06;
|
||||
trailLens[i] = 16 + Math.floor(Math.random() * 12);
|
||||
const rows = Math.ceil(H / colSizes[i]) + 30;
|
||||
chars[i] = [];
|
||||
for (let j = 0; j < rows; j++) {
|
||||
chars[i][j] = Math.random() > 0.5 ? '1' : '0';
|
||||
}
|
||||
x += colSizes[i] * 0.75;
|
||||
}
|
||||
const columns = colSizes.length;
|
||||
|
||||
function draw() {
|
||||
ctx.fillStyle = 'rgba(10, 22, 40, 0.06)';
|
||||
ctx.fillRect(0, 0, W, H);
|
||||
|
||||
for (let i = 0; i < columns; i++) {
|
||||
const sz = colSizes[i];
|
||||
const x = colX[i];
|
||||
const y = drops[i] * sz;
|
||||
const row = Math.floor(drops[i]);
|
||||
const numRows = chars[i].length;
|
||||
|
||||
ctx.font = sz + 'px monospace';
|
||||
|
||||
const glowR = sz * 1.5;
|
||||
const cx = x + sz * 0.35;
|
||||
const g = colGlow[i];
|
||||
const grad = ctx.createRadialGradient(cx, y, 0, cx, y, glowR);
|
||||
grad.addColorStop(0, 'rgba(0, 212, 255, ' + g + ')');
|
||||
grad.addColorStop(0.5, 'rgba(0, 212, 255, ' + (g * 0.3) + ')');
|
||||
grad.addColorStop(1, 'rgba(0, 212, 255, 0)');
|
||||
ctx.fillStyle = grad;
|
||||
ctx.fillRect(cx - glowR, y - glowR, glowR * 2, glowR * 2);
|
||||
|
||||
const fadeRows = 6;
|
||||
const fade = Math.min(1, Math.max(0, (drops[i] + fadeRows) / fadeRows));
|
||||
|
||||
const ci = ((row % numRows) + numRows) % numRows;
|
||||
ctx.fillStyle = 'rgba(255, 255, 255, ' + fade + ')';
|
||||
ctx.fillText(chars[i][ci], x, y);
|
||||
|
||||
const tl = trailLens[i];
|
||||
for (let t = 1; t <= tl; t++) {
|
||||
const ti = (((row - t) % numRows) + numRows) % numRows;
|
||||
const baseAlpha = (1 - t / tl) * 0.6;
|
||||
const trailFade = Math.min(1, fade + t / fadeRows);
|
||||
ctx.fillStyle = 'rgba(0, 212, 255, ' + (baseAlpha * trailFade) + ')';
|
||||
ctx.fillText(chars[i][ti], x, y - sz * t);
|
||||
}
|
||||
|
||||
if (Math.random() < 0.002) {
|
||||
const ri = Math.floor(Math.random() * numRows);
|
||||
chars[i][ri] = Math.random() > 0.5 ? '1' : '0';
|
||||
}
|
||||
|
||||
drops[i] += speeds[i];
|
||||
|
||||
if (y > H + sz * 2) {
|
||||
drops[i] = Math.random() * -20;
|
||||
speeds[i] = 0.04 + Math.random() * 0.06;
|
||||
trailLens[i] = 16 + Math.floor(Math.random() * 12);
|
||||
colSizes[i] = 10 + Math.floor(Math.random() * 31);
|
||||
colGlow[i] = 0.05 + Math.random() * 0.45;
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(draw);
|
||||
}
|
||||
|
||||
// Fill initial background
|
||||
ctx.fillStyle = '#0a1628';
|
||||
ctx.fillRect(0, 0, W, H);
|
||||
|
||||
draw();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,195 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1920, height=1080">
|
||||
<title>TomorrowLAN Quad Stream Overlay - Matrix Breathe</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
font-family: 'Segoe UI', 'Arial', sans-serif;
|
||||
}
|
||||
#matrix {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
z-index: 0;
|
||||
clip-path: path(evenodd, "M0,0 H1920 V1080 H0Z M23,15 H942 Q950,15 950,23 V522 Q950,530 942,530 H23 Q15,530 15,522 V23 Q15,15 23,15Z M978,15 H1897 Q1905,15 1905,23 V522 Q1905,530 1897,530 H978 Q970,530 970,522 V23 Q970,15 978,15Z M23,550 H942 Q950,550 950,558 V1057 Q950,1065 942,1065 H23 Q15,1065 15,1057 V558 Q15,550 23,550Z M978,550 H1897 Q1905,550 1905,558 V1057 Q1905,1065 1897,1065 H978 Q970,1065 970,1057 V558 Q970,550 978,550Z");
|
||||
}
|
||||
.grid {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 1920px; height: 1080px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
gap: 20px;
|
||||
padding: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
.panel {
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
}
|
||||
.border-svg {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg style="position:absolute;width:0;height:0">
|
||||
<defs>
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="6" result="blur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
<canvas id="matrix" width="1920" height="1080"></canvas>
|
||||
<div class="grid">
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 935 515">
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="2" filter="url(#glow)">
|
||||
<animate attributeName="stroke-opacity" values="0.2;1;0.2" dur="8s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;3;1" dur="8s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 935 515">
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="2" filter="url(#glow)">
|
||||
<animate attributeName="stroke-opacity" values="0.2;1;0.2" dur="8s" begin="-2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;3;1" dur="8s" begin="-2s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 935 515">
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="2" filter="url(#glow)">
|
||||
<animate attributeName="stroke-opacity" values="0.2;1;0.2" dur="8s" begin="-4s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;3;1" dur="8s" begin="-4s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 935 515">
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="2" filter="url(#glow)">
|
||||
<animate attributeName="stroke-opacity" values="0.2;1;0.2" dur="8s" begin="-6s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;3;1" dur="8s" begin="-6s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
const canvas = document.getElementById('matrix');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const W = 1920;
|
||||
const H = 1080;
|
||||
const drops = [];
|
||||
const speeds = [];
|
||||
const chars = [];
|
||||
const trailLens = [];
|
||||
const colSizes = [];
|
||||
const colX = [];
|
||||
const colGlow = [];
|
||||
|
||||
// Place columns spaced by their character width so they don't overlap
|
||||
let x = 0;
|
||||
while (x < W) {
|
||||
const i = colSizes.length;
|
||||
colSizes[i] = 10 + Math.floor(Math.random() * 31);
|
||||
colX[i] = x;
|
||||
colGlow[i] = 0.05 + Math.random() * 0.45;
|
||||
drops[i] = Math.random() * (H / colSizes[i]);
|
||||
speeds[i] = 0.04 + Math.random() * 0.06;
|
||||
trailLens[i] = 16 + Math.floor(Math.random() * 12);
|
||||
const rows = Math.ceil(H / colSizes[i]) + 30;
|
||||
chars[i] = [];
|
||||
for (let j = 0; j < rows; j++) {
|
||||
chars[i][j] = Math.random() > 0.5 ? '1' : '0';
|
||||
}
|
||||
x += colSizes[i] * 0.75;
|
||||
}
|
||||
const columns = colSizes.length;
|
||||
|
||||
function draw() {
|
||||
ctx.fillStyle = 'rgba(10, 22, 40, 0.06)';
|
||||
ctx.fillRect(0, 0, W, H);
|
||||
|
||||
for (let i = 0; i < columns; i++) {
|
||||
const sz = colSizes[i];
|
||||
const x = colX[i];
|
||||
const y = drops[i] * sz;
|
||||
const row = Math.floor(drops[i]);
|
||||
const numRows = chars[i].length;
|
||||
|
||||
ctx.font = sz + 'px monospace';
|
||||
|
||||
const glowR = sz * 1.5;
|
||||
const cx = x + sz * 0.35;
|
||||
const g = colGlow[i];
|
||||
const grad = ctx.createRadialGradient(cx, y, 0, cx, y, glowR);
|
||||
grad.addColorStop(0, 'rgba(0, 212, 255, ' + g + ')');
|
||||
grad.addColorStop(0.5, 'rgba(0, 212, 255, ' + (g * 0.3) + ')');
|
||||
grad.addColorStop(1, 'rgba(0, 212, 255, 0)');
|
||||
ctx.fillStyle = grad;
|
||||
ctx.fillRect(cx - glowR, y - glowR, glowR * 2, glowR * 2);
|
||||
|
||||
const fadeRows = 6;
|
||||
const fade = Math.min(1, Math.max(0, (drops[i] + fadeRows) / fadeRows));
|
||||
|
||||
const ci = ((row % numRows) + numRows) % numRows;
|
||||
ctx.fillStyle = 'rgba(255, 255, 255, ' + fade + ')';
|
||||
ctx.fillText(chars[i][ci], x, y);
|
||||
|
||||
const tl = trailLens[i];
|
||||
for (let t = 1; t <= tl; t++) {
|
||||
const ti = (((row - t) % numRows) + numRows) % numRows;
|
||||
const baseAlpha = (1 - t / tl) * 0.6;
|
||||
const trailFade = Math.min(1, fade + t / fadeRows);
|
||||
ctx.fillStyle = 'rgba(0, 212, 255, ' + (baseAlpha * trailFade) + ')';
|
||||
ctx.fillText(chars[i][ti], x, y - sz * t);
|
||||
}
|
||||
|
||||
if (Math.random() < 0.002) {
|
||||
const ri = Math.floor(Math.random() * numRows);
|
||||
chars[i][ri] = Math.random() > 0.5 ? '1' : '0';
|
||||
}
|
||||
|
||||
drops[i] += speeds[i];
|
||||
|
||||
if (y > H + sz * 2) {
|
||||
drops[i] = Math.random() * -20;
|
||||
speeds[i] = 0.04 + Math.random() * 0.06;
|
||||
trailLens[i] = 16 + Math.floor(Math.random() * 12);
|
||||
colSizes[i] = 10 + Math.floor(Math.random() * 31);
|
||||
colGlow[i] = 0.05 + Math.random() * 0.45;
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(draw);
|
||||
}
|
||||
|
||||
// Fill initial background
|
||||
ctx.fillStyle = '#0a1628';
|
||||
ctx.fillRect(0, 0, W, H);
|
||||
|
||||
draw();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,203 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1920, height=1080">
|
||||
<title>TomorrowLAN Quad Stream Overlay - Matrix Dual Bars</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
font-family: 'Segoe UI', 'Arial', sans-serif;
|
||||
}
|
||||
#matrix {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
z-index: 0;
|
||||
clip-path: path(evenodd, "M0,0 H1920 V1080 H0Z M23,15 H942 Q950,15 950,23 V522 Q950,530 942,530 H23 Q15,530 15,522 V23 Q15,15 23,15Z M978,15 H1897 Q1905,15 1905,23 V522 Q1905,530 1897,530 H978 Q970,530 970,522 V23 Q970,15 978,15Z M23,550 H942 Q950,550 950,558 V1057 Q950,1065 942,1065 H23 Q15,1065 15,1057 V558 Q15,550 23,550Z M978,550 H1897 Q1905,550 1905,558 V1057 Q1905,1065 1897,1065 H978 Q970,1065 970,1057 V558 Q970,550 978,550Z");
|
||||
}
|
||||
.grid {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 1920px; height: 1080px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
gap: 20px;
|
||||
padding: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
.panel {
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
}
|
||||
.border-anim {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg style="position:absolute;width:0;height:0">
|
||||
<defs>
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="8" result="blur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
<canvas id="matrix" width="1920" height="1080"></canvas>
|
||||
<div class="grid">
|
||||
<div class="panel">
|
||||
<svg class="border-anim" viewBox="0 0 935 515">
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2680" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="0" to="-2880" dur="40s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2680" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="-1440" to="-4320" dur="40s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-anim" viewBox="0 0 935 515">
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2680" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="0" to="-2880" dur="40s" begin="-10s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2680" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="-1440" to="-4320" dur="40s" begin="-10s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-anim" viewBox="0 0 935 515">
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2680" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="0" to="-2880" dur="40s" begin="-20s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2680" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="-1440" to="-4320" dur="40s" begin="-20s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-anim" viewBox="0 0 935 515">
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2680" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="0" to="-2880" dur="40s" begin="-30s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="4" stroke-dasharray="200 2680" stroke-linecap="round" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="-1440" to="-4320" dur="40s" begin="-30s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
const canvas = document.getElementById('matrix');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const W = 1920;
|
||||
const H = 1080;
|
||||
const drops = [];
|
||||
const speeds = [];
|
||||
const chars = [];
|
||||
const trailLens = [];
|
||||
const colSizes = [];
|
||||
const colX = [];
|
||||
const colGlow = [];
|
||||
|
||||
// Place columns spaced by their character width so they don't overlap
|
||||
let x = 0;
|
||||
while (x < W) {
|
||||
const i = colSizes.length;
|
||||
colSizes[i] = 10 + Math.floor(Math.random() * 31);
|
||||
colX[i] = x;
|
||||
colGlow[i] = 0.05 + Math.random() * 0.45;
|
||||
drops[i] = Math.random() * (H / colSizes[i]);
|
||||
speeds[i] = 0.04 + Math.random() * 0.06;
|
||||
trailLens[i] = 16 + Math.floor(Math.random() * 12);
|
||||
const rows = Math.ceil(H / colSizes[i]) + 30;
|
||||
chars[i] = [];
|
||||
for (let j = 0; j < rows; j++) {
|
||||
chars[i][j] = Math.random() > 0.5 ? '1' : '0';
|
||||
}
|
||||
x += colSizes[i] * 0.75;
|
||||
}
|
||||
const columns = colSizes.length;
|
||||
|
||||
function draw() {
|
||||
ctx.fillStyle = 'rgba(10, 22, 40, 0.06)';
|
||||
ctx.fillRect(0, 0, W, H);
|
||||
|
||||
for (let i = 0; i < columns; i++) {
|
||||
const sz = colSizes[i];
|
||||
const x = colX[i];
|
||||
const y = drops[i] * sz;
|
||||
const row = Math.floor(drops[i]);
|
||||
const numRows = chars[i].length;
|
||||
|
||||
ctx.font = sz + 'px monospace';
|
||||
|
||||
const glowR = sz * 1.5;
|
||||
const cx = x + sz * 0.35;
|
||||
const g = colGlow[i];
|
||||
const grad = ctx.createRadialGradient(cx, y, 0, cx, y, glowR);
|
||||
grad.addColorStop(0, 'rgba(0, 212, 255, ' + g + ')');
|
||||
grad.addColorStop(0.5, 'rgba(0, 212, 255, ' + (g * 0.3) + ')');
|
||||
grad.addColorStop(1, 'rgba(0, 212, 255, 0)');
|
||||
ctx.fillStyle = grad;
|
||||
ctx.fillRect(cx - glowR, y - glowR, glowR * 2, glowR * 2);
|
||||
|
||||
const fadeRows = 6;
|
||||
const fade = Math.min(1, Math.max(0, (drops[i] + fadeRows) / fadeRows));
|
||||
|
||||
const ci = ((row % numRows) + numRows) % numRows;
|
||||
ctx.fillStyle = 'rgba(255, 255, 255, ' + fade + ')';
|
||||
ctx.fillText(chars[i][ci], x, y);
|
||||
|
||||
const tl = trailLens[i];
|
||||
for (let t = 1; t <= tl; t++) {
|
||||
const ti = (((row - t) % numRows) + numRows) % numRows;
|
||||
const baseAlpha = (1 - t / tl) * 0.6;
|
||||
const trailFade = Math.min(1, fade + t / fadeRows);
|
||||
ctx.fillStyle = 'rgba(0, 212, 255, ' + (baseAlpha * trailFade) + ')';
|
||||
ctx.fillText(chars[i][ti], x, y - sz * t);
|
||||
}
|
||||
|
||||
if (Math.random() < 0.002) {
|
||||
const ri = Math.floor(Math.random() * numRows);
|
||||
chars[i][ri] = Math.random() > 0.5 ? '1' : '0';
|
||||
}
|
||||
|
||||
drops[i] += speeds[i];
|
||||
|
||||
if (y > H + sz * 2) {
|
||||
drops[i] = Math.random() * -20;
|
||||
speeds[i] = 0.04 + Math.random() * 0.06;
|
||||
trailLens[i] = 16 + Math.floor(Math.random() * 12);
|
||||
colSizes[i] = 10 + Math.floor(Math.random() * 31);
|
||||
colGlow[i] = 0.05 + Math.random() * 0.45;
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(draw);
|
||||
}
|
||||
|
||||
// Fill initial background
|
||||
ctx.fillStyle = '#0a1628';
|
||||
ctx.fillRect(0, 0, W, H);
|
||||
|
||||
draw();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,182 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1920, height=1080">
|
||||
<title>TomorrowLAN Quad Stream Overlay - Matrix Glow</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
font-family: 'Segoe UI', 'Arial', sans-serif;
|
||||
}
|
||||
#matrix {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
z-index: 0;
|
||||
clip-path: path(evenodd, "M0,0 H1920 V1080 H0Z M23,15 H942 Q950,15 950,23 V522 Q950,530 942,530 H23 Q15,530 15,522 V23 Q15,15 23,15Z M978,15 H1897 Q1905,15 1905,23 V522 Q1905,530 1897,530 H978 Q970,530 970,522 V23 Q970,15 978,15Z M23,550 H942 Q950,550 950,558 V1057 Q950,1065 942,1065 H23 Q15,1065 15,1057 V558 Q15,550 23,550Z M978,550 H1897 Q1905,550 1905,558 V1057 Q1905,1065 1897,1065 H978 Q970,1065 970,1057 V558 Q970,550 978,550Z");
|
||||
}
|
||||
.grid {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 1920px; height: 1080px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
gap: 20px;
|
||||
padding: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
.panel {
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
}
|
||||
.border-svg {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg style="position:absolute;width:0;height:0">
|
||||
<defs>
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="2" result="blur">
|
||||
<animate attributeName="stdDeviation" values="2;18;2" dur="12s" repeatCount="indefinite"/>
|
||||
</feGaussianBlur>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
<canvas id="matrix" width="1920" height="1080"></canvas>
|
||||
<div class="grid">
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 935 515">
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2" filter="url(#glow)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 935 515">
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2" filter="url(#glow)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 935 515">
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2" filter="url(#glow)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 935 515">
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2" filter="url(#glow)"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
const canvas = document.getElementById('matrix');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const W = 1920;
|
||||
const H = 1080;
|
||||
const drops = [];
|
||||
const speeds = [];
|
||||
const chars = [];
|
||||
const trailLens = [];
|
||||
const colSizes = [];
|
||||
const colX = [];
|
||||
const colGlow = [];
|
||||
|
||||
// Place columns spaced by their character width so they don't overlap
|
||||
let x = 0;
|
||||
while (x < W) {
|
||||
const i = colSizes.length;
|
||||
colSizes[i] = 10 + Math.floor(Math.random() * 31);
|
||||
colX[i] = x;
|
||||
colGlow[i] = 0.05 + Math.random() * 0.45;
|
||||
drops[i] = Math.random() * (H / colSizes[i]);
|
||||
speeds[i] = 0.04 + Math.random() * 0.06;
|
||||
trailLens[i] = 16 + Math.floor(Math.random() * 12);
|
||||
const rows = Math.ceil(H / colSizes[i]) + 30;
|
||||
chars[i] = [];
|
||||
for (let j = 0; j < rows; j++) {
|
||||
chars[i][j] = Math.random() > 0.5 ? '1' : '0';
|
||||
}
|
||||
x += colSizes[i] * 0.75;
|
||||
}
|
||||
const columns = colSizes.length;
|
||||
|
||||
function draw() {
|
||||
ctx.fillStyle = 'rgba(10, 22, 40, 0.06)';
|
||||
ctx.fillRect(0, 0, W, H);
|
||||
|
||||
for (let i = 0; i < columns; i++) {
|
||||
const sz = colSizes[i];
|
||||
const x = colX[i];
|
||||
const y = drops[i] * sz;
|
||||
const row = Math.floor(drops[i]);
|
||||
const numRows = chars[i].length;
|
||||
|
||||
ctx.font = sz + 'px monospace';
|
||||
|
||||
const glowR = sz * 1.5;
|
||||
const cx = x + sz * 0.35;
|
||||
const g = colGlow[i];
|
||||
const grad = ctx.createRadialGradient(cx, y, 0, cx, y, glowR);
|
||||
grad.addColorStop(0, 'rgba(0, 212, 255, ' + g + ')');
|
||||
grad.addColorStop(0.5, 'rgba(0, 212, 255, ' + (g * 0.3) + ')');
|
||||
grad.addColorStop(1, 'rgba(0, 212, 255, 0)');
|
||||
ctx.fillStyle = grad;
|
||||
ctx.fillRect(cx - glowR, y - glowR, glowR * 2, glowR * 2);
|
||||
|
||||
const fadeRows = 6;
|
||||
const fade = Math.min(1, Math.max(0, (drops[i] + fadeRows) / fadeRows));
|
||||
|
||||
const ci = ((row % numRows) + numRows) % numRows;
|
||||
ctx.fillStyle = 'rgba(255, 255, 255, ' + fade + ')';
|
||||
ctx.fillText(chars[i][ci], x, y);
|
||||
|
||||
const tl = trailLens[i];
|
||||
for (let t = 1; t <= tl; t++) {
|
||||
const ti = (((row - t) % numRows) + numRows) % numRows;
|
||||
const baseAlpha = (1 - t / tl) * 0.6;
|
||||
const trailFade = Math.min(1, fade + t / fadeRows);
|
||||
ctx.fillStyle = 'rgba(0, 212, 255, ' + (baseAlpha * trailFade) + ')';
|
||||
ctx.fillText(chars[i][ti], x, y - sz * t);
|
||||
}
|
||||
|
||||
if (Math.random() < 0.002) {
|
||||
const ri = Math.floor(Math.random() * numRows);
|
||||
chars[i][ri] = Math.random() > 0.5 ? '1' : '0';
|
||||
}
|
||||
|
||||
drops[i] += speeds[i];
|
||||
|
||||
if (y > H + sz * 2) {
|
||||
drops[i] = Math.random() * -20;
|
||||
speeds[i] = 0.04 + Math.random() * 0.06;
|
||||
trailLens[i] = 16 + Math.floor(Math.random() * 12);
|
||||
colSizes[i] = 10 + Math.floor(Math.random() * 31);
|
||||
colGlow[i] = 0.05 + Math.random() * 0.45;
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(draw);
|
||||
}
|
||||
|
||||
// Fill initial background
|
||||
ctx.fillStyle = '#0a1628';
|
||||
ctx.fillRect(0, 0, W, H);
|
||||
|
||||
draw();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,146 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1920, height=1080">
|
||||
<title>TomorrowLAN Quad Stream Overlay - Matrix Static</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
font-family: 'Segoe UI', 'Arial', sans-serif;
|
||||
}
|
||||
#matrix {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
z-index: 0;
|
||||
clip-path: path(evenodd, "M0,0 H1920 V1080 H0Z M23,15 H942 Q950,15 950,23 V522 Q950,530 942,530 H23 Q15,530 15,522 V23 Q15,15 23,15Z M978,15 H1897 Q1905,15 1905,23 V522 Q1905,530 1897,530 H978 Q970,530 970,522 V23 Q970,15 978,15Z M23,550 H942 Q950,550 950,558 V1057 Q950,1065 942,1065 H23 Q15,1065 15,1057 V558 Q15,550 23,550Z M978,550 H1897 Q1905,550 1905,558 V1057 Q1905,1065 1897,1065 H978 Q970,1065 970,1057 V558 Q970,550 978,550Z");
|
||||
}
|
||||
.grid {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 1920px; height: 1080px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
gap: 20px;
|
||||
padding: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
.panel {
|
||||
position: relative;
|
||||
border: 2px solid #00d4ff;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="matrix" width="1920" height="1080"></canvas>
|
||||
<div class="grid">
|
||||
<div class="panel"></div>
|
||||
<div class="panel"></div>
|
||||
<div class="panel"></div>
|
||||
<div class="panel"></div>
|
||||
</div>
|
||||
<script>
|
||||
const canvas = document.getElementById('matrix');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const W = 1920;
|
||||
const H = 1080;
|
||||
const drops = [];
|
||||
const speeds = [];
|
||||
const chars = [];
|
||||
const trailLens = [];
|
||||
const colSizes = [];
|
||||
const colX = [];
|
||||
const colGlow = [];
|
||||
|
||||
// Place columns spaced by their character width so they don't overlap
|
||||
let x = 0;
|
||||
while (x < W) {
|
||||
const i = colSizes.length;
|
||||
colSizes[i] = 10 + Math.floor(Math.random() * 31);
|
||||
colX[i] = x;
|
||||
colGlow[i] = 0.05 + Math.random() * 0.45;
|
||||
drops[i] = Math.random() * (H / colSizes[i]);
|
||||
speeds[i] = 0.04 + Math.random() * 0.06;
|
||||
trailLens[i] = 16 + Math.floor(Math.random() * 12);
|
||||
const rows = Math.ceil(H / colSizes[i]) + 30;
|
||||
chars[i] = [];
|
||||
for (let j = 0; j < rows; j++) {
|
||||
chars[i][j] = Math.random() > 0.5 ? '1' : '0';
|
||||
}
|
||||
x += colSizes[i] * 0.75;
|
||||
}
|
||||
const columns = colSizes.length;
|
||||
|
||||
function draw() {
|
||||
ctx.fillStyle = 'rgba(10, 22, 40, 0.06)';
|
||||
ctx.fillRect(0, 0, W, H);
|
||||
|
||||
for (let i = 0; i < columns; i++) {
|
||||
const sz = colSizes[i];
|
||||
const x = colX[i];
|
||||
const y = drops[i] * sz;
|
||||
const row = Math.floor(drops[i]);
|
||||
const numRows = chars[i].length;
|
||||
|
||||
ctx.font = sz + 'px monospace';
|
||||
|
||||
const glowR = sz * 1.5;
|
||||
const cx = x + sz * 0.35;
|
||||
const g = colGlow[i];
|
||||
const grad = ctx.createRadialGradient(cx, y, 0, cx, y, glowR);
|
||||
grad.addColorStop(0, 'rgba(0, 212, 255, ' + g + ')');
|
||||
grad.addColorStop(0.5, 'rgba(0, 212, 255, ' + (g * 0.3) + ')');
|
||||
grad.addColorStop(1, 'rgba(0, 212, 255, 0)');
|
||||
ctx.fillStyle = grad;
|
||||
ctx.fillRect(cx - glowR, y - glowR, glowR * 2, glowR * 2);
|
||||
|
||||
const fadeRows = 6;
|
||||
const fade = Math.min(1, Math.max(0, (drops[i] + fadeRows) / fadeRows));
|
||||
|
||||
const ci = ((row % numRows) + numRows) % numRows;
|
||||
ctx.fillStyle = 'rgba(255, 255, 255, ' + fade + ')';
|
||||
ctx.fillText(chars[i][ci], x, y);
|
||||
|
||||
const tl = trailLens[i];
|
||||
for (let t = 1; t <= tl; t++) {
|
||||
const ti = (((row - t) % numRows) + numRows) % numRows;
|
||||
const baseAlpha = (1 - t / tl) * 0.6;
|
||||
const trailFade = Math.min(1, fade + t / fadeRows);
|
||||
ctx.fillStyle = 'rgba(0, 212, 255, ' + (baseAlpha * trailFade) + ')';
|
||||
ctx.fillText(chars[i][ti], x, y - sz * t);
|
||||
}
|
||||
|
||||
if (Math.random() < 0.002) {
|
||||
const ri = Math.floor(Math.random() * numRows);
|
||||
chars[i][ri] = Math.random() > 0.5 ? '1' : '0';
|
||||
}
|
||||
|
||||
drops[i] += speeds[i];
|
||||
|
||||
if (y > H + sz * 2) {
|
||||
drops[i] = Math.random() * -20;
|
||||
speeds[i] = 0.04 + Math.random() * 0.06;
|
||||
trailLens[i] = 16 + Math.floor(Math.random() * 12);
|
||||
colSizes[i] = 10 + Math.floor(Math.random() * 31);
|
||||
colGlow[i] = 0.05 + Math.random() * 0.45;
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(draw);
|
||||
}
|
||||
|
||||
// Fill initial background
|
||||
ctx.fillStyle = '#0a1628';
|
||||
ctx.fillRect(0, 0, W, H);
|
||||
|
||||
draw();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,203 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1920, height=1080">
|
||||
<title>TomorrowLAN Quad Stream Overlay - Matrix Wave</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
font-family: 'Segoe UI', 'Arial', sans-serif;
|
||||
}
|
||||
#matrix {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
z-index: 0;
|
||||
clip-path: path(evenodd, "M0,0 H1920 V1080 H0Z M23,15 H942 Q950,15 950,23 V522 Q950,530 942,530 H23 Q15,530 15,522 V23 Q15,15 23,15Z M978,15 H1897 Q1905,15 1905,23 V522 Q1905,530 1897,530 H978 Q970,530 970,522 V23 Q970,15 978,15Z M23,550 H942 Q950,550 950,558 V1057 Q950,1065 942,1065 H23 Q15,1065 15,1057 V558 Q15,550 23,550Z M978,550 H1897 Q1905,550 1905,558 V1057 Q1905,1065 1897,1065 H978 Q970,1065 970,1057 V558 Q970,550 978,550Z");
|
||||
}
|
||||
.grid {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 1920px; height: 1080px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
gap: 20px;
|
||||
padding: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
.panel {
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
}
|
||||
.border-svg {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg style="position:absolute;width:0;height:0">
|
||||
<defs>
|
||||
<filter id="glow-dim" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="4" result="blur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<filter id="glow-bright" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="10" result="blur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
<canvas id="matrix" width="1920" height="1080"></canvas>
|
||||
<div class="grid">
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 935 515">
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2" filter="url(#glow-dim)"/>
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="3" filter="url(#glow-bright)">
|
||||
<animate attributeName="stroke-opacity" values="0;0;1;1;0;0;0;0;0" dur="12s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;1;4;4;1;1;1;1;1" dur="12s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 935 515">
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2" filter="url(#glow-dim)"/>
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="3" filter="url(#glow-bright)">
|
||||
<animate attributeName="stroke-opacity" values="0;0;0;0;1;1;0;0;0" dur="12s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;1;1;1;4;4;1;1;1" dur="12s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 935 515">
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2" filter="url(#glow-dim)"/>
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="3" filter="url(#glow-bright)">
|
||||
<animate attributeName="stroke-opacity" values="0;0;0;0;0;0;1;1;0" dur="12s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;1;1;1;1;1;4;4;1" dur="12s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 935 515">
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2" filter="url(#glow-dim)"/>
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="3" filter="url(#glow-bright)">
|
||||
<animate attributeName="stroke-opacity" values="1;0;0;0;0;0;0;0;1" dur="12s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="4;1;1;1;1;1;1;1;4" dur="12s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
const canvas = document.getElementById('matrix');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const W = 1920;
|
||||
const H = 1080;
|
||||
const drops = [];
|
||||
const speeds = [];
|
||||
const chars = [];
|
||||
const trailLens = [];
|
||||
const colSizes = [];
|
||||
const colX = [];
|
||||
const colGlow = [];
|
||||
|
||||
// Place columns spaced by their character width so they don't overlap
|
||||
let x = 0;
|
||||
while (x < W) {
|
||||
const i = colSizes.length;
|
||||
colSizes[i] = 10 + Math.floor(Math.random() * 31);
|
||||
colX[i] = x;
|
||||
colGlow[i] = 0.05 + Math.random() * 0.45;
|
||||
drops[i] = Math.random() * (H / colSizes[i]);
|
||||
speeds[i] = 0.04 + Math.random() * 0.06;
|
||||
trailLens[i] = 16 + Math.floor(Math.random() * 12);
|
||||
const rows = Math.ceil(H / colSizes[i]) + 30;
|
||||
chars[i] = [];
|
||||
for (let j = 0; j < rows; j++) {
|
||||
chars[i][j] = Math.random() > 0.5 ? '1' : '0';
|
||||
}
|
||||
x += colSizes[i] * 0.75;
|
||||
}
|
||||
const columns = colSizes.length;
|
||||
|
||||
function draw() {
|
||||
ctx.fillStyle = 'rgba(10, 22, 40, 0.06)';
|
||||
ctx.fillRect(0, 0, W, H);
|
||||
|
||||
for (let i = 0; i < columns; i++) {
|
||||
const sz = colSizes[i];
|
||||
const x = colX[i];
|
||||
const y = drops[i] * sz;
|
||||
const row = Math.floor(drops[i]);
|
||||
const numRows = chars[i].length;
|
||||
|
||||
ctx.font = sz + 'px monospace';
|
||||
|
||||
const glowR = sz * 1.5;
|
||||
const cx = x + sz * 0.35;
|
||||
const g = colGlow[i];
|
||||
const grad = ctx.createRadialGradient(cx, y, 0, cx, y, glowR);
|
||||
grad.addColorStop(0, 'rgba(0, 212, 255, ' + g + ')');
|
||||
grad.addColorStop(0.5, 'rgba(0, 212, 255, ' + (g * 0.3) + ')');
|
||||
grad.addColorStop(1, 'rgba(0, 212, 255, 0)');
|
||||
ctx.fillStyle = grad;
|
||||
ctx.fillRect(cx - glowR, y - glowR, glowR * 2, glowR * 2);
|
||||
|
||||
const fadeRows = 6;
|
||||
const fade = Math.min(1, Math.max(0, (drops[i] + fadeRows) / fadeRows));
|
||||
|
||||
const ci = ((row % numRows) + numRows) % numRows;
|
||||
ctx.fillStyle = 'rgba(255, 255, 255, ' + fade + ')';
|
||||
ctx.fillText(chars[i][ci], x, y);
|
||||
|
||||
const tl = trailLens[i];
|
||||
for (let t = 1; t <= tl; t++) {
|
||||
const ti = (((row - t) % numRows) + numRows) % numRows;
|
||||
const baseAlpha = (1 - t / tl) * 0.6;
|
||||
const trailFade = Math.min(1, fade + t / fadeRows);
|
||||
ctx.fillStyle = 'rgba(0, 212, 255, ' + (baseAlpha * trailFade) + ')';
|
||||
ctx.fillText(chars[i][ti], x, y - sz * t);
|
||||
}
|
||||
|
||||
if (Math.random() < 0.002) {
|
||||
const ri = Math.floor(Math.random() * numRows);
|
||||
chars[i][ri] = Math.random() > 0.5 ? '1' : '0';
|
||||
}
|
||||
|
||||
drops[i] += speeds[i];
|
||||
|
||||
if (y > H + sz * 2) {
|
||||
drops[i] = Math.random() * -20;
|
||||
speeds[i] = 0.04 + Math.random() * 0.06;
|
||||
trailLens[i] = 16 + Math.floor(Math.random() * 12);
|
||||
colSizes[i] = 10 + Math.floor(Math.random() * 31);
|
||||
colGlow[i] = 0.05 + Math.random() * 0.45;
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(draw);
|
||||
}
|
||||
|
||||
// Fill initial background
|
||||
ctx.fillStyle = '#0a1628';
|
||||
ctx.fillRect(0, 0, W, H);
|
||||
|
||||
draw();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,67 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1920, height=1080">
|
||||
<title>TomorrowLAN Quad Stream Overlay - Static</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
font-family: 'Segoe UI', 'Arial', sans-serif;
|
||||
}
|
||||
|
||||
.background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
background: url('bg.png') center center / cover no-repeat;
|
||||
z-index: 0;
|
||||
clip-path: path(evenodd, "M0,0 H1920 V1080 H0Z M23,15 H942 Q950,15 950,23 V522 Q950,530 942,530 H23 Q15,530 15,522 V23 Q15,15 23,15Z M978,15 H1897 Q1905,15 1905,23 V522 Q1905,530 1897,530 H978 Q970,530 970,522 V23 Q970,15 978,15Z M23,550 H942 Q950,550 950,558 V1057 Q950,1065 942,1065 H23 Q15,1065 15,1057 V558 Q15,550 23,550Z M978,550 H1897 Q1905,550 1905,558 V1057 Q1905,1065 1897,1065 H978 Q970,1065 970,1057 V558 Q970,550 978,550Z");
|
||||
}
|
||||
|
||||
.grid {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
gap: 20px;
|
||||
padding: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.panel {
|
||||
position: relative;
|
||||
border: 2px solid #00d4ff;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="background"></div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="panel"></div>
|
||||
<div class="panel"></div>
|
||||
<div class="panel"></div>
|
||||
<div class="panel"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,117 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1920, height=1080">
|
||||
<title>TomorrowLAN Quad Stream Overlay - Wave</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
font-family: 'Segoe UI', 'Arial', sans-serif;
|
||||
}
|
||||
|
||||
.background {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 1920px; height: 1080px;
|
||||
background: url('bg.png') center center / cover no-repeat;
|
||||
z-index: 0;
|
||||
clip-path: path(evenodd, "M0,0 H1920 V1080 H0Z M23,15 H942 Q950,15 950,23 V522 Q950,530 942,530 H23 Q15,530 15,522 V23 Q15,15 23,15Z M978,15 H1897 Q1905,15 1905,23 V522 Q1905,530 1897,530 H978 Q970,530 970,522 V23 Q970,15 978,15Z M23,550 H942 Q950,550 950,558 V1057 Q950,1065 942,1065 H23 Q15,1065 15,1057 V558 Q15,550 23,550Z M978,550 H1897 Q1905,550 1905,558 V1057 Q1905,1065 1897,1065 H978 Q970,1065 970,1057 V558 Q970,550 978,550Z");
|
||||
}
|
||||
|
||||
.grid {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 1920px; height: 1080px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
gap: 20px;
|
||||
padding: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.panel {
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.border-svg {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg style="position:absolute;width:0;height:0">
|
||||
<defs>
|
||||
<filter id="glow-dim" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="4" result="blur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<filter id="glow-bright" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="10" result="blur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<div class="background"></div>
|
||||
|
||||
<!-- Wave: panels light up one after another in sequence 1→2→3→4→1... -->
|
||||
<div class="grid">
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 935 515">
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2" filter="url(#glow-dim)"/>
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="3" filter="url(#glow-bright)">
|
||||
<animate attributeName="stroke-opacity" values="0;0;1;1;0;0;0;0;0" dur="12s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;1;4;4;1;1;1;1;1" dur="12s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 935 515">
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2" filter="url(#glow-dim)"/>
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="3" filter="url(#glow-bright)">
|
||||
<animate attributeName="stroke-opacity" values="0;0;0;0;1;1;0;0;0" dur="12s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;1;1;1;4;4;1;1;1" dur="12s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 935 515">
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2" filter="url(#glow-dim)"/>
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="3" filter="url(#glow-bright)">
|
||||
<animate attributeName="stroke-opacity" values="0;0;0;0;0;0;1;1;0" dur="12s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;1;1;1;1;1;4;4;1" dur="12s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<svg class="border-svg" viewBox="0 0 935 515">
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2" filter="url(#glow-dim)"/>
|
||||
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="3" filter="url(#glow-bright)">
|
||||
<animate attributeName="stroke-opacity" values="1;0;0;0;0;0;0;0;1" dur="12s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="4;1;1;1;1;1;1;1;4" dur="12s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue