# Taquara Ao girar a roda do mouse sobre o bloco, o conteúdo se curva como uma folha de papel e depois volta ao lugar. > Taquara é um componente do THM Componentes que faz um bloco de HTML vergar conforme a velocidade da rolagem: quanto mais rápido a roda do mouse gira sobre ele, mais o meio da página se curva, e tudo volta a ficar plano quando a rolagem para. Roda em WebGL2 e é um experimento para portfólios em protótipo. - Categoria: Efeitos especiais - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Experimental: usa uma API de navegador ainda em teste, com alternativa automática quando ela não existe - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, WebGL - Interação: Rolagem, Mouse - URL: https://vibecode.thmtecnologia.com/componentes/taquara/ ## 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 ```text 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. ## Componentes relacionados - [Crisol](https://vibecode.thmtecnologia.com/componentes/crisol/): Seu HTML de verdade passa por um efeito gráfico da placa de vídeo, como ondas de água, e segue clicável. - [Remanso](https://vibecode.thmtecnologia.com/componentes/remanso/): O conteúdo da página parece estar sob uma lâmina d'água e solta ondas por onde o mouse passa. - [Varal](https://vibecode.thmtecnologia.com/componentes/varal/): O conteúdo da página se dobra e ondula devagar, como um pano leve balançando com a brisa. - [Arcada](https://vibecode.thmtecnologia.com/componentes/arcada/): Fotos em fileira sobre uma curva, que deslizam com arrasto ou rolagem e ondulam de leve ao se mover. - [Cavalete](https://vibecode.thmtecnologia.com/componentes/cavalete/): Uma tela de produto que começa inclinada para trás e fica de frente enquanto a página rola, com o título subindo. --- 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.