# Atlas — pesquisa de linguagem cinematográfica e motion

Pesquisa em fontes primárias, consultadas em 10 de setembro de 2026. Escopo: orientar o design system antes de alterar o produto. As recomendações, durações e limites abaixo são decisões propostas para o Atlas; não são benchmarks já medidos no site nem prescrições dos estúdios citados.

## Direção recomendada

O salto visual mais importante é tornar a seleção de um agente um pequeno acontecimento: o retrato já existe sobre a cidade; o pino responde ao toque; uma linha estabelece a relação espacial; um painel lateral de vidro escuro se materializa; a imagem grande do agente aparece; os dados ficam imediatamente legíveis. Essa sequência possui começo, relação e repouso. Um conjunto de efeitos permanentes espalhados pela tela não produz a mesma clareza.

Base técnica recomendada: **Motion existente + CSS/SVG autorais + o motor de mapa atual**. Isso permite implementar bordas com luz, retratos flutuantes, transições contínuas, revelação do painel, estados de carregamento e botões sofisticados sem introduzir outro motor de animação global. Rive é a melhor opção adicional caso o avatar Atlas AI precise de estados visuais reativos desenhados por um motion designer. Three.js fica reservado à hipótese de avatar volumétrico verdadeiro, após prova de desempenho.

O design deve ser próprio do Atlas: petróleo profundo, luz gelo, detalhes champanhe, retratos expressivos e geometria de navegação. As referências de cinema servem para estudar composição, materialidade e ritmo; imagens, logos e interfaces dos filmes não devem ser incorporados como ativos do produto.

## O que aprender com os criadores das interfaces de cinema

