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

edge sigil

Browse Source
This commit is contained in:
Nils Pukropp
2026-05-17 15:38:04 +02:00
parent dc8e3d55b1
commit 04733eb00a
3 changed files with 46 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/CyberFx.astro
+13
View File
@@ -18,6 +18,8 @@
<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>
<i class="cs-fx-edge cs-fx-edge--l"></i>
<i class="cs-fx-edge cs-fx-edge--r"></i>
</div>
<script>
@@ -42,6 +44,17 @@
});
}
/* ─── Tall sigil vines pinned to the left/right screen edges ─── */
/* Each edge gets its own growth (more organic than a shared one);
* CSS pins the spine to the edge and clips the outer half so it
* reads as an inward-creeping border vine. */
const edges = document.querySelectorAll<HTMLElement>('.cs-fx-edge');
edges.forEach((e) => {
if (e.classList.contains('cs-fx-edge--sig')) return;
e.innerHTML = buildCybersigil({ count: 8 });
e.classList.add('cs-fx-edge--sig');
});
/* ─── One slow-spinning sigil filling the background ─── */
const wire = document.querySelector<HTMLElement>('.cs-fx-wire');
if (wire && !wire.classList.contains('cs-fx-wire--sig')) {