Design Espacial

"Interface que pertence ao mesmo ambiente que você. Painéis transparentes, como vidro, que reagem à iluminação do espaço físico."

Quando Usar

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

Princípios Fundamentais

1. Transparência Ambiental: A interface funciona como um painel de vidro. Ela depende muito do desfoque do fundo, mas tem como objetivo específico deixar o ambiente (ou uma imagem simulada do ambiente) ditar o clima.
2. Iluminação Dinâmica: Os elementos respondem à posição do cursor como se uma lanterna estivesse brilhando sobre eles.
3. Volume Sutil: Não é plano, mas também não é extremamente 3D. Os elementos têm uma borda de luz muito fina ao redor da borda (brilho especular).

DNA Visual

• Cores: Usa quase exclusivamente branco ou preto rgba(). A cor real vem inteiramente do ambiente de fundo.
• Tipografia: Extremamente nítida, alta legibilidade. Frequentemente usa pesos de fonte variados para estabelecer hierarquia sem depender de cor. O SF Pro da Apple é o padrão ouro aqui.
• Ícones: Glifos contornados, de alta legibilidade.

Implementação Web

• Exemplo de CSS:

body {
  /* Needs a complex background to look right */
  background: url('room-environment.jpg') cover;
}

.spatial-panel {
  /* The core material */
  background: rgba(255, 255, 255, 0.2); /* Very sheer */
  backdrop-filter: blur(40px) saturate(150%);
  -webkit-backdrop-filter: blur(40px) saturate(150%);
  
  border-radius: 32px;
  padding: 40px;
  
  /* The specular rim light */
  box-shadow: 
    inset 0 1px 1px rgba(255,255,255,0.6),
    inset 0 0 1px 1px rgba(255,255,255,0.2),
    0 24px 48px rgba(0,0,0,0.1);
}

.spatial-btn {
  background: rgba(0,0,0,0.1);
  color: white;
  border-radius: 20px;
  padding: 12px 24px;
  backdrop-filter: blur(10px);
  transition: all 0.2s;
}

.spatial-btn:hover {
  background: rgba(255,255,255,0.2);
  /* Highlight effect */
  box-shadow: inset 0 0 20px rgba(255,255,255,0.4);
}

Implementação de Aplicativo

SwiftUI

struct SpatialDesignView: View {
    var body: some View {
        ZStack {
            // Environment background
            Image("room-environment")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .ignoresSafeArea()
            
            // Spatial Panel
            VStack(spacing: 24) {
                Text("Environmental UI")
                    .font(.title).fontWeight(.bold)
                    .foregroundColor(.white)
                
                Button(action: {}) {
                    Text("Interact")
                        .foregroundColor(.white)
                        .padding(.horizontal, 32)
                        .padding(.vertical, 16)
                }
                .background(.ultraThinMaterial)
                .clipShape(Capsule())
                .overlay(Capsule().stroke(Color.white.opacity(0.3), lineWidth: 1))
            }
            .padding(40)
            .background(.ultraThinMaterial) // The core spatial material
            .cornerRadius(32)
            // Specular rim light
            .overlay(
                RoundedRectangle(cornerRadius: 32)
                    .stroke(
                        LinearGradient(
                            colors: [.white.opacity(0.6), .white.opacity(0.1)],
                            startPoint: .topLeading, endPoint: .bottomTrailing
                        ), 
                        lineWidth: 1
                    )
            )
            // Very soft, diffuse shadow
            .shadow(color: .black.opacity(0.1), radius: 40, y: 20)
        }
    }
}

• .background(.ultraThinMaterial) é exatamente o que a Apple usa para essa estética.
• O brilho especular é crítico. Use um .overlay com um traço LinearGradient para simular uma fonte de luz atingindo a borda superior esquerda do vidro.

Flutter

import 'dart:ui';

class SpatialDesignScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: [
          Image.asset('assets/room-environment.jpg', fit: BoxFit.cover),
          
          Center(
            child: ClipRRect(
              borderRadius: BorderRadius.circular(32),
              child: BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 30.0, sigmaY: 30.0),
                child: Container(

…