# Recado Avisos que surgem um de cada vez no topo da lista e empurram os anteriores para baixo, como um feed ao vivo. > Recado é um componente do THM Componentes em que avisos entram um de cada vez no topo da lista, com efeito de mola, enquanto os anteriores descem. Com todos na tela, a lista segue girando: o mais antigo sai pela base e o próximo entra no topo. Serve para feeds de notificações e prova social ao vivo. - Categoria: Navegação e scroll - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, Motion for Vue - Interação: Mouse - URL: https://vibecode.thmtecnologia.com/componentes/recado/ ## Como ele é Pense na tela de bloqueio do celular recebendo notificações. A cada segundo, por padrão, um cartão novo nasce no topo da lista: começa pequeno e transparente e cresce com um leve efeito de mola, enquanto os cartões de baixo deslizam para abrir espaço. O cartão de exemplo tem cantos arredondados, um quadrado colorido com ícone à esquerda, título, horário em cinza e uma linha de descrição. No modo claro, ele é branco com sombra suave; no escuro, fica translúcido, com borda fina e fundo desfocado. Ao passar o mouse, o cartão cresce um pouco. Depois que todos aparecem, o mais antigo sai pela base e a sequência recomeça. ## Você pode estar procurando isto se pediu algo assim - “notificações aparecendo uma por uma na tela, tipo celular” - “lista de avisos que vai entrando sozinha com animação” - “mostrar que tem gente comprando no meu site agora” - “feed de atividade recente que se atualiza sozinho” - “aquele efeito de notificação empilhando igual ao do iPhone” - “cartões que surgem no topo e empurram os outros para baixo” - “algo para a landing page mostrar o app movimentado” ## Também chamado de lista animada, notificações empilhadas, feed de notificações, notification feed, activity feed, prova social ao vivo, staggered list animation ## Quando usar - Seção de prova social em landing page, simulando atividade recente - Hero de SaaS que quer mostrar o produto gerando eventos - Painel com um feed de atividade ou de notificações - Página de recursos que apresenta os tipos de alerta do sistema ## Quando evitar - Notificações reais e importantes, já que a lista gira sem parar e cada item some sozinho - Áreas de leitura atenta, em que um item novo a cada segundo distrai ## Como pedir para a sua IA ```text Crie uma lista animada de notificações na landing page: cada cartão entra no topo com efeito de mola, empurra os outros para baixo e a sequência se repete. Use as cores do meu projeto, ofereça uma versão estática para movimento reduzido e mantenha leve no celular. ``` Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar. ## Perguntas sobre Recado ### Dá para mudar a velocidade com que os itens de Recado aparecem? Sim. Recado tem a prop delay, em milissegundos, que define o intervalo entre um item e o próximo; o padrão é 1000, ou seja, um cartão novo por segundo. Valores maiores deixam o feed mais calmo, o que ajuda em páginas com muito conteúdo ao redor. ### Recado funciona no Nuxt com SSR? Funciona, mas a animação só começa no navegador. Recado monta a sequência depois que a página carrega, então o servidor entrega a lista vazia e os cartões vão surgindo no cliente. A demonstração envolve o componente em ClientOnly, e vale reservar a altura da área para o layout não pular. ### Recado respeita quem prefere menos movimento? O componente original anima sempre e não lê essa preferência. O prompt do THM Componentes pede à IA uma versão estática para quem ativa a redução de movimento no sistema; em Recado, isso pode ser mostrar os cartões já no lugar, sem a entrada com mola e sem a troca contínua. ## Componentes relacionados - [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. - [Comboio](https://vibecode.thmtecnologia.com/componentes/comboio/): Uma fileira de logos, depoimentos ou etiquetas que desliza em loop contínuo, na horizontal ou na vertical. - [Causo](https://vibecode.thmtecnologia.com/componentes/causo/): Fotos de clientes empilhadas e levemente inclinadas, com a frase do depoimento surgindo palavra por palavra ao lado. - [Almanaque](https://vibecode.thmtecnologia.com/componentes/almanaque/): Uma linha vertical com marcos fixos que vai sendo preenchida por um feixe colorido conforme a página rola. - [Algarismo](https://vibecode.thmtecnologia.com/componentes/algarismo/): Número que parte do zero e corre até o valor final quando aparece na tela, como um placar. --- 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.