Como ele é
Imagine uma folha de papel segura pelas laterais. Ao rolar a página com o mouse ou o trackpad em cima dela, o meio da folha verga para cima ou para baixo, conforme o sentido da rolagem, e estica um pouco na vertical, enquanto as laterais ficam quase no lugar. Quando a rolagem para, a superfície volta a ficar plana em fração de segundo. Com a opção de arrastar ligada, apertar e puxar com o mouse também curva o conteúdo, e a seleção de texto fica bloqueada. O efeito aparece num canvas por cima, com o HTML real por baixo, e pausa fora da tela.
Você pode estar procurando isto se pediu algo assim
- página que entorta quando eu rolo rápido
- conteúdo que verga com a velocidade do scroll, tipo papel
- efeito de arrasto na rolagem para o meu portfólio
- seção que estica e volta quando giro a rodinha do mouse
- deixar a rolagem com sensação elástica num experimento
- aquele efeito de site premiado em que a página dobra ao rolar
Também chamado de
- scroll velocity effect
- efeito de velocidade de rolagem
- scroll bend
- page bend
- efeito de arrasto
- elastic scroll
- página que verga no scroll
Quando usar
- Experimentos de rolagem em portfólio de designer ou de estúdio
- Protótipos que testam uma sensação física na rolagem
- Demos de front-end vistas no computador, com mouse ou trackpad
Quando evitar
- Sites de cliente em produção: o prompt restringe o uso a protótipos
- Público que navega principalmente pelo celular, sem roda de mouse
- Páginas de leitura longa, em que a deformação cansa
Como pedir para a sua IA
Quero um efeito de curvatura por velocidade de rolagem em WebGL2 num bloco de HTML do meu protótipo: ele verga conforme a velocidade da roda do mouse e volta a ficar plano quando a rolagem para, com o texto selecionável por baixo, pausa fora da tela e versão estática 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 Taquara
Taquara funciona no celular?
Pouco. Taquara reage ao evento de roda, gerado pelo mouse e pelo trackpad; a rolagem com o dedo no celular não dispara esse evento, então a página não se curva. O modo de apertar e arrastar, ligado pela prop mouseEnabled, também foi pensado para o mouse. O efeito faz mais sentido em demos para computador.
Dá para continuar selecionando o texto com Taquara?
Sim, no modo padrão. Taquara só usa a roda do mouse e deixa o texto selecionável, com o HTML original por baixo do efeito. Ao ligar mouseEnabled, apertar e arrastar passa a curvar a página, mas a seleção de texto fica bloqueada, então escolha conforme o conteúdo.
Taquara pode ir para um site em produção?
O prompt do THM Componentes orienta a IA a usar Taquara só em protótipos, porque o componente depende de uma API experimental do navegador, com uma cópia do HTML em WebGL2 como reserva. O mesmo prompt pede uma versão estática para quem prefere menos movimento e teste de LCP e INP no celular.
