Arc Browser: Reimaginando a Interface do Navegador

“O navegador é o sistema operacional agora. Então por que ele ainda parece software de 2008?” — Josh Miller, The Browser Company

O Arc questionou cada suposição sobre navegadores, desde o posicionamento das abas até o gerenciamento de janelas. O resultado é um navegador que parece mais uma ferramenta criativa do que um aplicativo utilitário.

Principais Conclusões

Barra lateral vertical supera abas horizontais - Os títulos das abas permanecem legíveis, e o espaço vertical é abundante em monitores widescreen modernos
Spaces separam contextos mentais - Abas de trabalho, pessoais e de projetos nunca se misturam, reduzindo a fricção cognitiva
Barra de Comando > barra de URL - Busca universal entre abas, histórico e ações elimina a necessidade de organização perfeita
Personalização do usuário gera fidelidade - Boosts permitem que usuários corrijam sites irritantes por conta própria, criando investimento pessoal
Adeque o peso da interface à tarefa - O Little Arc prova que nem toda tarefa precisa da interface completa do navegador

Por Que o Arc é Importante

O Arc provou que até as interfaces mais estabelecidas podem ser reimaginadas. Chrome, Firefox, Safari todos seguem o mesmo layout básico estabelecido há décadas. O Arc se libertou tratando o navegador como um espaço de trabalho, não um gerenciador de janelas.

Principais conquistas: - Eliminou completamente a barra de abas tradicional - Fez a interface do navegador parecer nativa do macOS - Criou separação significativa entre pessoal e trabalho - Pioneiro na personalização de sites no nível do navegador - Construído para navegação com teclado em primeiro lugar

Princípios Fundamentais de Design

A inovação mais visível do Arc: substituir abas horizontais por uma barra lateral vertical que organiza conteúdo por contexto, não por recência.

BARRA DE ABAS TRADICIONAL:
┌──────────────────────────────────────────────────────────────┐
│ [←][→][↻] │ Aba 1 │ Aba 2 │ Aba 3 │ Aba 4 │ Aba 5 │ ... │ + │
├──────────────────────────────────────────────────────────────┤
│                                                              │
│                    Conteúdo da Página                        │
│                                                              │
└──────────────────────────────────────────────────────────────┘
 Problemas: Abas encolhem até ficarem ilegíveis, sem organização, linha infinita

MODELO DE BARRA LATERAL DO ARC:
┌────────────────┬─────────────────────────────────────────────┐
│  [*] Space     │                                             │
│  ───────────── │                                             │
│  Fixadas       │                                             │
│    Gmail       │                                             │
│    Calendário  │          Conteúdo da Página                 │
│    Notion      │          (largura total)                    │
│                │                                             │
│  ───────────── │                                             │
│  Hoje          │                                             │
│    Aba 1       │                                             │
│    Aba 2       │                                             │
│    Aba 3       │                                             │
│                │                                             │
│  [+ Nova Aba]  │                                             │
└────────────────┴─────────────────────────────────────────────┘
 Benefícios: Títulos legíveis, favoritos fixados, organizado por propósito

O Insight Principal: Espaço horizontal é premium; espaço vertical é abundante. Usar a barra lateral permite que os títulos das abas respirem.

Padrão CSS (Barra Lateral Colapsável):

.sidebar {
  --sidebar-width: 240px;
  --sidebar-collapsed: 48px;

  width: var(--sidebar-width);
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  transition: width 0.2s ease-out;
}

.sidebar.collapsed {
  width: var(--sidebar-collapsed);
}

.sidebar.collapsed .tab-title {
  opacity: 0;
  pointer-events: none;
}

/* Hover para espiar */
.sidebar.collapsed:hover {
  width: var(--sidebar-width);
}

.sidebar.collapsed:hover .tab-title {
  opacity: 1;
  transition: opacity 0.15s ease-in 0.1s; /* Delay para revelação suave */
}

Padrão SwiftUI:

struct SidebarView: View {
    @State private var isCollapsed = false
    @State private var isHovering = false

    private var effectiveWidth: CGFloat {
        isCollapsed && !isHovering ? 48 : 240
    }

    var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            PinnedSection()
            Divider()
            TodaySection()
            Spacer()
            NewTabButton()
        }
        .frame(width: effectiveWidth)
        .animation(.easeOut(duration: 0.2), value: effectiveWidth)
        .onHover { isHovering = $0 }
    }
}

2. Spaces: Organização Baseada em Contexto

