Skip to content

Commit 31798c5

Browse files
sktbrdclaude
andcommitted
fix(tv): lengthen the top fade on the TV halo
The warm halo was painted on the section's own background with its core at 8% from the top. The top edge therefore fell at 0.15 of the gradient's vertical radius — where the ramp still carries ~77% of peak alpha — and the browser cut it flat, drawing a straight amber-on-black line across the full width. It read as one solid block sitting on another. No arrangement of colour stops fixes this while the gradient is confined to the section: with the core near the top, the top edge is always near the core, so the choice is a cut edge or a halo dimmed to nothing. Move it to its own layer extended 220px above the section instead. The falloff now happens off-stage and reaches zero 174px before the section starts, so there is no edge to see. Alpha at the section's own top edge is unchanged at ~0.10 — this lengthens the fade, it does not dim the halo. `-z-10` because an absolutely positioned layer otherwise paints above in-flow content and would wash over the set itself; it matches the page ground's own -z-10 and composites above it. Verified in dark and light, 390 and 1400. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
1 parent df29078 commit 31798c5

1 file changed

Lines changed: 34 additions & 11 deletions

File tree

src/components/tv/GnarsTVSet.tsx

Lines changed: 34 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -438,17 +438,40 @@ export function GnarsTVSet({ channels, ticker }: GnarsTVSetProps) {
438438
if (!active) return null;
439439

440440
return (
441-
<section
442-
className="flex w-full flex-col items-center px-5 pb-14 pt-8"
443-
style={{
444-
// Transparent to the page ground. The set is a physical object and
445-
// carries its own dark chassis; the opaque near-black behind it was
446-
// invisible on a dark page and read as a stray black rectangle on a
447-
// light one. The warm glow stays — it is a halo around the object, and
448-
// it composites over either ground.
449-
background: "radial-gradient(70% 55% at 50% 8%,rgba(245,158,11,.13),rgba(0,0,0,0) 62%)",
450-
}}
451-
>
441+
<section className="relative flex w-full flex-col items-center px-5 pb-14 pt-8">
442+
{/* The warm halo around the set.
443+
Transparent to the page ground: the set is a physical object and
444+
carries its own dark chassis; the opaque near-black behind it was
445+
invisible on a dark page and read as a stray black rectangle on a
446+
light one. The glow composites over either ground.
447+
448+
It lives on its own layer, extended 220px ABOVE the section, because
449+
the halo's core sits near the top of the set — so on the section's own
450+
box the top edge fell at 0.15 of the gradient radius, where the ramp
451+
still carries ~77% of peak alpha, and the browser cut it flat. That
452+
straight amber-on-black line across the full width was the "hard block
453+
on top of another" it read as.
454+
455+
Extending the box upward moves the falloff off-stage: the ramp now
456+
reaches zero 174px above the section starts, so there is no edge to
457+
see. Intensity at the section's own top edge is unchanged — this
458+
lengthens the fade, it does not dim the halo.
459+
460+
`-z-10` rather than a later sibling: an absolutely positioned element
461+
paints above in-flow content, so without it the halo would wash over
462+
the set itself. It matches the page ground's own `-z-10` layer and so
463+
composites above that and below everything else. */}
464+
<div
465+
aria-hidden
466+
className="pointer-events-none absolute inset-x-0 bottom-0 -z-10"
467+
style={{
468+
// Inline, not `-top-[220px]`: that arbitrary utility did not generate,
469+
// leaving `top` at its static position and collapsing this layer to
470+
// zero height. Every other bespoke value in this file is inline too.
471+
top: -220,
472+
background: "radial-gradient(70% 44% at 50% 26%,rgba(245,158,11,.13),rgba(0,0,0,0) 62%)",
473+
}}
474+
/>
452475
{/* The only text outside the chassis, so it is the only thing here that
453476
sits on the page ground. Now that the section is transparent, the
454477
chassis gold it used to share would be 79% luminance on white — the

0 commit comments

Comments
 (0)