vinzenz/hyperhive
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

visuals: frosted-glass terminal/msgflow, row fade-in, badge pulses

Browse source 
agent terminal-wrap + dashboard msgflow get a translucent bg with
backdrop-filter blur+saturate so page-bg glow softens behind them.
new rows in the live panel and the dashboard message flow fade in
with a 4px slide-up. unread badge pulses; pending-operator-questions
section pulses its glow. history-backfilled rows skip the animation
(.no-anim) so the page doesn't stagger 100 fade-ins on load.
This commit is contained in:
müde 2026-05-15 19:20:15 +02:00
parent 3f2aba4adc
commit fd39226883
3 changed files with 49 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

29
hive-ag3nt/assets/agent.css
View file

@ -125,9 +125,14 @@ pre.diff {
max-height: 30em;
}
/* Terminal-ish wrapper holding the live output + prompt input as one
unit. Crust as bg (almost-black), slightly inset, mauve phosphor glow. */
unit. Crust as bg (almost-black), slightly inset, mauve phosphor glow.
Frosted-glass backdrop blur: the page bg behind the wrap gets softened,
so anything that bleeds through (page banner glow, scroll position)
reads as out-of-focus depth instead of sharp competing detail. */
.terminal-wrap {
background: #11111b;
background: rgba(17, 17, 27, 0.78);
-webkit-backdrop-filter: blur(8px) saturate(120%);
backdrop-filter: blur(8px) saturate(120%);
border: 1px solid var(--purple-dim);
box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.7);
border-radius: 4px;
@ -191,6 +196,26 @@ pre.diff {
margin-left: 0.6em;
font-size: 0.85em;
text-shadow: 0 0 6px rgba(250, 179, 135, 0.55);
animation: badge-pulse 1.4s ease-in-out infinite;
}
@keyframes badge-pulse {
0%, 100% { opacity: 1; text-shadow: 0 0 6px rgba(250, 179, 135, 0.55); }
50% { opacity: 0.7; text-shadow: 0 0 14px rgba(250, 179, 135, 0.95); }
}
/* Per-event fade-in slide-up. Applied to every row the live panel
appends; the `.no-anim` modifier lets history-backfill skip the
animation (we don't want 100 rows fading in at once on page load). */
.live .row,
.live details.row {
animation: row-fade-in 220ms ease-out both;
}
.live .row.no-anim,
.live details.row.no-anim {
animation: none;
}
@keyframes row-fade-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
details.row {
white-space: normal;