Merge nucleic/frosty-grove-shrew-pb0i into main
Mirrored from corpo 0ef9133.
This commit is contained in:
+14
-13
@@ -536,7 +536,7 @@ 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, it happens exactly once — a single ~1.2s pass as the line arrives,
|
white, it happens exactly once — a single ~0.65s dash as the line arrives,
|
||||||
never repeating — and the band is asymmetric — a long dim tail behind a
|
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
|
crisp leading edge — so it reads as something moving through, not a surface
|
||||||
effect.
|
effect.
|
||||||
@@ -583,8 +583,8 @@ const canonical = new URL('/', Astro.site);
|
|||||||
100deg,
|
100deg,
|
||||||
transparent 20%,
|
transparent 20%,
|
||||||
rgb(234 248 240 / 12%) 38%,
|
rgb(234 248 240 / 12%) 38%,
|
||||||
rgb(234 248 240 / 42%) 48%,
|
rgb(234 248 240 / 46%) 48%,
|
||||||
rgb(234 248 240 / 42%) 62%,
|
rgb(234 248 240 / 46%) 62%,
|
||||||
rgb(234 248 240 / 8%) 68%,
|
rgb(234 248 240 / 8%) 68%,
|
||||||
transparent 71%
|
transparent 71%
|
||||||
);
|
);
|
||||||
@@ -597,12 +597,13 @@ const canonical = new URL('/', Astro.site);
|
|||||||
/* 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 is linear, so the light
|
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.
|
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
|
0.7s launches the dash mid-rise: the line is about half faded-in when
|
||||||
(opacity full at ~1.38s), so the two emerge together: the sheen's first
|
the light takes off, the light outruns it down the length of the word,
|
||||||
moments inherit the line's last moments of fade-in. One iteration, by
|
and the sprint finishes right as the line settles (~1.38s) — the words
|
||||||
design — the light passes through once as the words land, and the line
|
land and the light is already gone. Riding inside the still-fading line
|
||||||
owns its stillness afterward. */
|
also softens the dash's first frames for free. One iteration, by design:
|
||||||
animation: sheen-pass 1.2s 0.85s linear;
|
a sprint run twice is choreography; run once it is an event. */
|
||||||
|
animation: sheen-pass 0.65s 0.7s linear;
|
||||||
}
|
}
|
||||||
|
|
||||||
.line-runs .that {
|
.line-runs .that {
|
||||||
@@ -746,12 +747,12 @@ const canonical = new URL('/', Astro.site);
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* The whole animation is the sweep — one iteration, no dwell keyframe — so
|
/* 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
|
the page pays for paint during a single ~0.65s window at load and never
|
||||||
again. 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 sprinter at full
|
||||||
The softness at entry and exit comes from the band's own gradient profile,
|
speed holds a pace. The softness at entry and exit comes from the band's
|
||||||
not from the curve. */
|
own gradient profile, not from the curve. */
|
||||||
@keyframes sheen-pass {
|
@keyframes sheen-pass {
|
||||||
from { background-position: -115% 0; }
|
from { background-position: -115% 0; }
|
||||||
to { background-position: 235% 0; }
|
to { background-position: 235% 0; }
|
||||||
|
|||||||
Reference in New Issue
Block a user