diff --git a/src/pages/index.astro b/src/pages/index.astro index c45dcb6..39c0ccf 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -536,7 +536,7 @@ 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.6s rather than one, it recurs every 11s 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. Over "that" (flat secondary grey) the glint is faint; over the "runs." @@ -592,12 +592,13 @@ const canonical = new URL('/', Astro.site); background-clip: text; -webkit-background-clip: text; pointer-events: none; - /* The delay is set against the line's entrance, not the page's: the line - finishes rising at ~1.38s (480ms delay + 900ms rise), and the band needs - ~0.8s from keyframe start before its light reaches the first glyphs (the - park is off-glyph and the segment eases in). 0.7s lands the glint on - "that" just as the line settles — the light arrives with the words. */ - animation: sheen-pass 11s 0.7s ease-in-out infinite; + /* 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 + (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; } .line-runs .that { @@ -740,13 +741,16 @@ const canonical = new URL('/', Astro.site); from { transform: translate3d(0, 0, 0); } } - /* The pass occupies the first 24% of the cycle (~2.6s of 11s) and the rest is + /* 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. ease-in-out applies per segment: the blade gathers speed and eases - out, rather than strafing across at the linear rate loaders use. */ + passes. 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; } - 26% { background-position: 235% 0; } + 22% { background-position: 235% 0; } 100% { background-position: 235% 0; } }