UI Flutuante

"Desafiando a gravidade. Elementos que pairam sem esforço acima da superfície."

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. Desprendimento: Elementos de UI (como barras de navegação, barras laterais ou cards de conteúdo principal) não tocam as bordas da tela. Eles flutuam com margens em todos os lados.
2. Sombras Suaves e Difusas: Sombras grandes e altamente desfocadas diretamente abaixo dos elementos.
3. Formas de Pílula e Arredondadas: Cantos totalmente arredondados (formas de pílula) aprimoram a estética flutuante e semelhante a bolhas.

DNA Visual

• Cores: Elegância Terrena ou Cinza Minimalista. Use um fundo levemente tingido (off-white ou cinza muito claro) para que os elementos brancos flutuantes se destaquem.
• Tipografia: Fontes sans-serif limpas e arejadas com altura de linha generosa.
• Layout: O padrão de "ilha flutuante" para navegação (uma barra de navegação em forma de pílula centralizada na parte inferior ou superior da tela).

Implementação Web

• Concentre-se em margens grandes e estilos de sombra específicos.
• Exemplo de CSS:

body {
  background-color: var(--bg-primary); /* e.g., #F4F4F9 */
  padding: 24px; /* Ensure nothing touches the edge */
}

.floating-nav {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  border-radius: 50px; /* Pill shape */
  padding: 12px 32px;
  
  /* Large, soft shadow */
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
  
  display: flex;
  gap: 24px;
}

.floating-card {
  background: white;
  border-radius: 24px;
  padding: 32px;
  margin-bottom: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

Implementação de App

SwiftUI

struct FloatingUIView: View {
    var body: some View {
        ZStack {
            // Very light background
            Color(red: 0.95, green: 0.95, blue: 0.97).ignoresSafeArea()
            
            ScrollView {
                VStack(spacing: 24) {
                    // Floating Content Card
                    VStack(alignment: .leading, spacing: 12) {
                        Text("Floating Card")
                            .font(.title2).fontWeight(.bold)
                        Text("This card hovers above the background, with massive soft shadows and completely rounded corners.")
                            .foregroundColor(.secondary)
                    }
                    .padding(32)
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .background(Color.white)
                    .cornerRadius(32) // Very large radius
                    // Large, highly blurred shadow
                    .shadow(color: Color.black.opacity(0.05), radius: 30, x: 0, y: 15)
                    .padding(.horizontal, 24) // Keeps it detached from edges
                }
                .padding(.top, 40)
            }
            
            // Floating Pill Navigation
            VStack {
                Spacer()
                HStack(spacing: 40) {
                    Image(systemName: "house.fill").foregroundColor(.blue)
                    Image(systemName: "magnifyingglass").foregroundColor(.gray)
                    Image(systemName: "bell.fill").foregroundColor(.gray)
                    Image(systemName: "person.fill").foregroundColor(.gray)
                }
                .padding(.vertical, 16)
                .padding(.horizontal, 32)
                .background(Color.white)
                .clipShape(Capsule()) // Pill shape
                .shadow(color: Color.black.opacity(0.1), radius: 25, x: 0, y: 10)
                .padding(.bottom, 32) // Detached from bottom edge
            }
        }
    }
}

• Um .clipShape(Capsule()) com um .shadow() massivo cria a barra de navegação em forma de pílula flutuante perfeita.
• Aumente o .shadow(radius: ...) para 25 ou 30 com uma opacidade muito baixa (0.05) para obter o efeito de hover suave e difuso.

Flutter

class FloatingUIScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF4F4F9),
      body: Stack(
        children: [
          ListView(
            padding: const EdgeInsets.all(24),
            children: [
              // Floating Content Card
              Container(
                margin: const EdgeInsets.only(bottom: 24),
                padding: const EdgeInsets.all(32),
                decoration: BoxDecoration(

…