# Halo ring backdrop — off-canvas portal glow behind a glass settings card

Learned 2026-08-13 replicating reference R#3 (node 141:4337 → replica
`R#3-replica` 143:9, page Glass Morphism, Quorra v.0). Flattened
Dribbble-style reference (a "Daily Design Challenge" mockup); no vector
data existed to copy, so the ring's geometry was measured from pixels,
not eyeballed.

- **Stage**: flat #021124 fill, no vignette, no film-grain — this
  reference carries neither, unlike the other two entries in this
  ledger. The glow itself is the only light source.
- **The ring — measured, not eyeballed**: a single circle, almost
  entirely off-canvas below the frame. Found by tracing, row by row
  below the card, the brightest pixel on the left half and the right
  half of the image, then fitting a circle to those points by least
  squares (`x²+y²+Dx+Ey+F=0`) — eyeballing the center from the visible
  arc alone is unreliable because the frame only shows a shallow top
  slice of a much bigger circle. Result, in a 1200×1500 frame: center
  (600, 1550) — horizontally dead-center, vertically 50px *below* the
  frame's own bottom edge — radius 642 (≈0.535× frame width).
- **Two strokes, same geometry**: a `halo` (weight 44, LAYER_BLUR 85,
  color #5A64DC-ish saturated blue-violet, opacity 1) and a `core`
  (weight 20, LAYER_BLUR 16, color #D6E0FF near-white, opacity 0.95),
  both `strokeAlign: CENTER`, no fill, stacked on identical ellipses.
- **Render-verified lesson, paid once already**: the first pass on the
  core was built by feel — thin stroke (6px), heavy blur (14) — and
  looked plausible in isolation. Sampling the same pixel in the render
  against the reference (fitting the same circle to both images first,
  so the comparison was geometry-matched, not eyeballed) showed the
  core undershot the reference's measured luminance by ~130 of 255 —
  "looks close" and "is close" were 50% apart. The fix was almost pure
  weight+blur, barely hue: a thin stroke under heavy blur dilutes
  energy fast, so a bright core needs *more* weight and *less* blur
  than intuition suggests, not a brighter color.
- **Glass card reveals the ring, not a vignette**: fill #0B2138 at 45%
  opacity, BACKGROUND_BLUR 40, 1.2px white stroke at 18%, corner radius
  ≈5% of card width, drop shadow black 40% / offset 0,20 / blur 50. The
  backdrop blur is what lets the ring's color bleed through the panel —
  strongest toward the card's bottom edge, since that edge sits
  physically closest to the ring's center.
- **Divider as a glow seam**: a 2px rect, horizontal 3-stop linear
  gradient (transparent → blue-white @35% → transparent), laid across
  the card where the backdrop blur already shows the most ring color —
  reads as a seam the light leaks through, not a drawn rule.
- **Connotes**: an off-canvas ring bigger than the frame reads as a
  portal or a sunrise — the product feels like it is arriving from
  somewhere, not sitting flat on a page. That is a different move from
  this ledger's corner-vignette glow (*Dark glass element sheet*,
  above): one accent lights a corner, this one stages an entrance. The
  glass panel in front of it goes further than either earlier entry's
  "glass without weight" — here the panel is nearly a silhouette
  against the light, its own presence secondary to the glow.