| Referência primária | O que o estúdio documenta | Aplicação proposta no Atlas |
| --- | --- | --- |
| [Perception — Iron Man 2](https://www.experienceperception.com/work/iron-man-2/) | Interfaces de vidro e hologramas foram prototipados para equilibrar sofisticação, legibilidade e lógica; os layouts foram avaliados planos e inseridos no enquadramento do filme. | Avaliar cada card em três situações: isolado, sobre o globo e no telefone. O vidro deve deixar a imagem e os controles reconhecíveis em todas elas. |
| [Territory — Avengers: Age of Ultron](https://territorystudio.com/project/marvels-avengers-age-of-ultron/) | Linguagens visuais diferentes por personagem, construídas a partir de suas áreas de pesquisa; a profundidade holográfica de Dr. Cho é deliberada. | Cada agente pode ter uma assinatura de luz; tipografia, espessuras, estados e interação continuam compartilhados. A infraestrutura é informação, não um tema visual inteiro. |
| [GMUNK — Oblivion GFX](https://gmunk.com/OBLIVION-GFX) | A mesma linguagem conecta mapa, cockpit e máquinas. A equipe pesquisou instrumentos reais e descreve a contenção do excesso gráfico. | O mesmo arco de órbita aparece no logo, pino, loader e avatar. Pequenos dados decorativos não podem se passar por telemetria real. |
| [Territory — Citadel](https://territorystudio.com/project/citadel/) | Displays holográficos, vidro transparente, acompanhamento de localização e uma base global de agentes; os gráficos de fundo são subordinados à informação que conduz a cena. | É a referência narrativa mais próxima do Atlas: mapa global como palco, um agente como protagonista, demais agentes como contexto. Painel lateral, nunca uma parede de HUD sobre o globo. |
| [Territory — Sci-fi interfaces and emerging technology](https://territorystudio.com/sci-fi-interfaces-and-emerging-technology-4/) | A credibilidade das interfaces futuristas depende de pesquisa e de entender o que a experiência precisa fazer a pessoa sentir. | Toda animação deve responder a uma pergunta: onde estou, o que selecionei, o que está ocorrendo ou o que acabou de mudar? |

## Comparação de 12 opções

Licença do código não equivale à licença de uma animação pronta, modelo, fonte, fotografia ou plano do editor. Os links abaixo são as evidências verificadas; quando a data da última manutenção não foi exposta de forma confiável, isso é indicado em vez de presumir atividade.

| Opção | Capacidade útil | Licença e evidência de manutenção consultada | Decisão para o Atlas |
| --- | --- | --- | --- |
| **Motion** | Presença/saída, layout compartilhado, gestos, springs e SVG, integrados ao ciclo React. | Núcleo [MIT](https://github.com/motiondivision/motion); Motion+ é separado. [Changelog](https://motion.dev/changelog) registra correções em agosto de 2026 e distingue itens ainda não lançados. | **Manter como motor principal.** Já resolve o escopo. Um único responsável por `transform`/`opacity` de cada elemento. |
| **GSAP** | Timelines complexas, SVG, controles precisos de sequências e scroll. | [Licença própria sem cobrança](https://gsap.com/community/standard-license/) permite uso comercial comum, mas possui restrições; não é MIT. [Documentação v3](https://gsap.com/docs/v3/) acessível; não certifiquei uma data de último release nesta pesquisa. | **Reserva para filmes de apresentação muito roteirizados.** Não adicionar em paralelo a Motion só para animar os mesmos painéis. |
| **Rive** | Arte vetorial interativa, estados e data binding; adequado a um avatar que muda com o estado da conversa. | [Runtime Web MIT](https://github.com/rive-app/rive-wasm), editor/planos separados. [Releases](https://github.com/rive-app/rive-wasm/releases) mostram 2.42.0 em setembro e evolução de renderização; 2.41 inicia deprecações para nova API. | **Opcional prioritário.** Um único avatar carregado ao abrir o chat. Projetar com data binding atual, sem reproduzir exemplos antigos indiscriminadamente. |
| **Lottie / dotLottie** | Loops de marca, introduções, animações vetoriais produzidas em ferramenta de motion. dotLottie também oferece estados, temas e worker. | [lottie-web](https://github.com/airbnb/lottie-web) e [dotlottie-web](https://github.com/LottieFiles/dotlottie-web) são MIT. [Releases dotLottie](https://github.com/LottieFiles/dotlottie-web/releases) incluem 0.80.0 em agosto; recursos experimentais estão explicitamente marcados. | **Alternativa a Rive**, principalmente para arte já entregue nesse formato. O loader simples do Atlas não justifica sozinho trazer WASM e outro canvas. Auditar a licença de cada arquivo pronto. |
| **Three.js** | Avatar volumétrico, materiais, partículas e iluminação 3D próprios. | [Repositório oficial MIT](https://github.com/mrdoob/three.js); fonte e documentação acessíveis. A data de último release não foi confirmada neste levantamento. | **Exploração futura isolada.** Não recriar o mapa apenas para adicionar brilho. Um avatar raster tratado pode atingir a composição aprovada com menor custo. |
| **React Three Fiber + Drei** | Cena Three declarativa em React; abstrações para materiais e desempenho. | [R3F](https://github.com/pmndrs/react-three-fiber) e [Drei](https://github.com/pmndrs/drei) MIT. R3F documenta pareamento de v9 com React 19. [Guia fonte de desempenho](https://raw.githubusercontent.com/pmndrs/react-three-fiber/master/docs/advanced/scaling-performance.mdx) cobre renderização sob demanda e adaptação de qualidade. | **Usar somente se a cena Three for aprovada.** Não são um embelezador genérico de interface; acrescentam arquitetura, ciclo GPU e testes. |
| **Theatre.js** | Editor visual de timelines e sequências 3D. | [Core Apache 2.0; Studio AGPL 3.0](https://github.com/theatre-js/theatre). O README informa trabalho movido temporariamente para repositório privado; a cadência pública atual não é verificável só por ele. | **Não adotar como dependência central.** Pode servir a estudo de filme, mas traz complexidade e incerteza de manutenção pública sem benefício suficiente para a navegação. |
| **Anime.js** | Animação JS/SVG, timelines e controle fino; opção generalista. | [MIT](https://github.com/juliangarnier/anime); [releases](https://github.com/juliangarnier/anime/releases) documentam série v4 e correções. | **Alternativa técnica, sem adoção agora.** Duplicaria o trabalho do Motion já instalado. |
| **Spline** | Editor colaborativo de cenas 3D; prototipação visual e eventos. | [Wrapper React MIT](https://github.com/splinetool/react-spline), serviço e exportação têm [planos próprios](https://spline.design/pricing). A página atual separa exportação com marca d’água, sem marca e recursos de self-hosting. | **Ótimo para estudo, condicional para produção.** Aprovar conta/plano e arquivos exportáveis antes de depender de uma cena. Wrapper aberto não torna todo o serviço gratuito. |
| **tsParticles** | Campos de partículas e ligações com controle de densidade/interação. | [MIT](https://github.com/tsparticles/tsparticles); [releases](https://github.com/tsparticles/tsparticles/releases) mostram série v4 com manutenção em 2026. | **Dispensável na primeira evolução.** Céu discreto pode ser estático; importar módulos mínimos somente se houver composição de partículas autoral com ganho visível. |
| **React Bits** | Galeria de componentes editáveis: bordas, superfícies, fundos, movimento de texto. | [MIT + Commons Clause](https://github.com/DavidHDev/react-bits/blob/main/LICENSE.md), não MIT puro. [Repositório](https://github.com/DavidHDev/react-bits) identifica mantenedor, contribuições e diferentes variantes. Sem data independente de última manutenção certificada aqui. | **Referência e fonte pontual, após revisão de código.** Adaptar um efeito ao sistema Atlas. Não misturar vários componentes de aparência distinta nem assumir a licença de dependências/ativos. |
| **Paper Shaders** | Shaders de canvas para textura, superfícies metálicas e luz. | [Apache 2.0](https://github.com/paper-design/shaders), NOTICE preservado quando aplicável. O próprio README alerta para mudanças incompatíveis em versões 0.0.x e recomenda fixar versão; [changelog](https://github.com/paper-design/shaders/blob/main/CHANGELOG.md) público. | **Opcional para um único efeito assinado.** Ex.: fundo do avatar Atlas AI. Carregar sob demanda, manter fallback estático e medir junto do mapa. |

### Seleção concreta

**Adotar no próximo desenho:** Motion, CSS (gradientes, máscaras, `backdrop-filter` estático com fallback), SVG (aros, conectores e marcas), componentes acessíveis existentes e câmera do mapa. Nenhum pacote novo é obrigatório para a imagem de referência aprovada.

**Prototipar separadamente:** Rive para Atlas AI e um shader localizado. Cada candidato só avança se trouxer um ganho que a alternativa CSS/SVG/raster não consegue obter.

**Manter fora do núcleo:** GSAP e Anime.js por sobreposição de responsabilidade; Theatre por custo e cadência pública incerta; Spline por dependência de editor/plano/exportação; partículas por peso e ruído visual quando usadas em toda a tela.

## Gramática do movimento proposta

As durações abaixo são tokens iniciais de design, a validar no protótipo com telefone real. O gesto precisa receber feedback logo no início; o usuário não espera a ornamentação terminar para poder agir.

| Token | Desktop | Mobile | Uso |
| --- | --- | --- | --- |
| `motion.feedback` | 100 ms | 90 ms | Pressionar botão, selecionar pino, iniciar resposta visual |
| `motion.micro` | 160 ms | 140 ms | Hover, brilho de foco, troca de pequeno ícone |
| `motion.swap` | 240 ms | 200 ms | Filtro, estado e conteúdo de card |
| `motion.panel.enter` | 420 ms | 320 ms | Materialização do painel de agente |
| `motion.panel.exit` | 280 ms | 220 ms | Recolhimento do painel |
| `motion.context` | 650–900 ms | 450–650 ms | Reenquadrar uma cidade dentro de uma navegação explícita |
| `motion.ambient` | 8–16 s | 12–20 s ou estático | Variação de luz extremamente lenta, sem mover conteúdo legível |

Curvas propostas: entrada `cubic-bezier(.22,1,.36,1)`; saída `cubic-bezier(.4,0,1,1)`; troca `cubic-bezier(.4,0,.2,1)`. Preferir resposta amortecida sem quique nos grandes painéis. Springs ficam para um indicador pequeno e para acompanhar movimentos do ponteiro; não para fazer o texto balançar.

### Pino → painel lateral: coreografia de referência

1. **0–100 ms:** a seleção dá brilho ao aro do retrato; os outros pinos diminuem discretamente a ênfase. O círculo representa a localização do cliente, não a infraestrutura.
2. **40–240 ms:** um conector fino emerge do pino selecionado. Em mapas em movimento, ele acompanha a projeção real; jamais aponta para uma posição antiga.
3. **80–420 ms:** o painel emerge pela borda lateral com deslocamento curto de 20–32 px e opacidade; a superfície recebe um filete de luz que percorre parte da borda uma única vez.
4. **140–420 ms:** o retrato grande se revela por máscara simples; nome e local aparecem juntos; metadados entram com intervalo máximo de 30 ms. Os controles já devem estar utilizáveis.
5. **Depois:** repouso visual. Só o detalhe luminoso mais discreto continua, se o modo ambiente estiver ativo.

Na troca de agente, preservar o recipiente do card e dissolver apenas retrato e dados. Não fechar e reabrir o painel inteiro a cada clique. Cliques rápidos interrompem a transição e seguem para a última seleção; não criar fila de agentes a serem animados.

No telefone, evitar painel inclinado e texto projetado em perspectiva. A lateralização deve ser resolvida por composição: globo visível acima, painel ancorado à borda em formato de folha expandível; sua animação deve partir da borda real. Imagem grande mantém prioridade, mas local, nome e ação principal precisam caber na primeira área visível.

### Estados do componente

| Estado | Aparência | Comportamento |
| --- | --- | --- |
| Repouso | Vidro escuro estável, borda suave e retrato nítido | Sem flutuação de parágrafos, sem mudanças que pareçam alertas |
| Hover | Luz localizada acompanha o ponto de atenção, deslocamento máximo de 2 px | Somente em dispositivo com ponteiro preciso; desativado durante arraste do mapa |
| Foco | Contorno nítido, contraste e rótulo equivalentes ao hover | Teclado não depende de brilho difuso para localizar o alvo |
| Pressionado | Superfície comprime visualmente 1–2%, luz responde | Feedback no início, mesmo quando ação depende da rede |
| Selecionado | Aro e conector claramente persistentes | Seleção distinguível por forma/ícone, além da cor |
| Carregando | Pequena órbita ou segmentos respirando; texto de etapa real | Uma ação não cria fullscreen loading sobre o sistema inteiro |
| Sucesso | Confirmação simples de 160–240 ms | Mostrar o que foi salvo/alterado; depois voltar ao repouso |
| Falha | Interromper o loop e mostrar mensagem/ação legíveis | Preservar trabalho digitado; permitir tentar novamente |
| Indisponível | Menor ênfase, rótulo do motivo quando útil | Não simular atividade; indicador visual consistente com disponibilidade real |

## Loading futurista que informa a verdade

Propor um **núcleo orbital Atlas**: monograma central, dois arcos incompletos com velocidades diferentes e uma linha de estado. Não usar contagem aleatória, logs inventados, telemetria falsa ou porcentagem que sobe sozinha até 99%.

O estado visual deve ser dirigido por eventos reais:

- `boot`: aplicação preparada, shell visível;
- `data-loading`: carregando os cadastros;
- `map-loading`: preparando estilo e mapa;
- `ready`: dados e primeiro enquadramento utilizáveis;
- `degraded`: mapa indisponível, vitrine disponível;
- `error`: falha identificada, texto e ação de recuperação.

Exibir “Carregando agentes…” ou “Preparando o mapa…” apenas enquanto aquela operação ocorrer. Se a duração é indeterminada, o indicador também é; a semântica ARIA não deve expor uma porcentagem inventada. A documentação do [papel progressbar](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/progressbar_role) distingue estado determinado de indeterminado. Um pequeno `role=status` pode anunciar mudança de etapa sem repetir cada quadro.

Não impor um atraso mínimo artificial para obrigar a pessoa a assistir à marca. Se os recursos estiverem prontos rapidamente, ir ao mapa. A saída do indicador pode ser uma dissolução curta. Enquanto o mapa carrega, vitrine e controles independentes continuam disponíveis. Timeout real muda para recuperação; a animação não mascara uma falha indefinidamente.

O avatar do chat só demonstra “ouvindo” se houver captação de áudio ativa; “respondendo” acompanha o estado verdadeiro da solicitação. Na demonstração local, a descrição do modo permanece honesta.

## Desempenho e conforto visual como parte do acabamento

O princípio técnico é animar sobretudo `transform` e `opacity`; mudanças contínuas de layout, sombras e grandes áreas de blur exigem investigação com ferramentas de desempenho. O [guia do Chrome/web.dev](https://web.dev/articles/animations-guide) explica composição, pintura, `will-change` pontual e inspeção de frames. Aplicação proposta: o vidro tem blur estático; a luz se move numa camada pequena com máscara, em vez de recalcular o blur do painel inteiro a cada quadro.

Orçamento inicial proposto, ainda a medir:

- Animação interativa almeja 60 fps quando o dispositivo permitir; não anunciar um número garantido antes de medir.
- O mapa possui prioridade de GPU. Evitar três canvases animados ao mesmo tempo (mapa, avatar e partículas fullscreen).
- Retratos dos pinos usam miniaturas próprias; não baixar vinte imagens enormes para círculos de 40 px.
- No máximo uma sequência de destaque por interação; demais superfícies não competem pelo foco.
- Limitar transparências sobrepostas: um vidro principal por área, fundo mais opaco atrás do texto.
- Pausar loops com aba oculta e conteúdo fora de vista. Modo ambiente tem controle explícito.
- Suspender parallax ao digitar, arrastar mapa ou abrir teclado virtual. Em touch, nada depende de hover.
- Renderizar apenas o avatar 3D que estiver sendo visto. Se adotado R3F, considerar `frameloop="demand"`, reuso de recursos e adaptação de resolução, conforme o [guia oficial fonte](https://raw.githubusercontent.com/pmndrs/react-three-fiber/master/docs/advanced/scaling-performance.mdx).
- Se WebGL adicional falhar, apresentar o retrato estático original. O usuário mantém dados e ações.

Em preferência de movimento reduzido, substituir grandes deslocamentos por dissoluções curtas, remover rotação automática, parallax e loops decorativos. O [Motion documenta `MotionConfig reducedMotion="user"` e `useReducedMotion`](https://motion.dev/docs/react-accessibility); a [media query do navegador](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion) também precisa cobrir o CSS e os motores externos. Essa opção não deve remover conteúdo nem impossibilitar uma apresentação manual.

## Como decidir se subiu de 7 para 10

Critérios de aprovação do protótipo, antes de distribuir efeitos pelo sistema:

1. **Identidade:** logo, loader, pino, card e chat reconhecíveis como a mesma família mesmo sem o nome Atlas.
2. **Retrato:** agente ocupa aproximadamente metade da área visual principal do card, com recorte e iluminação consistentes; não é um avatar minúsculo em uma caixa de informações.
3. **Material:** borda, transparência e luz continuam elegantes sobre oceano escuro e continente claro; texto não perde contraste.
4. **Relação espacial:** clicar no pino deixa óbvio qual agente abriu e em qual cidade o cliente está.
5. **Continuidade:** abrir, trocar, fechar, interromper e repetir a interação não geram saltos ou peças órfãs.
6. **Mobile:** primeiro toque funciona, ações têm área confortável, não há necessidade de hover, o mapa permanece compreensível.
7. **Repouso:** uma captura de tela estática ainda impressiona; o motion melhora a composição em vez de esconder suas fraquezas.
8. **Verdade:** números, carregamento, estado do agente e estado do chat correspondem a informações reais ou claramente fictícias na demonstração.
9. **Desempenho:** validar Safari/iPhone real, Android intermediário e desktop, com gravação e perfil; não confundir viewport estreito no desktop com teste de GPU móvel.
10. **Acessibilidade:** foco, toque, movimento reduzido, contraste e falha de rede mantêm a mesma qualidade de uso.

## Limites deste levantamento

Foram lidas fontes de estúdios, documentação e licenças dos projetos; não instalei as bibliotecas nem rodei comparação de FPS. Desempenho depende da cena, quantidade de efeitos, GPU e implementação. Os números de duração e orçamento são hipóteses de design para o protótipo. Valores de planos e APIs podem mudar; fixar versões e conferir as condições do ativo escolhido antes da integração final. Nenhuma alteração no site foi feita por esta pesquisa.