Como ele é
Imagine o recorte preto no topo de um celular ganhando vida. No menor tamanho, a pílula mostra só o ponto da câmera; quando chega uma novidade, ela cresce para os lados e para baixo e balança antes de assentar, como um elástico. No modo música aparecem capa, título, barrinhas de som que pulsam e controles; na chamada, as iniciais de quem liga e botões verde e vermelho; no temporizador, números laranja em contagem regressiva. O conteúdo troca com um desfoque cruzado e a sombra aumenta conforme a ilha se abre. Por padrão, ela fica sobre uma moldura de celular com tela de bloqueio, relógio e papel de parede.
Você pode estar procurando isto se pediu algo assim
- aquela pílula preta do iPhone que cresce mostrando o que está tocando
- aviso no topo da tela que se estica e depois volta a ficar pequeno
- mostrar o status do pedido ao vivo, tipo notificação de celular
- um player de música compacto que abre quando clico
- efeito de ilha que muda de forma com elasticidade, igual ao da Apple
- barrinha no topo do app com um cronômetro rodando
- simular a tela do celular recebendo uma chamada na landing page
Também chamado de
- ilha dinâmica
- ilha de status
- live activity
- pílula de status
- notch animado
- morphing pill
- status ao vivo
Quando usar
- Mostrar pedidos, entregas ou corridas em andamento dentro do app
- Mini player de música, podcast ou áudio que abre com um toque
- Página de apresentação de app mobile, com a moldura de celular ligada
- Contagem regressiva de oferta, aula ou sessão ao vivo
Quando evitar
- Avisos críticos que pedem mais espaço e uma confirmação explícita
- Mensagens longas: a notificação expandida mostra só duas linhas de texto
- Sites sem identidade mobile, em que a referência ao celular soa deslocada
Como pedir para a sua IA
Crie no topo da tela do meu app em Vue uma pílula de status como a ilha dinâmica do iPhone, que se expande com animação de mola para mostrar status de pedido, player e temporizador, nas cores da minha marca, acessível por teclado e com versão sem animação para quem prefere menos movimento.
Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Atol
Dá para trocar textos, cores e a moldura de Atol?
Dá. Atol recebe por props a cor da ilha, duas cores de destaque, a capa e o nome da faixa, quem está ligando, o texto da notificação e a duração do temporizador. A prop frame liga ou desliga a moldura de celular, e o prompt do THM Componentes orienta a IA a usar os tokens de cor do seu projeto.
Atol funciona com teclado e leitor de tela?
Funciona. A ilha é um botão: clique, Enter ou Espaço expandem e recolhem, e Esc recolhe. O seletor de estados funciona como grupo de opções com setas, Home e End. Cada troca é anunciada numa região ao vivo para leitores de tela, com um resumo como a faixa tocando ou o tempo restante no temporizador de Atol.
Atol respeita quem prefere menos movimento?
Sim. Com a preferência de reduzir movimento ativa, Atol para o ciclo automático, mostra a pílula já expandida e troca de tamanho num salto direto, sem mola. As barrinhas de som ficam paradas e as transições de conteúdo deixam de animar. O ciclo também pausa quando a ilha sai da tela ou quando a pessoa interage.
