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

restored 4 corner sigils

Browse Source
This commit is contained in:
Nils Pukropp
2026-05-17 17:10:14 +02:00
parent b64cd2e85a
commit 2651b29d02
7 changed files with 83 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/CyberFx.astro
+15 -15
View File
@@ -14,8 +14,10 @@
<div class="cs-fx-halftone"></div>
<div class="cs-fx-wire"></div>
<div class="cs-fx-tear"></div>
<i class="cs-fx-edge cs-fx-edge--l"></i>
<i class="cs-fx-edge cs-fx-edge--r"></i>
<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>
</div>
<script>
@@ -27,25 +29,23 @@
const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
/* ─── Tall sigil vines pinned to the left/right screen edges ─── */
/* 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');
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');
/* ─── 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');
});
}
/* ─── 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: 20 });
wire.innerHTML = buildCybersigil({ count: 9 });
wire.classList.add('cs-fx-wire--sig');
}