# HUD de ciencia ficción

También llamado: UI HUD, FUI (UI ficticia), heads-up display, interfaz de nave espacial, UI de Iron Man, UI holográfica  
Época: 2008 (Iron Man), 2013 (Oblivion), continuo en juegos, defensa, drones, startups espaciales  
Página: https://designforai.dev/es/style/sci-fi-hud

## Rasgos

- trazos finos en cian o ámbar sobre negro, con corchetes, retículas, arcos y marcas de graduación
- datos por todas partes: lecturas, coordenadas, porcentajes, registros que se desplazan
- indicadores circulares y progreso radial; barras segmentadas
- paneles en capas con esquinas recortadas y rellenos semitransparentes (5-10%)
- tipografía monospace y condensada, en mayúsculas, tamaños diminutos con tracking amplio
- movimiento sutil constante: anillos que giran, indicadores que parpadean, líneas de escaneo
- el resplandor es fino y preciso, no grueso como el neón

Paleta: #04070d negro, #00e5ff cian, #ffb300 ámbar (alerta), #ff3d00 rojo (crítico), #7fdbff texto cian pálido, rgba(0,229,255,0.08) relleno de panel

Tipografía: Rajdhani, Orbitron, Michroma o Exo 2 para títulos (500-600 en mayúsculas 0.15em), Share Tech Mono o JetBrains Mono para lecturas (11-13px); cuerpo reducido al mínimo

## Haz

- dibuja el chrome como SVG inline (corchetes, anillos, escalas graduadas) para que escale nítido y se anime por trazo
- mantén todo el movimiento decorativo por debajo de 0.3 de opacidad y lento (anillos a 30-60s por rotación) para que nunca compita con el contenido
- usa el ámbar y el rojo solo para estados reales (aviso, error), nunca como decoración

## Evita

- no pongas contenido de lectura real en un HUD; úsalo solo para dashboards, juegos, demos y heros de landing
- no llenes la pantalla de números falsos; cada lectura debería corresponder a algo
- no lo suavices con esquinas redondeadas; solo ángulos y arcos

Conocido por: Iron Man (Jarvis), Oblivion, menús de Destiny 2, pantalla de la Dragon de SpaceX, Anduril

## Semilla CSS

```css
:root{--bg:#04070d; --fg:#7fdbff; --accent:#00e5ff; --warn:#ffb300; --alert:#ff3d00; --panel:rgba(0,229,255,0.08); --radius:0; --font:'Rajdhani',sans-serif; --font-mono:'Share Tech Mono',monospace}
```

## Prompt

Construye el sitio como un HUD de ciencia ficción. Fondo #04070d con un viñeteado radial tenue. Texto #7fdbff, color de línea primario #00e5ff, ámbar #ffb300 solo para avisos, rojo #ff3d00 solo para críticos. Fuentes: Rajdhani 600 en mayúsculas con tracking 0.15em para títulos a 40/24/16px, Share Tech Mono 12px para lecturas y etiquetas. Paneles: background rgba(0,229,255,0.08), borde 1px rgba(0,229,255,0.5), clip-path con dos esquinas recortadas (12px), y corchetes de esquina en SVG inline de 20px de largo, trazo de 1.5px. Hero: un gran indicador circular (SVG, 3 anillos concéntricos con marcas cada 6deg, anillo exterior girando 60s linear, anillo interior girando en sentido contrario 45s) con una lectura central que cuenta hacia arriba al cargar. Barra lateral: un registro desplazable de líneas mono que aparecen con fundido cada 2s. Barras de progreso segmentadas (12 segmentos, huecos de 2px). Resplandor fino: drop-shadow(0 0 2px #00e5ff) solo en los trazos. Una línea de escaneo de 1px barre hacia abajo cada 8s a opacity 0.15. Sin radio. Bajo prefers-reduced-motion detén todos los bucles.