# Asfalto Uma estrada noturna com rastros de faróis passando em alta velocidade, que acelera quando você segura o clique. > Asfalto é um componente do THM Componentes que coloca uma estrada 3D noturna no fundo da seção: rastros de faróis passam rápido, a pista faz curvas e, quando a pessoa segura o clique ou o dedo, tudo acelera como num salto para a velocidade da luz. Usa Three.js e combina com heros de mobilidade e logística. - Categoria: 3D e espaço - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Pesado: WebGL ou simulação; um por página, carregado sob demanda - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, WebGL, postprocessing, Three.js - Interação: Mouse, Toque - URL: https://vibecode.thmtecnologia.com/componentes/asfalto/ ## Como ele é Parece a vista de quem dirige numa rodovia à noite, como numa foto de longa exposição. Numa estrada quase preta, que some numa névoa escura no horizonte, pares de rastros de luz correm por duas pistas: num sentido se afastam, no outro vêm na sua direção, e bastões luminosos passam pela margem. A estrada ondula e faz curvas, e um brilho suave envolve as luzes. Na demo, lanternas vermelhas se afastam e faróis claros se aproximam. Segurar o botão do mouse ou o dedo na tela aumenta a velocidade e abre o ângulo da câmera; ao soltar, tudo volta ao ritmo normal. Seis presets mudam cores e curvas. ## Você pode estar procurando isto se pediu algo assim - “fundo de estrada à noite com luzes de carro passando rápido” - “efeito de velocidade da luz para o topo do site da transportadora” - “aquele fundo de rodovia neon que acelera quando clico” - “hero com sensação de movimento e velocidade para app de mobilidade” - “rastros de faróis em 3D tipo foto de longa exposição” - “animação de túnel de luz para mostrar que o produto é rápido” ## Também chamado de hyperspeed, túnel de luz, efeito velocidade da luz, estrada 3D animada, highway lights background, rastro de faróis, warp speed ## Quando usar - Hero de empresa de mobilidade, logística, entregas ou transporte - Lançamento de produto que vende velocidade ou desempenho - Abertura de evento, game ou campanha com clima noturno - Seção curta de impacto com um título grande por cima da cena ## Quando evitar - Páginas de leitura ou formulários, em que o movimento constante distrai - Público com celulares antigos ou páginas que já usam outro efeito em WebGL - Marcas de identidade calma, sem relação com velocidade ## Como pedir para a sua IA ```text Crie um fundo 3D de estrada noturna com rastros de faróis em Three.js no hero da página: acelera enquanto a pessoa segura o clique ou o dedo, usa as cores da minha marca, pausa fora da tela e tem uma imagem estática para movimento reduzido e celulares fracos. ``` 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 Asfalto ### Asfalto funciona no celular? Funciona em aparelhos com WebGL: Asfalto trata toque, então segurar o dedo na tela acelera a estrada como o clique faz no computador. É um efeito Pesado no THM Componentes, com Three.js e pós-processamento de brilho, por isso o prompt orienta a IA a carregar sob demanda, usar ClientOnly no Nuxt e prever uma imagem estática. ### Dá para trocar as cores e as curvas de Asfalto? Sim. Asfalto recebe um objeto de opções com as cores da pista, dos faróis em cada sentido, dos bastões de luz e da névoa, além do tipo de distorção, da largura da estrada, do número de faixas e da quantidade de luzes. Seis presets prontos servem de ponto de partida, e o prompt pede à IA que use os tokens de cor do seu projeto. ### Asfalto respeita quem prefere menos movimento? Não por conta própria: o código original de Asfalto anima sempre e não pausa fora da tela. O prompt do THM Componentes pede à IA uma versão estática para quem ativa a redução de movimento e a pausa da animação fora da área visível, o que aqui pode ser uma imagem parada da estrada no lugar da cena 3D. ## Componentes relacionados - [Disparada](https://vibecode.thmtecnologia.com/componentes/disparada/): Um card no centro de um túnel de grade em 3D, com faixas de luz coloridas correndo pelas paredes até as bordas. - [Firmamento](https://vibecode.thmtecnologia.com/componentes/firmamento/): Céu noturno com estrelas de três tamanhos subindo devagar e se deslocando de leve quando o mouse passa. - [Bólido](https://vibecode.thmtecnologia.com/componentes/bolido/): Pequenos riscos com cauda atravessam o card na diagonal, como estrelas cadentes, cada um no seu ritmo. - [Fronteira](https://vibecode.thmtecnologia.com/componentes/fronteira/): Um portal de ficção científica com núcleo de luz, anéis, cristais flutuantes e poeira estelar, girando no espaço. - [Vaga-lume](https://vibecode.thmtecnologia.com/componentes/vaga-lume/): Centenas de pontinhos neon em azul, violeta e magenta fluindo em correntes curvas sobre um fundo escuro. --- 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.