Cyberpunk Telemetry Grid Footer

footers

Sci-fi telemetry node status dashboard with buffer indicators and low-latency network telemetry.

#footer#cyberpunk#telemetry#scifi#terminal

Live Interactive Preview

Component Source Code

Select language in the dropdown

CyberTelemetryFooter.tsx

1'use client';
2
3import React from 'react';
4import { Cpu } from 'lucide-react';
5
6export default function CyberTelemetryFooter() {
7  return (
8    <footer className="w-full max-w-5xl mx-auto rounded-3xl border-2 border-cyan-500/40 bg-slate-950 p-8 sm:p-12 font-mono text-cyan-400 shadow-[0_0_40px_rgba(6,182,212,0.15)] select-none">
9      <div className="grid grid-cols-1 md:grid-cols-4 gap-8 pb-8 border-b border-cyan-500/30">
10        <div className="md:col-span-2 space-y-3">
11          <div className="flex items-center gap-2">
12            <Cpu className="h-6 w-6 text-cyan-400 animate-pulse" />
13            <span className="font-bold text-base tracking-widest text-cyan-300">AURENZA_UI // CORE</span>
14          </div>
15          <p className="text-xs text-cyan-500/90 leading-relaxed max-w-sm">
16            Telemetry grid interface with high-performance CSS hardware acceleration.
17          </p>
18          <div className="flex items-center gap-3 pt-2 text-xs">
19            <span className="rounded bg-cyan-950/80 border border-cyan-500/40 px-2.5 py-1 text-[11px] text-cyan-300">
20              BUFFER: 100% OK
21            </span>
22            <span className="rounded bg-emerald-950/80 border border-emerald-500/40 px-2.5 py-1 text-[11px] text-emerald-400">
23              LATENCY: 1.2MS
24            </span>
25          </div>
26        </div>
27
28        <div>
29          <h4 className="text-xs font-bold uppercase tracking-widest text-white mb-3">TELEMETRY_NODES</h4>
30          <ul className="space-y-1.5 text-xs text-cyan-400/80">
31            <li><a href="#" className="hover:text-cyan-200 transition">&gt; text_engine</a></li>
32            <li><a href="#" className="hover:text-cyan-200 transition">&gt; neural_buttons</a></li>
33            <li><a href="#" className="hover:text-cyan-200 transition">&gt; spatial_cards</a></li>
34            <li><a href="#" className="hover:text-cyan-200 transition">&gt; optics_lens</a></li>
35          </ul>
36        </div>
37
38        <div>
39          <h4 className="text-xs font-bold uppercase tracking-widest text-white mb-3">COMM_LINKS</h4>
40          <ul className="space-y-1.5 text-xs text-cyan-400/80">
41            <li><a href="#" className="hover:text-cyan-200 transition">&gt; github_node</a></li>
42            <li><a href="#" className="hover:text-cyan-200 transition">&gt; matrix_chat</a></li>
43            <li><a href="#" className="hover:text-cyan-200 transition">&gt; api_docs</a></li>
44          </ul>
45        </div>
46      </div>
47
48      <div className="flex flex-col sm:flex-row items-center justify-between gap-4 pt-6 text-[11px] text-cyan-600">
49        <p>© 2026 AURENZA_UI. SYSTEM ID: 0x984F</p>
50        <span className="text-cyan-400 font-semibold tracking-wider">ALL NODES SYNCHRONIZED</span>
51      </div>
52    </footer>
53  );
54}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/footers/CyberTelemetryFooter.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import CyberpunkTelemetryGridFooter from '@/components/footers/CyberTelemetryFooter';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <CyberpunkTelemetryGridFooter />
7    </main>
8  );
9}