External/buzz
1
0
Fork 0
mirror of https://github.com/block/buzz.git synced 2026-08-18 06:50:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

Shimmer: drop the wash rectangle, band sits at the background color

Browse Source 
The highlight wash read as a gray slab over the text. The accent
shimmer is now glyph-only again, with the band mixed to 8% primary /
92% background — characters wash out to (nearly) the background color
as it sweeps, which is the highest-contrast treatment against
full-color text in both themes.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
klopez4212
2026-07-07 07:52:32 +01:00
co-authored by Claude Fable 5
parent 680bb16e97
commit d416f45ca8
1 changed files with 1 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
desktop/src/shared/styles/globals/animations.css
+1 -31
View File
@@ -238,43 +238,13 @@
which is the strongest possible contrast against full-color text. */
--buzz-shimmer-highlight: color-mix(
in oklab,
hsl(var(--primary)) 18%,
hsl(var(--primary)) 8%,
hsl(var(--background))
);
--buzz-shimmer-band: 300%;
color: inherit;
}
/* Glyph recoloring alone is too subtle at sidebar sizes — sweep a
translucent highlight WASH behind the text as well (same keyframes, so
band and wash move together). The wash is a soft primary tint the text
stays readable through, like a highlighter pass. */
.buzz-shimmer-accent::after {
animation: buzz-shimmer var(--buzz-shimmer-duration) linear infinite;
background-image: linear-gradient(
90deg,
transparent 0%,
transparent 40%,
hsl(var(--primary) / 0.16) 50%,
transparent 60%,
transparent 100%
);
background-repeat: no-repeat;
background-size: var(--buzz-shimmer-band) 100%;
border-radius: 0.25rem;
content: "";
inset: -0.125rem -0.25rem;
pointer-events: none;
position: absolute;
}
@media (prefers-reduced-motion: reduce) {
.buzz-shimmer-accent::after {
animation: none;
content: none;
}
}
@media (prefers-reduced-motion: reduce) {
.buzz-shimmer,
.shimmer {