# Teleférico Linhas finas ligam ícones e cards, e um pulso de luz colorida corre por elas, mostrando os dados em movimento. > Teleférico é um componente do THM Componentes que liga dois elementos da página com uma linha em SVG e faz um pulso de luz colorida percorrer essa linha sem parar. Com vários feixes saindo de ícones para um centro, vira um diagrama de integrações ou de fluxo de dados, leve e sem WebGL. - Categoria: Efeitos especiais - 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 - Interação: Nenhuma: o efeito roda sozinho - URL: https://vibecode.thmtecnologia.com/componentes/teleferico/ ## Como ele é Pense num mapa de metrô em que um vagão de luz percorre a linha entre duas estações. Uma linha cinza bem clara, quase transparente, liga o centro de um elemento ao centro de outro, reta ou em arco. Por cima dela, um trecho de luz em degradê de laranja para roxo, com as pontas apagadas, sai de uma ponta e corre até a outra, rápido no começo e mais lento no fim, e o ciclo se repete a cada quatro a sete segundos. O sentido segue a posição dos elementos e pode ser invertido. Quando o contêiner muda de tamanho, o caminho é recalculado. ## Você pode estar procurando isto se pediu algo assim - “linhas animadas ligando os ícones das integrações ao meu logo” - “mostrar que o app conecta com várias ferramentas, tipo um diagrama” - “um raio de luz passando entre dois cards” - “efeito de dados fluindo entre caixas na página de produto” - “diagrama com linhas curvas e brilho correndo nelas” - “seção de integrações com aparência de SaaS moderno” - “conexões animadas entre elementos do layout” ## Também chamado de feixe animado, conectores animados, connecting lines animation, linhas de conexão animadas, data flow animation, diagrama de integrações, SVG beam ## Quando usar - Seção de integrações de SaaS, com ícones ligados ao produto no centro - Explicar um fluxo de dados ou de automação passo a passo - Mostrar a troca entre dois sistemas com feixes nos dois sentidos - Páginas de API e de plataforma que precisam parecer conectadas ## Quando evitar - Layouts em que os elementos se movem sem o contêiner mudar de tamanho, porque o caminho só se recalcula no redimensionamento - Diagramas com dezenas de ligações, que viram uma teia difícil de ler ## Como pedir para a sua IA ```text Crie uma seção de integrações com feixes animados em SVG ligando os ícones das ferramentas ao logo no centro: um pulso de luz nas cores da marca percorre cada linha, o layout se adapta ao celular e os feixes ficam parados para quem prefere menos movimento. ``` 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 Teleférico ### Como ligar vários ícones a um ponto central com Teleférico? Cada ligação é uma instância de Teleférico: você passa o contêiner, o elemento de saída e o de chegada. A demo usa seis feixes de ícones laterais até um ícone central, com arcos para cima e para baixo controlados pela curvatura. Deslocamentos de início e de fim ajustam o ponto exato de encaixe. ### Teleférico se ajusta ao celular? Teleférico recalcula o caminho sempre que o contêiner muda de tamanho, então os feixes acompanham o layout em telas menores. O que muda no celular é a disposição dos ícones, que fica por conta do seu CSS. O prompt do THM Componentes pede teste em mobile e comparação de LCP e INP. ### Dá para trocar as cores do feixe? Sim. Teleférico tem cor de início e de fim para o pulso, além de cor, espessura e opacidade para a linha de base. Os valores padrão são laranja e roxo, e o prompt do THM Componentes orienta a IA a trocar por tokens de cor do projeto, sem cores fixas dentro do componente. ## Componentes relacionados - [Satélite](https://vibecode.thmtecnologia.com/componentes/satelite/): Um pequeno feixe de luz colorida dá voltas pela borda de um card ou seção, como um cometa contornando a moldura. - [Farol](https://vibecode.thmtecnologia.com/componentes/farol/): Uma linha fina ao lado do texto ganha um feixe colorido que desce junto enquanto a pessoa lê e rola a página. - [Planetário](https://vibecode.thmtecnologia.com/componentes/planetario/): Ícones ou pequenos elementos que giram em círculos ao redor de um centro, como planetas em volta do Sol. - [Ouriço](https://vibecode.thmtecnologia.com/componentes/ourico/): Bola de ícones redondos girando em 3D, que segue o mouse e traz para a frente o ícone clicado. - [Aqueduto](https://vibecode.thmtecnologia.com/componentes/aqueduto/): Faixas curvas que mostram para onde vai cada parte de um total, com pontinhos correndo na proporção do volume. --- 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.