Bento Nexus is a study in dense, functional grid architectures. It reinvents traditional card layouts into an interconnected web of responsive, glowing panels that rearrange based on viewport constraints and priority.
Dynamic Border Glow Tracking
The grid cards listen to mouse hover positions to update raw CSS variables tracking local mouse coordinates ($x, y$). A custom radial gradient mask uses these variables to render elegant, localized borders that light up exactly where the cursor moves.
css
/* Glow tracking border using absolute hover variables */
.bento-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(
400px circle at var(--mouse-x) var(--mouse-y),
rgba(245, 158, 11, 0.15),
transparent 80%
);
z-index: 1;
}Structural Rhythm
Rather than keeping all cards static, certain cards expand dynamically upon click or context changes, utilizing fluid spring physics to animate grid columns without causing content layout shifts (CLS).