All Prompts
All Prompts
featuresectiontailwinddashboardanimatedinteractivetelemetry
Animated Telemetry Dashboard Section
Анимированная секция дашборда телеметрии: радар, индикаторы, логи, прогресс-бар. UI на Tailwind CSS для страниц мониторинга.
Prompt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Telemetry Section</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<style>
/* =========================================================
KEY IDEA (fix)
Your progress animations were "finishing" before the user
scrolls into the section, so they look static.
Solution: pause/reset everything until #telemetry is in view,
then start animations by adding .telemetry-in to the section.
========================================================= */
/* ---------- optional: your panels (keep if you already have them elsewhere) ---------- */
.cmd-panel {
background: linear-gradient(180deg, rgba(18, 18, 20, 0.92), rgba(10, 10, 12, 0.92));
border: 1px solid rgba(63, 63, 70, 0.55);
border-radius: 18px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
inset 0 -20px 40px rgba(0, 0, 0, 0.45),
0 18px 40px rgba(0, 0, 0, 0.45);
overflow: hidden;
transform-style: preserve-3d;
}
.cmd-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
background: linear-gradient(180deg, rgba(24, 24, 27, 0.9), rgba(10, 10, 12, 0.6));
border-bottom: 1px solid rgba(63, 63, 70, 0.5);
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}
.cmd-panel-body {
padding: 16px;
position: relative;
flex: 1;
}
.tactile-glass {
background: linear-gradient(180deg, rgba(24, 24, 27, 0.75), rgba(10, 10, 12, 0.55));
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* =========================================================
1) GREEN "PROGRESS" (Radar sweep) — animate on entry
========================================================= */
.radar-sweep {
opacity: 0;
border-radius: 999px;
background:
conic-gradient(from 0deg,
rgba(16, 185, 129, 0.00),
rgba(16, 185, 129, 0.00) 52%,
rgba(16, 185, 129, 0.22) 62%,
rgba(16, 185, 129, 0.00) 72%,
rgba(16, 185, 129, 0.00));
/* cut it into a ring */
-webkit-mask: radial-gradient(circle, transparent 0 55%, #000 58% 100%);
mask: radial-gradient(circle, transparent 0 55%, #000 58% 100%);
will-change: transform, opacity;
}
@keyframes radar-rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* only animate when section is in view */
#telemetry.telemetry-in .radar-sweep {
opacity: 1;
animation: radar-rotate 2.8s linear infinite;
}
/* =========================================================
2) PURPLE PROGRESS BAR (Deployment Tasks) — animate on entry
- This is the one that often looks "not animating" because
it already finished before you reached the section.
========================================================= */
@keyframes pb-deploy {
0% {
width: 0%;
}
100% {
width: var(--pb, 80%);
}
}
@keyframes pb-sweep {
0% {
left: -50%;
}
100% {
left: 150%;
}
}
/* reset state (so it looks like it will animate) */
.pb-fill {
width: 0%;
}
.pb-sheen {
left: -50%;
}
/* start ONLY when in view */
#telemetry.telemetry-in .pb-fill {
animation: pb-deploy 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
#telemetry.telemetry-in .pb-sheen {
animation: pb-sweep 2s linear infinite;
}
/* =========================================================
3) "LINE PROGRESS BAR" (Quantum Relay Uplink) — animate on entry
========================================================= */
@keyframes signal-flow {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
@keyframes sweep-block {
0% {
left: 5%;
right: 80%;
}
25% {
box-shadow: inset 0 0 20px rgba(99, 102, 241, 0.5);
}
50% {
left: 45%;
right: 45%;
box-shadow: inset 0 0 30px rgba(129, 140, 248, 0.8);
background-color: rgba(99, 102, 241, 0.3);
border-color: rgba(129, 140, 248, 1);
}
75% {
box-shadow: inset 0 0 20px rgba(99, 102, 241, 0.5);
}
100% {
left: 80%;
right: 5%;
}
}
/* pause/reset until in-view */
.signal-texture {
background: repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(99, 102, 241, 0.2) 10px, rgba(99, 102, 241, 0.2) 20px);
background-size: 200% 100%;
background-position: 200% 0;
}
.sweep-block {
left: 5%;
right: 80%;
}
#telemetry.telemetry-in .signal-texture {
animation: signal-flow 20s linear infinite;
}
#telemetry.telemetry-in .sweep-block {
animation: sweep-block 4s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}
/* =========================================================
Keep your existing ones (these already animate)
========================================================= */
@keyframes thermal-fluctuation {
0%,
100% {
stroke-dashoffset: 110;
}
50% {
stroke-dashoffset: 60;
}
}
@keyframes aura-compute-bar-1 {
0%,
100% {
height: 4rem;
}
33% {
height: 5.5rem;
}
66% {
height: 2.5rem;
}
}
@keyframes aura-compute-bar-2 {
0%,
100% {
height: 6rem;
}
33% {
height: 4.5rem;
}
66% {
height: 7rem;
}
}
@keyframes aura-compute-bar-3 {
0%,
100% {
height: 3.5rem;
}
33% {
height: 4.5rem;
}
66% {
height: 2rem;
}
}
@media (prefers-reduced-motion: reduce) {
#telemetry * {
animation: none !important;
transition: none !important;
}
.pb-fill {
width: var(--pb, 80%) !important;
}
.radar-sweep {
opacity: 1 !important;
}
}
</style>
</head>
<body class="bg-[#09090b] text-zinc-200">
<section class="sm:py-32 z-10 bg-[#09090b] border-zinc-900 border-b pt-24 pb-24 relative" id="telemetry">
<div
class="z-0 opacity-50 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMSIgY3k9IjEiIHI9IjEiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4wMikiLz48L3N2Zz4=')] absolute top-0 right-0 bottom-0 left-0">
</div>
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 relative z-10">
<div class="mb-16 scroll-animate">
<h2 class="text-3xl font-normal tracking-tight text-zinc-100 flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="terminal-square" aria-hidden="true"
class="lucide lucide-terminal-square w-6 h-6 text-zinc-500">
<path d="m7 11 2-2-2-2"></path>
<path d="M11 13h4"></path>
<rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect>
</svg>
Live Telemetry Operations
</h2>
<p class="mt-4 text-base text-zinc-400 max-w-2xl">
Real-time surveillance and hardware orchestration. Command your
active clusters directly through secure terminal endpoints.
</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6 scroll-animate tilt-wrapper gap-x-6 gap-y-6">
<!-- Area Scan Widget -->
<div class="tilt-element cmd-panel lg:col-span-1 h-[280px]">
<div class="cmd-panel-header">
<div class="flex flex-col gap-1">
<span class="text-xs text-emerald-500 font-mono uppercase tracking-widest">
Zone Alpha
</span>
<span class="text-base font-normal text-zinc-300">
Node Scan
</span>
</div>
<div
class="flex items-center gap-1.5 px-2 py-1 rounded border border-emerald-900/30 bg-emerald-950/20 shadow-inner">
<div class="w-1.5 h-1.5 rounded-full bg-emerald-500 shadow-[0_0_8px_#10b981] animate-pulse"></div>
<span class="text-xs text-emerald-400 uppercase tracking-widest font-mono">
Active
</span>
</div>
</div>
<div class="cmd-panel-body flex flex-col items-center justify-center relative">
<div class="w-32 h-32 rounded-full border border-zinc-800 relative flex items-center justify-center">
<div class="absolute inset-2 rounded-full border border-zinc-800/50"></div>
<div class="absolute inset-0 rounded-full border border-emerald-500/10"></div>
<div class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-20">
<div class="w-full h-px bg-emerald-500"></div>
<div class="h-full w-px bg-emerald-500 absolute"></div>
</div>
<!-- GREEN "progress" sweep (now starts on scroll) -->
<div class="absolute inset-0 rounded-full radar-sweep"></div>
</div>
<div class="w-full flex justify-between items-end absolute bottom-4 px-4">
<span class="text-xs text-emerald-500 font-mono tracking-widest">
LOC: 44.2, -11.4
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="crosshair" aria-hidden="true" class="lucide lucide-crosshair w-4 h-4 text-emerald-500">
<circle cx="12" cy="12" r="10"></circle>
<line x1="22" x2="18" y1="12" y2="12"></line>
<line x1="6" x2="2" y1="12" y2="12"></line>
<line x1="12" x2="12" y1="6" y2="2"></line>
<line x1="12" x2="12" y1="22" y2="18"></line>
</svg>
</div>
</div>
</div>
<!-- Heat Signature Widget -->
<div class="tilt-element cmd-panel lg:col-span-1 h-[280px]">
<div class="cmd-panel-header">
<span class="text-xs text-zinc-500 font-mono uppercase tracking-widest">
Thermal Core
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="more-horizontal" aria-hidden="true"
class="lucide lucide-more-horizontal w-4 h-4 text-zinc-600">
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</div>
<div class="cmd-panel-body flex flex-col items-center justify-center relative">
<div class="relative w-36 h-36 flex items-center justify-center">
<svg class="w-full h-full transform -rotate-90">
<circle cx="72" cy="72" r="60" fill="transparent" stroke="#18181b" stroke-width="10"></circle>
<circle cx="72" cy="72" r="60" fill="transparent" stroke="#f97316" stroke-width="10"
stroke-dasharray="377" class="drop-shadow-[0_0_12px_rgba(249,115,22,0.5)]" stroke-linecap="round"
style="animation: thermal-fluctuation 4s ease-in-out infinite; stroke-dashoffset: 90;"></circle>
</svg>
<div class="absolute flex flex-col items-center">
<span class="text-3xl font-normal text-orange-400 tracking-tight drop-shadow-[0_0_8px_rgba(249,115,22,0.4)] animate-[pulse_4s_ease-in-out_infinite]">
3240
</span>
<span class="text-xs text-orange-600 font-mono tracking-widest mt-1">
KELVIN
</span>
</div>
</div>
<div class="w-full flex justify-between items-end absolute bottom-4 px-4">
<div class="px-2 py-1 rounded bg-zinc-800/50 border border-zinc-700 shadow-inner">
<span class="text-xs text-zinc-400 font-mono tracking-widest uppercase">
Normal
</span>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="refresh-cw" aria-hidden="true"
class="lucide lucide-refresh-cw w-4 h-4 text-zinc-500 hover:text-zinc-300 transition-colors cursor-pointer">
<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path>
<path d="M21 3v5h-5"></path>
<path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path>
<path d="M8 16H3v5"></path>
</svg>
</div>
</div>
</div>
<!-- System Logs Widget -->
<div class="tilt-element cmd-panel lg:col-span-2 h-[280px]">
<div class="cmd-panel-header">
<span class="text-lg font-normal text-zinc-300">System Logs</span>
<div class="flex items-center gap-1 bg-[#0a0a0c] p-1 rounded-lg border border-zinc-800 shadow-inner">
<button class="px-3 py-1 text-xs font-normal text-zinc-100 bg-[#1e1e24] rounded border border-zinc-700 shadow-sm">
Global
</button>
<button class="px-3 py-1 text-xs font-normal text-zinc-500 hover:text-zinc-300 transition-colors">
Alerts
</button>
<button class="px-3 py-1 text-xs font-normal text-zinc-500 hover:text-zinc-300 transition-colors">
Routine
</button>
</div>
</div>
<div class="p-0 flex flex-col flex-1 relative overflow-hidden">
<div class="grid grid-cols-[auto_1fr_2fr_1fr_1fr] gap-4 px-4 py-3 border-b border-zinc-800/50 bg-[#121214]">
<span class="text-xs text-zinc-600 font-mono tracking-widest uppercase w-6">CHK</span>
<span class="text-xs text-zinc-600 font-mono tracking-widest uppercase">REF</span>
<span class="text-xs text-zinc-600 font-mono tracking-widest uppercase">OPERATION</span>
<span class="text-xs text-zinc-600 font-mono tracking-widest uppercase">STATE</span>
<span class="text-xs text-zinc-600 font-mono tracking-widest uppercase text-right">TIMESTAMP</span>
</div>
<div class="flex flex-col">
<div
class="grid grid-cols-[auto_1fr_2fr_1fr_1fr] gap-4 px-4 py-3 items-center border-b border-zinc-800/30 hover:bg-zinc-800/20 transition-colors">
<div class="w-4 h-4 rounded bg-indigo-500 flex items-center justify-center shadow-inner">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="check" aria-hidden="true" class="lucide lucide-check w-3 h-3 text-white">
<path d="M20 6 9 17l-5-5"></path>
</svg>
</div>
<span class="text-xs text-zinc-400 font-mono">EVT-12C</span>
<span class="text-sm text-zinc-300 truncate">Sync core frequency</span>
<div>
<span class="text-xs text-emerald-500 px-2 py-0.5 rounded border border-emerald-900/50 bg-emerald-950/20">
STABLE
</span>
</div>
<span class="text-xs text-zinc-500 font-mono text-right">10:14:22.01</span>
</div>
<div
class="grid grid-cols-[auto_1fr_2fr_1fr_1fr] gap-4 px-4 py-3 items-center border-b border-orange-900/30 bg-orange-950/10 border-l-2 border-l-orange-500 relative">
<div class="absolute inset-0 bg-gradient-to-r from-orange-500/5 to-transparent pointer-events-none">
</div>
<div
class="w-4 h-4 rounded bg-orange-500/20 border border-orange-500/50 flex items-center justify-center relative z-10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="alert-triangle" aria-hidden="true"
class="lucide lucide-alert-triangle w-3 h-3 text-orange-500">
<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path>
<path d="M12 9v4"></path>
<path d="M12 17h.01"></path>
</svg>
</div>
<span class="text-xs text-orange-400 font-mono relative z-10">ERR-502</span>
<span class="text-sm text-orange-300 truncate relative z-10">Uplink packet loss</span>
<div class="relative z-10">
<span class="text-xs text-red-400 px-2 py-0.5 rounded border border-red-900/50 bg-red-950/30">
CRITICAL
</span>
</div>
<span class="text-xs text-orange-500/50 font-mono text-right relative z-10">10:12:05.18</span>
</div>
<div
class="grid grid-cols-[auto_1fr_2fr_1fr_1fr] gap-4 px-4 py-3 items-center border-b border-zinc-800/30 hover:bg-zinc-800/20 transition-colors">
<div
class="w-4 h-4 rounded bg-[#0a0a0c] border border-zinc-700 shadow-[inset_0_2px_4px_rgba(0,0,0,0.5)] cursor-pointer">
</div>
<span class="text-xs text-zinc-500 font-mono">EVT-08A</span>
<span class="text-sm text-zinc-500 truncate filter blur-[1px]">Background cache flush</span>
<div>
<span class="text-xs text-zinc-500 px-2 py-0.5 rounded border border-zinc-800 bg-zinc-900/50">
PENDING
</span>
</div>
<span class="text-xs text-zinc-600 font-mono text-right">09:45:00.62</span>
</div>
</div>
<div
class="absolute bottom-4 left-1/2 -translate-x-1/2 tactile-glass px-4 py-2 rounded-full border border-zinc-700 shadow-[0_10px_20px_rgba(0,0,0,0.5)] flex items-center gap-4 z-20">
<span class="text-xs text-indigo-400 font-normal">1 selected</span>
<div class="w-px h-4 bg-zinc-700"></div>
<button class="flex items-center gap-1.5 text-xs text-zinc-400 hover:text-zinc-200 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="edit-2" aria-hidden="true" class="lucide lucide-edit-2 w-3.5 h-3.5"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"></path></svg>
Edit
</button>
<button class="flex items-center gap-1.5 text-xs text-zinc-400 hover:text-red-400 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="trash-2" aria-hidden="true" class="lucide lucide-trash-2 w-3.5 h-3.5"><path d="M10 11v6"></path><path d="M14 11v6"></path><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path><path d="M3 6h18"></path><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
Drop
</button>
</div>
</div>
</div>
<!-- Objectives Widget -->
<div class="tilt-element cmd-panel lg:col-span-1 h-[280px]">
<div class="cmd-panel-header">
<span class="text-base font-normal text-zinc-300">Deployment Tasks</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="more-horizontal" aria-hidden="true"
class="lucide lucide-more-horizontal w-4 h-4 text-zinc-600">
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</div>
<div class="cmd-panel-body flex flex-col gap-4 gap-x-4 gap-y-4">
<div
class="bg-[#0a0a0c] rounded-xl p-4 border border-zinc-800 shadow-[inset_0_2px_10px_rgba(0,0,0,0.8)] flex flex-col gap-4 relative">
<p class="text-sm text-zinc-400 leading-relaxed">
Boot security modules<br>
Run diagnostic sweep on outer firewall layers.
</p>
<div class="flex flex-col gap-2">
<div class="flex justify-between items-end">
<span class="text-xs text-zinc-500 font-mono uppercase tracking-widest">Progress</span>
<span class="text-xs font-mono text-indigo-400">80%</span>
</div>
<!-- Progress bar (now triggers on scroll) -->
<div class="h-1.5 w-full bg-zinc-800 rounded-full overflow-hidden shadow-inner">
<div
class="pb-fill h-full bg-indigo-500 rounded-full shadow-[0_0_10px_#6366f1] relative overflow-hidden"
style="--pb:80%;">
<div
class="pb-sheen absolute top-0 bottom-0 w-[50%] bg-gradient-to-r from-transparent via-white/40 to-transparent">
</div>
<div class="absolute right-0 top-0 bottom-0 w-10 bg-gradient-to-r from-transparent to-white/30">
</div>
</div>
</div>
</div>
<div class="flex justify-between items-center mt-2">
<div class="flex items-center gap-1.5 text-zinc-500">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="clock" aria-hidden="true" class="lucide lucide-clock w-3.5 h-3.5">
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 6v6l4 2"></path>
</svg>
<span class="text-xs font-mono">4/5</span>
</div>
<div class="flex -space-x-2">
<div
class="w-6 h-6 rounded-full border border-zinc-700 bg-zinc-800 flex items-center justify-center text-xs text-zinc-400">
AJ</div>
<div
class="w-6 h-6 rounded-full border border-zinc-700 bg-zinc-800 flex items-center justify-center text-xs text-zinc-400">
MR</div>
</div>
</div>
</div>
<div class="mt-auto flex justify-between items-center px-1">
<span class="text-xs text-zinc-500 font-mono uppercase tracking-widest">2/4 Pending</span>
<label class="flex items-center gap-2 cursor-pointer">
<span class="text-xs text-zinc-400 font-normal">Bypass</span>
<div class="relative">
<input type="checkbox" class="sr-only">
<div class="w-8 h-4 rounded-full bg-[#0a0a0c] border border-zinc-800 shadow-[inset_0_2px_4px_rgba(0,0,0,0.8)] transition-colors"></div>
<div class="absolute left-1 top-1 w-2 h-2 rounded-full bg-zinc-500 transition-transform"></div>
</div>
</label>
</div>
</div>
</div>
<!-- Compute Usage Widget -->
<div class="tilt-element cmd-panel lg:col-span-1 h-[280px]">
<div class="cmd-panel-header">
<span class="text-base font-normal text-zinc-300">Compute Usage</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="more-horizontal" aria-hidden="true"
class="lucide lucide-more-horizontal w-4 h-4 text-zinc-600">
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</div>
<div class="cmd-panel-body flex flex-col">
<div
class="flex-1 bg-[#0a0a0c] rounded-xl border border-zinc-800 p-4 shadow-[inset_0_2px_10px_rgba(0,0,0,0.8)] relative flex items-end justify-center gap-4">
<div class="absolute inset-x-4 top-4 border-b border-dashed border-zinc-800"></div>
<div class="absolute inset-x-4 top-1/2 border-b border-dashed border-zinc-800"></div>
<div class="relative flex flex-col items-center w-12 z-10">
<div
class="w-full h-16 bg-gradient-to-t from-orange-600 to-orange-400 rounded-t shadow-[0_0_15px_rgba(249,115,22,0.3)]"
style="animation: aura-compute-bar-1 3.5s ease-in-out infinite;"></div>
<span class="text-xs text-zinc-500 font-mono mt-2 uppercase tracking-widest absolute -bottom-6">Node A</span>
</div>
<div class="relative flex flex-col items-center w-12 z-10">
<div
class="absolute -top-6 bg-zinc-800 border border-zinc-700 text-orange-400 text-xs font-mono px-1.5 py-0.5 rounded tracking-widest uppercase">
Max</div>
<div
class="w-full h-24 bg-gradient-to-t from-orange-500 to-orange-300 rounded-t shadow-[0_0_20px_rgba(249,115,22,0.5)]"
style="animation: aura-compute-bar-2 4.5s ease-in-out infinite;"></div>
<span class="text-xs text-zinc-500 font-mono mt-2 uppercase tracking-widest absolute -bottom-6">Node B</span>
</div>
<div class="relative flex flex-col items-center w-12 z-10">
<div
class="w-full h-14 bg-gradient-to-t from-orange-700 to-orange-500 rounded-t shadow-[0_0_10px_rgba(249,115,22,0.2)]"
style="animation: aura-compute-bar-3 3s ease-in-out infinite;"></div>
<span class="text-xs text-zinc-500 font-mono mt-2 uppercase tracking-widest absolute -bottom-6">Node C</span>
</div>
</div>
<div class="mt-8 grid grid-cols-3 gap-2 px-1">
<div class="flex flex-col">
<span class="text-xl font-normal text-zinc-200">240</span>
<span class="text-xs text-zinc-500 font-mono uppercase tracking-widest">Active</span>
</div>
<div class="flex flex-col">
<span class="text-xl font-normal text-orange-400 drop-shadow-[0_0_5px_rgba(249,115,22,0.5)]" style="animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;">
480
</span>
<span class="text-xs text-zinc-500 font-mono uppercase tracking-widest">Standby</span>
</div>
<div class="flex flex-col">
<span class="text-xl font-normal text-zinc-400">112</span>
<span class="text-xs text-zinc-500 font-mono uppercase tracking-widest">Cleared</span>
</div>
</div>
</div>
</div>
<!-- Satellite Link Widget -->
<div class="tilt-element cmd-panel lg:col-span-2 h-[280px]">
<div class="cmd-panel-header justify-start gap-3">
<div class="w-2 h-2 rounded-full bg-red-500 shadow-[0_0_8px_#ef4444] animate-pulse"></div>
<span class="text-xs text-red-400 font-mono uppercase tracking-widest bg-red-950/20 px-2 py-0.5 rounded border border-red-900/30">
T-Minus 08 Min
</span>
</div>
<div class="cmd-panel-body flex flex-col pt-6 pr-6 pb-6 pl-6 justify-between">
<div class="flex items-center justify-between mb-6">
<span class="text-base font-normal text-zinc-300">Quantum Relay Uplink</span>
<div class="flex items-center gap-2">
<span class="text-[10px] font-mono text-indigo-400 uppercase tracking-widest animate-pulse">Transmitting</span>
<div class="flex gap-0.5">
<div class="w-1 h-3 bg-indigo-500 rounded-sm animate-[pulse_1s_ease-in-out_infinite]"></div>
<div class="w-1 h-3 bg-indigo-500 rounded-sm animate-[pulse_1s_ease-in-out_infinite_0.2s]"></div>
<div class="w-1 h-3 bg-indigo-500 rounded-sm animate-[pulse_1s_ease-in-out_infinite_0.4s]"></div>
</div>
</div>
</div>
<div class="w-full relative py-6">
<div
class="h-10 w-full bg-[#0a0a0c] rounded-lg border border-zinc-800 shadow-[inset_0_2px_10px_rgba(0,0,0,0.8)] relative overflow-hidden">
<!-- Background moving data texture (now starts on scroll) -->
<div class="absolute inset-0 signal-texture opacity-20"></div>
<!-- Static receiver nodes -->
<div
class="absolute inset-y-0 right-0 w-[15%] bg-indigo-500/5 border-l border-indigo-500/30 border-dashed animate-pulse flex items-center justify-center">
<div class="w-1 h-1 rounded-full bg-indigo-400 shadow-[0_0_8px_#818cf8]"></div>
</div>
<div
class="absolute inset-y-0 left-0 w-[15%] bg-indigo-500/5 border-r border-indigo-500/30 border-dashed animate-pulse flex items-center justify-center">
<div class="w-1 h-1 rounded-full bg-indigo-400 shadow-[0_0_8px_#818cf8]"></div>
</div>
<!-- Animated sweeping block (now starts on scroll) -->
<div
class="sweep-block absolute inset-y-0 bg-indigo-500/20 border-x border-indigo-500 shadow-[inset_0_0_20px_rgba(99,102,241,0.5)] flex items-center justify-between px-2 z-10">
<div class="w-px h-6 bg-indigo-400/80 shadow-[0_0_8px_rgba(129,140,248,0.8)]"></div>
<div class="w-px h-6 bg-indigo-400/80 shadow-[0_0_8px_rgba(129,140,248,0.8)]"></div>
</div>
</div>
<div class="flex justify-between mt-3 px-1 relative">
<div class="absolute top-[-10px] left-0 right-0 flex justify-between px-1">
<div class="w-px h-2 bg-zinc-700"></div>
<div class="w-px h-2 bg-zinc-700"></div>
<div class="w-px h-2 bg-zinc-700"></div>
<div class="w-px h-2 bg-zinc-700"></div>
</div>
<span class="text-xs text-zinc-500 font-mono">10:00</span>
<span class="text-xs text-zinc-400 font-mono relative -left-4">10:30</span>
<span class="text-xs text-zinc-400 font-mono relative left-4">12:00</span>
<span class="text-xs text-zinc-500 font-mono">12:30</span>
</div>
</div>
<div class="flex justify-between items-end mt-auto">
<div class="flex flex-col gap-1">
<span class="text-xs text-zinc-500">Encrypted Relay Channel</span>
<a href="#"
class="text-sm font-mono text-indigo-400 hover:text-indigo-300 transition-colors flex items-center gap-1.5 group">
net.link/auth-v9
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="external-link" aria-hidden="true" class="lucide lucide-external-link w-3 h-3">
<path d="M15 3h6v6"></path>
<path d="M10 14 21 3"></path>
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
</svg>
</a>
</div>
<button class="w-10 h-10 rounded-lg bg-[#18181b] border border-zinc-700 shadow-lg flex items-center justify-center text-zinc-400 hover:text-white transition-all hover:border-indigo-500 hover:shadow-[0_0_15px_rgba(99,102,241,0.2)]">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="satellite" aria-hidden="true" class="lucide lucide-satellite w-5 h-5"><path d="m13.5 6.5-3.148-3.148a1.205 1.205 0 0 0-1.704 0L6.352 5.648a1.205 1.205 0 0 0 0 1.704L9.5 10.5"></path><path d="M16.5 7.5 19 5"></path><path d="m17.5 10.5 3.148 3.148a1.205 1.205 0 0 1 0 1.704l-2.296 2.296a1.205 1.205 0 0 1-1.704 0L13.5 14.5"></path><path d="M9 21a6 6 0 0 0-6-6"></path><path d="M9.352 10.648a1.205 1.205 0 0 0 0 1.704l2.296 2.296a1.205 1.205 0 0 0 1.704 0l4.296-4.296a1.205 1.205 0 0 0 0-1.704l-2.296-2.296a1.205 1.205 0 0 0-1.704 0z"></path></svg>
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<script>
// icons
if (window.lucide) lucide.createIcons();
// Start / reset animations when section enters viewport
(function telemetryObserver(){
const section = document.getElementById('telemetry');
if (!section) return;
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
section.classList.add('telemetry-in');
} else {
// remove to "reset" so progress anim plays again when you come back
section.classList.remove('telemetry-in');
}
});
}, { threshold: 0.25, rootMargin: "0px 0px -10% 0px" });
io.observe(section);
})();
</script>
</body>
</html>