designslife/dlStack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Singularity template: WebGL nebula + holographic cards

Browse Source 
Third theme template scoped to :root[data-template="cosmos"], joining
editorial and swiss. Set "theme.template": "cosmos" in links.json to
activate.

Background — full-viewport WebGL fragment shader running a 5-octave
warped fBm nebula in indigo/violet/magenta/cyan, with a two-layer
procedural starfield (small dense + sparse blue-white halo) twinkling
on independent phases. Pointer-tracking gravity well subtly perturbs
sampling around the cursor. Pixel ratio capped at 1.5x for fill-rate;
loop pauses on visibility change.

UI — Orbitron display + Geist body, glassmorphic cards with
backdrop-filter, conic-gradient holographic borders driven by
@property --cosmos-hue rotating on hover, gradient-clip section
numbers and project titles, chromatic-split hero last name on hover
(::before + ::after pseudos with mix-blend-mode screen using a
data-text attr), glowing drift-orb in place of the editorial asterism,
animated section-head accent line.

Fallbacks — prefers-reduced-motion or WebGL-unavailable triggers the
.cosmos-static class with a CSS-only radial-gradient nebula and all
heavy animations disabled. Always-dark regardless of theme toggle.

README documents the new template; links.example.json unchanged.
This commit is contained in:
Joel Brock
2026-05-15 17:01:30 -07:00
parent 16314054ec
commit 1346f7a40c
4 changed files with 802 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@@ -19,7 +19,7 @@
<!-- Editorial: Fraunces (variable serif) + Geist (refined sans) + Geist Mono
Swiss: Archivo (variable grotesque, near-Akzidenz/Univers) -->
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;900&family=DM+Serif+Display:ital@0;1&family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..600,30..100,0..1&family=Geist:wght@300;400;500;600&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;900&family=DM+Serif+Display:ital@0;1&family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..600,30..100,0..1&family=Geist:wght@300;400;500;600&family=Geist+Mono:wght@400;500&family=Orbitron:wght@400;500;700;900&display=swap" rel="stylesheet">
<script>
// Apply saved theme + template before paint to avoid flash
@@ -27,12 +27,13 @@
var t = localStorage.getItem("dlstack-theme");
if (t === "light" || t === "dark") document.documentElement.dataset.theme = t;
var tpl = localStorage.getItem("dlstack-template");
if (tpl === "swiss" || tpl === "editorial") document.documentElement.dataset.template = tpl;
if (tpl === "swiss" || tpl === "editorial" || tpl === "cosmos") document.documentElement.dataset.template = tpl;
} catch (e) {}
</script>
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="stylesheet" href="assets/css/swiss.css">
<link rel="stylesheet" href="assets/css/cosmos.css">
<meta property="og:type" content="website">
<meta property="og:title" content="Joel Brock — links">