# HUD sci-fi

Também chamado de: UI de HUD, FUI (UI fictícia), heads-up display, interface de nave espacial, UI do Homem de Ferro, UI holográfica  
Era: 2008 (Homem de Ferro), 2013 (Oblivion), em curso para jogos, defesa, drones, startups espaciais  
Página: https://designforai.dev/pt/style/sci-fi-hud

## Traços

- linhas finas em ciano ou âmbar sobre preto, com colchetes, retículas, arcos e marcas de tique
- dados em todo lugar: leituras, coordenadas, porcentagens, logs rolando
- medidores circulares e progresso radial; barras segmentadas
- painéis em camadas com cantos cortados e preenchimentos semitransparentes (5-10%)
- tipografia monospace e condensada, caixa alta, tamanhos minúsculos com tracking largo
- movimento sutil constante: anéis girando, indicadores piscando, linhas de varredura
- o brilho é fino e preciso, não grosso como neon

Paleta: #04070d preto, #00e5ff ciano, #ffb300 âmbar (alerta), #ff3d00 vermelho (crítico), #7fdbff texto ciano pálido, rgba(0,229,255,0.08) preenchimento de painel

Tipografia: Rajdhani, Orbitron, Michroma ou Exo 2 para títulos (500-600 em caixa alta 0.15em), Share Tech Mono ou JetBrains Mono para leituras (11-13px); corpo mantido mínimo

## Faça

- desenhe o chrome como SVG inline (colchetes, anéis, escalas de tique) para escalar nítido e animar por stroke
- mantenha todo movimento decorativo abaixo de 0.3 de opacidade e lento (anéis a 30-60s por rotação) para nunca competir com o conteúdo
- use âmbar e vermelho só para estados reais (aviso, erro), nunca como decoração

## Evite

- não coloque conteúdo de leitura de verdade num HUD; use para dashboards, jogos, demos e heros de landing apenas
- não encha a tela de números falsos; cada leitura deve mapear para algo
- não suavize com cantos arredondados; só ângulos e arcos

Conhecido por: Homem de Ferro (Jarvis), Oblivion, menus de Destiny 2, display da SpaceX Dragon, Anduril

## Semente 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

Construa o site como um HUD sci-fi. Fundo #04070d com uma vinheta radial tênue. Texto #7fdbff, cor de linha primária #00e5ff, âmbar #ffb300 só para avisos, vermelho #ff3d00 só para crítico. Fontes: Rajdhani 600 em caixa alta com tracking 0.15em para títulos a 40/24/16px, Share Tech Mono 12px para leituras e labels. Painéis: background rgba(0,229,255,0.08), borda 1px rgba(0,229,255,0.5), clip-path com dois cantos cortados (12px), e colchetes de canto em SVG inline com 20px de comprimento, traço de 1.5px. Hero: um grande medidor circular (SVG, 3 anéis concêntricos com marcas de tique a cada 6deg, anel externo girando 60s linear, anel interno girando ao contrário em 45s) com uma leitura central contando no load. Barra lateral: um log rolante de linhas mono surgindo com fade a cada 2s. Barras de progresso segmentadas (12 segmentos, gaps de 2px). Brilho fino: drop-shadow(0 0 2px #00e5ff) só nos traços. Uma linha de varredura de 1px desce a cada 8s a opacity 0.15. Sem raio. Sob prefers-reduced-motion pare todos os loops.