jwright/bztmon-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

constellation: seamless animation loops — dash offset aligned to the 136px pattern period (dots no longer jump at the seam), radar ring fades in instead of popping

Browse Source
This commit is contained in:
Jonathon Wright
2026-07-13 15:32:09 +10:00
parent 3217d779b3
commit a0d71388c4
1 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Constellation.astro
+7 -3
View File
@@ -246,11 +246,15 @@
animation: bzRing 3.6s ease-out infinite; animation: bzRing 3.6s ease-out infinite;
} }
@keyframes bzDash { to { stroke-dashoffset: -260; } } /* dash pattern is 9+127 = a 136px period — the loop offset MUST be an exact multiple of it
@keyframes bzDashRev { to { stroke-dashoffset: 260; } } (2×136 = 272) or every packet dot visibly teleports at the loop seam. */
@keyframes bzDash { to { stroke-dashoffset: -272; } }
@keyframes bzDashRev { to { stroke-dashoffset: 272; } }
@keyframes bzPulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } } @keyframes bzPulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes bzRing { @keyframes bzRing {
0% { transform: scale(0.5); opacity: 0.9; } /* start AND end at opacity 0 so the 3.6s restart never pops */
0% { transform: scale(0.5); opacity: 0; }
10% { opacity: 0.9; }
100% { transform: scale(1.7); opacity: 0; } 100% { transform: scale(1.7); opacity: 0; }
} }