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

updated sigil rendering

Browse Source
This commit is contained in:
Nils Pukropp
2026-05-17 16:11:36 +02:00
parent 04733eb00a
commit b64cd2e85a
7 changed files with 73 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/CyberFx.astro
+12 -25
View File
@@ -14,10 +14,6 @@
<div class="cs-fx-halftone"></div>
<div class="cs-fx-wire"></div>
<div class="cs-fx-tear"></div>
<i class="cs-fx-corner cs-fx-corner--tl"></i>
<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>
@@ -31,34 +27,25 @@
const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
/* ─── Generated sigil growths in the four corners ─── */
/* One sigil per page load; the four corner transforms in global.css
* (scaleX / scaleY / scale) splay it into each corner. */
const corners = document.querySelectorAll<HTMLElement>('.cs-fx-corner');
if (corners.length) {
const svg = buildCybersigil();
corners.forEach((c) => {
if (c.classList.contains('cs-fx-corner--sig')) return;
c.innerHTML = svg;
c.classList.add('cs-fx-corner--sig');
});
}
/* ─── 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
/* Built once and shared by both edges so left/right are symmetric;
* the right edge is flipped in CSS (scaleX(-1)). Edge-mode crops the
* SVG to the inward half + stretches it to fill the ribbon, 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');
});
if (edges.length) {
const vine = buildCybersigil({ count: 22, spineWave: 4, edge: true });
edges.forEach((e) => {
if (e.classList.contains('cs-fx-edge--sig')) return;
e.innerHTML = vine;
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')) {
wire.innerHTML = buildCybersigil({ count: 9 });
wire.innerHTML = buildCybersigil({ count: 20 });
wire.classList.add('cs-fx-wire--sig');
}