diff --git a/src/pages/index.astro b/src/pages/index.astro index 39c0ccf..47cf9ce 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -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 {