aboutsummaryrefslogtreecommitdiffstats
path: root/web
diff options
context:
space:
mode:
authoruser <user@clank>2026-08-24 12:37:50 +0200
committeruser <user@clank>2026-08-24 12:37:50 +0200
commitc3a208256888230461f68cb653802045990f8b2b (patch)
tree993e6ac72f4d3cecc5a13facdaf985d5bb1e1de6 /web
parentwww: the shaders paragraph earns its keep, and the pane rings its bell (diff)
downloadslosh-c3a208256888230461f68cb653802045990f8b2b.tar.gz
slosh-c3a208256888230461f68cb653802045990f8b2b.tar.xz
slosh-c3a208256888230461f68cb653802045990f8b2b.zip
www: a shimmer nobody sees is not a shimmer
Measured in a headless browser: the band spent most of its sweep off screen and its eased segment rushed the middle, so the pane lit up for half a second in eight at ten percent white. Now the keyframes cover exactly the stretch where the band crosses the pane, the sweep is linear and 1.6s long, and the sheen is half again as bright.
Diffstat (limited to 'web')
-rw-r--r--web/coming-soon.html21
1 files changed, 12 insertions, 9 deletions
diff --git a/web/coming-soon.html b/web/coming-soon.html
index 3119479..f8fc94e 100644
--- a/web/coming-soon.html
+++ b/web/coming-soon.html
@@ -79,19 +79,22 @@ main {
border-radius: 4px;
pointer-events: none;
background: linear-gradient(105deg,
- transparent 42%,
- rgba(255, 95, 215, 0.05) 47%,
- rgba(255, 255, 255, 0.10) 50%,
- rgba(255, 95, 215, 0.05) 53%,
- transparent 58%) no-repeat;
+ transparent 40%,
+ rgba(255, 95, 215, 0.10) 46%,
+ rgba(255, 255, 255, 0.18) 50%,
+ rgba(255, 95, 215, 0.10) 54%,
+ transparent 60%) no-repeat;
background-size: 300% 100%;
- background-position: -15% 0;
- animation: shimmer 8s infinite;
+ background-position: 8% 0;
+ animation: shimmer 8s linear infinite;
}
+/* 90% -> 8% is exactly the stretch where the band crosses the pane (the
+ * band lives in the middle of an image three panes wide), so the whole
+ * 1.6s segment is spent on screen rather than mostly off it. */
@keyframes shimmer {
- 0% { background-position: 115% 0; }
- 16%, 100% { background-position: -15% 0; }
+ 0% { background-position: 90% 0; }
+ 20%, 100% { background-position: 8% 0; }
}
/* The pane wears two of slosh's shaders, drawn in CSS: zebra band=1 (a