From 266ad7742a77cc2c643860690a22f797a8893b6c Mon Sep 17 00:00:00 2001 From: Camillo Bruni Date: Tue, 14 Oct 2025 17:53:00 +0200 Subject: [PATCH 01/12] remove startup animation --- resources/JetStream.css | 9 --------- resources/clouds.svg | 15 --------------- resources/jetstreams.svg | 30 ------------------------------ 3 files changed, 54 deletions(-) delete mode 100644 resources/clouds.svg diff --git a/resources/JetStream.css b/resources/JetStream.css index 32fe3418..9c4bfcaa 100644 --- a/resources/JetStream.css +++ b/resources/JetStream.css @@ -60,11 +60,7 @@ body { font-size: 1.6rem; font-weight: 400; line-height: 1.4; - background-repeat: no-repeat; - background-position: center -5vw; - background-size: 100vw; padding-bottom: 0px; - background-image: url("clouds.svg"); overflow-y: hidden; height: 100%; } @@ -180,8 +176,6 @@ img { background-size: contain; background-image: url("JetStreamNxLogo.svg"); color: transparent; - animation: swingin 350ms ease-out forwards; - will-change: transform, opacity; height: 75px; } @@ -220,9 +214,6 @@ article, .summary { max-width: 70rem; margin: 0 auto 0 auto; - opacity: 0; - animation: fadein 0.5s ease-in-out forwards; - animation-delay: 200ms; } article { diff --git a/resources/clouds.svg b/resources/clouds.svg deleted file mode 100644 index e3c62bc4..00000000 --- a/resources/clouds.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/resources/jetstreams.svg b/resources/jetstreams.svg index b767e43f..29c8decd 100644 --- a/resources/jetstreams.svg +++ b/resources/jetstreams.svg @@ -3,36 +3,6 @@ From 047c56a27549aa64ce0375f76d29619abd8bded0 Mon Sep 17 00:00:00 2001 From: Camillo Bruni Date: Wed, 15 Oct 2025 11:21:53 +0200 Subject: [PATCH 02/12] back to rain --- clouds.svg | 15 +++++++++++++++ resources/JetStream.css | 5 +++++ 2 files changed, 20 insertions(+) create mode 100644 clouds.svg diff --git a/clouds.svg b/clouds.svg new file mode 100644 index 00000000..e3c62bc4 --- /dev/null +++ b/clouds.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/resources/JetStream.css b/resources/JetStream.css index 9c4bfcaa..9d4ed0e1 100644 --- a/resources/JetStream.css +++ b/resources/JetStream.css @@ -60,6 +60,11 @@ body { font-size: 1.6rem; font-weight: 400; line-height: 1.4; + background-repeat: no-repeat; + background-position: center -5vw; + background-size: 100vw; + padding-bottom: 0px; + background-image: url('clouds.svg'); padding-bottom: 0px; overflow-y: hidden; height: 100%; From 2c060c36d3b0d3b48c01c4f7bb1496d81642865a Mon Sep 17 00:00:00 2001 From: Camillo Bruni Date: Wed, 22 Oct 2025 16:49:27 +0200 Subject: [PATCH 03/12] revert --- index.html | 8 ++++++++ resources/JetStream.css | 1 - resources/jetstreams.svg | 30 ++++++++++++++++++++++++++++++ 3 files changed, 38 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 198ff3d9..9ba34491 100644 --- a/index.html +++ b/index.html @@ -54,6 +54,9 @@ if (!JetStreamParams.isDefault) { showNonDefaultParams(); } + if (JetStreamParams.startDelay === undefined) { + blowJetStreams() + } if (globalThis.allIsGood) { try { await JetStream.initialize(); @@ -83,6 +86,11 @@ row.insertCell().textContent = JSON.stringify(defaultValue); } } + + function blowJetStreams() { + const timestamp = performance.now(); + document.getElementById('jetstreams').style.backgroundImage = `url('resources/jetstreams.svg?${timestamp}')`; + } diff --git a/resources/JetStream.css b/resources/JetStream.css index 9d4ed0e1..79741d3f 100644 --- a/resources/JetStream.css +++ b/resources/JetStream.css @@ -185,7 +185,6 @@ img { } #jetstreams { - background-image: url("jetstreams.svg"); background-repeat: no-repeat; background-size: contain; background-position: center; diff --git a/resources/jetstreams.svg b/resources/jetstreams.svg index 29c8decd..b767e43f 100644 --- a/resources/jetstreams.svg +++ b/resources/jetstreams.svg @@ -3,6 +3,36 @@ From 26ac56f26de2c48c73fdd3cc797dfa41087854db Mon Sep 17 00:00:00 2001 From: Camillo Bruni Date: Wed, 22 Oct 2025 16:58:20 +0200 Subject: [PATCH 04/12] enable animation without startDelay --- index.html | 5 +++-- resources/JetStream.css | 15 +++++++++++++++ 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 9ba34491..6ce27a8f 100644 --- a/index.html +++ b/index.html @@ -55,7 +55,7 @@ showNonDefaultParams(); } if (JetStreamParams.startDelay === undefined) { - blowJetStreams() + playIntro() } if (globalThis.allIsGood) { try { @@ -87,7 +87,8 @@ } } - function blowJetStreams() { + function playIntro() { + document.body.classList.add("animateUI"); const timestamp = performance.now(); document.getElementById('jetstreams').style.backgroundImage = `url('resources/jetstreams.svg?${timestamp}')`; } diff --git a/resources/JetStream.css b/resources/JetStream.css index 79741d3f..b97e9b1c 100644 --- a/resources/JetStream.css +++ b/resources/JetStream.css @@ -184,6 +184,11 @@ img { height: 75px; } +.animateUI .logo .logo-image { + animation: swingin 350ms ease-out forwards; + will-change: transform, opacity; +} + #jetstreams { background-repeat: no-repeat; background-size: contain; @@ -192,6 +197,7 @@ img { margin: -2rem 0; } + #jetstreams svg { width: 100%; max-height: 120px; @@ -220,6 +226,15 @@ article, margin: 0 auto 0 auto; } +.summary { + opacity: 0; +} + +article, .animateUI .summary { + animation: fadein 0.5s ease-in-out forwards; + animation-delay: 200ms; +} + article { display: flex; flex-direction: column; From 19c205849827e4da302595e292349765fd857c18 Mon Sep 17 00:00:00 2001 From: Camillo Bruni Date: Wed, 22 Oct 2025 16:58:52 +0200 Subject: [PATCH 05/12] rename --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 6ce27a8f..4c5c453f 100644 --- a/index.html +++ b/index.html @@ -55,7 +55,7 @@ showNonDefaultParams(); } if (JetStreamParams.startDelay === undefined) { - playIntro() + startIntroAnimations() } if (globalThis.allIsGood) { try { @@ -87,7 +87,7 @@ } } - function playIntro() { + function startIntroAnimations() { document.body.classList.add("animateUI"); const timestamp = performance.now(); document.getElementById('jetstreams').style.backgroundImage = `url('resources/jetstreams.svg?${timestamp}')`; From ed00fb04fec786465bfeb39244c6b21269874580 Mon Sep 17 00:00:00 2001 From: Camillo Bruni Date: Thu, 23 Oct 2025 10:56:28 +0200 Subject: [PATCH 06/12] refactor --- JetStreamDriver.js | 18 +++++++-------- index.html | 22 +++++++++--------- resources/JetStream.css | 49 +++++++++++++++++++++++++++-------------- 3 files changed, 52 insertions(+), 37 deletions(-) diff --git a/JetStreamDriver.js b/JetStreamDriver.js index c88015d9..c9bea3ad 100644 --- a/JetStreamDriver.js +++ b/JetStreamDriver.js @@ -428,7 +428,6 @@ class Driver { } summaryHtml += ""; const summaryElement = document.getElementById("result-summary"); - summaryElement.classList.add("done"); summaryElement.innerHTML = summaryHtml; summaryElement.onclick = displayCategoryScores; statusElement.innerHTML = ""; @@ -474,6 +473,14 @@ class Driver { if (e.key === "Enter") JetStream.start(); }); + + const statusElement = document.getElementById("status"); + statusElement.innerHTML = `Start Test`; + statusElement.addEventListener("click", (e) => { + e.preventDefault(); + JetStream.start(); + return false; + }, { once: true}); } reportError(benchmark, error) { @@ -549,15 +556,6 @@ class Driver { } JetStream.loadCache = { }; // Done preloading all the files. - - const statusElement = document.getElementById("status"); - statusElement.classList.remove('loading'); - statusElement.innerHTML = `Start Test`; - statusElement.onclick = () => { - statusElement.onclick = null; - JetStream.start(); - return false; - } } updateCounterUI() { diff --git a/index.html b/index.html index 4c5c453f..b6e0051f 100644 --- a/index.html +++ b/index.html @@ -51,24 +51,29 @@ } async function initialize() { + const bodyClassList = document.body.classList; if (!JetStreamParams.isDefault) { showNonDefaultParams(); } - if (JetStreamParams.startDelay === undefined) { - startIntroAnimations() + if (JetStreamParams.startDelay !== undefined) { + bodyClassList.remove("animate"); } if (globalThis.allIsGood) { try { + await new Promise(r => setTimeout(r, 500)); await JetStream.initialize(); + document.body.classList.add("ready"); } catch (e) { globalThis.allIsGood = false; console.error(e); + } finally { + bodyClassList.remove("loading"); + bodyClassList.remove("animate-loading"); } } if (!globalThis.allIsGood) { + bodyClassList.add('error'); let statusElement = document.getElementById("status"); - statusElement.classList.remove('loading'); - statusElement.classList.add('error'); statusElement.innerHTML = "

ERROR

Errors were encountered during page load. Refusing to run a partial benchmark suite.

"; } } @@ -87,18 +92,13 @@ } } - function startIntroAnimations() { - document.body.classList.add("animateUI"); - const timestamp = performance.now(); - document.getElementById('jetstreams').style.backgroundImage = `url('resources/jetstreams.svg?${timestamp}')`; - } - +

JetStream Next @@ -127,7 +127,7 @@

Non-standard Parameters

-
+
Loading Benchmark...
diff --git a/resources/JetStream.css b/resources/JetStream.css index b97e9b1c..bd727224 100644 --- a/resources/JetStream.css +++ b/resources/JetStream.css @@ -184,9 +184,15 @@ img { height: 75px; } -.animateUI .logo .logo-image { +.loading.animate .logo .logo-image { animation: swingin 350ms ease-out forwards; will-change: transform, opacity; + animation-delay: 50ms; +} + +.ready .logo .logo-image { + animation: none; + opacity: 1; } #jetstreams { @@ -197,12 +203,19 @@ img { margin: -2rem 0; } - #jetstreams svg { width: 100%; max-height: 120px; } +.loading.animate #jetstreams { + background-image: url("jetstreams.svg") !important; +} + +.loadidng #jetstreams, .ready #jetstreams { + background-image: url("jetstreams-static.svg"); +} + #magic { position: absolute; top: -900px; @@ -226,11 +239,11 @@ article, margin: 0 auto 0 auto; } -.summary { +.loading .summary { opacity: 0; } -article, .animateUI .summary { +article, .loading.animate .summary { animation: fadein 0.5s ease-in-out forwards; animation-delay: 200ms; } @@ -369,18 +382,13 @@ a.button { user-select: none; } -a.button { - animation: fadein 500ms ease-in forwards, scaledown 500ms ease-in forwards; - opacity: 0; -} - #status label, .button:hover { background-image: none; } -#status.loading, -#status-progress-bar { +.loading #status-text, +.loading #status-progress-bar { background-image: linear-gradient( 132deg, #96e5ff 0%, @@ -392,11 +400,19 @@ a.button { ); } -#status.loading { +.loading:not(.ready) #status { position: absolute; - top: 0; - left: 0; - margin: 48vh 0 0; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + z-index: 100; +} + +.loading #status-text { width: 100%; line-height: 1.2; font-size: 4rem; @@ -408,9 +424,10 @@ a.button { background-repeat: no-repeat; -webkit-touch-callout: none; user-select: none; + text-align: center; } -#status.error { +.error #status { max-width: 70rem; margin: 0 auto 1rem; } From d806667df328901b463d141532f12972c9f69704 Mon Sep 17 00:00:00 2001 From: Camillo Bruni Date: Thu, 23 Oct 2025 10:58:36 +0200 Subject: [PATCH 07/12] update --- resources/JetStream.css | 8 ++++---- clouds.svg => resources/clouds.svg | 0 resources/jetstreams-static.svg | 18 ++++++++++++++++++ 3 files changed, 22 insertions(+), 4 deletions(-) rename clouds.svg => resources/clouds.svg (100%) create mode 100644 resources/jetstreams-static.svg diff --git a/resources/JetStream.css b/resources/JetStream.css index bd727224..f191450a 100644 --- a/resources/JetStream.css +++ b/resources/JetStream.css @@ -64,7 +64,7 @@ body { background-position: center -5vw; background-size: 100vw; padding-bottom: 0px; - background-image: url('clouds.svg'); + background-image: url("clouds.svg"); padding-bottom: 0px; overflow-y: hidden; height: 100%; @@ -209,10 +209,10 @@ img { } .loading.animate #jetstreams { - background-image: url("jetstreams.svg") !important; + background-image: url("jetstreams.svg"); } -.loadidng #jetstreams, .ready #jetstreams { +.loading #jetstreams, .ready #jetstreams { background-image: url("jetstreams-static.svg"); } @@ -239,7 +239,7 @@ article, margin: 0 auto 0 auto; } -.loading .summary { +.loading.animate .summary { opacity: 0; } diff --git a/clouds.svg b/resources/clouds.svg similarity index 100% rename from clouds.svg rename to resources/clouds.svg diff --git a/resources/jetstreams-static.svg b/resources/jetstreams-static.svg new file mode 100644 index 00000000..a734b574 --- /dev/null +++ b/resources/jetstreams-static.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + \ No newline at end of file From 0dfdd5ee25f2f6c8e58fc45e76edff08a6cad8b5 Mon Sep 17 00:00:00 2001 From: Camillo Bruni Date: Thu, 23 Oct 2025 11:00:08 +0200 Subject: [PATCH 08/12] remove debug timeout --- index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/index.html b/index.html index b6e0051f..a5bf34e7 100644 --- a/index.html +++ b/index.html @@ -60,7 +60,6 @@ } if (globalThis.allIsGood) { try { - await new Promise(r => setTimeout(r, 500)); await JetStream.initialize(); document.body.classList.add("ready"); } catch (e) { From f068fca0a07a90f1546266a8f41b07c84c32e9e7 Mon Sep 17 00:00:00 2001 From: Camillo Bruni Date: Mon, 27 Oct 2025 14:31:03 +0100 Subject: [PATCH 09/12] wip --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index a5bf34e7..12e753d1 100644 --- a/index.html +++ b/index.html @@ -53,6 +53,7 @@ async function initialize() { const bodyClassList = document.body.classList; if (!JetStreamParams.isDefault) { + bodyClassList.remove("animate"); showNonDefaultParams(); } if (JetStreamParams.startDelay !== undefined) { From bae38c3cbe834b056daa7593f038d5cf5ee56fa5 Mon Sep 17 00:00:00 2001 From: Camillo Bruni Date: Mon, 27 Oct 2025 14:34:54 +0100 Subject: [PATCH 10/12] faster animation --- resources/jetstreams.svg | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/resources/jetstreams.svg b/resources/jetstreams.svg index b767e43f..bedfda5f 100644 --- a/resources/jetstreams.svg +++ b/resources/jetstreams.svg @@ -6,26 +6,26 @@ stroke-dasharray: 2680; stroke-dashoffset: 2680; animation: dash 1.1s ease-in forwards; - animation-delay: 400ms; + animation-delay: 100ms; } .line.second { - animation-delay: 500ms; + animation-delay: 200ms; animation-duration: 900ms; } .line.third { - animation-delay: 600ms; + animation-delay: 300ms; animation-duration: 800ms; } .line.fourth { - animation-delay: 700ms; + animation-delay: 400ms; animation-duration: 700ms; } .line.fifth { - animation-delay: 800ms; + animation-delay: 500ms; animation-duration: 600ms; } From 61ba71543b7b1ddaba9b6d81ccdf4be0bb6aaa50 Mon Sep 17 00:00:00 2001 From: Camillo Bruni Date: Mon, 27 Oct 2025 15:55:29 +0100 Subject: [PATCH 11/12] fix --- JetStreamDriver.js | 22 +++++++++++++++------ index.html | 2 -- resources/JetStream.css | 42 ++++++++++++++++++++++------------------ resources/jetstreams.svg | 10 +++++----- 4 files changed, 44 insertions(+), 32 deletions(-) diff --git a/JetStreamDriver.js b/JetStreamDriver.js index c9bea3ad..732fa0c5 100644 --- a/JetStreamDriver.js +++ b/JetStreamDriver.js @@ -330,10 +330,7 @@ class Driver { this.benchmarks = Array.from(new Set(benchmarks)); this.benchmarks.sort((a, b) => a.name.toLowerCase() < b.name.toLowerCase() ? 1 : -1); console.assert(this.benchmarks.length, "No benchmarks selected"); - this.counter = { }; - this.counter.loadedResources = 0; - this.counter.totalResources = 0; - this.counter.failedPreloadResources = 0; + this.counter = { loadedResources: 0, totalResources: 0, failedPreloadResources: 0 }; } async start() { @@ -460,7 +457,7 @@ class Driver { } } - prepareBrowserUI() { + async prepareBrowserUI() { let text = ""; for (const benchmark of this.benchmarks) text += benchmark.renderHTML(); @@ -474,8 +471,12 @@ class Driver { JetStream.start(); }); + document.body.classList.add("ready"); const statusElement = document.getElementById("status"); statusElement.innerHTML = `Start Test`; + + await this.waitForBrowserUIStartupAnimation(); + statusElement.addEventListener("click", (e) => { e.preventDefault(); JetStream.start(); @@ -483,6 +484,15 @@ class Driver { }, { once: true}); } + + async waitForBrowserUIStartupAnimation() { + if (!JetStreamParams.isDefault) + return + const cssValue = window.getComputedStyle(document.body).getPropertyValue("--startup-animation-duration"); + const startupAnimationDuration = parseInt(cssValue.split("ms")[0]) + await new Promise((resolve) => setTimeout(resolve, startupAnimationDuration)); + } + reportError(benchmark, error) { this.pushError(benchmark.name, error); @@ -512,7 +522,7 @@ class Driver { await this.prefetchResources(); this.benchmarks.sort((a, b) => a.name.toLowerCase() < b.name.toLowerCase() ? 1 : -1); if (isInBrowser) - this.prepareBrowserUI(); + await this.prepareBrowserUI(); this.isReady = true; if (isInBrowser) { globalThis.dispatchEvent(new Event("JetStreamReady")); diff --git a/index.html b/index.html index 12e753d1..51830190 100644 --- a/index.html +++ b/index.html @@ -62,13 +62,11 @@ if (globalThis.allIsGood) { try { await JetStream.initialize(); - document.body.classList.add("ready"); } catch (e) { globalThis.allIsGood = false; console.error(e); } finally { bodyClassList.remove("loading"); - bodyClassList.remove("animate-loading"); } } if (!globalThis.allIsGood) { diff --git a/resources/JetStream.css b/resources/JetStream.css index f191450a..91b2afdb 100644 --- a/resources/JetStream.css +++ b/resources/JetStream.css @@ -41,6 +41,7 @@ --benchmark-done-result-color: #4a4a4a; --gap: 3rem; --width: 200px; + --startup-animation-duration: 500ms; --nonDefaultRotate: 152deg; } @@ -185,7 +186,7 @@ img { } .loading.animate .logo .logo-image { - animation: swingin 350ms ease-out forwards; + animation: swingin var(--startup-animation-duration) ease-out forwards; will-change: transform, opacity; animation-delay: 50ms; } @@ -201,19 +202,21 @@ img { background-position: center; padding: 2rem 0; margin: -2rem 0; + background-image: url("jetstreams-static.svg"); } + #jetstreams svg { width: 100%; max-height: 120px; } -.loading.animate #jetstreams { +.animate #jetstreams { background-image: url("jetstreams.svg"); + transition: background-image var(--startup-animation-duration) ease-in-out; } - -.loading #jetstreams, .ready #jetstreams { - background-image: url("jetstreams-static.svg"); +.ready #jetstreams { + background-image: url("jetstreams-static.svg") !important; } #magic { @@ -244,7 +247,7 @@ article, } article, .loading.animate .summary { - animation: fadein 0.5s ease-in-out forwards; + animation: fadein var(--startup-animation-duration) ease-in-out forwards; animation-delay: 200ms; } @@ -364,7 +367,7 @@ a:active { color: var(--link-hover-color); } -#status label, +#status-label, a.button { display: inline-block; font-weight: 500; @@ -382,6 +385,12 @@ a.button { user-select: none; } +.animate a.button { + animation: fadein var(--startup-animation-duration) ease-in forwards, scaledown var(--startup-animation-duration) ease-in forwards; + opacity: 0; +} + + #status label, .button:hover { background-image: none; @@ -494,14 +503,13 @@ a.button { justify-content: space-around; gap: var(--gap); margin: 0 calc(var(--gap) * -1) 0 calc(-var(--gap) * -1); - animation: fadein 500ms ease-out forwards; - opacity: 0; overflow-y: auto; flex: 1; padding-bottom: var(--gap); box-sizing: border-box; } + .benchmark { position: relative; flex: 1; @@ -514,6 +522,12 @@ a.button { scroll-margin-bottom: 20vh; } +.animate .benchmark { + animation: fadein var(--startup-animation-duration) ease-in forwards; + opacity: 0; +} + + .benchmark .result.detail { display: none; } @@ -700,16 +714,6 @@ dt:target { } } -@keyframes shine { - 0% { - background-position: -1200px center; - } - - 100% { - background-position: 100vw center; - } -} - @keyframes swingin { from { opacity: 0; diff --git a/resources/jetstreams.svg b/resources/jetstreams.svg index bedfda5f..1b6e1613 100644 --- a/resources/jetstreams.svg +++ b/resources/jetstreams.svg @@ -11,22 +11,22 @@ .line.second { animation-delay: 200ms; - animation-duration: 900ms; + animation-duration: 2900ms; } .line.third { animation-delay: 300ms; - animation-duration: 800ms; + animation-duration: 1800ms; } .line.fourth { animation-delay: 400ms; - animation-duration: 700ms; + animation-duration: 1700ms; } .line.fifth { - animation-delay: 500ms; - animation-duration: 600ms; + animation-delay: 900ms; + animation-duration: 1600ms; } @keyframes dash { From 6d9b2ad01b39d7370ced2e82c0865253901cc579 Mon Sep 17 00:00:00 2001 From: Camillo Bruni Date: Thu, 5 Mar 2026 16:45:52 +0100 Subject: [PATCH 12/12] cleanup --- index.html | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 51830190..faeb119c 100644 --- a/index.html +++ b/index.html @@ -53,12 +53,8 @@ async function initialize() { const bodyClassList = document.body.classList; if (!JetStreamParams.isDefault) { - bodyClassList.remove("animate"); showNonDefaultParams(); } - if (JetStreamParams.startDelay !== undefined) { - bodyClassList.remove("animate"); - } if (globalThis.allIsGood) { try { await JetStream.initialize(); @@ -75,7 +71,7 @@ statusElement.innerHTML = "

ERROR

Errors were encountered during page load. Refusing to run a partial benchmark suite.

"; } } - + function showNonDefaultParams() { document.body.classList.add("nonDefaultParams"); const body = document.querySelector("#non-standard-params-table tbody"); @@ -89,14 +85,16 @@ row.insertCell().textContent = JSON.stringify(defaultValue); } } - - + - - +