Merge nucleic/frosty-grove-shrew-pb0i into main
Mirrored from corpo aadc895.
This commit is contained in:
@@ -527,10 +527,74 @@ const canonical = new URL('/', Astro.site);
|
|||||||
past what the column can hold — at which point two short lines inside the
|
past what the column can hold — at which point two short lines inside the
|
||||||
column beat one long line across the card. */
|
column beat one long line across the card. */
|
||||||
.line-runs .word {
|
.line-runs .word {
|
||||||
|
position: relative;
|
||||||
transform: translate3d(0, -0.035em, 0);
|
transform: translate3d(0, -0.035em, 0);
|
||||||
animation: drift-up 11s 1.5s ease-in-out backwards;
|
animation: drift-up 11s 1.5s ease-in-out backwards;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* The swipe: a soft blade of the palette's pale green crossing the line left to
|
||||||
|
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
|
||||||
|
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."
|
||||||
|
gradient it lands hardest on the dark tail end, so the pass finishes brightest
|
||||||
|
at the period — the light arrives where the sentence does.
|
||||||
|
|
||||||
|
It rides a pseudo-element that duplicates the line's text and clips the band
|
||||||
|
to the glyphs. A pseudo because the front must cross both words at one screen
|
||||||
|
speed, and background-position percentages are relative to each element's own
|
||||||
|
width — separate backgrounds on .that and .runs cannot share a speed. The
|
||||||
|
content string must match the markup ("that" space "runs.") and the
|
||||||
|
padding-right must match .word's, or the duplicate lays out on different
|
||||||
|
lines-breaks than the text it overlays. Accessibility is already handled
|
||||||
|
above this: the h1's aria-label replaces every descendant, this copy
|
||||||
|
included.
|
||||||
|
|
||||||
|
The band is a plateau, not a spike — alpha holds at its peak for ~14% of the
|
||||||
|
image — and its white is set above the brightest glyph pixel. Both are
|
||||||
|
measured corrections: a single peak stop averaged away to a couple of RGB
|
||||||
|
levels across a bucket of glyphs, and a mint as bright as the "runs."
|
||||||
|
gradient's own start (green 234) mathematically cannot lift it — a normal
|
||||||
|
blend brightens in proportion to the distance left to white. The dip over
|
||||||
|
that bright stretch never fully goes away; it just means the light lands
|
||||||
|
hardest where the type is darkest, which is what a real glint over a
|
||||||
|
gradient does. The pass ends on the darkest glyphs, so the period is where
|
||||||
|
the light finishes brightest.
|
||||||
|
|
||||||
|
Geometry: the image is 60% of the line's width, so the position percentage
|
||||||
|
maps offset = 0.4 x width x p. Parked at -115% only the image's trailing
|
||||||
|
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. */
|
||||||
|
.line-runs .word::after {
|
||||||
|
content: 'that runs.';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
padding-right: 0.06em;
|
||||||
|
color: transparent;
|
||||||
|
background-image: linear-gradient(
|
||||||
|
100deg,
|
||||||
|
transparent 20%,
|
||||||
|
rgb(234 248 240 / 12%) 38%,
|
||||||
|
rgb(234 248 240 / 42%) 48%,
|
||||||
|
rgb(234 248 240 / 42%) 62%,
|
||||||
|
rgb(234 248 240 / 8%) 68%,
|
||||||
|
transparent 71%
|
||||||
|
);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 60% 100%;
|
||||||
|
background-position: -115% 0;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
pointer-events: none;
|
||||||
|
animation: sheen-pass 11s 2.6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
.line-runs .that {
|
.line-runs .that {
|
||||||
color: var(--secondary);
|
color: var(--secondary);
|
||||||
}
|
}
|
||||||
@@ -671,6 +735,16 @@ const canonical = new URL('/', Astro.site);
|
|||||||
from { transform: translate3d(0, 0, 0); }
|
from { transform: translate3d(0, 0, 0); }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* The pass occupies the first 24% of the cycle (~2.6s 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. */
|
||||||
|
@keyframes sheen-pass {
|
||||||
|
0% { background-position: -115% 0; }
|
||||||
|
26% { background-position: 235% 0; }
|
||||||
|
100% { background-position: 235% 0; }
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes haze-drift {
|
@keyframes haze-drift {
|
||||||
from { transform: translate3d(-9%, 3%, 0) rotate(-0.8deg); }
|
from { transform: translate3d(-9%, 3%, 0) rotate(-0.8deg); }
|
||||||
to { transform: translate3d(10%, -4%, 0) rotate(0.8deg); }
|
to { transform: translate3d(10%, -4%, 0) rotate(0.8deg); }
|
||||||
|
|||||||
Reference in New Issue
Block a user