ranbot-ai/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: 20px; height: 20px;
  border-bottom: 2px solid #4df;
  border-right: 2px solid #4df;
}

.hud-value {
  font-size: 3rem;
  text-shadow: 0 0 10px rgba(68, 221, 255, 0.8);
}

.hud-warning {
  color: #ff3333;
  text-shadow: 0 0 10px rgba(255, 51, 51, 0.8);
  animation: blink 1s step-end infinite;
}

@keyframes blink { 50% { opacity: 0; } }

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)
                
                // HUD Data Frame
                HStack {
                    Text("COORD: 45.22, 12.8")
                    Spacer()
                    Text("[ LOCK ]")
                }
                .font(.custom("Space Mono", size: 16))
                .foregroundColor(Color(hex: "4df"))
                .padding()
                .border(Color(hex: "4df").opacity(0.5), width: 1)
                .overlay(
                    // Corner bracket accents
                    Path { path in
                        path.move(to: CGPoint(x: 0, y: 15)); path.addLine(to: CGPoint(x: 0, y: 0)); path.addLine(to: CGPoint(x: 15, y: 0))
                        path.move(to: CGPoint(x: 300, y: 15)); path.addLine(to: CGPoint(x: 300, y: 0)); path.addLine(to: CGPoint(x: 285, y: 0))
                    }
                    .stroke(Color(hex: "4df"), lineWidth: 2)
                )
            }
            .padding()
        }
        .onAppear {
            withAnimation(.easeInOut(duration: 2.0)) { bootUp = true }
        }
    }
}

• 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