sci-fi-interface

name	sci-fi-interface
description	Web and App implementation guide for Sci-Fi Interface Design. Trigger when user wants HUDs, spacecraft dashboards, or tactical military readouts.
category	Creative & Media
source	antigravity
tags	["react","ai","llm","design"]
url	https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/design-it/sci-fi-interface

Sci-Fi Interface Design (HUD)

"Heads-Up Display. Tactical, precise, and highly analytical."

When to Use

Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.

Core Principles

1. Wireframe and Outlines: Interfaces are built almost entirely out of thin strokes rather than solid filled boxes.
2. Circular Arrays & Radars: Heavy use of concentric circles, radar sweeps, and curved progress bars.
3. Monochrome + Warning: Often entirely monochromatic (just blue, or just green) with a secondary color (red) used exclusively for alerts.

Visual DNA

• Colors: Midnight background. UI is pure Cyan, Emerald Green, or Amber (like classic monochrome monitors). Minimalist Slate works if made dark.
• Typography: Strict, technical monospace fonts (Share Tech Mono, VT323, Space Mono). All caps.
• Styling: Tiny UI chroming details (target brackets [ ], framing lines, precise pixel coordinates).

Web Implementation

• Heavy use of SVG for circular dials, and CSS borders for the layout.
• CSS Example:

body {
  background-color: #000b18; /* Deep space navy */
  color: #4df; /* Holographic cyan */
  font-family: 'Share Tech Mono', monospace;
  text-transform: uppercase;
}

/* The HUD Frame */
.hud-container {
  border: 1px solid rgba(68, 221, 255, 0.3);
  position: relative;
  padding: 30px;
}

/* Corner brackets */
.hud-container::before {
  content: '';
  position: absolute;
  top: -2px; left: -2px;
  width: 20px; height: 20px;
  border-top: 2px solid #4df;
  border-left: 2px solid #4df;
}
.hud-container::after {
  content: '';
  position: absolute;
  bottom: -2px; right: -2px;
  width: ; : ;
  :  solid ;
  :  solid ;
}

 {
  : ;
  :    (, , , );
}

 {
  : ;
  :    (, , , );
  : blink  step-end infinite;
}

 blink {  { : ; } }

App Implementation

SwiftUI

struct SciFiHUDView: View {
    @State private var bootUp = false
    
    var body: some View {
        ZStack {
            Color(hex: "000b18").ignoresSafeArea() // Deep space navy
            
            VStack {
                // Circular Radar/Dial
                ZStack {
                    Circle()
                        .stroke(Color(hex: "4df").opacity(0.3), lineWidth: 1)
                    
                    Circle()
                        .trim(from: 0.0, to: bootUp ? 0.75 : 0.0)
                        .stroke(Color(hex: "4df"), style: StrokeStyle(lineWidth: 4, lineCap: .round))
                        .rotationEffect(.degrees(-90))
                    
                    Text("SYS.OK")
                        .font(.custom("Space Mono", size: 24))
                        .foregroundColor(Color(hex: "4df"))
                        .shadow(color: Color(hex: "4df"), radius: 5)
                }
                .frame(width: 200, height: 200)
                .padding(.bottom, 40)
                
                
                 {
                    ()
                    ()
                    ()
                }
                .font(.custom(, size: ))
                .foregroundColor((hex: ))
                .padding()
                .border((hex: ).opacity(), width: )
                .overlay(
                    
                     { path 
                        path.move(to: (x: , y: )); path.addLine(to: (x: , y: )); path.addLine(to: (x: , y: ))
                        path.move(to: (x: , y: )); path.addLine(to: (x: , y: )); path.addLine(to: (x: , y: ))
                    }
                    .stroke((hex: ), lineWidth: )
                )
            }
            .padding()
        }
        .onAppear {
            withAnimation(.easeInOut(duration: )) { bootUp   }
        }
    }
}

• SwiftUI is uniquely fantastic for Sci-Fi HUDs. Circle().trim(from: to:) lets you build complex sweeping circular progress rings.
• Use Path overlays to draw the exact 90-degree corner brackets ([ ]) that define the HUD look.

Flutter

class SciFiHUDScreen extends StatefulWidget {
  @override
  State<SciFiHUDScreen> createState() => _SciFiHUDScreenState();
}

class _SciFiHUDScreenState extends State<SciFiHUDScreen> with SingleTickerProviderStateMixin {
  late AnimationController _ctrl;

  @override
  void initState() {
    super.initState();
    _ctrl = AnimationController(vsync: this, duration: const Duration(seconds: 2))..forward();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: co