nvrl/narlblog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added boot
CI / frontend (push) Failing after 1s
Details
CI / backend (push) Failing after 0s
Details

Browse Source
This commit is contained in:
Nils Pukropp
2026-05-21 04:50:06 +02:00
parent f7d1620d08
commit 9d326c7f29
2 changed files with 82 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/CyberFx.astro
+24
View File
@@ -18,6 +18,23 @@
<i class="cs-fx-corner cs-fx-corner--tr"></i>
<i class="cs-fx-corner cs-fx-corner--bl"></i>
<i class="cs-fx-corner cs-fx-corner--br"></i>
<div class="cs-hud">
<div class="cs-hud-item cs-hud--tl">0x00 // ADDR</div>
<div class="cs-hud-item cs-hud--tr">SYS.PTR // 0.0, 0.0</div>
<div class="cs-hud-item cs-hud--bl">MEM.DUMP // OK</div>
<div class="cs-hud-item cs-hud--br">ATELIER.V6 // #0F2A</div>
</div>
<div class="cs-boot">
<div class="cs-boot-log">
<p>> INITIALIZING ARCHIVE...</p>
<p>> LOADING CYBERSIGIL.SYS... [ OK ]</p>
<p>> ALLOCATING BUFFER 0x8F2A... [ OK ]</p>
<p>> DECRYPTING BIOMETRICS... [ OK ]</p>
<p>> ACCESS GRANTED.</p>
</div>
</div>
</div>
<script>
@@ -84,6 +101,9 @@
let depth = 0, raf = 0;
let mx = 0, my = 0; // mouse relative (-1..1)
const hudTL = fx.querySelector('.cs-hud--tl');
const hudTR = fx.querySelector('.cs-hud--tr');
const apply = () => {
raf = 0;
fx.style.opacity = String(1 - 0.5 * depth);
@@ -93,6 +113,10 @@
root.style.setProperty('--cs-py', `${(my * 15).toFixed(1)}px`);
root.style.setProperty('--cs-cx', `${(mx * -8).toFixed(1)}px`);
root.style.setProperty('--cs-cy', `${(my * -8).toFixed(1)}px`);
// update HUD
if (hudTL) hudTL.textContent = `0x${Math.floor(depth * 255).toString(16).toUpperCase().padStart(2, '0')} // ADDR`;
if (hudTR) hudTR.textContent = `SYS.PTR // ${mx.toFixed(2)}, ${my.toFixed(2)}`;
};
const schedule = () => { if (!raf) raf = requestAnimationFrame(apply); };
frontend/src/styles/partials/70-cybersigil.css
+58
View File
@@ -61,6 +61,64 @@ html.cybersigil body::after {
.cybersigil .salon-atmosphere::before { background: var(--sky); opacity: 0.06; }
.cybersigil .salon-atmosphere::after { background: var(--mauve); opacity: 0.05; }
/* HUD Overlay */
.cybersigil .cs-hud {
position: fixed;
inset: 0;
padding: 1.5rem;
pointer-events: none;
z-index: 10;
font-family: var(--font-sans);
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--sky);
opacity: 0.5;
}
.cybersigil .cs-hud-item { position: absolute; }
.cybersigil .cs-hud--tl { top: 1.5rem; left: 1.5rem; }
.cybersigil .cs-hud--tr { top: 1.5rem; right: 1.5rem; }
.cybersigil .cs-hud--bl { bottom: 1.5rem; left: 1.5rem; }
.cybersigil .cs-hud--br { bottom: 1.5rem; right: 1.5rem; }
/* Boot Overlay */
.cybersigil .cs-boot {
position: fixed;
inset: 0;
z-index: 100;
background: var(--crust);
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
animation: cs-boot-fade 0.8s steps(1) 0.6s forwards;
}
.cybersigil .cs-boot-log {
font-family: var(--font-display);
font-size: 1.2rem;
color: var(--sky);
line-height: 1.4;
text-shadow: 0 0 8px var(--sky);
}
.cybersigil .cs-boot-log p {
overflow: hidden;
white-space: nowrap;
width: 0;
animation: cs-boot-type 0.1s steps(20) forwards;
}
.cybersigil .cs-boot-log p:nth-child(2) { animation-delay: 0.1s; }
.cybersigil .cs-boot-log p:nth-child(3) { animation-delay: 0.2s; }
.cybersigil .cs-boot-log p:nth-child(4) { animation-delay: 0.3s; }
.cybersigil .cs-boot-log p:nth-child(5) { animation-delay: 0.4s; }
@keyframes cs-boot-fade {
0% { opacity: 1; visibility: visible; }
100% { opacity: 0; visibility: hidden; }
}
@keyframes cs-boot-type {
to { width: 100%; }
}
/* ─── cs-fx overlay system (DOM in CyberFx.astro) ─────────────────────────
* Inert everywhere; only the cybersigil theme switches it on. Decorative
* layers ride above content at low opacity (pointer-events:none); the sigil