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
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
white, the pass takes ~2.4s rather than one, it recurs every 11s rather than
immediately, and the band is asymmetric — a long dim tail behind a crisp
leading edge — so it reads as something moving through, not a surface effect.
white, it happens exactly once — a single ~1.2s pass as the line arrives,
never repeating — and the band is asymmetric — a long dim tail behind a
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."
gradient it lands hardest on the dark tail end, so the pass finishes brightest
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
construction, which is what reduced-motion needs: the global animation: none
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
the snap back between iterations connects two invisible states. */
it did before this existed. 235% clears the tail past the right edge; when
the single run ends, the value reverts to the park — both states are
invisible, so there is nothing to fill. */
.line-runs .word::after {
content: 'that runs.';
position: absolute;
@@ -593,12 +595,14 @@ const canonical = new URL('/', Astro.site);
-webkit-background-clip: text;
pointer-events: none;
/* 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
light enters ~0.06s after the delay ends — the delay IS the arrival
time. 0.85s starts the light while the line is still completing its rise
sits just off the first glyph, and the sweep is linear, so the light
enters almost the moment the delay ends — the delay IS the arrival time.
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
moments inherit the line's last moments of fade-in. */
animation: sheen-pass 11s 0.85s linear infinite;
moments inherit the line's last moments of fade-in. One iteration, by
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 {
@@ -741,17 +745,16 @@ const canonical = new URL('/', Astro.site);
from { transform: translate3d(0, 0, 0); }
}
/* The pass occupies the first 22% of the cycle (~2.4s of 11s) and the rest is
dwell — the hold keyframe is constant, so nothing invalidates paint between
passes. The sweep is linear on purpose: an eased segment read as the light
/* The whole animation is the sweep — one iteration, no dwell keyframe — so
the page pays for paint during a single 1.2s window at load and never
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
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,
not from the curve. */
@keyframes sheen-pass {
0% { background-position: -115% 0; }
22% { background-position: 235% 0; }
100% { background-position: 235% 0; }
from { background-position: -115% 0; }
to { background-position: 235% 0; }
}
@keyframes haze-drift {