fix(bento): barns vignette — real black outline + coherent blue beta, single theme-independent asset

Root causes (all 3D->web pipeline law violations):
- Beta 'flashing / getting deleted': the MatterWave beta was BLEND_ADD (writes ~no
  alpha) so it was stripped by the transparent capture, AND its off-screen auto-free
  killed the packet a third of the way through its flight. Now alpha-safe (MIX under
  BN_ALPHA), pinned alive for the full flight (no_free), bigger + slower + brightness-
  capped so it reads as a coherent BLUE de Broglie packet the whole way in.
- 'No black outline': the 3D inverted-hull shell was sub-pixel + washed by the fresnel
  rim (invisible on light, flecky on dark). Replaced with a 2D silhouette INK STROKE
  from the alpha matte (sg_outline, outline2d.py) — uniform, gap-free, and INSET so the
  black line sits ON the yellow fill and reads on BOTH themes from ONE asset.
- Softened the ripple pulse so the crest stays a blue tint, not a white clip.

Seam diff frame0==frameN = 0.0 (perfectly seamless).
This commit is contained in:
jwinterm
2026-07-11 08:41:18 -04:00
parent 9ae740c21c
commit 2b73a8b5ef
7 changed files with 3 additions and 1 deletions
Binary file not shown.

Before

Width:  |  Height:  |  Size: 107 KiB

Binary file not shown.
Binary file not shown.

Before

Width:  |  Height:  |  Size: 108 KiB

Binary file not shown.
Binary file not shown.

After

Width:  |  Height:  |  Size: 89 KiB

Binary file not shown.
@@ -63,7 +63,9 @@ const items: Item[] = [
{ name: "Wownerogue", tagline: "Provably-fair roguelike, synced to crypto block times.", color: "orange", span: 1, image: "/images/products/privacy-labs.png", alt: "Screenshot of the Wownerogue roguelike dungeon-crawler", href: "/products/wownerogue" },
{ name: "Bauhaus Echo", tagline: "Visual memory puzzle game.", color: "blue", span: 2, image: "/images/products/bauhaus-echo.png", alt: "Bauhaus Echo visual memory puzzle game", href: "/products/bauhaus-echo" },
{ name: "Vegan IQ", tagline: "Plant-based trivia game.", color: "green", span: 1, image: "/images/products/vegan-iq.png", alt: "Vegan IQ plant-based trivia game", href: "/products/vegan-iq" },
{ name: "Barns & Neutrons", tagline: "Cozy puzzle expedition across the real Table of Nuclides.", color: "amber", span: 2, image: "/images/products/barns-and-neutrons.svg", alt: "Barns & Neutrons, a game about the Table of Nuclides", href: "/products/barns-and-neutrons", vignette: { webm: "/showcase/vignettes/barns-light.webm", poster: "/showcase/vignettes/barns-light.png", webmDark: "/showcase/vignettes/barns-dark.webm", posterDark: "/showcase/vignettes/barns-dark.png" } },
// Single theme-independent asset: the INSET black silhouette stroke (sg_outline) sits ON the yellow letters, so one
// baked alpha render reads on both light and dark tiles — no per-theme pair needed (a 3D->web pipeline win).
{ name: "Barns & Neutrons", tagline: "Cozy puzzle expedition across the real Table of Nuclides.", color: "amber", span: 2, image: "/images/products/barns-and-neutrons.svg", alt: "Barns & Neutrons, a game about the Table of Nuclides", href: "/products/barns-and-neutrons", vignette: { webm: "/showcase/vignettes/barns.webm", poster: "/showcase/vignettes/barns.png" } },
];
function BentoCard({ item, delay }: { item: Item; delay: number }) {