Liquid Glass

The card surfaces across the site are real translucent glass: a tinted background, a gradient specular rim, and a shine that tracks the cursor. The system is three pieces — a CSS class, a tier-gated blur, and a shared pointer tracker.

The .lq surface

.lq sets the translucent background and an inset highlight; a masked ::before paints the 1px gradient rim that gives the edge its lit-from-above look:

.lq::before {
  content: '';
  position: absolute; inset: 0;
  padding: 1px; border-radius: inherit;
  background: linear-gradient(160deg,
    rgba(255,255,255,0.26), rgba(118,160,255,0.10), rgba(255,255,255,0.12));
  -webkit-mask: linear-gradient(#000 0 0) content-box,
                linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;          /* show only the 1px frame */
  pointer-events: none;
}

The blur is applied in JS, on purpose

The actual backdrop-filter blur ships only on data-perf="full" — but it is set as an inline style from PerfProvider, not in the stylesheet. That is because Turbopack's CSS pipeline (Lightning CSS) was stripping the declaration out of the compiled stylesheet entirely. Inline styles cannot be stripped, and gating in JS means weak machines skip the cost. The full debugging story is in this post.

GlareField

GlareField wraps a group of cards and attaches a single pointermove listener. It writes the pointer position into CSS custom properties on every .lq-glare child, so one light source slides across a whole group of cards as if they were a single sheet of glass:

// per card, in local coordinates:
el.style.setProperty('--gx', px - rect.left + 'px')
el.style.setProperty('--gy', py - rect.top + 'px')
el.style.setProperty('--glow', '1')   // 0 on pointer-leave

Card rectangles are re-collected on scroll so the shine stays aligned, and the whole thing is inert until the pointer enters — no idle cost, fine pointers only.