UI de Computação Espacial

"Um passo além do Design Espacial. Janelas totalmente 3D flutuando em realidade aumentada."

Quando Usar

Use este subestilo quando a solicitação do usuário corresponder à estética descrita acima. Esta é uma referência filha da habilidade design-it e não deve ser acionada diretamente.

Princípios Fundamentais

1. Hierarquia de Espaço Z: Não apenas sombras projetadas, mas distância 3D real. Modais flutuam 10px à frente da janela principal.
2. Indicadores de Interação Baseados no Olhar: Elementos destacam-se vividamente ao serem focados, antecipando rastreamento ocular ou controle preciso do ponteiro.
3. Vidro e Luz: Janelas são espessas lâminas de vidro fosco que dobram a luz e projetam sombras suaves no ambiente físico.

DNA Visual

• Cores: Depende inteiramente do ambiente de fundo. Usa brancos (rgba(255,255,255,0.x)) e pretos puramente translúcidos.
• Tipografia: SF Pro. Uso intenso de pesos de fonte variados (Regular, Semibold, Bold) para criar hierarquia.
• Formas: Altos raios de borda (24px-32px). Tudo é um retângulo arredondado ou um círculo perfeito.

Implementação Web

• Melhor emulado usando transformações CSS 3D para simular a perspectiva do usuário.
• Exemplo de CSS:

body {
  /* Simulate the physical room */
  background: url('living-room.jpg') center/cover;
  perspective: 1200px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.spatial-window {
  width: 800px;
  height: 600px;
  border-radius: 32px;
  
  /* The Glass Material */
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(50px) saturate(200%);
  -webkit-backdrop-filter: blur(50px) saturate(200%);
  
  /* Specular Highlights */
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 
    inset 0 1px 2px rgba(255, 255, 255, 0.8),
    0 30px 60px rgba(0, 0, 0, 0.3);
    
  /* 3D Positioning */
  transform: translateZ(-100px);
  transform-style: preserve-3d;
}

.spatial-modal {
  /* Floating in front of the main window */
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) translateZ(50px);
  
  background: rgba(255, 255, 255, 0.6); /* More opaque */
  backdrop-filter: blur(30px);
  border-radius: 24px;
  padding: 30px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.spatial-btn {
  /* Gaze/Hover interaction */
  background: rgba(0,0,0,0.05);
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.spatial-btn:hover {
  background: rgba(255,255,255,0.4);
  transform: translateZ(10px) scale(1.05);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

Implementação de Aplicativo

SwiftUI (Nativo visionOS / Emulação iOS)

struct SpatialComputingView: View {
    var body: some View {
        ZStack {
            // Ambiente de sala simulado
            Image("living-room")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .ignoresSafeArea()
            
            // Janela Espacial
            VStack(spacing: 24) {
                Text("Janela Espacial")
                    .font(.title).fontWeight(.bold)
                    .foregroundColor(.white)
                
                // Botão reativo ao olhar
                Button(action: {}) {
                    Text("Foque em Mim")
                        .fontWeight(.semibold)
                        .foregroundColor(.white)
                        .padding(.horizontal, 32)
                        .padding(.vertical, 16)
                        // .hoverEffect() é mágica no visionOS/iPadOS
                        // .hoverEffect(.highlight)
                }
                .background(Color.black.opacity(0.2))
                .clipShape(Capsule())
            }
            .padding(60)
            // O material de vidro mágico
            .background(.ultraThinMaterial)
            .cornerRadius(32)
            // Destaque de borda especular
            .overlay(
                RoundedRectangle(cornerRadius: 32)
                    .stroke(Color.white.opacity(0.4), lineWidth: 1)
            )
            // Sombra ambiental
            .shadow(color: .black.opacity(0.3), radius: 40, y: 30)
            
            // Simulação de Modal Espacial Z (se no iOS)
            // No visionOS, isso seria um volume de janela separado
            Text("Modal Flutuante")
                .foregroundColor(.white)
                .padding(30)
                .background(.thinMaterial)
                .cornerRadius(24)
                .shadow(color: .black.opacity(0.4), radius: 30, y: 20)

…