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

feat(bento): quiet tiles at rest — chrome fades, title + render float

Browse Source 
At rest the card chrome (opaque bg, 64px frost, border, shadow) is now nearly
invisible so tiles read as just the title + the 3D render/image floating on the
page (especially clean on mobile, where every tile is 'at rest'). The glass
lights up + the colour tint paints on hover / focus / tap. Title and image keep
their visibility.
This commit is contained in:
jwinterm
2026-07-08 11:15:01 -04:00
parent c93421c083
commit a238412103
2 changed files with 26 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/app/globals.css
+17 -2
View File
@@ -118,8 +118,23 @@
animation: bento-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* Hover lift for bento links */
.bento-item:hover .glass-card {
/* Quiet bento: at rest the card chrome (opaque bg, 64px frost, border, shadow) is
nearly invisible so only the title + the 3D render/image float on the page; the
glass lights up on hover / focus / tap. Title + image keep their own visibility.
Higher specificity than .mask-backdrop, so it wins at rest without !important. */
.bento-item .glass-card {
background-color: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-color: transparent;
box-shadow: none;
transition: background-color 0.3s ease, backdrop-filter 0.3s ease,
border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.bento-item:hover .glass-card,
.bento-item:focus-within .glass-card {
backdrop-filter: blur(64px);
-webkit-backdrop-filter: blur(64px);
transform: translateY(-4px);
box-shadow: 0 32px 64px -16px rgb(0 0 0 / 0.3);
}
apps/web/src/components/portfolio/bento-grid.tsx
+9 -7
View File
@@ -4,13 +4,15 @@ import Link from "next/link";
import { HoverVignette } from "@/components/showcase/hover-vignette";
// Literal class strings per color so Tailwind's JIT keeps them (no dynamic interpolation).
// The colour tint + border only paint on hover/focus (via the `group/tile` link) — at rest
// the .bento-item CSS keeps the card chrome transparent so tiles read as title + render only.
const cardBg: Record<string, string> = {
orange: "!bg-orange-50/95 dark:!bg-orange-950/95 !border-orange-500/20",
yellow: "!bg-yellow-50/95 dark:!bg-yellow-950/95 !border-yellow-500/20",
amber: "!bg-amber-50/95 dark:!bg-amber-950/95 !border-amber-500/20",
emerald: "!bg-emerald-50/95 dark:!bg-emerald-950/95 !border-emerald-500/20",
blue: "!bg-blue-50/95 dark:!bg-blue-950/95 !border-blue-500/20",
green: "!bg-green-50/95 dark:!bg-green-950/95 !border-green-500/20",
orange: "group-hover/tile:!bg-orange-50/95 dark:group-hover/tile:!bg-orange-950/95 group-focus-within/tile:!bg-orange-50/95 dark:group-focus-within/tile:!bg-orange-950/95 group-hover/tile:!border-orange-500/20 group-focus-within/tile:!border-orange-500/20",
yellow: "group-hover/tile:!bg-yellow-50/95 dark:group-hover/tile:!bg-yellow-950/95 group-focus-within/tile:!bg-yellow-50/95 dark:group-focus-within/tile:!bg-yellow-950/95 group-hover/tile:!border-yellow-500/20 group-focus-within/tile:!border-yellow-500/20",
amber: "group-hover/tile:!bg-amber-50/95 dark:group-hover/tile:!bg-amber-950/95 group-focus-within/tile:!bg-amber-50/95 dark:group-focus-within/tile:!bg-amber-950/95 group-hover/tile:!border-amber-500/20 group-focus-within/tile:!border-amber-500/20",
emerald: "group-hover/tile:!bg-emerald-50/95 dark:group-hover/tile:!bg-emerald-950/95 group-focus-within/tile:!bg-emerald-50/95 dark:group-focus-within/tile:!bg-emerald-950/95 group-hover/tile:!border-emerald-500/20 group-focus-within/tile:!border-emerald-500/20",
blue: "group-hover/tile:!bg-blue-50/95 dark:group-hover/tile:!bg-blue-950/95 group-focus-within/tile:!bg-blue-50/95 dark:group-focus-within/tile:!bg-blue-950/95 group-hover/tile:!border-blue-500/20 group-focus-within/tile:!border-blue-500/20",
green: "group-hover/tile:!bg-green-50/95 dark:group-hover/tile:!bg-green-950/95 group-focus-within/tile:!bg-green-50/95 dark:group-focus-within/tile:!bg-green-950/95 group-hover/tile:!border-green-500/20 group-focus-within/tile:!border-green-500/20",
};
const titleColor: Record<string, string> = {
orange: "text-orange-700 dark:text-orange-400",
@@ -90,7 +92,7 @@ function BentoCard({ item, delay }: { item: Item; delay: number }) {
</Card>
);
const className = `bento-item ${spanClass[item.span]}${
const className = `bento-item group/tile ${spanClass[item.span]}${
feature
? " relative z-0 transition-transform duration-500 ease-out will-change-transform motion-safe:hover:scale-[1.05] motion-safe:hover:z-30 focus-visible:z-30"
: ""