Pages Hard
Web3 — L1 / L2 Blockchain Landing
A futuristic marketing landing page for a fictional modular L1/L2 blockchain. Features a deep-space hero with an animated canvas starfield and grid, a visionary headline, count-up network metrics (throughput, finality, fees, validators), scroll-triggered performance comparison bars against rival chains, a glowing CSS architecture diagram, an ecosystem dApps grid, a developer band with a tabbed code-snippet card and copy-to-clipboard, a validators decentralization band, and a footer. UI-only simulation with mock data.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
/* ============================================================
Lumen Chain — L1/L2 blockchain landing
Palette override: deep space + signature blue accent
============================================================ */
:root {
--bg: #04060e;
--surface: #0a0e1c;
--surface-2: #101529;
--elevated: #161c36;
--text: #e9ecf6;
--muted: #8a91ad;
--line: rgba(160, 180, 255, 0.10);
--line-2: rgba(160, 180, 255, 0.20);
--accent: #5b8cff;
--accent-2: #00ffa3;
--accent-glow: rgba(91, 140, 255, 0.45);
--pos: #26d07c;
--neg: #ff4d6d;
--warn: #ffb347;
--r-sm: 8px;
--r-md: 14px;
--r-lg: 20px;
--r-pill: 999px;
--font-ui: "Space Grotesk", system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font-ui);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
.mono { font-family: var(--font-mono); }
.muted { color: var(--muted); }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.warn { color: var(--warn); }
a { color: inherit; text-decoration: none; }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: var(--r-sm);
}
/* ---------- buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border-radius: var(--r-pill);
border: 1px solid transparent;
font: 600 0.92rem var(--font-ui);
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.btn-lg { padding: 14px 28px; font-size: 1rem; }
.btn-primary {
background: linear-gradient(135deg, var(--accent), #3a63d8);
color: #fff;
box-shadow: 0 0 24px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 36px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.3); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
background: rgba(160, 180, 255, 0.06);
border-color: var(--line-2);
color: var(--text);
backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: rgba(160, 180, 255, 0.12); border-color: var(--accent); }
/* ---------- glass surface ---------- */
.glass {
background: linear-gradient(180deg, rgba(16, 21, 41, 0.75), rgba(10, 14, 28, 0.85));
border: 1px solid var(--line);
border-radius: var(--r-lg);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
/* ============================================================
NAV
============================================================ */
.nav {
position: sticky;
top: 0;
z-index: 50;
background: rgba(4, 6, 14, 0.72);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid var(--line);
}
.nav-inner {
max-width: 1180px;
margin: 0 auto;
padding: 14px 24px;
display: flex;
align-items: center;
gap: 28px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.08rem; }
.brand-mark {
width: 26px; height: 26px;
border-radius: 8px;
background:
radial-gradient(circle at 30% 30%, var(--accent-2), transparent 55%),
linear-gradient(135deg, var(--accent), #2a3f8f);
box-shadow: 0 0 16px var(--accent-glow);
}
.brand-name em { font-style: normal; color: var(--accent); }
.nav-links { display: flex; gap: 22px; margin-left: auto; }
.nav-links a {
font-size: 0.92rem;
color: var(--muted);
transition: color 0.15s ease;
padding: 4px 2px;
}
.nav-links a:hover { color: var(--text); }
.nav-actions { display: flex; gap: 10px; }
.nav-burger {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: 1px solid var(--line-2);
border-radius: var(--r-sm);
padding: 9px 8px;
cursor: pointer;
margin-left: auto;
}
.nav-burger span { width: 18px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu {
display: none;
flex-direction: column;
gap: 4px;
padding: 8px 24px 20px;
border-top: 1px solid var(--line);
}
.mobile-menu a { padding: 10px 4px; color: var(--muted); font-weight: 500; }
.mobile-menu a:hover { color: var(--text); }
.mobile-menu .mobile-cta { color: #fff; justify-content: center; margin-top: 8px; }
.mobile-menu.is-open { display: flex; }
/* ============================================================
HERO
============================================================ */
.hero {
position: relative;
min-height: 88vh;
display: flex;
align-items: center;
overflow: hidden;
}
#starfield {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.hero-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(91, 140, 255, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(91, 140, 255, 0.05) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 30%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 30%, transparent 75%);
pointer-events: none;
}
.hero-inner {
position: relative;
max-width: 1180px;
margin: 0 auto;
padding: 96px 24px 72px;
text-align: center;
width: 100%;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 16px;
border-radius: var(--r-pill);
border: 1px solid var(--line-2);
background: rgba(91, 140, 255, 0.08);
font-size: 0.82rem;
font-weight: 500;
color: var(--muted);
backdrop-filter: blur(8px);
}
.pulse-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--accent-2);
box-shadow: 0 0 0 0 rgba(0, 255, 163, 0.5);
animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(0, 255, 163, 0.5); }
70% { box-shadow: 0 0 0 9px rgba(0, 255, 163, 0); }
100% { box-shadow: 0 0 0 0 rgba(0, 255, 163, 0); }
}
.hero-title {
margin: 28px 0 0;
font-size: clamp(2.4rem, 6.2vw, 4.6rem);
font-weight: 700;
line-height: 1.06;
letter-spacing: -0.02em;
}
.grad-text {
background: linear-gradient(95deg, var(--accent) 10%, var(--accent-2) 90%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero-sub {
max-width: 640px;
margin: 20px auto 0;
font-size: clamp(1rem, 2vw, 1.18rem);
color: var(--muted);
}
.hero-ctas {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
margin-top: 34px;
}
/* hero metrics */
.metrics {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
max-width: 880px;
margin: 64px auto 0;
padding: 0;
}
.metric {
background: linear-gradient(180deg, rgba(16, 21, 41, 0.7), rgba(10, 14, 28, 0.8));
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 18px 14px 16px;
backdrop-filter: blur(12px);
position: relative;
overflow: hidden;
}
.metric::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
opacity: 0.55;
}
.metric dt {
font-size: 0.74rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--muted);
margin: 0 0 6px;
}
.metric dd {
margin: 0;
font-family: var(--font-mono);
font-weight: 700;
font-size: clamp(1.3rem, 2.6vw, 1.7rem);
color: var(--text);
display: flex;
align-items: baseline;
justify-content: center;
gap: 6px;
}
.metric-unit { font-size: 0.72rem; font-weight: 500; color: var(--accent); letter-spacing: 0.06em; }
.metric-unit-pre { color: var(--muted); }
/* ============================================================
SECTIONS (shared)
============================================================ */
.section {
max-width: 1180px;
margin: 0 auto;
padding: 96px 24px 24px;
}
.section-head { max-width: 680px; margin-bottom: 44px; }
.kicker {
font-family: var(--font-mono);
font-size: 0.78rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--accent-2);
margin: 0 0 10px;
}
.section-head h2, .dev-copy h2 {
margin: 0;
font-size: clamp(1.6rem, 3.6vw, 2.4rem);
font-weight: 700;
letter-spacing: -0.015em;
line-height: 1.15;
}
.section-sub { color: var(--muted); margin: 14px 0 0; font-size: 1.02rem; }
/* ============================================================
PERFORMANCE COMPARISON
============================================================ */
.compare-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.compare-card { padding: 24px; transition: border-color 0.2s ease, transform 0.2s ease; }
.compare-card:hover { border-color: var(--line-2); transform: translateY(-3px); }
.compare-card h3 {
margin: 0 0 20px;
font-size: 1.02rem;
font-weight: 600;
display: flex;
flex-direction: column;
gap: 2px;
}
.compare-meta { font-size: 0.76rem; font-weight: 400; color: var(--muted); }
.bar-row {
display: grid;
grid-template-columns: 72px 1fr 76px;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
.bar-row:last-child { margin-bottom: 0; }
.bar-label { font-size: 0.84rem; color: var(--muted); }
.bar-row.is-self .bar-label { color: var(--text); font-weight: 600; }
.bar-track {
height: 10px;
border-radius: var(--r-pill);
background: rgba(160, 180, 255, 0.07);
overflow: hidden;
}
.bar-fill {
height: 100%;
width: 0;
border-radius: var(--r-pill);
background: linear-gradient(90deg, rgba(138, 145, 173, 0.55), rgba(138, 145, 173, 0.35));
transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.bar-row.is-self .bar-fill {
background: linear-gradient(90deg, var(--accent), var(--accent-2));
box-shadow: 0 0 14px var(--accent-glow);
}
.bar-value { font-size: 0.8rem; text-align: right; color: var(--muted); }
.bar-row.is-self .bar-value { color: var(--text); font-weight: 700; }
/* ============================================================
ARCHITECTURE DIAGRAM
============================================================ */
.arch { padding: 40px 32px; position: relative; overflow: hidden; }
.arch::after {
content: "";
position: absolute;
inset: -40%;
background: radial-gradient(circle at 50% 0%, rgba(91, 140, 255, 0.10), transparent 55%);
pointer-events: none;
}
.arch-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
position: relative;
z-index: 1;
}
.arch-node {
border: 1px solid var(--line-2);
border-radius: var(--r-md);
padding: 18px;
background: linear-gradient(180deg, rgba(22, 28, 54, 0.9), rgba(13, 17, 33, 0.9));
display: flex;
flex-direction: column;
gap: 6px;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.arch-node:hover {
border-color: var(--accent);
box-shadow: 0 0 22px rgba(91, 140, 255, 0.25);
transform: translateY(-2px);
}
.arch-node strong { font-size: 1.06rem; }
.node-tag {
align-self: flex-start;
font-family: var(--font-mono);
font-size: 0.66rem;
text-transform: uppercase;
letter-spacing: 0.14em;
padding: 3px 9px;
border-radius: var(--r-pill);
border: 1px solid var(--line-2);
color: var(--accent-2);
background: rgba(0, 255, 163, 0.06);
}
.node-lane .node-tag { color: var(--accent); background: rgba(91, 140, 255, 0.1); }
.node-meta { font-size: 0.82rem; color: var(--muted); }
.node-lane .node-meta { color: var(--accent-2); font-weight: 500; }
.node-base { border-style: dashed; }
/* glowing connection beams */
.arch-links {
display: grid;
grid-template-columns: repeat(3, 1fr);
height: 36px;
position: relative;
z-index: 1;
}
.arch-links-2 { grid-template-columns: repeat(2, 1fr); }
.link-beam {
position: relative;
width: 2px;
height: 100%;
margin: 0 auto;
background: linear-gradient(180deg, var(--accent), rgba(91, 140, 255, 0.15));
overflow: hidden;
}
.link-beam::after {
content: "";
position: absolute;
left: 0;
top: -40%;
width: 100%;
height: 40%;
background: linear-gradient(180deg, transparent, var(--accent-2));
animation: beam 1.8s linear infinite;
}
.link-beam:nth-child(2)::after { animation-delay: 0.5s; }
.link-beam:nth-child(3)::after { animation-delay: 1s; }
@keyframes beam {
to { top: 110%; }
}
/* ============================================================
ECOSYSTEM
============================================================ */
.eco-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.eco-card {
padding: 20px;
display: flex;
flex-direction: column;
gap: 4px;
transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.eco-card:hover {
border-color: var(--accent);
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 18px rgba(91, 140, 255, 0.18);
}
.eco-logo {
width: 40px; height: 40px;
border-radius: 12px;
display: grid;
place-items: center;
font-family: var(--font-mono);
font-weight: 700;
font-size: 0.86rem;
color: #04060e;
background: linear-gradient(135deg, var(--logo), color-mix(in srgb, var(--logo) 55%, #04060e));
box-shadow: 0 0 14px color-mix(in srgb, var(--logo) 45%, transparent);
margin-bottom: 10px;
}
.eco-card strong { font-size: 1rem; }
.eco-tag { font-size: 0.78rem; color: var(--muted); }
.eco-stat { font-size: 0.8rem; color: var(--accent-2); margin-top: 8px; }
/* ============================================================
DEV BAND
============================================================ */
.dev-band {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 40px;
padding: 48px;
position: relative;
overflow: hidden;
border: 1px solid transparent;
background:
linear-gradient(180deg, rgba(16, 21, 41, 0.92), rgba(8, 11, 22, 0.95)) padding-box,
linear-gradient(135deg, rgba(91, 140, 255, 0.6), rgba(0, 255, 163, 0.35), rgba(91, 140, 255, 0.1)) border-box;
}
.dev-points {
margin: 22px 0 28px;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.dev-points li {
position: relative;
padding-left: 24px;
color: var(--muted);
font-size: 0.95rem;
}
.dev-points li::before {
content: "◆";
position: absolute;
left: 0;
color: var(--accent-2);
font-size: 0.7rem;
top: 4px;
}
.dev-points code {
background: rgba(91, 140, 255, 0.12);
border: 1px solid var(--line);
border-radius: 6px;
padding: 1px 7px;
font-size: 0.84em;
color: var(--text);
}
/* code card */
.code-card {
background: #070a16;
border: 1px solid var(--line-2);
border-radius: var(--r-md);
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
align-self: start;
}
.code-tabs {
display: flex;
align-items: center;
gap: 4px;
padding: 10px 12px;
border-bottom: 1px solid var(--line);
background: rgba(16, 21, 41, 0.6);
}
.code-tab {
background: none;
border: 1px solid transparent;
border-radius: var(--r-sm);
color: var(--muted);
font: 500 0.82rem var(--font-ui);
padding: 6px 14px;
cursor: pointer;
transition: color 0.15s ease, background 0.15s ease;
}
.code-tab:hover { color: var(--text); }
.code-tab.is-active {
color: var(--text);
background: rgba(91, 140, 255, 0.14);
border-color: var(--line-2);
}
.copy-btn {
margin-left: auto;
background: rgba(160, 180, 255, 0.06);
border: 1px solid var(--line-2);
border-radius: var(--r-sm);
color: var(--muted);
font: 500 0.78rem var(--font-mono);
padding: 6px 12px;
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease;
}
.copy-btn:hover { color: var(--text); border-color: var(--accent); }
.copy-btn.is-copied { color: var(--pos); border-color: var(--pos); }
.code-panel {
margin: 0;
padding: 22px 22px 26px;
font-size: 0.83rem;
line-height: 1.7;
overflow-x: auto;
display: none;
min-height: 280px;
}
.code-panel.is-active { display: block; }
.code-panel code { font-family: inherit; }
.tk-kw { color: #8da6ff; }
.tk-str { color: #00ffa3; }
.tk-num { color: #ffb347; }
.tk-fn { color: #79d2ff; }
.tk-cm { color: #5b6480; font-style: italic; }
/* ============================================================
VALIDATORS
============================================================ */
.val-grid {
display: grid;
grid-template-columns: 0.9fr 1.4fr;
gap: 18px;
align-items: start;
}
.val-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
padding: 30px;
}
.val-stat { display: flex; flex-direction: column; gap: 4px; }
.val-num {
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 700;
color: var(--text);
}
.val-label { font-size: 0.82rem; color: var(--muted); }
.val-table { padding: 8px 0; }
.val-row {
display: grid;
grid-template-columns: 1.4fr 1fr 0.6fr 0.7fr;
gap: 10px;
align-items: center;
padding: 13px 22px;
font-size: 0.88rem;
border-bottom: 1px solid var(--line);
transition: background 0.15s ease;
}
.val-row:last-child { border-bottom: none; }
.val-row:not(.val-head):hover { background: rgba(91, 140, 255, 0.05); }
.val-head {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--muted);
}
.val-right { text-align: right; }
.val-dot {
display: inline-block;
width: 9px; height: 9px;
border-radius: 50%;
background: var(--c, var(--accent));
box-shadow: 0 0 8px var(--c, var(--accent));
margin-right: 9px;
}
/* ============================================================
FOOTER
============================================================ */
.footer {
margin-top: 110px;
border-top: 1px solid var(--line);
background: linear-gradient(180deg, rgba(10, 14, 28, 0.4), rgba(4, 6, 14, 1));
}
.footer-inner {
max-width: 1180px;
margin: 0 auto;
padding: 56px 24px 28px;
display: grid;
grid-template-columns: 1.2fr 2fr;
gap: 40px;
}
.footer-brand p { margin: 14px 0 0; font-size: 0.88rem; }
.footer-hash { font-size: 0.76rem; }
.footer-cols {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.footer-cols h4 {
margin: 0 0 12px;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--muted);
}
.footer-cols a {
display: block;
padding: 5px 0;
font-size: 0.9rem;
color: var(--muted);
transition: color 0.15s ease;
}
.footer-cols a:hover { color: var(--accent); }
.footer-fine {
max-width: 1180px;
margin: 0 auto;
padding: 0 24px 32px;
font-size: 0.78rem;
}
/* ============================================================
TOAST
============================================================ */
.toast {
position: fixed;
bottom: 26px;
left: 50%;
transform: translate(-50%, 16px);
background: var(--elevated);
border: 1px solid var(--line-2);
border-radius: var(--r-pill);
padding: 11px 22px;
font: 500 0.86rem var(--font-ui);
color: var(--text);
box-shadow: 0 10px 36px rgba(0, 0, 0, 0.55), 0 0 18px rgba(91, 140, 255, 0.2);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
z-index: 100;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 980px) {
.nav-links, .nav-actions { display: none; }
.nav-burger { display: flex; }
.compare-grid { grid-template-columns: 1fr; }
.eco-grid { grid-template-columns: repeat(2, 1fr); }
.dev-band { grid-template-columns: 1fr; padding: 32px; }
.val-grid { grid-template-columns: 1fr; }
.footer-inner { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 520px) {
.hero-inner { padding: 64px 18px 56px; }
.hero-title { font-size: 2.1rem; }
.metrics { grid-template-columns: repeat(2, 1fr); margin-top: 44px; }
.section { padding: 64px 18px 16px; }
.eco-grid { grid-template-columns: 1fr; }
.dev-band { padding: 22px 16px; gap: 28px; }
.code-panel { font-size: 0.74rem; padding: 16px 14px 20px; min-height: 0; }
.code-tab { padding: 6px 10px; font-size: 0.76rem; }
.arch { padding: 24px 16px; }
.arch-links, .arch-links-2 { grid-template-columns: 1fr; height: 28px; }
.arch-links .link-beam:nth-child(n+2) { display: none; }
.bar-row { grid-template-columns: 58px 1fr 64px; gap: 7px; }
.bar-value { font-size: 0.7rem; }
.val-row { grid-template-columns: 1.3fr 0.6fr 0.7fr; padding: 12px 14px; font-size: 0.78rem; }
.val-row [role="cell"]:nth-child(2),
.val-head [role="columnheader"]:nth-child(2) { display: none; }
.val-stats { padding: 20px; gap: 16px; }
.btn-lg { padding: 12px 20px; font-size: 0.92rem; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.link-beam::after { animation: none; }
.pulse-dot { animation: none; }
.bar-fill { transition: none; }
* { transition-duration: 0.01ms !important; }
}/* ============================================================
Lumen Chain — L1/L2 landing interactions (vanilla JS)
UI-only simulation. No wallet, RPC, or on-chain calls.
============================================================ */
(function () {
"use strict";
var prefersReduced =
window.matchMedia &&
window.matchMedia("(prefers-reduced-motion: reduce)").matches;
/* ---------- toast helper ---------- */
var toastEl = document.getElementById("toast");
var toastTimer = null;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("is-visible");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.classList.remove("is-visible");
}, 2400);
}
/* ---------- data-toast buttons ---------- */
document.querySelectorAll("[data-toast]").forEach(function (el) {
el.addEventListener("click", function () {
toast(el.getAttribute("data-toast"));
});
});
/* ============================================================
STARFIELD
============================================================ */
(function starfield() {
var canvas = document.getElementById("starfield");
if (!canvas) return;
var ctx = canvas.getContext("2d");
var stars = [];
var dpr = Math.min(window.devicePixelRatio || 1, 2);
var w = 0,
h = 0;
function resize() {
var rect = canvas.getBoundingClientRect();
w = rect.width;
h = rect.height;
canvas.width = Math.max(1, Math.floor(w * dpr));
canvas.height = Math.max(1, Math.floor(h * dpr));
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
seed();
}
function seed() {
var count = Math.round((w * h) / 6500);
count = Math.max(40, Math.min(220, count));
stars = [];
for (var i = 0; i < count; i++) {
stars.push({
x: Math.random() * w,
y: Math.random() * h,
z: Math.random() * 0.8 + 0.2, // depth → size/speed
tw: Math.random() * Math.PI * 2, // twinkle phase
});
}
}
var palette = ["91,140,255", "0,255,163", "200,215,255"];
function frame(t) {
ctx.clearRect(0, 0, w, h);
for (var i = 0; i < stars.length; i++) {
var s = stars[i];
// gentle drift upward, wrap around
s.y -= s.z * 0.12;
if (s.y < -2) {
s.y = h + 2;
s.x = Math.random() * w;
}
var twinkle = 0.55 + 0.45 * Math.sin(t * 0.0014 + s.tw);
var r = s.z * 1.4;
var c = palette[i % palette.length];
ctx.beginPath();
ctx.arc(s.x, s.y, r, 0, Math.PI * 2);
ctx.fillStyle = "rgba(" + c + "," + (0.18 + s.z * 0.5 * twinkle).toFixed(3) + ")";
ctx.fill();
}
raf = requestAnimationFrame(frame);
}
var raf = null;
resize();
window.addEventListener("resize", resize);
if (prefersReduced) {
// static single paint
var tNow = 0;
ctx.clearRect(0, 0, w, h);
for (var i = 0; i < stars.length; i++) {
var s = stars[i];
var c = palette[i % palette.length];
ctx.beginPath();
ctx.arc(s.x, s.y, s.z * 1.4, 0, Math.PI * 2);
ctx.fillStyle = "rgba(" + c + "," + (0.18 + s.z * 0.45).toFixed(3) + ")";
ctx.fill();
}
} else {
raf = requestAnimationFrame(frame);
}
})();
/* ============================================================
COUNT-UP METRICS
============================================================ */
function formatValue(el, val) {
var fmt = el.getAttribute("data-format");
if (fmt === "compact") {
// 128400 -> 128.4K, 412 -> 412
if (val >= 1000) {
var k = val / 1000;
return (k >= 100 ? Math.round(k) : k.toFixed(1)).toString() + "K";
}
return Math.round(val).toString();
}
if (fmt === "fixed") {
var dec = parseInt(el.getAttribute("data-decimals") || "2", 10);
return val.toFixed(dec);
}
// int with thousands separators
return Math.round(val).toLocaleString("en-US");
}
function animateCount(el) {
if (el.dataset.done === "1") return;
el.dataset.done = "1";
var target = parseFloat(el.getAttribute("data-count")) || 0;
if (prefersReduced) {
el.textContent = formatValue(el, target);
return;
}
var dur = 1400;
var start = null;
function step(ts) {
if (start === null) start = ts;
var p = Math.min(1, (ts - start) / dur);
// easeOutExpo
var eased = p === 1 ? 1 : 1 - Math.pow(2, -10 * p);
el.textContent = formatValue(el, target * eased);
if (p < 1) requestAnimationFrame(step);
else el.textContent = formatValue(el, target);
}
requestAnimationFrame(step);
}
/* ============================================================
SCROLL OBSERVERS — counts + comparison bars
============================================================ */
var counts = document.querySelectorAll(".count");
var barGroups = document.querySelectorAll("[data-bars]");
function fillBars(group) {
if (group.dataset.done === "1") return;
group.dataset.done = "1";
group.querySelectorAll(".bar-fill").forEach(function (bar, i) {
var pct = Math.max(0, Math.min(100, parseFloat(bar.getAttribute("data-fill")) || 0));
setTimeout(
function () {
bar.style.width = pct + "%";
},
prefersReduced ? 0 : i * 110
);
});
}
if ("IntersectionObserver" in window) {
var io = new IntersectionObserver(
function (entries) {
entries.forEach(function (entry) {
if (!entry.isIntersecting) return;
var el = entry.target;
if (el.classList.contains("count")) animateCount(el);
else if (el.hasAttribute("data-bars")) fillBars(el);
io.unobserve(el);
});
},
{ threshold: 0.35 }
);
counts.forEach(function (c) {
io.observe(c);
});
barGroups.forEach(function (g) {
io.observe(g);
});
} else {
counts.forEach(animateCount);
barGroups.forEach(fillBars);
}
/* ============================================================
CODE TABS
============================================================ */
var tabs = Array.prototype.slice.call(document.querySelectorAll(".code-tab"));
var panels = Array.prototype.slice.call(document.querySelectorAll(".code-panel"));
function activateTab(tab) {
var name = tab.getAttribute("data-tab");
tabs.forEach(function (t) {
var on = t === tab;
t.classList.toggle("is-active", on);
t.setAttribute("aria-selected", on ? "true" : "false");
t.setAttribute("tabindex", on ? "0" : "-1");
});
panels.forEach(function (p) {
var on = p.getAttribute("data-panel") === name;
p.classList.toggle("is-active", on);
if (on) p.removeAttribute("hidden");
else p.setAttribute("hidden", "");
});
}
tabs.forEach(function (tab, idx) {
tab.addEventListener("click", function () {
activateTab(tab);
});
// roving-tabindex keyboard nav
tab.addEventListener("keydown", function (e) {
var dir = 0;
if (e.key === "ArrowRight") dir = 1;
else if (e.key === "ArrowLeft") dir = -1;
else return;
e.preventDefault();
var next = (idx + dir + tabs.length) % tabs.length;
tabs[next].focus();
activateTab(tabs[next]);
});
});
/* ============================================================
COPY-TO-CLIPBOARD (active code panel)
============================================================ */
var copyBtn = document.getElementById("copyBtn");
if (copyBtn) {
copyBtn.addEventListener("click", function () {
var active = document.querySelector(".code-panel.is-active code");
var text = active ? active.innerText : "";
var done = function () {
copyBtn.classList.add("is-copied");
copyBtn.textContent = "Copied ✓";
toast("Snippet copied to clipboard");
setTimeout(function () {
copyBtn.classList.remove("is-copied");
copyBtn.textContent = "Copy";
}, 1800);
};
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(text).then(done, fallbackCopy);
} else {
fallbackCopy();
}
function fallbackCopy() {
try {
var ta = document.createElement("textarea");
ta.value = text;
ta.setAttribute("readonly", "");
ta.style.position = "absolute";
ta.style.left = "-9999px";
document.body.appendChild(ta);
ta.select();
document.execCommand("copy");
document.body.removeChild(ta);
done();
} catch (err) {
toast("Copy not supported in this browser");
}
}
});
}
/* ============================================================
MOBILE MENU
============================================================ */
var burger = document.getElementById("navBurger");
var mobileMenu = document.getElementById("mobileMenu");
if (burger && mobileMenu) {
burger.addEventListener("click", function () {
var open = mobileMenu.classList.toggle("is-open");
mobileMenu.hidden = !open;
burger.setAttribute("aria-expanded", open ? "true" : "false");
});
mobileMenu.querySelectorAll("a").forEach(function (a) {
a.addEventListener("click", function () {
mobileMenu.classList.remove("is-open");
mobileMenu.hidden = true;
burger.setAttribute("aria-expanded", "false");
});
});
}
/* ============================================================
LIVE BLOCK HEIGHT (simulated)
============================================================ */
var liveBlock = document.getElementById("liveBlock");
if (liveBlock) {
var height = 19482006;
var render = function () {
liveBlock.textContent = "#" + height.toLocaleString("en-US");
};
render();
if (!prefersReduced) {
setInterval(function () {
height += Math.floor(Math.random() * 3) + 1;
render();
}, 1600);
}
}
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Lumen Chain — The chain built for a billion users</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- ====== NAV ====== -->
<header class="nav" id="top">
<div class="nav-inner">
<a class="brand" href="#top" aria-label="Lumen Chain home">
<span class="brand-mark" aria-hidden="true"></span>
<span class="brand-name">Lumen<em>Chain</em></span>
</a>
<nav class="nav-links" aria-label="Primary">
<a href="#performance">Network</a>
<a href="#architecture">Architecture</a>
<a href="#ecosystem">Ecosystem</a>
<a href="#build">Build</a>
<a href="#validators">Validators</a>
</nav>
<div class="nav-actions">
<a class="btn btn-ghost" href="#build">Read Docs</a>
<a class="btn btn-primary" href="#build">Start Building</a>
</div>
<button class="nav-burger" id="navBurger" aria-expanded="false" aria-controls="mobileMenu" aria-label="Toggle menu">
<span></span><span></span><span></span>
</button>
</div>
<div class="mobile-menu" id="mobileMenu" hidden>
<a href="#performance">Network</a>
<a href="#architecture">Architecture</a>
<a href="#ecosystem">Ecosystem</a>
<a href="#build">Build</a>
<a href="#validators">Validators</a>
<a class="btn btn-primary mobile-cta" href="#build">Start Building</a>
</div>
</header>
<!-- ====== HERO ====== -->
<section class="hero">
<canvas id="starfield" aria-hidden="true"></canvas>
<div class="hero-grid" aria-hidden="true"></div>
<div class="hero-inner">
<div class="hero-badge">
<span class="pulse-dot" aria-hidden="true"></span>
Mainnet Epoch 412 · Photon upgrade live
</div>
<h1 class="hero-title">
The chain built for<br /><span class="grad-text">a billion users.</span>
</h1>
<p class="hero-sub">
Lumen is a modular L1 with native L2 rollup lanes — parallel execution,
sub-second finality, and fees that round to zero. Credibly neutral.
Relentlessly fast.
</p>
<div class="hero-ctas">
<a class="btn btn-primary btn-lg" href="#build">Start Building</a>
<a class="btn btn-ghost btn-lg" href="#architecture">Read Docs <span aria-hidden="true">→</span></a>
</div>
<dl class="metrics" id="metrics">
<div class="metric">
<dt>Throughput</dt>
<dd><span class="count" data-count="128400" data-format="compact">0</span><span class="metric-unit">TPS</span></dd>
</div>
<div class="metric">
<dt>Finality</dt>
<dd><span class="count" data-count="380" data-format="int">0</span><span class="metric-unit">ms</span></dd>
</div>
<div class="metric">
<dt>Median fee</dt>
<dd><span class="metric-unit metric-unit-pre">$</span><span class="count" data-count="0.0004" data-decimals="4" data-format="fixed">0.0000</span></dd>
</div>
<div class="metric">
<dt>Validators</dt>
<dd><span class="count" data-count="2418" data-format="int">0</span><span class="metric-unit">nodes</span></dd>
</div>
</dl>
</div>
</section>
<!-- ====== PERFORMANCE COMPARISON ====== -->
<section class="section" id="performance">
<div class="section-head">
<p class="kicker">Network performance</p>
<h2>Benchmarks that aren't theoretical.</h2>
<p class="section-sub">Sustained mainnet figures over the last 30 epochs — not lab numbers. Compared against other fictional production networks.</p>
</div>
<div class="compare-grid">
<article class="compare-card glass">
<h3>Throughput <span class="compare-meta">transactions / second</span></h3>
<div class="bars" data-bars>
<div class="bar-row is-self">
<span class="bar-label">Lumen</span>
<div class="bar-track"><div class="bar-fill" data-fill="100"></div></div>
<span class="bar-value mono">128,400</span>
</div>
<div class="bar-row">
<span class="bar-label">Solanis</span>
<div class="bar-track"><div class="bar-fill" data-fill="48"></div></div>
<span class="bar-value mono">61,200</span>
</div>
<div class="bar-row">
<span class="bar-label">Polyverse</span>
<div class="bar-track"><div class="bar-fill" data-fill="11"></div></div>
<span class="bar-value mono">14,000</span>
</div>
<div class="bar-row">
<span class="bar-label">Etherea</span>
<div class="bar-track"><div class="bar-fill" data-fill="2"></div></div>
<span class="bar-value mono">2,300</span>
</div>
</div>
</article>
<article class="compare-card glass">
<h3>Time to finality <span class="compare-meta">lower is better</span></h3>
<div class="bars" data-bars>
<div class="bar-row is-self">
<span class="bar-label">Lumen</span>
<div class="bar-track"><div class="bar-fill" data-fill="4"></div></div>
<span class="bar-value mono">0.38s</span>
</div>
<div class="bar-row">
<span class="bar-label">Solanis</span>
<div class="bar-track"><div class="bar-fill" data-fill="14"></div></div>
<span class="bar-value mono">1.9s</span>
</div>
<div class="bar-row">
<span class="bar-label">Polyverse</span>
<div class="bar-track"><div class="bar-fill" data-fill="42"></div></div>
<span class="bar-value mono">5.6s</span>
</div>
<div class="bar-row">
<span class="bar-label">Etherea</span>
<div class="bar-track"><div class="bar-fill" data-fill="100"></div></div>
<span class="bar-value mono">12.8s</span>
</div>
</div>
</article>
<article class="compare-card glass">
<h3>Median transaction fee <span class="compare-meta">lower is better</span></h3>
<div class="bars" data-bars>
<div class="bar-row is-self">
<span class="bar-label">Lumen</span>
<div class="bar-track"><div class="bar-fill" data-fill="3"></div></div>
<span class="bar-value mono">$0.0004</span>
</div>
<div class="bar-row">
<span class="bar-label">Solanis</span>
<div class="bar-track"><div class="bar-fill" data-fill="9"></div></div>
<span class="bar-value mono">$0.0011</span>
</div>
<div class="bar-row">
<span class="bar-label">Polyverse</span>
<div class="bar-track"><div class="bar-fill" data-fill="26"></div></div>
<span class="bar-value mono">$0.0320</span>
</div>
<div class="bar-row">
<span class="bar-label">Etherea</span>
<div class="bar-track"><div class="bar-fill" data-fill="100"></div></div>
<span class="bar-value mono">$1.4200</span>
</div>
</div>
</article>
</div>
</section>
<!-- ====== ARCHITECTURE ====== -->
<section class="section" id="architecture">
<div class="section-head">
<p class="kicker">Architecture</p>
<h2>Modular by design. Monolithic in speed.</h2>
<p class="section-sub">Four layers, one pipeline. Rollup lanes inherit L1 security while executing in parallel.</p>
</div>
<div class="arch glass">
<div class="arch-row arch-lanes">
<div class="arch-node node-lane">
<span class="node-tag">L2 Lane</span>
<strong>Payments Lane</strong>
<span class="node-meta mono">42k TPS</span>
</div>
<div class="arch-node node-lane">
<span class="node-tag">L2 Lane</span>
<strong>DeFi Lane</strong>
<span class="node-meta mono">38k TPS</span>
</div>
<div class="arch-node node-lane">
<span class="node-tag">L2 Lane</span>
<strong>Gaming Lane</strong>
<span class="node-meta mono">48k TPS</span>
</div>
</div>
<div class="arch-links" aria-hidden="true">
<span class="link-beam"></span>
<span class="link-beam"></span>
<span class="link-beam"></span>
</div>
<div class="arch-row">
<div class="arch-node node-core">
<span class="node-tag">Execution</span>
<strong>Photon VM</strong>
<span class="node-meta">Parallel EVM-compatible runtime with optimistic concurrency control.</span>
</div>
<div class="arch-node node-core">
<span class="node-tag">Consensus</span>
<strong>Helios BFT</strong>
<span class="node-meta">Pipelined HotStuff variant — single-slot, 380 ms deterministic finality.</span>
</div>
</div>
<div class="arch-links arch-links-2" aria-hidden="true">
<span class="link-beam"></span>
<span class="link-beam"></span>
</div>
<div class="arch-row">
<div class="arch-node node-base">
<span class="node-tag">Data availability</span>
<strong>Prism DA</strong>
<span class="node-meta">2D erasure-coded sampling, 32 MB blobs per slot.</span>
</div>
<div class="arch-node node-base">
<span class="node-tag">Settlement</span>
<strong>Anchor Layer</strong>
<span class="node-meta">ZK validity proofs settle every lane back to L1 each epoch.</span>
</div>
</div>
</div>
</section>
<!-- ====== ECOSYSTEM ====== -->
<section class="section" id="ecosystem">
<div class="section-head">
<p class="kicker">Ecosystem</p>
<h2>340+ teams shipping on Lumen.</h2>
<p class="section-sub">From perp DEXs to fully on-chain games — all of it fictional, all of it fast.</p>
</div>
<div class="eco-grid">
<a class="eco-card glass" href="#ecosystem">
<span class="eco-logo" style="--logo:#5b8cff">Nx</span>
<strong>NovaSwap</strong>
<span class="eco-tag">DeFi · DEX</span>
<span class="eco-stat mono">$412M TVL</span>
</a>
<a class="eco-card glass" href="#ecosystem">
<span class="eco-logo" style="--logo:#00ffa3">Or</span>
<strong>Orbital Perps</strong>
<span class="eco-tag">DeFi · Perpetuals</span>
<span class="eco-stat mono">$1.2B vol/30d</span>
</a>
<a class="eco-card glass" href="#ecosystem">
<span class="eco-logo" style="--logo:#ffb347">Sg</span>
<strong>Stargaze ID</strong>
<span class="eco-tag">Identity</span>
<span class="eco-stat mono">2.1M names</span>
</a>
<a class="eco-card glass" href="#ecosystem">
<span class="eco-logo" style="--logo:#ff4d6d">Vd</span>
<strong>Voidrunners</strong>
<span class="eco-tag">Gaming · On-chain</span>
<span class="eco-stat mono">184k MAU</span>
</a>
<a class="eco-card glass" href="#ecosystem">
<span class="eco-logo" style="--logo:#9b6bff">Lm</span>
<strong>Lumens Pay</strong>
<span class="eco-tag">Payments</span>
<span class="eco-stat mono">6.4M tx/day</span>
</a>
<a class="eco-card glass" href="#ecosystem">
<span class="eco-logo" style="--logo:#37c8f0">Hy</span>
<strong>Hyperlend</strong>
<span class="eco-tag">DeFi · Lending</span>
<span class="eco-stat mono">$268M supplied</span>
</a>
<a class="eco-card glass" href="#ecosystem">
<span class="eco-logo" style="--logo:#26d07c">Qd</span>
<strong>Quasar Data</strong>
<span class="eco-tag">Infra · Oracles</span>
<span class="eco-stat mono">912 feeds</span>
</a>
<a class="eco-card glass" href="#ecosystem">
<span class="eco-logo" style="--logo:#f06bd6">Au</span>
<strong>Aurora Mint</strong>
<span class="eco-tag">NFT · Marketplace</span>
<span class="eco-stat mono">38k LMN vol</span>
</a>
</div>
</section>
<!-- ====== BUILD / DEV BAND ====== -->
<section class="section" id="build">
<div class="dev-band glass">
<div class="dev-copy">
<p class="kicker">Start building</p>
<h2>Ship your first transaction<br />in under five minutes.</h2>
<p class="section-sub">One SDK, every lane. Deploy with the toolchain you already know — TypeScript, Rust, or straight from the CLI.</p>
<ul class="dev-points">
<li>EVM-compatible — bring your Solidity contracts as-is</li>
<li>Localnet with instant blocks: <code class="mono">lumen dev --fast</code></li>
<li>Faucet, explorer & indexer APIs on testnet <span class="mono">aurora-1</span></li>
</ul>
<div class="hero-ctas">
<a class="btn btn-primary" href="#build">Open Docs</a>
<a class="btn btn-ghost" href="#build">Grant Program</a>
</div>
</div>
<div class="code-card">
<div class="code-tabs" role="tablist" aria-label="Code examples">
<button class="code-tab is-active" role="tab" aria-selected="true" id="tab-js" aria-controls="panel-js" data-tab="js">TypeScript</button>
<button class="code-tab" role="tab" aria-selected="false" tabindex="-1" id="tab-rust" aria-controls="panel-rust" data-tab="rust">Rust</button>
<button class="code-tab" role="tab" aria-selected="false" tabindex="-1" id="tab-cli" aria-controls="panel-cli" data-tab="cli">CLI</button>
<button class="copy-btn" id="copyBtn" type="button" aria-label="Copy code to clipboard">Copy</button>
</div>
<pre class="code-panel is-active mono" role="tabpanel" id="panel-js" aria-labelledby="tab-js" data-panel="js" tabindex="0"><code><span class="tk-kw">import</span> { LumenClient } <span class="tk-kw">from</span> <span class="tk-str">"@lumen/sdk"</span>;
<span class="tk-kw">const</span> client = <span class="tk-kw">new</span> <span class="tk-fn">LumenClient</span>({ lane: <span class="tk-str">"payments"</span> });
<span class="tk-kw">const</span> tx = <span class="tk-kw">await</span> client.<span class="tk-fn">transfer</span>({
to: <span class="tk-str">"0x7a3f…c41d"</span>,
amount: <span class="tk-num">12.5</span>, <span class="tk-cm">// LMN</span>
memo: <span class="tk-str">"gm"</span>,
});
console.<span class="tk-fn">log</span>(tx.hash); <span class="tk-cm">// finalized in ~380ms</span></code></pre>
<pre class="code-panel mono" role="tabpanel" id="panel-rust" aria-labelledby="tab-rust" data-panel="rust" tabindex="0" hidden><code><span class="tk-kw">use</span> lumen_sdk::{Client, Lane};
<span class="tk-cm">#[tokio::main]</span>
<span class="tk-kw">async fn</span> <span class="tk-fn">main</span>() -> anyhow::Result<()> {
<span class="tk-kw">let</span> client = Client::<span class="tk-fn">new</span>(Lane::Payments).<span class="tk-kw">await</span>?;
<span class="tk-kw">let</span> tx = client
.<span class="tk-fn">transfer</span>(<span class="tk-str">"0x7a3f…c41d"</span>, <span class="tk-num">12.5</span>)
.<span class="tk-fn">memo</span>(<span class="tk-str">"gm"</span>)
.<span class="tk-fn">send</span>()
.<span class="tk-kw">await</span>?;
<span class="tk-fn">println!</span>(<span class="tk-str">"finalized: {}"</span>, tx.hash);
<span class="tk-fn">Ok</span>(())
}</code></pre>
<pre class="code-panel mono" role="tabpanel" id="panel-cli" aria-labelledby="tab-cli" data-panel="cli" tabindex="0" hidden><code><span class="tk-cm"># install the toolchain</span>
<span class="tk-fn">curl</span> -sSf https://get.lumen.example | sh
<span class="tk-cm"># spin up a localnet with instant blocks</span>
<span class="tk-fn">lumen</span> dev --fast
<span class="tk-cm"># send 12.5 LMN on the payments lane</span>
<span class="tk-fn">lumen</span> tx transfer <span class="tk-str">0x7a3f…c41d</span> <span class="tk-num">12.5</span> \
--lane payments --memo <span class="tk-str">"gm"</span></code></pre>
</div>
</div>
</section>
<!-- ====== VALIDATORS ====== -->
<section class="section" id="validators">
<div class="section-head">
<p class="kicker">Decentralization</p>
<h2>Secured by 2,418 independent validators.</h2>
<p class="section-sub">Across 61 countries and 9 client implementations. No single entity controls more than 1.8% of stake.</p>
</div>
<div class="val-grid">
<div class="val-stats glass">
<div class="val-stat">
<span class="val-num mono"><span class="count" data-count="2418" data-format="int">0</span></span>
<span class="val-label">Active validators</span>
</div>
<div class="val-stat">
<span class="val-num mono"><span class="count" data-count="61" data-format="int">0</span></span>
<span class="val-label">Countries</span>
</div>
<div class="val-stat">
<span class="val-num mono"><span class="count" data-count="412" data-format="compact">0</span>M</span>
<span class="val-label">LMN staked</span>
</div>
<div class="val-stat">
<span class="val-num mono"><span class="count" data-count="6.2" data-decimals="1" data-format="fixed">0</span>%</span>
<span class="val-label">Staking APR</span>
</div>
</div>
<div class="val-table glass" role="table" aria-label="Top validators">
<div class="val-row val-head" role="row">
<span role="columnheader">Validator</span>
<span role="columnheader">Address</span>
<span role="columnheader" class="val-right">Stake</span>
<span role="columnheader" class="val-right">Uptime</span>
</div>
<div class="val-row" role="row">
<span role="cell"><i class="val-dot" style="--c:#5b8cff"></i>Polaris Node Co.</span>
<span role="cell" class="mono muted">0x9d2e…77af</span>
<span role="cell" class="mono val-right">1.8%</span>
<span role="cell" class="mono val-right pos">99.99%</span>
</div>
<div class="val-row" role="row">
<span role="cell"><i class="val-dot" style="--c:#00ffa3"></i>Eventide Labs</span>
<span role="cell" class="mono muted">0x41bc…09e2</span>
<span role="cell" class="mono val-right">1.6%</span>
<span role="cell" class="mono val-right pos">99.98%</span>
</div>
<div class="val-row" role="row">
<span role="cell"><i class="val-dot" style="--c:#ffb347"></i>Meridian Stake</span>
<span role="cell" class="mono muted">0xf30a…b85c</span>
<span role="cell" class="mono val-right">1.4%</span>
<span role="cell" class="mono val-right pos">99.97%</span>
</div>
<div class="val-row" role="row">
<span role="cell"><i class="val-dot" style="--c:#f06bd6"></i>Cosmonaut DAO</span>
<span role="cell" class="mono muted">0x6c91…d4f7</span>
<span role="cell" class="mono val-right">1.2%</span>
<span role="cell" class="mono val-right warn">99.84%</span>
</div>
<div class="val-row" role="row">
<span role="cell"><i class="val-dot" style="--c:#37c8f0"></i>2,414 more…</span>
<span role="cell" class="mono muted">—</span>
<span role="cell" class="mono val-right">94.0%</span>
<span role="cell" class="mono val-right pos">99.95%</span>
</div>
</div>
</div>
</section>
<!-- ====== FOOTER ====== -->
<footer class="footer">
<div class="footer-inner">
<div class="footer-brand">
<a class="brand" href="#top">
<span class="brand-mark" aria-hidden="true"></span>
<span class="brand-name">Lumen<em>Chain</em></span>
</a>
<p class="muted">A fictional modular L1/L2 network.<br />Built for demos, not for mainnet.</p>
<p class="mono footer-hash muted">genesis 0x0000…1m3n</p>
</div>
<nav class="footer-cols" aria-label="Footer">
<div>
<h4>Network</h4>
<a href="#performance">Status</a>
<a href="#performance">Explorer</a>
<a href="#validators">Staking</a>
</div>
<div>
<h4>Developers</h4>
<a href="#build">Docs</a>
<a href="#build">SDK</a>
<a href="#build">Faucet</a>
</div>
<div>
<h4>Community</h4>
<a href="#ecosystem">Forum</a>
<a href="#ecosystem">Grants</a>
<a href="#ecosystem">Governance</a>
</div>
</nav>
</div>
<p class="footer-fine muted">© 2026 Lumen Foundation (fictional). UI-only simulation — no real wallet, RPC, or on-chain calls.</p>
</footer>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>L1 / L2 Blockchain Landing
A vast, deep-space marketing page for Lumen Chain, a fictional modular L1 with native L2 rollup lanes. The hero pairs a canvas-rendered starfield and a masked grid with a visionary headline — “the chain built for a billion users” — Start Building / Read Docs CTAs, and a row of headline metrics (throughput, finality, median fee, validators) that count up with an ease-out animation when they scroll into view.
Below the fold the page tells a credible technical story: three performance-comparison cards whose bars fill on scroll versus rival fictional networks, a CSS architecture diagram of L2 lanes feeding a Photon VM / Helios BFT core with animated glowing connection beams, an ecosystem grid of dApps with neon gradient logos, and a “start building” developer band whose code card switches between TypeScript, Rust, and CLI tabs with copy-to-clipboard. A validators band reinforces decentralization with count-up stats and a top-validator table using monospace addresses (0x9d2e…77af).
Everything is vanilla JS with no libraries: an animated starfield, count-up metrics and comparison bars driven by IntersectionObserver, a roving-tabindex tab switcher, clipboard copy with a graceful fallback, a mobile menu, and a small toast() helper. The layout is responsive down to ~360px and respects prefers-reduced-motion.
UI-only simulation — no real wallet, RPC, or on-chain calls. Mock data, fictional tokens.