Animação do iPhone Duo: vidro, movimento e continuidade entre telas

A animação de abertura do iPhone Duo chama atenção pela impressão de abrir uma superfície de vidro: a imagem perde nitidez durante o movimento e se resolve na tela aberta. O detalhe interessante para quem trabalha com design e código é a relação entre a ação física e a resposta visual.

A discussão no r/apple trouxe o assunto para além das especificações do aparelho. Entre debates sobre originalidade e comparações com Android, aparece uma pergunta mais útil para o nosso trabalho: por que um efeito tão breve pode mudar a percepção de uma interação?

Vamos olhar para essa transição, para o que as recriações abertas permitem estudar e para como aplicar esse raciocínio em interfaces web. A análise de design abaixo é minha interpretação; as técnicas atribuídas a projetos de código aberto pertencem a esses projetos, não à implementação interna da Apple.

O que acontece na abertura do iPhone Duo?

A reportagem que originou a discussão descreve um desfoque durante a passagem entre telas, comparando a sensação à abertura de uma janela transparente. Também relata uma recriação em um Galaxy Z Fold usando sensores da dobradiça. A possibilidade de outros fabricantes adotarem algo semelhante é apresentada como relato, não como uma lista de recursos oficialmente confirmados. Fonte: Notebookcheck.

A leitura visual que me interessa é esta: a superfície que está se movendo parece participar da imagem. A dobra deixa de ser apenas uma interrupção entre dois displays e passa a fazer parte da transição.

Por isso, aumentar a largura de um painel ou colocar um fade na página captura pouco da referência. O assunto aqui envolve material, orientação no espaço e continuidade durante um gesto.

Por que a sensação de vidro funciona?

Pense em abrir uma porta de vidro fosco. Você reconhece cores e massas do outro lado, mesmo sem enxergar todos os detalhes. Conforme a posição muda, também muda a relação entre a superfície, a luz e aquilo que você vê.

Como interpretação de design, o desfoque pode cumprir um papel parecido: manter uma referência visual enquanto detalhes deixam de ser estáveis. A interface comunica que existe uma transformação em andamento, sem exigir que cada elemento permaneça perfeitamente legível durante toda a passagem.

Eu separaria o estudo em três perguntas:

• O que permanece reconhecível? Cores, enquadramento e distribuição das formas podem conectar o antes e o depois.
• O que informa a direção? A região que perde nitidez ou recebe luz precisa combinar com o movimento percebido.
• Quando a imagem se estabiliza? O estado final deve voltar a ser claro e utilizável, sem um efeito decorativo continuando depois da ação.

Essa é uma maneira de analisar a experiência, não uma descrição do algoritmo da Apple.

O que as recriações abertas mostram

Há caminhos diferentes para produzir uma aproximação. Dois projetos ajudam a entender por que reproduzir a aparência e integrar o comportamento ao sistema são problemas distintos.

Duo Open: imagem capturada e shader

O Duo Open descreve uma implementação Android na qual as metades se comportam como vidro fosco ao redor da dobra. O ângulo real da dobradiça controla o efeito. A tela externa começa a ficar desfocada; a interna continua a passagem e recupera a nitidez.

No modo de sobreposição, o projeto captura uma imagem por fase de abertura ou fechamento e a desenha usando um shader. Isso permite transformar a imagem, mas traz limitações: o README documenta restrições de captura e situações em que uma abertura rápida não dá tempo de mostrar as duas fases.

Essas escolhas são da recriação. Elas não demonstram que a Apple usa capturas de tela ou o mesmo shader.

FoldFX: desfoque do compositor e camadas de luz

O FoldFX segue outro caminho: recebe o ângulo da dobradiça, calcula um progresso e aplica desfoque pelo compositor do Android, junto de elementos como escurecimento e uma faixa de luz. O projeto declara que não captura o conteúdo da tela.

Seu README também aponta uma limitação importante: a sobreposição não substitui a transição do sistema. O Android continua decidindo quando cada display liga e quando o aplicativo muda de configuração.

O aprendizado é concreto: uma réplica visual pode funcionar em uma demonstração e ainda enfrentar limites na troca real entre telas, na tela bloqueada ou em aparelhos com sensores diferentes.

A decisão de código mais interessante: progresso em vez de cronômetro

Para um estudo desse tipo, eu começaria modelando um progresso entre 0 e 1. No experimento web, ele pode vir de um controle deslizante. Isso permite parar no meio e inverter a direção, em vez de assistir a uma sequência que sempre termina sozinha.

O modelo abaixo é autoral e didático. Os valores foram escolhidos para demonstrar a relação entre abertura e intensidade; não são parâmetros medidos no iPhone.

