# Atol Uma pílula preta no topo da tela que cresce e muda de formato para mostrar música, chamada, aviso ou cronômetro. > Atol é um componente exclusivo do THM Componentes que recria a ilha de status dos celulares recentes: uma pílula preta que se estica com física de mola para mostrar notificação, música tocando, chamada e temporizador, com botões que funcionam. Serve para status ao vivo em apps, pedidos em andamento, players e contagens regressivas. - Categoria: Navegação e scroll - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/atol/ ## 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 ```text 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. ## Componentes relacionados - [Légua](https://vibecode.thmtecnologia.com/componentes/legua/): Uma pílula flutuante no topo da tela mostra quanto da página já foi lido e se abre num menu ao clicar. - [Baralho](https://vibecode.thmtecnologia.com/componentes/baralho/): Avisos que surgem no canto da tela, empilhados como cartas, e somem sozinhos ou com um arraste para o lado. - [Bonde](https://vibecode.thmtecnologia.com/componentes/bonde/): Um menu de cabeçalho em que um único painel desliza e muda de tamanho ao passar de um item para outro. - [Estojo](https://vibecode.thmtecnologia.com/componentes/estojo/): Um iPhone desenhado em SVG, com a ilha no topo e o print do seu app ocupando a tela. - [Bússola](https://vibecode.thmtecnologia.com/componentes/bussola/): Uma barra de ícones flutuante em que os ícones crescem perto do cursor e se deixam puxar por ele, como ímãs. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.