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
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.