Spaces separam trabalho de pessoal, projeto de projeto. Cada Space é um contexto completo de navegador com suas próprias abas, sites fixados e até tema.

ARQUITETURA DE SPACES:

┌─────────────────────────────────────────────────────────────┐
│                        Arc Browser                          │
├───────────┬───────────┬───────────┬─────────────────────────┤
│  Trabalho │  Pessoal  │  Projeto  │                         │
│  Space    │  Space    │  Space    │    Área de Conteúdo     │
│  ─────    │  ─────    │  ─────    │                         │
│  • Slack  │  • Gmail  │  • GitHub │                         │
│  • Docs   │  • Reddit │  • Figma  │                         │
│  • Jira   │  • Netflix│  • Notion │                         │
└───────────┴───────────┴───────────┴─────────────────────────┘

Cada Space tem:
├── Abas fixadas únicas
├── Abas "Hoje" separadas
├── Tema/gradiente de cor próprio
├── Contexto de navegação isolado
└── Atalho de teclado (Cmd+1, Cmd+2, etc.)

O Insight Principal: Contextos mentais não devem vazar. Abas de trabalho aparecendo durante o tempo pessoal cria fricção cognitiva.

Modelo de Dados:

interface Space {
  id: string;
  name: string;
  icon?: string;
  gradient: {
    from: string;
    to: string;
    angle: number;
  };
  pinnedTabs: Tab[];
  todayTabs: Tab[];
  archivedTabs: Tab[];
  profile?: BrowserProfile; // Cookies, histórico diferentes, etc.
}

interface Tab {
  id: string;
  url: string;
  title: string;
  favicon?: string;
  isPinned: boolean;
  lastAccessed: Date;
  parentFolderId?: string;
}

Implementação SwiftUI:

struct SpaceSwitcher: View {
    @Binding var currentSpace: Space
    let spaces: [Space]

    var body: some View {
        HStack(spacing: 8) {
            ForEach(spaces) { space in
                SpaceButton(
                    space: space,
                    isActive: space.id == currentSpace.id
                ) {
                    withAnimation(.spring(response: 0.3, dampingFraction: 0.7)) {
                        currentSpace = space
                    }
                }
            }
        }
        .padding(.horizontal, 12)
    }
}

struct SpaceButton: View {
    let space: Space
    let isActive: Bool
    let action: () -> Void

    var body: some View {
        Button(action: action) {
            Circle()
                .fill(
                    LinearGradient(
                        colors: [space.gradient.from, space.gradient.to],
                        startPoint: .topLeading,
                        endPoint: .bottomTrailing
                    )
                )
                .frame(width: 24, height: 24)
                .overlay {
                    if isActive {
                        Circle()
                            .strokeBorder(.white, lineWidth: 2)
                    }
                }
        }
        .buttonStyle(.plain)
        .keyboardShortcut(space.keyboardShortcut)
    }
}

3. Barra de Comando: Spotlight para o Navegador

A Barra de Comando do Arc (Cmd+T) é mais do que uma barra de URL. Ela fornece busca universal entre abas, histórico, favoritos e ações.

INTERAÇÃO DA BARRA DE COMANDO:

┌─────────────────────────────────────────────────────────────┐
│  > Buscar abas, histórico ou digitar uma URL...             │
├─────────────────────────────────────────────────────────────┤
│  ABAS ABERTAS                                               │
│    [doc] Notion - Planejamento de Projeto     Cmd+1         │
│    [doc] GitHub - Pull Request #123                         │
│                                                             │
│  HISTÓRICO                                                  │
│    [>] Figma - Design System (2 horas atrás)                │
│    [>] MDN - Guia CSS Grid (ontem)                          │
│                                                             │
│  AÇÕES                                                      │
│    [*] Nova Nota                              Cmd+Shift+N   │
│    [*] Visualização Dividida                  Cmd+Shift+\   │
│    [*] Copiar URL                             Cmd+Shift+C   │
└─────────────────────────────────────────────────────────────┘

O Insight Principal: Encontrar deve ser mais rápido do que organizar. Uma boa busca elimina a necessidade de organização perfeita.

Padrão CSS:

.command-bar {
  --bar-width: min(600px, 90vw);

  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: var(--bar-width);
  background: var(--surface-elevated);
  border-radius: var(--radius-lg);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.command-input {
  width: 100%;
  padding: 16px 20px;
  font-size: 18px;
  background: transparent;
  border: none;
  color: var(--text-primary);
}

.command-results {
  max-height: 400px;
  overflow-y: auto;
  border-top: 1px solid var(--border-subtle);
}

.command-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  cursor: pointer;
}

