sjs/vibetunnel
1
0
Fork 0
mirror of https://github.com/samsonjs/vibetunnel.git synced 2026-04-27 15:17:38 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add phosphor decay effect for dead terminals

Browse source
This commit is contained in:
Peter Steinberger 2025-06-23 01:00:31 +02:00
parent 5d0fe3e7cf
commit 6377a3189c
2 changed files with 46 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
web/src/client/components/session-view.ts
View file

@ -1189,7 +1189,10 @@ export class SessionView extends LitElement {
<!-- Terminal Container --> <!-- Terminal Container -->
<div <div
class="flex-1 bg-dark-bg overflow-hidden min-h-0 relative" class="flex-1 bg-dark-bg overflow-hidden min-h-0 relative ${this.session?.status ===
'exited'
? 'session-exited'
: ''}"
id="terminal-container" id="terminal-container"
style="max-width: 100vw; height: 100%;" style="max-width: 100vw; height: 100%;"
> >

42
web/src/client/styles.css
View file

@ -911,3 +911,45 @@ body {
pointer-events: none; pointer-events: none;
} }
} }
/* Phosphor Terminal Decay effect for exited sessions */
.session-exited {
filter: sepia(0.3) hue-rotate(45deg) brightness(0.8) contrast(1.2);
position: relative;
transition: filter 0.5s ease-out;
}
.session-exited::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 20, 0, 0.4) 100%);
mix-blend-mode: multiply;
pointer-events: none;
animation: phosphor-fade 2s ease-out;
}
@keyframes phosphor-fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Additional subtle scanline effect for exited sessions */
.session-exited::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
0deg,
rgba(0, 255, 0, 0.03),
rgba(0, 255, 0, 0.03) 1px,
transparent 1px,
transparent 2px
);
pointer-events: none;
opacity: 0.5;
}