fix: cubic fade + brighter high-glow box-shadow (#47)

Followup on #46 — the quadratic 0.2-floor curve still left mid-coverage
cards too readable to feel "receded," and the high-glow end didn't pop
enough against a darker covered field.

Two surgical changes:

- Opacity curve in lume-card.tsx: `0.1 + glow³ * 0.9` instead of
`0.2 + glow² * 0.8`. The cube collapses the covered zone hard:
glow 0.3 → 0.12, glow 0.5 → 0.21, glow 0.7 → 0.41, glow 0.9 → 0.76.
- Box-shadow alphas in globals.css: bumped ~1.5× and spreads slightly
wider. The four-layer glow goes from 0.25/0.35/0.4/0.2 → 0.4/0.55/0.6/0.3
with spreads 16/40/80/120px → 20/48/96/140px so missed talks at high
glow read as obviously luminous instead of subtly lit.

No structural changes — content-visibility, breathing animation, narrowed
transitions, and translucent bg from #46 all unchanged.

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

Bryan Guffey 2 months ago e19136a9 3e0b6e09

+14 -13

2 changed files

expand all

src

app

globals.css

components

lume-card.tsx

+7 -5

src/app/globals.css

··· 174 174 } 175 175 176 176 /* Continuous glow for LumeCards — scales with --glow (0–1). 177 - Applied via [style*="--glow"] so it only hits elements with the prop. */ 177 + Applied via [style*="--glow"] so it only hits elements with the prop. 178 + Alphas and spreads are bumped from the original tuning so missed talks 179 + at high glow read as obviously bright rather than just slightly luminous. */ 178 180 [style*="--glow"] { 179 181 box-shadow: 180 - 0 0 calc(16px * var(--glow)) rgba(255, 255, 255, calc(0.25 * var(--glow))), 181 - 0 0 calc(40px * var(--glow)) rgba(180, 255, 215, calc(0.35 * var(--glow))), 182 - 0 0 calc(80px * var(--glow)) rgba(108, 252, 178, calc(0.4 * var(--glow))), 183 - 0 0 calc(120px * var(--glow)) rgba(108, 252, 178, calc(0.2 * var(--glow))); 182 + 0 0 calc(20px * var(--glow)) rgba(255, 255, 255, calc(0.4 * var(--glow))), 183 + 0 0 calc(48px * var(--glow)) rgba(180, 255, 215, calc(0.55 * var(--glow))), 184 + 0 0 calc(96px * var(--glow)) rgba(108, 252, 178, calc(0.6 * var(--glow))), 185 + 0 0 calc(140px * var(--glow)) rgba(108, 252, 178, calc(0.3 * var(--glow))); 184 186 } 185 187 186 188 .ghost-border {

+7 -8

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.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; 51 + // Range: 1.0 at intensity 1 → 0.1 at intensity 0, with a cubic curve so the 52 + // covered zone (low glow) crashes hard while missed talks stay near full 53 + // opacity. Sample points: glow 0.3 → 0.12, glow 0.5 → 0.21, glow 0.7 → 0.41, 54 + // glow 0.9 → 0.76, glow 1.0 → 1.0. The cubic is deliberate — the previous 55 + // quadratic at floor 0.2 still left mid-coverage cards too readable to feel 56 + // like they had visually receded. 57 + const opacity = 0.1 + glow * glow * glow * 0.9; 59 58 60 59 return ( 61 60 <div

Configure Feed

Configure Feed