diff --git a/public/index.html b/public/index.html
index 7aeff39..13f1534 100644
--- a/public/index.html
+++ b/public/index.html
@@ -22,7 +22,7 @@
-
+
-
+
diff --git a/public/live.js b/public/live.js
index 4eddd79..960acb6 100644
--- a/public/live.js
+++ b/public/live.js
@@ -1757,14 +1757,14 @@
}
const matrixGreen = '#00ff41';
- const TRAIL_LEN = Math.min(8, bytes.length); // visible chars at once
- const TOTAL_STEPS = 30;
+ const TRAIL_LEN = Math.min(6, bytes.length); // visible chars at once — fewer for more spacing
+ const TOTAL_STEPS = 45; // slower animation
const charMarkers = [];
let step = 0;
// Dim trail line underneath
const trail = L.polyline([from], {
- color: matrixGreen, weight: 1, opacity: 0.15, lineCap: 'round'
+ color: matrixGreen, weight: 1.5, opacity: 0.2, lineCap: 'round'
}).addTo(pathsLayer);
const trailCoords = [from];
@@ -1786,24 +1786,26 @@
// Fade existing chars
for (let i = 0; i < charMarkers.length; i++) {
const age = charMarkers.length - i;
- const op = Math.max(0.1, 1 - (age / TRAIL_LEN) * 0.8);
- const size = Math.max(7, 12 - age);
+ const op = Math.max(0.15, 1 - (age / TRAIL_LEN) * 0.7);
+ const size = Math.max(10, 16 - age * 1.5);
const el = charMarkers[i].marker.getElement();
if (el) { el.style.opacity = op; el.style.fontSize = size + 'px'; }
}
- // Add new leading character
- const byteIdx = step % bytes.length;
- const charEl = L.marker([lat, lon], {
- icon: L.divIcon({
- className: 'matrix-char',
- html: `${bytes[byteIdx]}`,
- iconSize: [20, 14],
- iconAnchor: [10, 7]
- }),
- interactive: false
- }).addTo(animLayer);
- charMarkers.push({ marker: charEl });
+ // Add new leading character every 2nd step for spacing
+ if (step % 2 === 0) {
+ const byteIdx = (step / 2) % bytes.length;
+ const charEl = L.marker([lat, lon], {
+ icon: L.divIcon({
+ className: 'matrix-char',
+ html: `${bytes[byteIdx]}`,
+ iconSize: [24, 18],
+ iconAnchor: [12, 9]
+ }),
+ interactive: false
+ }).addTo(animLayer);
+ charMarkers.push({ marker: charEl });
+ }
if (step >= TOTAL_STEPS) {
clearInterval(interval);
@@ -1830,7 +1832,7 @@
if (onComplete) onComplete();
}
- }, 33);
+ }, 50);
}
function drawAnimatedLine(from, to, color, onComplete, overrideOpacity, rawHex) {
diff --git a/public/style.css b/public/style.css
index b44d7ff..4248b3d 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1537,7 +1537,7 @@ tr[data-hops]:hover { background: rgba(59,130,246,0.1); }
/* === Matrix Theme === */
.matrix-theme .leaflet-tile-pane {
- filter: brightness(1.4) contrast(1.2) sepia(0.6) hue-rotate(70deg) saturate(2);
+ filter: brightness(1.25) contrast(1.2) sepia(0.6) hue-rotate(70deg) saturate(2);
}
.matrix-theme.leaflet-container::before {
content: ''; position: absolute; inset: 0; z-index: 401;