# Atlas — materiais ópticos, hierarquia e legibilidade

Pesquisa em 10/09/2026. Escopo: traduzir a imagem conceitual aprovada em regras de design para um produto web. Os valores numéricos propostos abaixo são decisões de design do Atlas, ainda sujeitas a prototipação e medição; não são tokens publicados pela Apple. Não houve alteração do site nesta pesquisa.

## Direção recomendada

O salto visual deve vir da **escala do retrato, profundidade entre planos, borda óptica bem construída e continuidade entre pino e card**. Na referência, o agente é o protagonista do painel; o globo continua sendo o protagonista da tela. A imagem possui contorno iluminado assimétrico, centro escuro legível e uma ação principal em cápsula. Esses elementos merecem ser reproduzidos como uma linguagem consistente, não apenas como mais brilho.

O material do Atlas pode ser chamado internamente de **vidro orbital**: inspiração óptica de Liquid Glass, com identidade própria em azul gelo e âmbar. Evitar apresentá-lo como implementação oficial de Liquid Glass para web.

## O que as fontes realmente recomendam

**Camadas com função.** A Apple separa conteúdo de uma camada funcional flutuante de controles e navegação. Recomenda evitar Liquid Glass em todo o conteúdo e limitar efeitos customizados aos elementos funcionais relevantes. O material `regular` ajusta luminosidade e desfoque para leitura; `clear` favorece conteúdo visual rico. O HIG cita uma camada de escurecimento de 35% para situações claras com `clear`, não como regra universal de contraste. Para Atlas, a moldura e os controles podem parecer ópticos enquanto descrição, métricas e formulários recebem uma base mais estável. [Apple HIG — Materials](https://developer.apple.com/design/human-interface-guidelines/materials)

**A borda deve sugerir volume.** A apresentação da Apple explica o efeito de lente como a luz sendo dobrada/concentrada para comunicar presença e separação. Também relaciona formas arredondadas à interação por toque, e descreve adaptações para reduzir transparência, aumentar contraste e reduzir movimento. Para Atlas, isso aponta para reflexos localizados, contorno de duas intensidades e resposta suave ao ponteiro; não pede um contorno neon de intensidade igual em todo o perímetro. [WWDC25 — Meet Liquid Glass](https://developer.apple.com/videos/play/wwdc2025/219/)

**É tecnologia nativa.** `glassEffect`, `GlassEffectContainer`, `glassEffectID` e as transições descritas são APIs SwiftUI. O container pode combinar formas e coordenar sua transformação, com preocupação explícita de renderização. No Atlas React, a relação entre estados precisa ser implementada com ferramentas web; não há equivalência automática com o compositor nativo. [Apple — Applying Liquid Glass to custom views](https://developer.apple.com/documentation/SwiftUI/Applying-Liquid-Glass-to-custom-views)

**O material continuou evoluindo.** A página de design da WWDC26 destaca refinamentos de consistência, leitura, acessibilidade e adaptação a telas. Icon Composer continua sendo ferramenta para ícones de plataformas Apple; sua exportação achatada pode servir à comunicação, mas não é uma biblioteca React de interface. [Apple — WWDC26 Design guide](https://developer.apple.com/wwdc26/guides/design/)

## Anatomia visual proposta

| Plano | Tratamento | Função |
|---|---|---|
| 0 — universo | Preto azulado, estrelas muito discretas | Dar espaço negativo ao globo |
| 1 — geografia | Globo/território e iluminação | Explicar onde os clientes estão |
| 2 — presença | Pino com retrato, haste curta e base orbital | Tornar cada agente reconhecível |
| 3 — navegação | Cápsulas e barras em vidro contido | Permanecer disponível sobre o mapa |
| 4 — agente selecionado | Card lateral com portrait grande e moldura óptica | Apresentar identidade e informações |
| 5 — tarefa | Formulário, confirmação, relatório | Priorizar precisão e leitura |

Usar hierarquia real de contraste e escala, além de `z-index`. Evitar vidro sobre vidro: um card não precisa conter cinco subcards igualmente translúcidos. Bordas de leitura e separadores internos devem ser silenciosos; luz forte indica seleção, foco ou a ação principal.

### Card do agente

- Desktop: painel lateral de aproximadamente 360–420 px, sem cobrir o centro do globo. Retrato ocupa 42–48% da altura útil da composição. Nome, cidade e função ficam imediatamente abaixo, sem obrigar rolagem para descobrir quem é o agente.
- Perspectiva: moldura repousa com até 3° em Y, usando aproximadamente 1.400 px de perspectiva. Ao focar ou interagir, pode se alinhar a 0°. Evitar rotação contínua do texto. Em apresentação cinematográfica, permitir até 5° na moldura; o conteúdo precisa permanecer legível.
- Mobile: painel ancorado na borda inferior ou lateral conforme orientação, frontal e com a mesma identidade. Retrato grande não pode empurrar o fechar e a ação primária para fora da tela; ajustar composição por altura disponível.
- Retrato: fundo próprio escuro, recorte controlado, máximo um halo orbital e uma passagem de luz na revelação. Sem imagem, iniciais ou silhueta com a mesma moldura. O carregamento da imagem deve preservar a área e não deslocar os controles.
- Uma linha de conexão do pino ao painel pode aparecer ao selecionar e se estabilizar. Sua trajetória não deve atravessar labels, botões ou outro retrato.

### Pino holográfico

- Em vista próxima: medalhão com foto, borda luminosa de seleção, haste de 10–16 px e base elíptica. Corpo visual inicial de 36–40 px; área acionável de 48×48 px.
- Em vista global: agrupar pontos próximos. Vinte retratos grandes simultâneos disputariam espaço com a geografia e perderiam a escala sugerida na referência.
- O pino deve acompanhar a projeção e desaparecer quando estiver atrás do globo. O retrato não deve flutuar visualmente no lado errado da Terra.
- Seleção: aumentar no máximo para 1,10×, desenhar o anel e abrir o painel lateral. Identidade, cor e foto conectam os estados. Hover complementa; toque e teclado precisam realizar a mesma ação.
- Um anel decorativo não significa agente online. Estado operacional deve vir de dado confiável e de texto/ícone, não de uma animação inventada.

## Tokens iniciais para prototipação

| Token | Valor inicial | Uso |
|---|---|---|
| `space.deep` | `#03080E` | Fundo |
| `surface.reading` | `#091522` com 92–98% de opacidade | Texto denso e formulários |
| `glass.control` | `rgba(9,21,34,.66)` | Navegação flutuante |
| `glass.shell` | `rgba(10,24,38,.38)` | Moldura externa do card |
| `text.primary` | `#F1F7FC` | Texto principal |
| `text.secondary` | `#ACC1D0` | Metadados; medir sobre composição real |
| `light.ice` | `#8BD8FF` | Seleção, foco, energia principal |
| `light.gold` | `#EAC687` | Ação primária/detalhe de assinatura |
| `glass.blur` | 18–24 px desktop; 12–18 px mobile | Uma camada por superfície principal |
| `glass.saturation` | 1,10–1,20 | Controlar contaminação cromática do fundo |
| `edge.base` | 1 px / branco azulado a 16–22% | Delimitação constante |
| `edge.specular` | 1 px / branco azulado a 65–90% | Segmento curto da borda, não perímetro inteiro |
| `glow.selected` | 0 0 18 px / azul a 16–22% | Agente ou ação em foco |
| `radius.panel` | 28 px | Card e painel |
| `radius.control` | 999 px | Cápsulas e botões principais |
| `target.default` | 48 px | Controles de toque |
| `motion.press` | 100–140 ms | Resposta imediata |
| `motion.reveal` | 280–360 ms | Card, painel, troca de contexto |
| `motion.settle` | 480–650 ms | Breve acabamento luminoso após revelação |

Os reflexos devem ser camadas decorativas com `pointer-events: none`; não podem reduzir a área clicável. Blur, glow e perspectiva são candidatos a reduzir primeiro se o mapa perder fluidez. Proposta de limite inicial: um painel grande com blur, uma faixa de navegação e apenas o pino selecionado com efeito contínuo. Medir no telefone alvo antes de aumentar o orçamento visual.

## Contrato de acessibilidade e motion

Texto normal precisa de contraste de pelo menos 4,5:1; texto grande pode usar 3:1. Componentes/gráficos necessários à compreensão têm regras de contraste não textual de 3:1. WCAG 2.2 AA estabelece alvo mínimo de 24×24 CSS px com exceções; 44×44 é o critério aprimorado AAA. O Atlas deve escolher 48 px como padrão próprio de conforto, sem confundir isso com mínimo legal/universal. Medir texto contra o fundo composto mais desfavorável do mapa, não apenas contra o token nominal. [WCAG 2.2 — critérios 1.4.3, 1.4.11, 2.5.5 e 2.5.8](https://www.w3.org/TR/WCAG22/)

Movimento não essencial desencadeado por interação deve poder ser desabilitado para atender ao critério AAA 2.3.3. Na versão reduzida: retirar tilt, parallax, fly-through, overshoot e varreduras; preservar troca de estado com uma dissolução curta. [W3C — Animation from Interactions](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html)

Movimento automático que dure mais de cinco segundos em paralelo ao conteúdo exige mecanismo de pausa, parada ou ocultação, salvo casos essenciais previstos. Uma opção persistente “Efeitos ambientes” deve controlar órbitas, rotação e partículas; não basta parar somente enquanto o usuário mantém foco. Loading deve indicar trabalho verdadeiro, oferecer recuperação em erro e nunca prolongar a espera só para exibir uma animação. [W3C — Pause, Stop, Hide](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html)

## Viabilidade web e fallbacks

`backdrop-filter` aplica efeitos ao que está atrás de uma superfície parcial/transparente; a MDN o classifica como Baseline 2024 para navegadores recentes, com ressalva a versões antigas. É uma base adequada para o desfoque do Atlas. Gradientes, sombras internas e masks podem sugerir refração nas bordas; isso é uma aproximação artística, não simulação óptica idêntica à Apple. Evitar depender de um shader ou filtro SVG complexo para que o texto fique legível. [MDN — backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/backdrop-filter)

Media Queries Level 5 especifica `prefers-reduced-motion` e `prefers-reduced-transparency` para comunicar preferências do sistema. Respeitá-las e observar mudanças durante a sessão; também oferecer controles internos de efeitos/transparência para que o usuário possa escolher explicitamente. [CSSWG — User Preference Media Features](https://drafts.csswg.org/mediaqueries-5/#mf-user-preferences)

`prefers-reduced-transparency` ainda consta como experimental e de disponibilidade limitada na MDN consultada. Portanto, ele não pode ser o único caminho para uma interface mais opaca. Fallback sem blur: fundo de leitura sólido/quase sólido, borda nítida e a mesma hierarquia. Em redução de transparência, preservar identidade pela forma, escala e cor, sem exigir refração. [MDN — prefers-reduced-transparency](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-transparency)

## Critério para aprovar a direção visual

1. Reconhecer o agente no retrato antes de ler os metadados.
2. Localizar visualmente a relação pino → cidade → painel sem legenda explicativa.
3. Ver o globo continuar ocupando o centro, com o card claramente lateral.
4. Ler nome, função, infraestrutura e ação primária sobre qualquer região do mapa.
5. Sentir a borda como volume iluminado, em vez de um retângulo com neon uniforme.
6. Poder pausar efeitos e usar modo opaco sem perder identidade, informação ou funcionalidade.
7. Testar a mesma composição em telefone real, com toque, retrato/landscape e rolagem, antes de declarar equivalência com a imagem conceitual.

Não é necessário adicionar uma biblioteca de Liquid Glass apenas pelo nome. O Atlas já possui um motor de motion; o próximo ganho depende da anatomia e dos estados dos componentes, com efeitos ópticos graduais e verificáveis.