nemunaire/radieo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

stream: add a synthwave CRT scan sweep behind the card
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse source 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
nemunaire 2026-07-04 12:06:15 +08:00
commit ef1a19504e
1 changed files with 34 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

34
stream/index.html
View file

@ -27,7 +27,40 @@
content: ""; position: absolute; inset: 0;
background: radial-gradient(circle at 30% 20%, rgba(20,16,34,.72), rgba(13,11,20,.9) 75%);
}
/* Ambiance cathodique synthwave, purement décorative (au-dessus de tout,
mais transparent aux clics). Deux couches superposées :
- .scanlines : fines lignes horizontales fixes, comme la trame d'un
vieux moniteur, à peine visibles ;
- .scanbeam : une bande lumineuse qui balaie l'écran de haut en bas en
boucle, évoquant le rafraîchissement d'un tube cathodique. */
.crt { position: fixed; inset: 0; z-index: 0; pointer-events: none;
overflow: hidden; }
.scanlines {
position: absolute; inset: 0; opacity: .35;
background: repeating-linear-gradient(
180deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px,
rgba(0,0,0,.25) 3px, rgba(0,0,0,0) 4px);
}
.scanbeam {
position: absolute; left: 0; right: 0; top: 0; height: 22vh;
background: linear-gradient(
180deg, rgba(155,140,255,0) 0%,
rgba(155,140,255,.06) 45%, rgba(214,153,255,.14) 50%,
rgba(155,140,255,.06) 55%, rgba(155,140,255,0) 100%);
mix-blend-mode: screen;
animation: scan 16s linear infinite;
}
/* Le faisceau part au-dessus du cadre et repasse sous le bas, pour un
balayage continu sans saut visible. */
@keyframes scan {
0% { transform: translateY(-22vh); }
100% { transform: translateY(100vh); }
}
@media (prefers-reduced-motion: reduce) {
.scanbeam { animation: none; opacity: 0; }
}
.card {
position: relative; z-index: 1;
width: min(90vw, 420px); padding: 2.5rem 2rem;
background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.45);
@ -136,6 +169,7 @@
</head>
<body>
<div class="bg" id="bg"></div>
<div class="crt" aria-hidden="true"><div class="scanlines"></div><div class="scanbeam"></div></div>
<main class="card">
<div class="logo" id="stationName">◈</div>
<div class="np-label"><span class="dot"></span><span id="npLabel">Connexion en cours</span><span id="provider" class="provider" hidden></span></div>