diff options
| author | user <user@clank> | 2026-08-24 12:37:50 +0200 |
|---|---|---|
| committer | user <user@clank> | 2026-08-24 12:37:50 +0200 |
| commit | c3a208256888230461f68cb653802045990f8b2b (patch) | |
| tree | 993e6ac72f4d3cecc5a13facdaf985d5bb1e1de6 /web | |
| parent | www: the shaders paragraph earns its keep, and the pane rings its bell (diff) | |
| download | slosh-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.html | 21 |
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 |