function getFoldState(progress) {
  const p = Number.isFinite(progress)
    ? Math.min(1, Math.max(0, progress))
    : 0;

  // Intensidade zero nas extremidades e máxima no meio.
  const activity = Math.sin(Math.PI * p);

  return {
    progress: p,
    blurPx: activity * 12,
    shadeOpacity: activity * 0.18,
    lightPositionPercent: p * 100,
  };
}

console.log(getFoldState(0));   // início estável
console.log(getFoldState(0.5)); // maior intensidade
console.log(getFoldState(1));   // fim estável

Aqui, progress representa a ação; activity representa a intensidade do tratamento visual. Separar os dois evita assumir que o desfoque deve crescer até o final. Nesse modelo, ele cresce durante a passagem e desaparece quando ela termina.

A curva também permite percorrer o caminho ao contrário sem criar outra animação. Se o controle voltar de 0.7 para 0.4, o estado visual acompanha o novo valor.

Esse trecho só calcula parâmetros. Ele não renderiza a dobra, não lê sensores e não reproduz a ilusão de vidro. Um experimento visual ainda precisaria definir geometria, máscaras, enquadramento e composição das camadas.

Por que adicionar blur não resolve o efeito inteiro

Na web, filter: blur() aplica desfoque ao elemento. É uma ferramenta para alterar a imagem, mas não modela por si só uma superfície que muda de orientação. A documentação de filtros da MDN explica as operações disponíveis e como combiná-las.

Para um protótipo inspirado na referência, eu trabalharia em etapas:

1. Definir a cena parada, com uma referência visual identificável.
2. Decidir qual região representa a superfície em movimento.
3. Controlar o enquadramento para que a imagem não pareça deslizar sem motivo.
4. Conectar desfoque, sombra e luz ao mesmo progresso.
5. Testar a abertura, a pausa e o fechamento antes de ajustar o acabamento.

Se a geometria estiver incoerente, aumentar o desfoque só esconderá o problema por alguns instantes. Eu validaria primeiro a direção e a continuidade com cores simples; depois entrariam textura e iluminação.

Motion design também depende do layout final

Uma transição bem resolvida precisa entregar uma interface útil ao terminar. A Apple orienta que aplicativos para o Duo adaptem composição e controles ao espaço disponível, considerando também configurações parcialmente dobradas. A continuidade de hierarquia e funcionalidades faz parte desse trabalho. Fonte: Design for iPhone Duo.

Para um site, eu traduziria essa preocupação em perguntas práticas: o conteúdo mantém sua ordem? O usuário continua no mesmo contexto? Os controles permanecem acessíveis quando o layout muda?

Um efeito não deveria compensar um estado final mal organizado. Antes de animar a passagem de um card para uma página de detalhes, por exemplo, eu resolveria a hierarquia e a leitura dessa página.

Como eu avaliaria um experimento desse tipo

Além de assistir à animação completa, eu testaria situações que uma gravação promocional não costuma mostrar:

• Parar em vários pontos e verificar se a composição ainda faz sentido.
• Inverter a direção rapidamente e procurar saltos ou atrasos perceptíveis.
• Usar imagens claras e escuras para avaliar o tratamento de luz.
• Conferir se nenhuma camada decorativa intercepta cliques ou cobre controles.
• Medir o comportamento em um aparelho real com desempenho mais limitado.
• Oferecer uma apresentação estável para quem prefere menos movimento.

Na web, a preferência pode ser consultada com prefers-reduced-motion. Minha escolha para uma demonstração decorativa seria remover a transformação espacial e manter a explicação e os controles disponíveis.

Para aprofundar esses cuidados, veja animações no front-end: performance e acessibilidade.

Perguntas frequentes

A tela fica transparente de verdade?

A referência discutida é um efeito visual de software. A aparência de vidro durante a abertura não significa que o painel físico tenha se tornado transparente.

Já existe uma versão igual para Android?

Existem experimentos públicos, como os projetos citados acima. Eles documentam abordagens e limitações próprias; isso não equivale a uma integração idêntica no sistema nem garante o mesmo resultado em qualquer dobrável.

Dá para reproduzir com HTML, CSS e JavaScript?

É possível criar um estudo visual controlado por progresso. Uma página web, porém, não deve ser apresentada como equivalente à troca nativa entre displays. O código deste artigo é um ponto de partida para modelar parâmetros, não uma réplica completa.

Qual é a principal lição para quem trabalha com interfaces?

Na minha leitura, é conectar o movimento ao contexto da ação. Quando direção, material e resposta parecem pertencer ao mesmo gesto, a transição ganha propósito. É esse cuidado que eu levaria para outros projetos, mesmo quando o resultado não tem vidro, dobra ou desfoque.