# Bobina

Cada linha de texto rola na vertical e dá lugar a uma cópia idêntica, no ritmo da rolagem.

> Bobina é um componente do THM Componentes que faz o texto rolar na vertical conforme a rolagem: dentro de cada linha, uma cópia sai por uma borda enquanto outra idêntica entra pela oposta, com suavização por mola. É leve e funciona bem em listas de nomes, clientes ou serviços em landing pages.

- Categoria: Texto e tipografia
- 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: Rolagem
- URL: https://vibecode.thmtecnologia.com/componentes/bobina/

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

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

## Componentes relacionados

- [Cambalhota](https://vibecode.thmtecnologia.com/componentes/cambalhota/): Ao passar o mouse, cada letra desliza na vertical e dá lugar a uma cópia, numa onda que atravessa a palavra.
- [Iluminura](https://vibecode.thmtecnologia.com/componentes/iluminura/): A frase fica fixa na tela e cada palavra passa do cinza apagado à cor cheia conforme você rola.
- [Cadência](https://vibecode.thmtecnologia.com/componentes/cadencia/): Um texto grande em que cada palavra sai do desfoque e fica nítida conforme você rola, no ritmo da leitura.
- [Sinônimo](https://vibecode.thmtecnologia.com/componentes/sinonimo/): Uma palavra no meio do título troca sozinha a cada poucos segundos, com a nova entrando letra por letra.
- [Roteiro](https://vibecode.thmtecnologia.com/componentes/roteiro/): Uma imagem fixa ao lado do texto que troca, aproxima ou recorta conforme cada parte da história entra em foco.

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