Como ele é
Lembra um contador mecânico girando uma casa. Cada linha de texto fica numa janela do próprio tamanho e, quando passa por uma faixa da área rolável, a palavra rola na vertical: uma cópia sai por uma borda da janela enquanto outra igual entra pela borda oposta, até ocupar o mesmo lugar. Rolando de volta, o movimento se inverte. Numa lista longa, as linhas trocam uma depois da outra, como uma onda que segue a rolagem. Uma mola suaviza o movimento, que acompanha o scroll com um pequeno atraso e sem saltos. O componente não define cores: fonte, tamanho e cor vêm do texto que você coloca nele.
Você pode estar procurando isto se pediu algo assim
- texto que gira na vertical enquanto eu rolo a página
- lista de nomes que vai virando conforme desço a tela
- palavras que rolam tipo contador mecânico quando faço scroll
- efeito de letreiro que gira com a rolagem na landing page
- lista de clientes com animação no scroll sem deixar o site pesado
- título que dá uma volta na vertical quando passa pela tela
Também chamado de
- texto tipo contador mecânico
- texto rolando no scroll
- rolling text on scroll
- vertical text swap
- scroll-linked text animation
- animação de texto no scroll
Quando usar
- Listas de clientes, parceiros ou serviços numa landing page longa
- Seções de narrativa em que a rolagem deve dar ritmo ao texto
- Portfólios e páginas de agência com tipografia grande em caixa alta
- Créditos, equipe ou palestrantes apresentados um nome por linha
Quando evitar
- Parágrafos longos, já que o efeito foi pensado para linhas curtas de uma frase só
- Telas sem rolagem, como um painel fixo, em que o efeito nunca dispara
Como pedir para a sua IA
Crie uma animação de texto ligada ao scroll na lista de clientes da minha landing page: cada nome rola na vertical e é trocado por uma cópia idêntica conforme a página rola, com suavização por mola, versão estática para movimento reduzido e leitura única pelo leitor de tela.
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 Bobina
O leitor de tela lê Bobina mais de uma vez?
Não. Bobina desenha o texto três vezes para criar o movimento, mas a cópia que reserva o espaço e a segunda cópia em movimento ficam marcadas com aria-hidden, então o leitor de tela anuncia a frase uma vez só.
Bobina funciona no celular?
Funciona. Bobina reage à rolagem, seja pela roda do mouse, seja pelo dedo, e não depende de hover. Tem classificação Leve no THM Componentes, e o prompt ainda pede à IA para testar no celular e comparar LCP e INP antes e depois.
Como ajustar a velocidade de Bobina?
Bobina tem duas alavancas: a faixa de rolagem em que a troca acontece, definida pela prop offset, e a mola que suaviza o movimento, com rigidez 200 e amortecimento 30 por padrão. Uma faixa mais curta deixa a troca mais rápida; mais amortecimento deixa o movimento mais contido.
