valknar/sexy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add animated glass background, breadcrumbs, and brand mark polish

Browse Source 
Cards now sit on an animated signature-gradient background and use a
translucent, blurred bp-glass surface so it shines through; extended
bp-glass to every stat surface on the Stats page and to its tab switcher.
Adds a Breadcrumbs component below the header on all app pages.

Also: drop the gradient text fill from the wordmark/heading, animate the
BrandMark's heart and curve on the dashboard hero instead of a plain pulse
ring, recenter the heart/curve artwork in icon.svg and BrandMark, close the
mobile nav menu on link click, remove the redundant "back to recordings"
button, and match the "Start session"/"Scan for devices" button sizes.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
valknar
2026-08-26 18:47:30 +02:00
co-authored by Claude Sonnet 5
parent 9e0380ec75
commit c46adf788f
14 changed files with 248 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/globals.css
+82 -5
View File
@@ -127,13 +127,46 @@
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
@apply text-foreground;
}
html {
@apply font-sans;
}
}
/* Animated signature-sweep background - sits behind everything; cards use
.bp-glass (translucent + blurred) so it shines through instead of being
fully hidden behind an opaque card surface. */
body {
background-color: var(--background);
background-image:
radial-gradient(ellipse 80% 60% at 15% 10%, color-mix(in srgb, #ff6fb0 32%, transparent), transparent 60%),
radial-gradient(ellipse 70% 60% at 85% 25%, color-mix(in srgb, #4f7fe0 28%, transparent), transparent 60%),
radial-gradient(ellipse 75% 65% at 50% 100%, color-mix(in srgb, #b34bde 30%, transparent), transparent 60%);
background-repeat: no-repeat;
background-size: 140% 140%;
background-attachment: fixed;
animation: bp-bg-drift 24s ease-in-out infinite;
}
@keyframes bp-bg-drift {
0% {
background-position: 0% 0%, 100% 0%, 50% 100%;
}
50% {
background-position: 20% 20%, 80% 30%, 60% 80%;
}
100% {
background-position: 0% 0%, 100% 0%, 50% 100%;
}
}
@media (prefers-reduced-motion: reduce) {
body {
animation: none;
}
}
/* Signature pink -> purple -> blue sweep (matches app/icon.svg), used for
the wordmark and one hero moment - not smeared across every surface. */
.bp-gradient-text {
@@ -147,17 +180,20 @@
background: linear-gradient(135deg, #ff6fb0, #b34bde 50%, #4f7fe0);
}
/* Console-module surface: hairline border + a soft inset top highlight,
standing in for backdrop-blur glassmorphism. */
/* Console-module surface: translucent + blurred so the animated background
sweep shines through, with a hairline border and soft inset top highlight. */
.bp-glass {
background: var(--card);
background: color-mix(in srgb, var(--card) 55%, transparent);
backdrop-filter: blur(20px) saturate(150%);
border: 1px solid var(--border);
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--foreground) 8%, transparent);
transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
box-shadow 0.2s ease,
background-color 0.2s ease;
}
.bp-glass:hover {
background: color-mix(in srgb, var(--card) 62%, transparent);
border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--foreground) 10%, transparent),
@@ -201,6 +237,47 @@
letter-spacing: 0.01em;
}
/* BrandMark's animated variant (dashboard hero): the heart glyph beats, the
EKG-style curve glows in the primary accent instead of plain white. */
@keyframes bp-mark-heartbeat {
0%,
100% {
opacity: 0.22;
transform: scale(1);
}
50% {
opacity: 0.75;
transform: scale(1.1);
}
}
.bp-mark-heart {
transform-box: fill-box;
transform-origin: center;
animation: bp-mark-heartbeat 1.8s ease-in-out infinite;
}
@keyframes bp-mark-curve-glow {
0%,
100% {
filter: drop-shadow(0 0 1px color-mix(in srgb, var(--primary) 50%, transparent));
}
50% {
filter:
drop-shadow(0 0 5px color-mix(in srgb, var(--primary) 100%, transparent))
drop-shadow(0 0 10px color-mix(in srgb, var(--primary) 70%, transparent));
}
}
.bp-mark-curve {
stroke: #fff;
animation: bp-mark-curve-glow 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.bp-mark-heart,
.bp-mark-curve {
animation: none;
}
}
@keyframes bp-pulse-glow {
0%,
100% {