chaosgreml.in / understory
The AtmosphereConf talks your skyline missed
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix: restore opacity fade and steepen coverage darkening (#46)

PR #39 dropped backdrop-blur and switched to opaque bg-surface-container-low
to fix scroll jank. That fixed perf but visually regressed the fade: the
inline opacity (then 0.5–1.0 linear) was still computed, but with a fully
opaque bg even at 0.5 alpha the card was still a solid rectangle — the
"recede into the page" effect from the original translucent + blur design
was gone.

Two changes, both keeping the scroll-perf wins:

- `bg-surface-container-low/70` instead of fully opaque. Plain alpha is
virtually free at paint time, unlike backdrop-filter which forces the
compositor to resample what's behind every card on every scroll frame.
- Opacity curve is now `0.2 + glow² * 0.8` instead of `0.5 + glow * 0.5`.
Wider range (4× more contrast at the floor) and quadratic so heavily
covered talks fall off fast: glow 0.3 → opacity 0.27, glow 0.7 → 0.59,
glow 1.0 → 1.0.

content-visibility: auto, narrowed transitions, and the breathing
animation are all unchanged — this only edits the visual layer.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Bryan Guffey 874a19e0 b770fa29

+13 -3
+13 -3
src/components/ui/lume-card.tsx
··· 48 48 const hasDetail = score && score.state !== "unknown"; 49 49 50 50 // Opacity fades covered talks into the background. 51 - // Range: 1.0 at intensity 1 → 0.5 at intensity 0. 52 - const opacity = 0.5 + glow * 0.5; 51 + // Range: 1.0 at intensity 1 → 0.2 at intensity 0, with a quadratic curve so 52 + // low-glow (heavily covered) talks fall off fast — at glow 0.3 the card is 53 + // already near 0.27 opacity, at glow 0.7 it's at 0.59. Combined with the 54 + // translucent bg below, this lets covered cards visually recede into the 55 + // page background while missed talks stay vivid. The wider range and steeper 56 + // curve are deliberate: the previous linear 0.5–1.0 range left even fully 57 + // covered cards too solid to read as "faded." 58 + const opacity = 0.2 + glow * glow * 0.8; 53 59 54 60 return ( 55 61 <div 56 62 className={[ 57 63 "group relative rounded-lg lume-card-contain", 58 - "bg-surface-container-low", 64 + // Translucent (no backdrop-blur — that was removed in #39 because 65 + // the compositor cost on 145 stacked cards killed scroll perf). 66 + // Plain alpha is virtually free at paint time and gives the fade 67 + // somewhere to dissolve into. 68 + "bg-surface-container-low/70", 59 69 "border-t-2", 60 70 glow > 0.3 61 71 ? "border-primary-fixed-dim"