# Trampolim Um cartão com os dias em botões: ao escolher um dia, o cartão se estica com efeito de mola e mostra os eventos. > Trampolim é um componente do THM Componentes que mostra uma fileira de dias em botões e os eventos do dia escolhido. Ao trocar de dia, o nome do dia se transforma no novo, os eventos entram deslizando e o cartão muda de altura com efeito de mola. Serve para agendas de eventos, aulas e consultas. - Categoria: Aplicações e produtividade - 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, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/trampolim/ ## Como ele é Pense num calendário de bolso dentro de um cartão de cantos arredondados. No alto, o nome do dia escolhido aparece grande, em negrito; embaixo, uma fileira de botões mostra mês, número e dia da semana. Ao clicar em outro dia, o nome antigo se desmancha num borrão e o novo se forma no lugar, como letras líquidas que se fundem. Se o dia tem compromissos, surge entre o nome e os botões uma lista de eventos com título e horário, que entra deslizando da direita, e o cartão cresce com um quique de mola; num dia vazio, ele encolhe. Os botões crescem no hover e afundam no clique. ## Você pode estar procurando isto se pediu algo assim - “calendário bonitinho que mostra os eventos quando clico no dia” - “agenda da semana num cartão para o site do meu curso” - “lista de compromissos do dia com animação de mola” - “mostrar as próximas aulas ou consultas de um jeito animado” - “cartão de datas que cresce para mostrar o que tem no dia” - “calendário estilo app de iPhone para a página de eventos” ## Também chamado de calendário animado, event calendar, agenda de eventos, calendar widget, calendário de eventos, spring animation, seletor de dias ## Quando usar - Agenda de eventos, aulas ou consultas em sites de cursos e clínicas - Programação de um evento ou de uma conferência dividida por dia - Painel de app com os compromissos da semana - Página de lançamento com as datas de lives ou de turmas ## Quando evitar - Agendas com meses inteiros, já que o componente mostra só uma fileira de dias - Quando a pessoa precisa marcar horário: o componente exibe eventos, sem formulário ## Como pedir para a sua IA ```text Quero um calendário animado com efeito de mola na página de aulas: botões com os dias da semana e, ao escolher um, o cartão se expande e lista os eventos daquele dia, com textos em português, cores do meu tema, navegação por teclado e versão sem animação. ``` 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 Trampolim ### Como coloco meus eventos em Trampolim? Pela prop calendarData: uma lista de dias, cada um com mês, número, dia da semana e, se quiser, eventos com título, dia e horário. Trampolim abre no dia indicado por initialIndex e emite update:activeIndex quando a pessoa escolhe outro, o que permite sincronizar com o resto do app. ### Trampolim está em português? Os dias, os meses e os eventos vêm dos seus dados, então ficam no idioma em que você escrever. O título da lista, Upcoming Events, está fixo em inglês no código de Trampolim; basta pedir à IA que o traduza na instalação. O ícone usa o componente Icon do Nuxt e, em Vue puro, precisa ser trocado. ### Trampolim funciona com teclado e no celular? Sim. Os dias de Trampolim são botões nativos, então recebem foco pelo Tab, ativam com Enter ou espaço e respondem ao toque. As cores vêm de tokens do tema, como muted e primary, e acompanham o claro e o escuro do projeto. A animação de mola não muda com a preferência de menos movimento, e o prompt pede à IA uma versão estática. ## Componentes relacionados - [Expediente](https://vibecode.thmtecnologia.com/componentes/expediente/): Agenda semanal de consultas em que você cria, move e estica horários arrastando, com uma cor por profissional. - [Folhinha](https://vibecode.thmtecnologia.com/componentes/folhinha/): Calendário em português com dois meses lado a lado para escolher data inicial e final, com atalhos e feriados. - [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. - [Recado](https://vibecode.thmtecnologia.com/componentes/recado/): Avisos que surgem um de cada vez no topo da lista e empurram os anteriores para baixo, como um feed ao vivo. - [Caderneta](https://vibecode.thmtecnologia.com/componentes/caderneta/): Um ano inteiro em quadradinhos, um por dia, que ficam mais escuros nos dias com mais atividade. --- 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.