Merge nucleic/frosty-grove-shrew-pb0i into main

Mirrored from corpo d9a5302.
This commit is contained in:
2026-08-10 02:37:43 -07:00
parent 47c73775cd
commit 745b9faf84
+19 -16
View File
@@ -536,9 +536,10 @@ const canonical = new URL('/', Astro.site);
right — the way the sentence reads, the way the verb points — then resting for right — the way the sentence reads, the way the verb points — then resting for
the balance of the cycle. What separates this from a loading shimmer is the balance of the cycle. What separates this from a loading shimmer is
everything quantitative: the light is the gradient's own mint rather than everything quantitative: the light is the gradient's own mint rather than
white, the pass takes ~2.4s rather than one, it recurs every 11s rather than white, it happens exactly once — a single ~1.2s pass as the line arrives,
immediately, and the band is asymmetric — a long dim tail behind a crisp never repeating — and the band is asymmetric — a long dim tail behind a
leading edge — so it reads as something moving through, not a surface effect. crisp leading edge — so it reads as something moving through, not a surface
effect.
Over "that" (flat secondary grey) the glint is faint; over the "runs." Over "that" (flat secondary grey) the glint is faint; over the "runs."
gradient it lands hardest on the dark tail end, so the pass finishes brightest gradient it lands hardest on the dark tail end, so the pass finishes brightest
at the period — the light arrives where the sentence does. at the period — the light arrives where the sentence does.
@@ -569,8 +570,9 @@ const canonical = new URL('/', Astro.site);
transparent region (past 71%) can overlap the line — off-glyph by transparent region (past 71%) can overlap the line — off-glyph by
construction, which is what reduced-motion needs: the global animation: none construction, which is what reduced-motion needs: the global animation: none
leaves the pseudo at this specified position and the line renders exactly as leaves the pseudo at this specified position and the line renders exactly as
it did before this existed. 235% clears the tail past the right edge, and it did before this existed. 235% clears the tail past the right edge; when
the snap back between iterations connects two invisible states. */ the single run ends, the value reverts to the park — both states are
invisible, so there is nothing to fill. */
.line-runs .word::after { .line-runs .word::after {
content: 'that runs.'; content: 'that runs.';
position: absolute; position: absolute;
@@ -593,12 +595,14 @@ const canonical = new URL('/', Astro.site);
-webkit-background-clip: text; -webkit-background-clip: text;
pointer-events: none; pointer-events: none;
/* The delay is set against the line's entrance, not the page's. The park /* The delay is set against the line's entrance, not the page's. The park
sits just off the first glyph, and the sweep segment is linear, so the sits just off the first glyph, and the sweep is linear, so the light
light enters ~0.06s after the delay ends — the delay IS the arrival enters almost the moment the delay ends — the delay IS the arrival time.
time. 0.85s starts the light while the line is still completing its rise 0.85s starts the light while the line is still completing its rise
(opacity full at ~1.38s), so the two emerge together: the sheen's first (opacity full at ~1.38s), so the two emerge together: the sheen's first
moments inherit the line's last moments of fade-in. */ moments inherit the line's last moments of fade-in. One iteration, by
animation: sheen-pass 11s 0.85s linear infinite; design — the light passes through once as the words land, and the line
owns its stillness afterward. */
animation: sheen-pass 1.2s 0.85s linear;
} }
.line-runs .that { .line-runs .that {
@@ -741,17 +745,16 @@ const canonical = new URL('/', Astro.site);
from { transform: translate3d(0, 0, 0); } from { transform: translate3d(0, 0, 0); }
} }
/* The pass occupies the first 22% of the cycle (~2.4s of 11s) and the rest is /* The whole animation is the sweep — one iteration, no dwell keyframe — so
dwell — the hold keyframe is constant, so nothing invalidates paint between the page pays for paint during a single 1.2s window at load and never
passes. The sweep is linear on purpose: an eased segment read as the light again. The sweep is linear on purpose: an eased segment read as the light
accelerating through the middle of the line (it was — ease-in-out is accelerating through the middle of the line (it was — ease-in-out is
fastest at its midpoint, which lands mid-word), and a runner holds a pace. fastest at its midpoint, which lands mid-word), and a runner holds a pace.
The softness at entry and exit comes from the band's own gradient profile, The softness at entry and exit comes from the band's own gradient profile,
not from the curve. */ not from the curve. */
@keyframes sheen-pass { @keyframes sheen-pass {
0% { background-position: -115% 0; } from { background-position: -115% 0; }
22% { background-position: 235% 0; } to { background-position: 235% 0; }
100% { background-position: 235% 0; }
} }
@keyframes haze-drift { @keyframes haze-drift {