.command-result:hover,
.command-result.selected {
  background: var(--surface-hover);
}

.command-result-shortcut {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

4. Boosts: Personalização a Nível do Usuário

Boosts permitem que usuários injetem CSS e JavaScript personalizados em qualquer site: modos escuros pessoais, interfaces simplificadas ou funcionalidades aprimoradas.

CONCEITO DO BOOST:

Sem Boost:                        Com Boost:
┌─────────────────────┐          ┌─────────────────────┐
│ [Cabeçalho]         │          │                     │
│ [Navegação]         │          │                     │
│ [Sidebar] [Conteúdo]│    →     │     [Conteúdo]      │
│ [Rodapé]            │          │     (limpo, focado) │
│ [Banner de Cookies] │          │                     │
└─────────────────────┘          └─────────────────────┘

CSS criado pelo usuário:
- Ocultar elementos distrativos
- Mudar cores/fontes
- Melhorar legibilidade

O Insight Principal: Todo usuário tem sites que visita diariamente mas gostaria que funcionassem diferente. Dê a eles o controle.

Padrão de Implementação:

interface Boost {
  id: string;
  name: string;
  domain: string; // "github.com" ou "*.google.com"
  enabled: boolean;
  css?: string;
  js?: string;
  createdAt: Date;
}

// Exemplo de Boost: YouTube Limpo
const youtubeBoost: Boost = {
  id: 'youtube-clean',
  name: 'YouTube Limpo',
  domain: 'youtube.com',
  enabled: true,
  css: `
    /* Ocultar recomendações */
    #secondary,
    ytd-browse[page-subtype="home"] ytd-rich-grid-renderer {
      display: none !important;
    }

    /* Ocultar comentários */
    #comments {
      display: none !important;
    }

    /* Expandir vídeo */
    #primary {
      max-width: 100% !important;
    }
  `
};

Editor de Boost em SwiftUI:

struct BoostEditor: View {
    @Binding var boost: Boost
    @State private var activeTab: BoostTab = .css

    enum BoostTab: String, CaseIterable {
        case css = "CSS"
        case javascript = "JavaScript"
    }

    var body: some View {
        VStack(spacing: 0) {
            // Seletor de domínio
            HStack {
                Image(systemName: "globe")
                TextField("Domínio (ex: github.com)", text: $boost.domain)
                    .textFieldStyle(.plain)
            }
            .padding()
            .background(.ultraThinMaterial)

            // Seletor de aba
            Picker("", selection: $activeTab) {
                ForEach(BoostTab.allCases, id: \.self) { tab in
                    Text(tab.rawValue).tag(tab)
                }
            }
            .pickerStyle(.segmented)
            .padding()

            // Editor de código
            CodeEditor(
                text: activeTab == .css ? $boost.css : $boost.js,
                language: activeTab == .css ? .css : .javascript
            )
        }
    }
}

5. Little Arc: Minimalista por Design

O Little Arc é uma janela separada e minimalista para tarefas rápidas: uma aba, sem interface extra, livre de distrações.

ARC COMPLETO:                     LITTLE ARC:
┌────────┬────────────────┐      ┌────────────────────────┐
│Sidebar │                │      │ ← google.com/search... │
│        │    Conteúdo    │      ├────────────────────────┤
│        │                │      │                        │
│        │                │  →   │    Resultados da Busca │
│        │                │      │    (só o conteúdo)     │
└────────┴────────────────┘      └────────────────────────┘

Casos de uso:
- Busca rápida
- Verificar uma coisa
- Abrir links de outros apps

O Insight Principal: Nem toda tarefa precisa do navegador completo. Adeque a interface ao peso da tarefa.

Padrão CSS (Interface Mínima):

.mini-browser {
  --chrome-height: 36px;

  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.mini-chrome {
  height: var(--chrome-height);
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--surface-1);
  gap: 8px;
}

.mini-url-bar {
  flex: 1;
  padding: 4px 8px;
  font-size: 13px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}

.mini-content {
  height: calc(100% - var(--chrome-height));
}

Padrões Transferíveis

Padrão 1: Efêmero vs. Persistente

A seção "Hoje" do Arc arquiva automaticamente abas após 12 horas. Itens persistentes devem ser explicitamente fixados.

interface EphemeralityConfig {
  defaultLifetime: number; // milissegundos
  onExpire: 'archive' | 'close' | 'prompt';
  exceptions: string[]; // domínios que nunca expiram
}

function shouldArchive(tab: Tab, config: EphemeralityConfig): boolean {
  const age = Date.now() - tab.lastAccessed.getTime();
  if (config.exceptions.includes(new URL(tab.url).hostname)) {
    return false;
  }
  return age > config.defaultLifetime;
}

Padrão 2: Visualização Dividida

Navegação lado a lado sem gerenciar janelas separadas.

struct SplitView: View {
    @State private var splitRatio: CGFloat = 0.5
    let leftTab: Tab
    let rightTab: Tab

    var body: some View {
        GeometryReader { geometry in
            HStack(spacing: 1) {
                WebView(tab: leftTab)
                    .frame(width: geometry.size.width * splitRatio)

                // Divisor arrastável
                Rectangle()
                    .fill(.quaternary)
                    .frame(width: 4)
                    .gesture(
                        DragGesture()
                            .onChanged { value in
                                let newRatio = value.location.x / geometry.size.width
                                splitRatio = max(0.2, min(0.8, newRatio))
                            }
                    )

                WebView(tab: rightTab)
            }
        }
    }
}

Padrão 3: Identidades por Gradiente

Cada Space tem um gradiente único que fornece reconhecimento visual instantâneo.

.space-gradient {
  --gradient-work: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-personal: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --gradient-project: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.space-indicator {
  width: 100%;
  height: 4px;
  background: var(--current-gradient);
}

.space-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--current-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
}

Lições de Design

Questione suposições: A barra de abas não é sagrada; nada é
Separação de contexto: Tarefas diferentes merecem ambientes diferentes
Teclado em primeiro lugar: Usuários avançados navegam sem mouse
Complexidade progressiva: Simples por padrão, poderoso quando necessário
Personalização do usuário: Deixe as pessoas fazerem o software ser delas
Peso apropriado: Adeque a complexidade da interface à complexidade da tarefa

Perguntas Frequentes

Abas horizontais encolhem até larguras ilegíveis quando você abre muitas páginas. Barras laterais verticais usam a altura abundante da tela em monitores widescreen modernos, mantendo os títulos das abas totalmente visíveis. A barra lateral também permite recursos de organização como seções fixadas e pastas que não funcionam bem horizontalmente.

Como os Spaces do Arc diferem de perfis de navegador?

Spaces são mais leves do que perfis completos de navegador. Enquanto perfis criam instâncias de navegador completamente separadas (diferentes cookies, histórico, extensões), Spaces compartilham sua configuração do navegador mas organizam abas por contexto. Você pode alternar Spaces instantaneamente com atalhos de teclado, enquanto alternar perfis requer reiniciar ou abrir novas janelas.

O que acontece com as abas na seção "Hoje" do Arc?

Abas na seção Hoje são arquivadas automaticamente após 12 horas de inatividade. Elas não são excluídas, mas movidas para um arquivo pesquisável. Isso previne o acúmulo de abas mantendo o conteúdo recuperável. Abas fixadas nunca são arquivadas automaticamente.

Posso usar os padrões de design do Arc no meu próprio app?

Sim. Os padrões documentados aqui (barra lateral colapsável, paleta de comandos, arquitetura de Spaces, sistema de Boost) são conceitos transferíveis. Os exemplos de código mostram implementações em CSS, SwiftUI e TypeScript que você pode adaptar. Os padrões de barra lateral e barra de comando funcionam particularmente bem para qualquer aplicativo com muito conteúdo.

Como a Barra de Comando do Arc melhora em relação às barras de URL tradicionais?

Barras de URL tradicionais pesquisam histórico e sugerem URLs. A Barra de Comando do Arc pesquisa abas abertas, histórico, favoritos e ações disponíveis a partir de uma única entrada. Você pode encontrar uma aba aberta, executar um comando ou navegar para algum lugar novo sem trocar de contexto ou lembrar onde algo está.

Referências

Josh Miller (CEO da The Browser Company) sobre a filosofia de design do Arc: The Browser Company Blog
Evolução da interface de navegadores e a persistência da barra de abas: Nielsen Norman Group - Browser UX
Padrões de design de interface com teclado em primeiro lugar: Human Interface Guidelines - Keyboard Navigation
Padrões de paleta de comandos em software moderno: implementações do Superhuman, Linear e Raycast

design/arc