github-such-software/such.software
1
0
Fork 0
mirror of https://github.com/Such-Software/such.software.git synced 2026-10-21 06:08:32 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(bento): per-theme barns vignette + alpha-safe beta (survives transparent capture)

Browse Source 
Two fixes to the barns hover vignette after seeing it live:
1. The beta was STRIPPED by the transparent capture: the flash/particle used
   additive blending, which writes ~no alpha, so it vanished in the alpha webm
   (only the opaque letters survived = that brief white "lightning"). Switched the
   flash to alpha-blend and pushed the absorption onto the opaque letters (strong
   blue surface-ripple pulse), so the beta now survives on BOTH light and dark.
2. Light + dark mode need different ink: a near-black outline vanishes on a dark
   tile; a light outline vanishes on a light tile. Render two baked assets
   (barns-light = dark ink, barns-dark = cream ink) and HoverVignette picks by
   resolved theme (next-themes). Added a clean rest poster (no active strike) via
   a BN_POSTER render so at-rest looks right.
This commit is contained in:
jwinterm
2026-07-08 12:21:32 -04:00
parent d4f65489b5
commit 90e7cb58ea
8 changed files with 28 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/portfolio/bento-grid.tsx
+8 -3
View File
@@ -52,7 +52,7 @@ type Item = {
* webm: /showcase/vignettes/<slug>.webm (VP9 + alpha)
* poster: /showcase/vignettes/<slug>.png (transparent RGBA PNG)
*/
vignette?: { webm: string; poster: string };
vignette?: { webm: string; poster: string; webmDark?: string; posterDark?: string };
};
// Six tiles, spans tiling the 3-column grid gap-free: (2,1) / (1,2) / (1,2) = three full rows.
@@ -63,7 +63,7 @@ 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.webm", poster: "/showcase/vignettes/barns.png" } },
{ 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" } },
];
function BentoCard({ item, delay }: { item: Item; delay: number }) {
@@ -78,7 +78,12 @@ function BentoCard({ item, delay }: { item: Item; delay: number }) {
</div>
<div className={`absolute inset-x-4 bottom-4 top-24 rounded-lg overflow-hidden z-10 bg-black/5 dark:bg-white/5 border ${imgBorder[item.color]} shadow-inner`}>
{feature ? (
<HoverVignette webm={item.vignette!.webm} poster={item.vignette!.poster} />
<HoverVignette
webm={item.vignette!.webm}
poster={item.vignette!.poster}
webmDark={item.vignette!.webmDark}
posterDark={item.vignette!.posterDark}
/>
) : (
<Image
src={item.image}