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

added big sigil background

Browse Source
This commit is contained in:
Nils Pukropp
2026-05-16 18:30:42 +02:00
parent b9aa93912c
commit a9a16b0887
2 changed files with 37 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/CyberFx.astro
+7
View File
@@ -42,6 +42,13 @@
});
}
/* ─── 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.classList.add('cs-fx-wire--sig');
}
/* ─── Scroll-entry databend on images ─── */
if (!reduced && 'IntersectionObserver' in window) {
const targets = document.querySelectorAll<HTMLElement>(
frontend/src/styles/global.css
+30 -11
View File
@@ -1935,7 +1935,7 @@ input[type="date"] { color-scheme: light; }
/* Corrupted-tube grain: cold static + tight scanlines, blue-shifted. */
.cybersigil body::after,
html.cybersigil body::after {
opacity: 0.42;
opacity: 0.24;
background-image:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.31 0 0 0 0 0.91 0 0 0 0 1 0 0 0 0.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
repeating-linear-gradient(
@@ -1984,17 +1984,23 @@ html.cybersigil body::after {
background-size: 7px 7px;
}
/* Slow wireframe mesh drift — a derelict orbital, almost subliminal. */
/* Slow background growth — one generated sigil (DOM injected by CyberFx),
* spreading from its central spine out to both sides, rotating almost
* imperceptibly. Sits behind the imagery (see image-lift rules below). */
.cybersigil .cs-fx-wire {
top: 50%;
left: 50%;
width: 78vmin;
height: 78vmin;
opacity: 0.07;
mix-blend-mode: screen;
background: center / contain no-repeat
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%234FE9FF' stroke-width='0.6'><circle cx='100' cy='100' r='96'/><ellipse cx='100' cy='100' rx='96' ry='34'/><ellipse cx='100' cy='100' rx='96' ry='66'/><ellipse cx='100' cy='100' rx='34' ry='96'/><ellipse cx='100' cy='100' rx='66' ry='96'/><path d='M4 100 H196 M100 4 V196 M30 30 L170 170 M170 30 L30 170'/></svg>");
animation: cs-wire-spin 96s linear infinite;
width: 92vmin;
height: 92vmin;
opacity: 0.14;
animation: cs-wire-spin 120s linear infinite;
}
.cybersigil .cs-fx-wire .cs-sigil {
filter: drop-shadow(0 0 6px color-mix(in srgb, var(--sky) 35%, transparent));
}
.cybersigil .cs-fx-wire .cs-sigil path {
animation: cs-carve 2400ms ease-out forwards;
animation-delay: calc(var(--i, 0) * 70ms);
}
/* Random horizontal databend tears — bright displaced bars, mostly absent. */
@@ -2224,7 +2230,18 @@ html.cybersigil body::after {
.cybersigil .plate:hover .plate-caption-title {
text-shadow: -1px 0 0 var(--sky), 1px 0 0 var(--mauve);
}
.cybersigil .plate-image { background: var(--mantle); }
/* Lift the imagery clear of the ambient FX/grain so photos read solid —
* only the hover sigil (cs-plate-sig, z-index above this) sits over them. */
.cybersigil .plate-image {
background: var(--mantle);
position: relative;
z-index: 12;
}
/* Drop the salon hang-tilt under cybersigil: the rigid terminal look wants
* square tiles, and removing the inline transform frees images from its
* stacking context so the z-index lift actually beats the fixed FX. */
.cybersigil a.plate { transform: none !important; }
.cybersigil .plate:hover { transform: translateY(-3px) !important; }
.cybersigil .plate:hover .plate-image img {
filter:
drop-shadow(-3px 0 0 color-mix(in srgb, var(--mauve) 70%, transparent))
@@ -2272,7 +2289,7 @@ html.cybersigil body::after {
width: 46%;
height: 118%;
transform: translateX(-50%);
z-index: 2;
z-index: 14;
pointer-events: none;
opacity: 0;
mix-blend-mode: screen;
@@ -2317,6 +2334,8 @@ html.cybersigil body::after {
background:
linear-gradient(var(--surface0), var(--surface0)) padding-box,
linear-gradient(135deg, color-mix(in srgb, var(--sky) 40%, var(--surface2)), color-mix(in srgb, var(--mauve) 40%, var(--surface1))) border-box;
position: relative;
z-index: 12;
}
/* Section rule — terminal divider `// ……… [sigil] ……… //`. */