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