Futuristic Sci-Fi HUD

effects

Sci-fi telemetry heads-up display dashboard with rotating diagnostic dials.

#futuristic#hud#scifi#telemetry#neon

Live Interactive Preview

● SYS_ONLINENODE 04.99

98.4%

FREQ: 5.8GHZNORMAL

Component Source Code

Select language in the dropdown

FuturisticHUD.tsx

1'use client';
2
3import React from 'react';
4
5export default function FuturisticHUD() {
6  return (
7    <div className="relative h-48 sm:h-56 w-full max-w-sm overflow-hidden rounded-3xl border-2 border-cyan-500/60 bg-slate-950 p-6 flex flex-col justify-between text-cyan-400 font-mono shadow-[0_0_40px_rgba(6,182,212,0.2)]">
8      <div className="flex justify-between items-center text-[10px] tracking-widest uppercase">
9        <span className="animate-pulse">● SYS_ONLINE</span>
10        <span>NODE 04.99</span>
11      </div>
12
13      <div className="flex items-center justify-center gap-4">
14        <div className="relative h-20 w-20 flex items-center justify-center">
15          <div className="absolute inset-0 rounded-full border-2 border-dashed border-cyan-400/60 animate-[spin_8s_linear_infinite]" />
16          <div className="absolute inset-2 rounded-full border border-cyan-500/30" />
17          <span className="text-xs font-bold">98.4%</span>
18        </div>
19      </div>
20
21      <div className="flex justify-between items-center text-[10px] text-cyan-300/80">
22        <span>FREQ: 5.8GHZ</span>
23        <span className="text-emerald-400">NORMAL</span>
24      </div>
25    </div>
26  );
27}

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/effects/FuturisticHUD.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

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